*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --ek-deepflow:#007889; --ek-deepflow-dark:#006070; --ek-amber:#FBB962; --ek-amber-dark:#f0a94a;
  --ek-supplyblue:#98C4D5; --ek-surface-soft:#EEFAFF; --ek-page-bg:#F4F6FA;
  --ek-ink:#0C0D0E; --ek-stone-600:#2A2F32; --ek-stone-400:#474E52; --ek-stone-200:#95A1A8;
  --ek-border:#DCE2E5; --ek-success:#5BA876; --ek-warning:#E89327; --ek-danger:#C84B3C;
  --r-md:10px; --r-lg:16px; --r-xl:20px; --r-xs:4px; --r-pill:100px;
  font-family:'Inter',sans-serif; color:var(--ek-ink); -webkit-font-smoothing:antialiased;
}
body{background:var(--ek-page-bg); line-height:1.5; min-height:100vh;}
.wrap{max-width:1320px; margin:0 auto; padding:20px 24px 80px;}
.wrap.wide{max-width:100%; padding:14px 22px 40px;}
.wrap.id-wrap{max-width:100%; padding:12px 22px 26px;}
h1,h2,h3,h4{letter-spacing:-0.015em; font-weight:600;}
h1{font-size:44px; line-height:1.05;} h2{font-size:30px;} h3{font-size:22px;} h4{font-size:16px;}
p{color:var(--ek-stone-400);}
.muted{color:var(--ek-stone-200); font-size:13px;}
.slogan{font-family:'Montserrat',sans-serif; color:var(--ek-deepflow);}
.hidden{display:none !important;}
a{color:var(--ek-deepflow);}
button{font-family:'Inter',sans-serif; cursor:pointer; transition:transform 120ms ease-out,background 160ms ease-out,box-shadow 160ms ease-out,border-color 160ms ease-out,opacity 140ms ease-out;}
.btn-primary{background:var(--ek-deepflow); color:#fff; border:none; border-radius:var(--r-pill); padding:12px 24px; font-weight:600; font-size:15px;}
.btn-primary:hover{background:var(--ek-deepflow-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,120,137,.25);}
.btn-primary:active{transform:translateY(0) scale(.98); box-shadow:none;}
.btn-outline{background:#fff; color:var(--ek-deepflow); border:1.5px solid var(--ek-deepflow); border-radius:var(--r-pill); padding:10px 20px; font-weight:600; font-size:14px;}
.btn-outline:hover{background:var(--ek-surface-soft); transform:translateY(-1px);}
.btn-outline:active{transform:translateY(0) scale(.98);}
.btn-ghost{background:transparent; color:var(--ek-deepflow); border:none; font-weight:600; font-size:14px; padding:0; border-bottom:1px solid var(--ek-deepflow);}
.btn-ghost:hover{opacity:.7;}
button:disabled{opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none !important;}
.card{background:#fff; border:1px solid var(--ek-border); border-radius:var(--r-lg); padding:22px;}
.grad-card{background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,var(--ek-supplyblue),var(--ek-amber)) border-box; border:1.5px solid transparent; border-radius:var(--r-xl); padding:32px;}
.badge{display:inline-block; background:var(--ek-deepflow); color:#fff; border-radius:var(--r-pill); padding:5px 13px; font-size:12px; font-weight:600;}
.badge-soft{display:inline-block; background:var(--ek-surface-soft); color:var(--ek-deepflow); border-radius:var(--r-pill); padding:4px 12px; font-size:12px; font-weight:600;}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:12px 0 6px; margin-bottom:6px; flex-wrap:wrap; gap:10px;}
.hud{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.hud .pill{background:#fff; border:1px solid var(--ek-border); border-radius:var(--r-pill); padding:7px 14px; font-size:13px; display:flex; gap:7px; align-items:center;}
.hud .pill b{font-size:14px;}
table{width:100%; border-collapse:collapse; font-size:14px;}
th,td{text-align:right; padding:9px 6px; border-bottom:1px solid var(--ek-border);}
th:first-child,td:first-child{text-align:left;}
th{font-weight:600; color:var(--ek-stone-400); font-size:12px;}
td.num{font-variant-numeric:tabular-nums;}
input[type=number]{width:82px; padding:7px 8px; border:1px solid var(--ek-border); border-radius:var(--r-md); font-family:inherit; font-size:14px; text-align:right;}
input[type=number]:focus{outline:none; border-color:var(--ek-deepflow);}
input[type=text]{width:100%; padding:12px 14px; border:1px solid var(--ek-border); border-radius:var(--r-md); font-family:inherit; font-size:15px;}
input[type=text]:focus{outline:none; border-color:var(--ek-deepflow);}
input[type=range]{width:100%; accent-color:var(--ek-deepflow);}
.pos{color:var(--ek-success);} .neg{color:var(--ek-danger);} .warn{color:var(--ek-warning);}
.grid{display:grid; gap:16px;}
.g2{grid-template-columns:1fr 1fr;} .g3{grid-template-columns:1fr 1fr 1fr;}
.kpi{background:var(--ek-surface-soft); border-radius:var(--r-md); padding:13px 15px;}
.kpi .lbl{font-size:12px; color:var(--ek-stone-400);}
.kpi .val{font-size:21px; font-weight:600; font-variant-numeric:tabular-nums;}
.stepnum{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--ek-deepflow); color:#fff; font-size:14px; font-weight:600; margin-right:9px; flex:none;}
.stephead{display:flex; align-items:center; margin-bottom:12px;}
canvas{display:block; width:100%;}
.chartwrap{background:#fff; border:1px solid var(--ek-border); border-radius:var(--r-lg); padding:14px 16px;}
.dots{display:flex; gap:6px; margin:10px 0;}
.dot{flex:1; height:6px; border-radius:3px; background:var(--ek-border);}
.dot.done{background:var(--ek-supplyblue);} .dot.active{background:var(--ek-deepflow);}
.quick{display:flex; gap:6px; margin:6px 0;}
.quick button{flex:1; background:#fff; border:1px solid var(--ek-border); border-radius:var(--r-md); padding:6px 8px; font-size:13px; font-weight:600; color:var(--ek-stone-600); white-space:nowrap;}
.quick button.sel{border-color:var(--ek-deepflow); background:var(--ek-surface-soft); color:var(--ek-deepflow);}
.row{display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:14px; border-bottom:1px solid var(--ek-border);}
.row:last-child{border-bottom:none;} .row b{font-variant-numeric:tabular-nums;}
.soc-bar{height:9px; background:var(--ek-border); border-radius:5px; overflow:hidden; margin-top:6px;}
.soc-fill{height:100%; background:var(--ek-deepflow); transition:width .3s ease-out;}
.obook{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.obhead{font-size:12px; font-weight:600; padding:0 2px 5px; display:flex; justify-content:space-between;}
.obhead.buy{color:var(--ek-deepflow-dark);} .obhead.sell{color:#7a4b00;}
.obcol{display:flex; flex-direction:column; gap:3px;}
.lvl{display:flex; justify-content:space-between; align-items:center; padding:6px 9px; border-radius:8px; font-size:13px; font-variant-numeric:tabular-nums; cursor:pointer; border:1px solid transparent;}
.lvl:hover{filter:brightness(.96); border-color:currentColor;}
.lvl:active{transform:scale(.99);}
.lvl.ask{background:rgba(0,120,137,.09); color:var(--ek-deepflow-dark);}
.lvl.bid{background:rgba(251,185,98,.18); color:#7a4b00;}
.lvl.best{outline:2px solid currentColor; outline-offset:-1px;}
.lvl .who{opacity:.55; font-size:10px;}
.spreadrow{text-align:center; font-size:11px; color:var(--ek-stone-200); padding:6px 0 0;}
.shell{display:grid; grid-template-columns:190px minmax(0,1fr) 220px; gap:14px; align-items:start;}
.sidebar{background:#fff; border:1px solid var(--ek-border); border-radius:var(--r-lg); padding:15px;}
.mainarea{min-width:0;}
.asset{padding:10px 0; border-bottom:1px solid var(--ek-border);} .asset:last-child{border-bottom:none;}
.aname{font-weight:600; font-size:14px; margin:2px 0 4px;}
.arow{display:flex; justify-content:space-between; font-size:13px; color:var(--ek-stone-400); padding:2px 0;} .arow b{font-variant-numeric:tabular-nums;}
.lrow{display:flex; justify-content:space-between; padding:5px 0; font-size:13px; border-bottom:1px solid var(--ek-border); font-variant-numeric:tabular-nums; gap:8px;}
.lrow:last-child{border-bottom:none;} .lrow.me{color:var(--ek-deepflow); font-weight:600;}
.lrow .off{opacity:.4;}
.oppos{background:#fff; border:1px solid var(--ek-border); border-radius:var(--r-lg); padding:12px 16px; margin-bottom:12px;}
.opbar{position:relative; height:18px; background:var(--ek-page-bg); border-radius:5px; margin:7px 0 4px;}
.opcenter{position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--ek-stone-200); transform:translateX(-1px);}
.opfill{position:absolute; top:3px; bottom:3px; border-radius:3px; transition:width .25s ease-out, background .25s ease-out;}
.postab{width:100%; border-collapse:collapse; margin-top:9px; font-size:12.5px;}
.postab th,.postab td{padding:3px 6px; border-bottom:1px solid var(--ek-border); text-align:right;}
.postab th:first-child,.postab td:first-child{text-align:left; color:var(--ek-stone-400);}
.postab th{font-size:11px; color:var(--ek-stone-200); font-weight:600;}
.postab td{font-variant-numeric:tabular-nums;}
.postab tr.tot td{border-top:1.5px solid var(--ek-border); border-bottom:none; font-weight:600; padding-top:5px;}
tr.sumtot td{border-top:2px solid var(--ek-stone-200); font-weight:600;}
.idmain{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.idtop{display:grid; grid-template-columns:minmax(280px,0.95fr) minmax(300px,1.12fr) minmax(300px,1.12fr); gap:12px; align-items:stretch;}
.idtop>.idcard{display:flex; flex-direction:column;}
.idbot{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px;}
.idcard{background:#fff; border:1px solid var(--ek-border); border-radius:var(--r-lg); padding:12px 14px;}
.legend{display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:var(--ek-stone-400); margin-top:7px;}
.legend span{display:flex; align-items:center; gap:5px;}
.dotc{width:10px; height:10px; border-radius:2px; display:inline-block;}
#toast{position:fixed; top:18px; left:50%; transform:translateX(-50%); background:var(--ek-ink); color:#fff; padding:13px 20px; border-radius:var(--r-md); font-size:14px; z-index:50; box-shadow:0 8px 24px rgba(11,30,34,.2); opacity:0; transition:opacity .25s ease-out, transform .25s ease-out; pointer-events:none; max-width:90%; text-align:center;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(4px);}
.overlay{position:fixed; inset:0; background:rgba(11,30,34,.45); display:flex; align-items:center; justify-content:center; z-index:40; padding:20px;}
.modal{background:#fff; border-radius:var(--r-xl); padding:32px; max-width:660px; max-height:85vh; overflow-y:auto;}
.list{list-style:none;}
.list li{padding:7px 0 7px 26px; position:relative; color:var(--ek-stone-400); font-size:15px;}
.list li::before{content:""; position:absolute; left:0; top:13px; width:14px; height:2px; background:var(--ek-deepflow);}
.scrollx{overflow-x:auto;}
/* --- Lobby-specific --- */
.code-badge{font-family:'Montserrat',monospace; font-size:34px; font-weight:700; letter-spacing:6px; color:var(--ek-deepflow); background:var(--ek-surface-soft); border-radius:var(--r-md); padding:10px 22px; display:inline-block;}
.player-chip{display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--ek-border); border-radius:var(--r-pill); font-size:14px; background:#fff;}
.player-chip .dotc{width:8px;height:8px;border-radius:50%;background:var(--ek-success);}
.player-chip.off .dotc{background:var(--ek-stone-200);}
.player-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.game-item{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border:1px solid var(--ek-border); border-radius:var(--r-md); margin-bottom:8px;}
.conn-warn{background:var(--ek-warning); color:#fff; text-align:center; padding:6px; font-size:13px; position:sticky; top:0; z-index:60;}
@media (max-width:1080px){ .idtop{grid-template-columns:1fr 1fr;} }
@media (max-width:900px){ .shell{grid-template-columns:1fr;} .idmain,.idtop,.idbot{grid-template-columns:1fr;} }
@media (max-width:700px){ h1{font-size:34px;} h2{font-size:25px;} .g2,.g3{grid-template-columns:1fr;} .da-grid{grid-template-columns:1fr !important;} .wrap{padding:14px 14px 60px;} }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important;}}