/* W2 — demo trading terminal v2 + Demo Wallet. Builds on the .term / .tabs2 / .chips / .osum rules in pop.css. */
.demo-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;background:#FFF3D6;color:#7A4B00;border:1px solid #FFC93C;font:700 .66rem/1.3 var(--font,Montserrat),sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.demo-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#FF6B2C;flex:none}
:root[data-theme="dark"] .demo-badge{background:#2C2410;color:#FFC93C;border-color:#5A4720}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .demo-badge{background:#2C2410;color:#FFC93C;border-color:#5A4720}}

.pfsel{min-height:36px;max-width:220px;border:1px solid var(--line-2);border-radius:10px;padding:0 10px;background:var(--card);color:var(--ink);font:500 .86rem var(--font,Montserrat),sans-serif}
.term__order .pfsel{max-width:none;width:100%;min-height:42px}

.qtabs,.seg2,.otype,.lowtabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--soft)}
.qtabs{margin-bottom:8px}
.qtabs button,.seg2 button,.otype button,.lowtabs button{flex:1;min-height:34px;border:0;border-radius:9px;background:none;font:600 .82rem var(--font,Montserrat),sans-serif;color:var(--mute);cursor:pointer;white-space:nowrap}
.qtabs button[aria-pressed="true"],.seg2 button[aria-pressed="true"],.otype button[aria-selected="true"],.lowtabs button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(11,14,20,.12)}
.otype{margin-top:6px}
.seg2{margin-bottom:8px}
.hint{margin:10px 2px 0;padding:10px 12px;border-radius:10px;background:var(--sun-bg,#FFF3D6);font-size:.8rem;line-height:1.45;color:var(--ink-2)}
.hint::before{content:"Tip · ";font-weight:700;color:#C2410C}
.prot{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2)}
.sw{display:flex;align-items:center;gap:8px;margin:8px 0 2px;font-size:.86rem;font-weight:600;cursor:pointer}
.sw input{width:18px;height:18px;accent-color:#FF6B2C}

.term__low2{margin-top:0}
.lowtabs{margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.lowtabs::-webkit-scrollbar{display:none}
.lowtabs button span{font-weight:500}
.term2 .tbl td.r{text-align:right}
.term2 .nowrap,.nowrap{white-space:nowrap}
.term__fine{margin:2px 4px 0;line-height:1.5}

.kpis2{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.kpi2{padding:12px 14px;border-radius:14px;background:var(--soft);min-width:0}
.kpi2 small{display:block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.kpi2 b{display:block;margin:4px 0 2px;font-size:1.15rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi2 span{display:block;font-size:.74rem;color:var(--mute)}

.term__fab{display:none}
.term2,.term2 .term__grid>*,.term2 .term__low2{min-width:0;max-width:100%}
@media (max-width:1180px){
  .term2 .term__list [data-coins]{display:flex!important;gap:6px;overflow-x:auto;max-height:none!important;scroll-snap-type:x proximity;padding-bottom:4px}
  .term2 .term__coin{flex:none;width:auto;min-width:176px;scroll-snap-align:start;border:1px solid var(--line)}
}
@media (max-width:820px){
  .term2 .term__bar{padding:12px 14px;gap:10px}
  .term2 .term__eq b{font-size:1.45rem}
  .term2 .term__kpis{gap:14px;width:100%}
  .term2 .term__acts{margin-left:0;width:100%;flex-wrap:wrap}
  .term2 .term__acts .pfsel{flex:1;max-width:none}
  .term2 .term__cv{height:260px}
  .term2 .term__head .seg3{margin-left:0;width:100%;overflow-x:auto}
  .term__fab{display:flex;align-items:center;justify-content:center;position:fixed;right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:30;min-width:64px;height:48px;padding:0 18px;border-radius:99px;background:#FF6B2C;color:#fff!important;font-weight:700;text-decoration:none;box-shadow:0 10px 24px rgba(255,107,44,.35)}
  .otype button{font-size:.76rem;padding:0 4px}
}

/* ---------------------------------------------------------------- wallet */
.wl-top{margin-bottom:14px}
.wl-total{display:flex;flex-direction:column;gap:4px;padding:18px 20px;background:linear-gradient(135deg,#FFF3D6,#FFE2CF);border:0}
:root[data-theme="dark"] .wl-total{background:linear-gradient(135deg,#2C2410,#2E1E12)}
.wl-total small{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.wl-total b{font-family:Unbounded,var(--font,Montserrat),sans-serif;font-size:clamp(1.8rem,5vw,2.6rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.wl-card{display:flex;flex-direction:column;gap:8px;padding:16px;min-width:0}
.wl-card.is-cur{box-shadow:inset 0 0 0 2px #FFC93C}
.wl-card header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.wl-card header b{display:block;font-size:1rem;overflow-wrap:anywhere}
.wl-card header small{display:block;font-size:.76rem;color:var(--mute)}
.wl-eq{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wl-eq b{font-size:1.5rem;font-variant-numeric:tabular-nums}
.wl-card .spark{width:100%;height:40px}
.wl-kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:0}
.wl-kv div{min-width:0}
.wl-kv dt{font-size:.7rem;color:var(--mute)}
.wl-kv dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.wl-card footer{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px;align-items:center}
.wl-more{position:relative}
.wl-more summary{list-style:none;cursor:pointer}
.wl-more summary::-webkit-details-marker{display:none}
.wl-more>div{position:absolute;right:0;bottom:calc(100% + 6px);z-index:10;display:grid;gap:8px;min-width:180px;padding:12px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-2);text-align:left}
.wl-dh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.lg-dot{display:inline-block;width:10px;height:3px;border-radius:2px;vertical-align:middle;margin-right:4px}

/* v8 integration: keep the terminal inside the phone width (grid tracks must be allowed to shrink). */
@media (max-width:820px){.term2,.term2 .term__grid{grid-template-columns:minmax(0,1fr)}}
.demo-badge{white-space:normal;max-width:100%}