/* Mobile shell — ORDERS group: open-orders list, open-order detail,
   sold-order detail (see mshell/orders.js). Prefix mwo-. */
@media (max-width: 979px) {
  html.web-shell .mwo-hname { font-weight: 800; }
  html.web-shell .mwo-hsub { font-weight: 600; color: var(--mws-ink-3); font-size: 15px; }
  html.web-shell .mwo-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  html.web-shell .mwo-sub { font-family: var(--mws-mono); font-size: 10.5px; color: var(--mws-ink-3); }
  html.web-shell .mwo-warn { color: var(--mws-gold) !important; }
  html.web-shell .mwo .up.mwo-pnl, html.web-shell .mwo .mwo-pnl.up { color: var(--mws-up); }
  html.web-shell .mwo .mwo-pnl.dn { color: var(--mws-down); }
  html.web-shell .mwo .mws-badge.dn { color: var(--mws-down); background: rgba(234, 57, 67, 0.12); }
  html.web-shell .mwo [data-live-pnl-pair].up:not(.mws-badge) { color: var(--mws-up); }
  html.web-shell .mwo [data-live-pnl-pair].dn:not(.mws-badge) { color: var(--mws-down); }
  html.web-shell .mwo-live {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    font-family: var(--mws-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--mws-ink-3);
  }
  html.web-shell .mwo-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mws-ink-3); }
  html.web-shell .mwo-live .dot.on { background: var(--mws-up); box-shadow: 0 0 0 3px rgba(32,199,117,0.15); }
  html.web-shell .mwo-price {
    font-family: var(--mws-mono); font-size: 30px; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1.1; min-width: 0; overflow-wrap: anywhere;
  }
  html.web-shell .mwo-chev { font-size: 20px; color: var(--mws-ink-3); line-height: 1; }
  html.web-shell .mwo-kvg { display: flex; flex-direction: column; min-width: 0; }
  html.web-shell .mwo-kvg .mws-kv .v { min-width: 0; overflow-wrap: anywhere; }
  html.web-shell .mwo-kvsub { font-family: var(--mws-mono); font-size: 10.5px; color: var(--mws-ink-3); text-align: right; margin-top: -2px; }
  html.web-shell .mwo-idv { color: var(--mws-ink-3) !important; font-size: 12.5px; }
  html.web-shell .mwo-total { font-size: 15px; }

  /* ---------------------------------------------------- list: summary */
  html.web-shell .mwo-sum { background: linear-gradient(180deg, var(--mws-hero-a), var(--mws-hero-b)); }
  html.web-shell .mwo-banner {
    display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mws-ink-2);
    border: 1px solid rgba(139, 123, 255, 0.3); background: rgba(139, 123, 255, 0.06);
    border-radius: 14px; padding: 11px 14px;
  }
  html.web-shell .mwo-emt { font-weight: 800; color: var(--mws-ink); font-size: 14px; margin-bottom: 4px; }
  html.web-shell .mwo-tools { display: flex; flex-direction: column; gap: 10px; }
  html.web-shell .mwo-tools .mws-chip { min-height: 34px; }
  html.web-shell .mwo-toolrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  html.web-shell .mwo-sortbtn {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px;
    border-radius: 999px; border: 1px solid var(--mws-line); background: var(--mws-card);
    color: var(--mws-ink-2); font-family: var(--mws-mono); font-size: 11.5px; cursor: pointer;
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.web-shell .mwo-delall { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 4px; flex-shrink: 0; }

  /* ---------------------------------------------------- list: rows */
  html.web-shell .mwo-ord {
    background: var(--mws-card); border: 1px solid var(--mws-line); border-radius: 16px;
    padding: 14px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; min-width: 0;
  }
  html.web-shell .mwo-ord.em { border-color: rgba(234, 57, 67, 0.45); }
  html.web-shell .mwo-otop { display: flex; align-items: center; gap: 12px; min-width: 0; }
  html.web-shell .mwo-otop .meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
  html.web-shell .mwo-otop .nm { font-weight: 800; font-size: 14.5px; display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
  html.web-shell .mwo-otop .sub {
    font-family: var(--mws-mono); font-size: 11px; color: var(--mws-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.web-shell .mwo-otop .right { margin-left: auto; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
  html.web-shell .mwo-otop .right .v { font-family: var(--mws-mono); font-size: 14.5px; font-weight: 600; }
  html.web-shell .mwo-otop .right .cap { font-family: var(--mws-mono); font-size: 10.5px; color: var(--mws-ink-3); }
  html.web-shell .mwo-leg { font-family: var(--mws-mono); font-size: 11.5px; font-weight: 700; }
  html.web-shell .mwo-leg.off { background: var(--mws-well); color: var(--mws-ink-2); }
  html.web-shell .mwo-cells {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    background: var(--mws-well); border: 1px solid var(--mws-line-2); border-radius: 12px; padding: 10px 11px;
  }
  html.web-shell .mwo-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  html.web-shell .mwo-cell .mws-lbl { font-size: 9px; letter-spacing: 0.12em; }
  html.web-shell .mwo-cell .v { font-family: var(--mws-mono); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.web-shell .mwo-cell .s { font-family: var(--mws-mono); font-size: 10px; color: var(--mws-ink-3); overflow-wrap: anywhere; line-height: 1.35; }
  html.web-shell .mwo-ofoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
  html.web-shell .mwo-when { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mws-mono); font-size: 10.5px; color: var(--mws-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  html.web-shell .mwo-acts { display: flex; gap: 8px; flex-shrink: 0; }
  html.web-shell .mwo-pbtn {
    height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font); font-size: 13px; font-weight: 800;
    background: transparent; color: var(--mws-ink); border: 1px solid var(--mws-line-strong);
  }
  html.web-shell .mwo-pbtn.gold { background: linear-gradient(180deg, #fcd535 0%, #f0b90b 100%); color: #1a1206; border: 0; }
  html.web-shell .mwo-pbtn.danger { color: var(--mws-down); border-color: rgba(234, 57, 67, 0.4); }
  html.web-shell .mwo-em {
    border: 1px solid rgba(234, 57, 67, 0.35); background: rgba(234, 57, 67, 0.07);
    border-radius: 12px; padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; cursor: default;
  }
  html.web-shell .mwo-em .t { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13px; color: var(--mws-down); }
  html.web-shell .mwo-em .b { font-size: 12px; color: var(--mws-ink-2); line-height: 1.45; }
  html.web-shell .mwo-em ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--mws-ink-2); line-height: 1.55; }
  html.web-shell .mwo-em .cd { font-family: var(--mws-mono); font-size: 10.5px; color: var(--mws-gold); }

  /* ---------------------------------------------------- detail: hero */
  html.web-shell .mwo-hero { gap: 12px; background: linear-gradient(180deg, var(--mws-hero-a), var(--mws-hero-b)); }
  html.web-shell .mwo-pricerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
  html.web-shell .mwo-chg { font-size: 11px; padding: 3px 8px; }
  html.web-shell .mwo-herosub {
    display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    font-family: var(--mws-mono); font-size: 11px; color: var(--mws-ink-3); margin-top: -4px;
  }
  html.web-shell .mwo-chartwrap { display: flex; flex-direction: column; gap: 6px; }
  html.web-shell .mwo-chart { position: relative; }
  html.web-shell .mwo-plot { position: absolute; inset: 0; }
  html.web-shell .mwo-svg { position: absolute; inset: 0; touch-action: pan-y; }
  html.web-shell .mwo-svg svg { display: block; }
  html.web-shell .mwo-chart-msg {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--mws-ink-3); border: 1px dashed var(--mws-line); border-radius: 12px;
  }
  html.web-shell .mwo-end {
    position: absolute; right: -4px; width: 8px; height: 8px; border-radius: 50%;
    transform: translateY(-50%); box-shadow: 0 0 0 3px rgba(240, 185, 11, 0.18);
  }
  html.web-shell .mwo-ref {
    position: absolute; right: 8px; transform: translateY(-50%);
    font-family: var(--mws-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 1px 6px; border-radius: 6px; border: 1px solid; background: rgba(10, 11, 14, 0.85);
    pointer-events: none;
  }
  html.web-shell .mwo-tip {
    position: absolute; top: -4px; transform: translateX(-50%); opacity: 0; pointer-events: none;
    font-family: var(--mws-mono); font-size: 10px; white-space: nowrap; color: var(--mws-ink);
    background: var(--mws-well); border: 1px solid var(--mws-line); border-radius: 8px; padding: 3px 7px;
    transition: opacity .12s;
  }
  html.web-shell .mwo-tip.on { opacity: 1; }
  html.web-shell .mwo-xax { display: flex; justify-content: space-between; font-family: var(--mws-mono); font-size: 10px; color: var(--mws-ink-3); }
  html.web-shell .mwo-legend { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--mws-mono); font-size: 10px; color: var(--mws-ink-3); }
  html.web-shell .mwo-legend span { display: inline-flex; align-items: center; gap: 6px; }
  html.web-shell .mwo-legend span::before { content: ""; width: 12px; border-top: 1.5px dashed var(--c); }

  html.web-shell .mwo-bigwrap { display: flex; align-items: baseline; gap: 8px; }
  html.web-shell .mwo-big { font-family: var(--mws-mono); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
  html.web-shell .mwo-unit { font-family: var(--mws-mono); font-size: 11px; color: var(--mws-ink-3); }
  html.web-shell .mwo-bigsub { font-family: var(--mws-mono); font-size: 11px; color: var(--mws-ink-3); margin-top: -6px; overflow-wrap: anywhere; }

  /* level ladder */
  html.web-shell .mwo-ladder { display: flex; flex-direction: column; }
  html.web-shell .mwo-step { display: flex; align-items: center; gap: 12px; min-height: 46px; position: relative; }
  html.web-shell .mwo-step .rail { width: 12px; align-self: stretch; position: relative; flex-shrink: 0; }
  html.web-shell .mwo-step .rail::before {
    content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--mws-line);
  }
  html.web-shell .mwo-step:first-child .rail::before { top: 50%; }
  html.web-shell .mwo-step:last-child .rail::before { bottom: 50%; }
  html.web-shell .mwo-step .dot {
    position: absolute; left: 1px; top: 50%; transform: translateY(-50%);
    width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 3px var(--mws-card);
  }
  html.web-shell .mwo-step .l { flex: 1 1 auto; min-width: 0; }
  html.web-shell .mwo-step .t { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.web-shell .mwo-step .s { font-family: var(--mws-mono); font-size: 10.5px; color: var(--mws-ink-3); margin-top: 2px; }
  html.web-shell .mwo-step .r { text-align: right; flex-shrink: 0; }
  html.web-shell .mwo-step .p { font-family: var(--mws-mono); font-size: 13.5px; font-weight: 600; }
  html.web-shell .mwo-step.now {
    background: rgba(240, 185, 11, 0.07); border: 1px solid rgba(240, 185, 11, 0.28);
    border-radius: 12px; margin: 2px -8px; padding: 0 8px;
  }
  html.web-shell .mwo-step.now .t { color: var(--mws-gold); }
  html.web-shell .mwo-gauge { display: flex; flex-direction: column; gap: 10px; }
  html.web-shell .mwo-gauge .track {
    position: relative; height: 8px; border-radius: 999px;
    background: linear-gradient(90deg, #ea3943, #f0b90b 45%, #20c775);
    opacity: 0.9;
  }
  html.web-shell .mwo-gauge .stopm { position: absolute; top: -4px; width: 3px; height: 16px; border-radius: 2px; background: var(--mws-ink); transform: translateX(-50%); }
  html.web-shell .mwo-gauge .nowm {
    position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
    background: var(--mws-ink); border: 3px solid var(--mws-card); transform: translate(-50%, -50%);
  }
  html.web-shell .mwo-gauge .scale { display: flex; justify-content: space-between; font-family: var(--mws-mono); font-size: 10px; color: var(--mws-ink-3); }
  html.web-shell .mwo-gnote { font-size: 12px; color: var(--mws-ink-3); line-height: 1.5; }
  html.web-shell .mwo-gnote b { color: var(--mws-ink-2); font-family: var(--mws-mono); font-weight: 600; }

  /* timeline */
  html.web-shell .mwo-tl { display: flex; flex-direction: column; }
  html.web-shell .mwo-tl .ev { display: flex; gap: 12px; min-width: 0; }
  html.web-shell .mwo-tl .rail { width: 12px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
  html.web-shell .mwo-tl .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; background: var(--mws-up); flex-shrink: 0; }
  html.web-shell .mwo-tl .line { flex: 1 1 auto; width: 2px; background: var(--mws-line); margin: 3px 0; min-height: 14px; }
  html.web-shell .mwo-tl .ev.now .dot { background: var(--mws-gold); box-shadow: 0 0 0 3px rgba(240, 185, 11, 0.18); }
  html.web-shell .mwo-tl .ev.pending .dot { background: transparent; border: 2px solid var(--mws-ink-3); box-sizing: border-box; }
  html.web-shell .mwo-tl .ev.pending .t { color: var(--mws-ink-3); }
  html.web-shell .mwo-tl .ev.loss .dot { background: var(--mws-down); }
  html.web-shell .mwo-tl .ev:first-child:not(.loss) .dot { background: var(--mws-ink-2); }
  html.web-shell .mwo-tl .c { flex: 1 1 auto; min-width: 0; padding-bottom: 14px; }
  html.web-shell .mwo-tl .ev:last-child .c { padding-bottom: 0; }
  html.web-shell .mwo-tl .t { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  html.web-shell .mwo-tl .s { font-family: var(--mws-mono); font-size: 10.5px; color: var(--mws-ink-3); margin-top: 2px; overflow-wrap: anywhere; }
  html.web-shell .mwo-tl .rv { font-family: var(--mws-mono); font-size: 13px; font-weight: 600; flex-shrink: 0; padding-top: 1px; }
  html.web-shell .mwo-tltag {
    font-family: var(--mws-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--mws-ink-3); border: 1px solid var(--mws-line); border-radius: 6px; padding: 1px 6px;
  }
  html.web-shell .mwo-links { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
  html.web-shell .mwo-links .mws-link { min-height: 40px; }

  /* sold: buy → sell route */
  html.web-shell .mwo-route {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px;
    background: var(--mws-well); border: 1px solid var(--mws-line-2); border-radius: 12px; padding: 11px 12px;
  }
  html.web-shell .mwo-route .leg { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  html.web-shell .mwo-route .leg.r { align-items: flex-end; text-align: right; }
  html.web-shell .mwo-route .p { font-family: var(--mws-mono); font-size: 14px; font-weight: 600; }
  html.web-shell .mwo-route .t { font-family: var(--mws-mono); font-size: 10px; color: var(--mws-ink-3); white-space: nowrap; }
  html.web-shell .mwo-route .mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  html.web-shell .mwo-route .ar { color: var(--mws-gold); font-size: 16px; line-height: 1; }
  html.web-shell .mwo-route .d { font-family: var(--mws-mono); font-size: 10px; color: var(--mws-ink-2); white-space: nowrap; }
}