:root{
  --bg:#040c15;
  --bg-soft:#071320;
  --panel:#091827;
  --panel-2:#0d1f31;
  --panel-3:#0a1622;
  --line:#18354f;
  --line-strong:#27506f;
  --text:#eaf3ff;
  --muted:#88a5c0;
  --green:#11d59d;
  --red:#ff547b;
  --blue:#4f98ff;
  --yellow:#ffbf48;
  --cyan:#2ad4ff;
  --late5-record-height:540px;
  --shadow:0 26px 60px rgba(0,0,0,.34);
  --shadow-soft:0 14px 34px rgba(0,0,0,.24);
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --sans:Inter,"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at top left, rgba(42,212,255,.10), transparent 28%),
    radial-gradient(circle at top right, rgba(79,152,255,.08), transparent 22%),
    linear-gradient(180deg, #07111b 0%, #040c15 55%, #030811 100%);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(rgba(64,131,201,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64,131,201,.045) 1px, transparent 1px);
  background-size:56px 56px;
  pointer-events:none;
  opacity:.55;
}
button,a,input{font:inherit}
button{
  cursor:pointer;
  border:1px solid var(--line);
  background:#10233a;
  color:var(--text);
}
button:hover,a:hover{filter:brightness(1.05)}
svg{width:1em;height:1em}

.app{
  min-height:100vh;
  width:100%;
  position:relative;
  z-index:1;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:82px;
  display:grid;
  grid-template-columns:minmax(220px,260px) minmax(0,1fr) auto auto;
  grid-template-areas:"brand ticker clock actions";
  align-items:center;
  border-bottom:1px solid rgba(39,80,111,.72);
  background:rgba(7,18,29,.92);
  backdrop-filter:blur(18px);
  box-shadow:0 10px 32px rgba(0,0,0,.24);
  padding-inline:clamp(10px, 1.1vw, 26px);
}

.brand{
  grid-area:brand;
  height:100%;
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:0 1.25rem;
  color:var(--text);
  text-decoration:none;
  border-right:1px solid rgba(39,80,111,.55);
  font-weight:900;
  letter-spacing:.12em;
  font-size:1.08rem;
  min-width:0;
}
.brand img{
  width:34px;
  height:34px;
  border-radius:9px;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.brand b{
  color:var(--green);
  font-size:.82rem;
  letter-spacing:0;
}

.ticker{
  grid-area:ticker;
  display:grid;
  grid-template-columns:repeat(5, minmax(110px, 1fr));
  height:100%;
  min-width:0;
}
.ticker>div{
  min-width:0;
  padding:0 .65rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  border-right:1px solid rgba(39,80,111,.42);
  font-size:1rem;
}
.ticker>div:last-child{border-right:0}
small{
  color:var(--muted);
  font-size:.78em;
}
strong{
  font-family:var(--mono);
  overflow:hidden;
  text-overflow:ellipsis;
}
.green{color:var(--green)}

#clock{
  grid-area:clock;
  padding:0 1.4rem;
  color:#c6dbef;
  font:800 1.16rem/1 var(--mono);
}

.top-actions{
  grid-area:actions;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding-right:1rem;
}
.top-actions a,
.top-actions button{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:10px;
  border:1px solid rgba(39,80,111,.85);
  background:linear-gradient(180deg, rgba(15,35,54,.92), rgba(11,26,41,.92));
  color:#b6d2ea;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.layout{
  width:100%;
  margin:0;
  padding:18px 24px 24px;
  display:grid;
  grid-template-columns:minmax(292px,336px) minmax(0,1fr) minmax(292px,320px);
  gap:20px;
  align-items:stretch;
}

.panel{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(39,80,111,.76);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(12,29,46,.98), rgba(8,20,32,.98));
  box-shadow:var(--shadow);
}

.panel-head{
  min-height:60px;
  padding:0 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.9rem;
  border-bottom:1px solid rgba(39,80,111,.62);
  background:
    linear-gradient(180deg, rgba(16,37,58,.98), rgba(12,29,46,.96));
}
.panel-head span{
  display:flex;
  align-items:center;
  gap:.58rem;
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:.01em;
}
.panel-head b{
  flex:none;
  padding:.28rem .62rem;
  border-radius:999px;
  border:1px solid rgba(17,213,157,.26);
  background:rgba(17,213,157,.08);
  color:var(--green);
  font-size:.78rem;
  font-family:var(--mono);
}

.control-panel{
  position:sticky;
  top:88px;
  max-height:calc(100vh - 104px);
  display:flex;
  flex-direction:column;
  overflow:auto;
  scrollbar-width:thin;
  box-shadow:
    0 24px 54px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.control-actions{
  padding:.95rem;
  display:grid;
  grid-template-columns:1fr .85fr;
  gap:.65rem;
}
.control-actions button{
  min-height:52px;
  padding:.85rem 1rem;
  font-size:1.08rem;
  font-weight:900;
  border-radius:12px;
}
.primary{
  border-color:#18d6a6;
  background:linear-gradient(135deg, #12bd8d, #1ae3af);
  color:#04110d;
  font-weight:900;
}
.primary.soft{
  border-color:#2d78c6;
  background:linear-gradient(180deg, #14324c, #102a42);
  color:#dbecff;
}
.danger{
  border-color:#d54d69;
  background:linear-gradient(180deg, #bf3554, #9d2946);
  color:#fff0f4;
  font-weight:900;
}

.state-hero{
  margin:0 1rem 1rem;
  padding:1rem 1rem .95rem;
  border:1px solid rgba(39,80,111,.62);
  border-radius:14px;
  background:
    radial-gradient(circle at top left, rgba(42,212,255,.14), transparent 36%),
    linear-gradient(180deg, rgba(9,27,43,.94), rgba(6,19,31,.96));
  box-shadow:var(--shadow-soft);
}
.state-hero strong{
  display:block;
  margin:.32rem 0 .4rem;
  color:#29d7ff;
  font-size:clamp(2rem,2.3vw,3.2rem);
  line-height:1;
  letter-spacing:.03em;
}
.state-hero p{
  margin:0;
  color:#a7c0d8;
  line-height:1.55;
}

.phase-grid{
  padding:0 1rem 1rem;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.75rem;
}
.phase-grid div{
  min-height:76px;
  padding:.85rem .95rem;
  border:1px solid rgba(39,80,111,.6);
  border-radius:12px;
  background:rgba(7,24,38,.72);
}
.phase-grid strong{
  display:block;
  margin-top:.28rem;
  font-size:1.08rem;
}

.settings-card{
  margin:0 1rem 1rem;
  padding:1rem;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.72rem;
  border:1px solid rgba(39,80,111,.62);
  border-radius:14px;
  background:rgba(6,20,32,.86);
}
.settings-card h3,
.setting-actions{
  grid-column:1/-1;
}
.settings-card h3,
.rule-note b{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0;
}
label{
  display:flex;
  flex-direction:column;
  gap:.38rem;
  color:#a5c1db;
  font-weight:700;
}
input{
  width:100%;
  border:1px solid rgba(39,80,111,.72);
  border-radius:10px;
  background:#071624;
  color:var(--text);
  padding:.78rem .85rem;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.setting-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem;
}

.checklist{
  padding:0 1rem 1rem;
  display:grid;
  gap:.55rem;
}
.check{
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  padding:.68rem .78rem;
  border:1px solid rgba(39,80,111,.68);
  border-radius:12px;
  background:rgba(7,23,36,.75);
  color:#9fc0df;
}
.check b{font-family:var(--mono)}
.check.ok{
  border-color:rgba(17,213,157,.34);
  color:var(--green);
}
.check.bad{
  border-color:rgba(255,84,123,.34);
  color:var(--red);
}

.rule-note{
  margin:0 1rem 1rem;
  padding:1rem 1rem 1rem 1.15rem;
  border:1px solid rgba(17,213,157,.26);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(9,31,43,.92), rgba(7,22,34,.95));
  color:#b8d1e7;
  line-height:1.58;
  position:relative;
}
.rule-note::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--green), rgba(17,213,157,.15));
}
.rule-note p{margin:.8rem 0 0}

.market-panel{
  display:flex;
  flex-direction:column;
  gap:.95rem;
  padding-bottom:.35rem;
  min-height:calc(100vh - 104px);
}

.market-stage{
  margin:0 1rem;
  min-height:172px;
  padding:1.7rem 1.7rem 1.2rem;
  display:grid;
  grid-template-columns:1fr minmax(220px,.78fr) 1fr;
  gap:1.4rem;
  align-items:center;
  border:1px solid rgba(39,80,111,.6);
  border-radius:20px;
  background:
    radial-gradient(circle at top center, rgba(79,152,255,.08), transparent 30%),
    linear-gradient(180deg, rgba(8,22,35,.96), rgba(7,18,29,.98));
}
.side{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.side.down{text-align:right}
.side span{font-weight:900;font-size:1.02rem}
.side.up span,.side.up strong{color:var(--green)}
.side.down span,.side.down strong{color:var(--red)}
.side strong{
  font-size:clamp(3.4rem,5vw,6rem);
  line-height:.92;
}

.timer{
  text-align:center;
}
.timer strong{
  display:block;
  font-size:clamp(2.4rem,3.8vw,4.5rem);
  line-height:1.04;
}
.timer span{
  display:block;
  margin-top:.45rem;
  color:#9ebad4;
}

.odds-track{
  height:16px;
  margin:0 1rem .1rem;
  border:1px solid rgba(39,80,111,.7);
  border-radius:999px;
  background:rgba(30,58,84,.76);
  position:relative;
  overflow:hidden;
}
.odds-track span{
  display:block;
  height:100%;
  width:50%;
  background:linear-gradient(90deg, #12d59e, #22e3b5);
  transition:width .18s ease;
}
.odds-track i{
  position:absolute;
  top:-5px;
  left:50%;
  width:3px;
  height:26px;
  border-radius:999px;
  background:#e7f2ff;
  box-shadow:0 0 12px rgba(255,255,255,.55);
}

.book-grid{
  padding:0 1rem;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.85rem;
}
.book-card,
.decision-card{
  border:1px solid rgba(39,80,111,.62);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(7,22,35,.98), rgba(6,18,29,.98));
  box-shadow:var(--shadow-soft);
}
.book-card.hot{
  border-color:rgba(255,191,72,.78);
  box-shadow:
    0 0 0 1px rgba(255,191,72,.28),
    0 20px 36px rgba(255,191,72,.10);
}
.book-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.92rem 1rem .86rem;
  border-bottom:1px solid rgba(39,80,111,.55);
}
.book-title b{font-size:1rem}
.book-title span{color:#b7cde2;font-family:var(--mono)}
.book-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:58px;
  padding:.82rem 1rem;
  border-bottom:1px solid rgba(39,80,111,.4);
}
.book-row:last-child{border-bottom:0}
.book-row strong{
  font-size:1.45rem;
  flex:none;
}
.up .book-row strong{color:var(--green)}
.down .book-row strong{color:var(--red)}

.decision-card{
  margin:0 1rem;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  overflow:hidden;
}
.decision-card div{
  padding:1rem 1.12rem .95rem;
  border-right:1px solid rgba(39,80,111,.55);
  position:relative;
}
.decision-card div:last-child{border-right:0}
.decision-card div::before{
  content:"";
  position:absolute;
  left:1.05rem;
  top:.78rem;
  width:24px;
  height:2px;
  border-radius:999px;
  background:rgba(79,152,255,.45);
}
.decision-card strong{
  display:block;
  margin-top:.48rem;
  font-size:1.18rem;
}

.activity-panel{
  margin:0 1rem;
  border:1px solid rgba(39,80,111,.62);
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(9,24,38,.98), rgba(6,17,28,.98));
  overflow:hidden;
  flex:1;
  display:flex;
  flex-direction:column;
}
.activity-head{
  min-height:60px;
  padding:0 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border-bottom:1px solid rgba(39,80,111,.58);
  background:linear-gradient(180deg, rgba(14,35,54,.98), rgba(10,26,41,.98));
}
.activity-head span{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:1.02rem;
  font-weight:900;
}
.activity-head b{
  flex:none;
  padding:.28rem .7rem;
  border-radius:999px;
  border:1px solid rgba(17,213,157,.24);
  background:rgba(17,213,157,.08);
  color:var(--green);
  font:800 .8rem/1 var(--mono);
}
.activity-body{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}
.activity-summary{
  padding:1rem 1rem .9rem;
  display:grid;
  grid-template-columns:1.15fr .88fr .9fr 1fr;
  gap:.75rem;
  border-bottom:1px solid rgba(39,80,111,.5);
  background:
    linear-gradient(180deg, rgba(10,30,47,.58), rgba(7,19,31,.24));
}
.stat-card{
  padding:1rem 1rem .88rem;
  border:1px solid rgba(39,80,111,.62);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(9,25,39,.96), rgba(7,19,31,.96));
  display:grid;
  gap:.38rem;
  min-height:96px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.stat-card small{color:#86a4bf}
.stat-card strong{
  font-size:1.72rem;
  line-height:1.08;
}
.stat-card-primary{
  border-color:rgba(17,213,157,.25);
  background:
    radial-gradient(circle at top left, rgba(17,213,157,.13), transparent 42%),
    linear-gradient(180deg, rgba(8,29,40,.96), rgba(7,21,34,.96));
}

.activity-feed{
  min-height:0;
  max-height:calc(var(--late5-record-height) + 72px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  background:
    linear-gradient(180deg, rgba(7,18,29,.50), rgba(5,14,23,.12));
}
.activity-feed-head{
  padding:.95rem 1rem .78rem;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  border-bottom:1px solid rgba(39,80,111,.45);
}
.activity-feed-head strong{
  font-size:1.08rem;
}
.activity-feed-head span{
  color:#829bb6;
  font-size:.84rem;
  text-align:right;
}
.record-list{
  height:var(--late5-record-height);
  min-height:var(--late5-record-height);
  max-height:var(--late5-record-height);
  overflow:auto;
  padding:.7rem 1rem 1rem;
  display:grid;
  align-content:start;
  gap:.58rem;
  scrollbar-width:thin;
}
.record-empty{
  min-height:240px;
  display:grid;
  place-items:center;
  gap:.75rem;
  padding:1.4rem;
  text-align:center;
  border:1px dashed rgba(39,80,111,.82);
  border-radius:14px;
  background:
    radial-gradient(circle at top center, rgba(79,152,255,.08), transparent 34%),
    linear-gradient(180deg, rgba(8,24,39,.72), rgba(5,15,25,.96));
  color:#718ca8;
}
.record-empty strong{
  color:#dce9f5;
  font-size:1.08rem;
}
.record-empty span{
  max-width:440px;
  line-height:1.58;
}
.record-card{
  position:relative;
  padding:.88rem .92rem .9rem;
  border:1px solid rgba(39,80,111,.62);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(8,22,35,.96), rgba(6,18,29,.98));
  display:grid;
  gap:.72rem;
  box-shadow:none;
}
.record-card::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(79,152,255,.9), rgba(42,212,255,.22));
}
.record-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:.9rem;
}
.record-title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:.48rem .58rem;
  flex-wrap:wrap;
}
.record-title strong,
.record-meta strong{
  font-size:.98rem;
}
.record-title span,
.record-meta span{
  color:#9db9d3;
}
.record-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.9rem;
  flex-wrap:wrap;
  text-align:right;
}
.record-grid{
  display:grid;
  grid-template-columns:1.04fr 1fr .82fr .88fr .78fr;
  gap:.5rem;
}
.record-grid div{
  padding:.66rem .72rem .62rem;
  border:1px solid rgba(39,80,111,.44);
  border-radius:11px;
  background:rgba(5,18,29,.82);
  display:grid;
  gap:.18rem;
}
.record-grid small{
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size:.7rem;
}
.record-grid strong{
  font-size:1rem;
}
.record-grid strong.positive{color:var(--green)}
.record-grid strong.negative{color:var(--red)}
.record-grid strong.pending{color:#e8f2fc}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.18rem .52rem;
  border-radius:999px;
  border:1px solid currentColor;
  font-size:.74rem;
  font-family:var(--mono);
}
.badge.pending{color:#d4e2f0}
.badge.win,.badge.live{color:var(--green)}
.badge.loss,.badge.syncing{color:var(--red)}
.badge.sold,.badge.flat{color:var(--yellow)}

.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.18rem .46rem;
  border-radius:7px;
  border:1px solid currentColor;
  font:800 .76rem/1 var(--mono);
}
.tag.up{color:var(--green)}
.tag.down{color:var(--red)}
.tag.pending{color:var(--yellow)}

.side-stack{
  position:sticky;
  top:88px;
  display:grid;
  grid-template-rows:clamp(250px, 31vh, 360px) minmax(420px, 1fr);
  gap:18px;
  height:calc(100vh - 104px);
  min-height:calc(100vh - 104px);
  align-self:start;
}
.official-panel,
.log-panel{
  min-height:0;
  display:flex;
  flex-direction:column;
}
.official-panel{
  height:100%;
  max-height:clamp(250px, 31vh, 360px);
}
.log-panel{
  height:100%;
}

.summary-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  border-bottom:1px solid rgba(39,80,111,.55);
}
.summary-grid div{
  padding:1rem .92rem;
  border-right:1px solid rgba(39,80,111,.55);
  background:rgba(8,21,34,.45);
}
.summary-grid div:last-child{border-right:0}
.summary-grid strong{
  display:block;
  margin-top:.34rem;
}

.position-list{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:.95rem;
  display:grid;
  gap:.72rem;
  scrollbar-width:thin;
}
.position-list.empty{
  display:grid;
  place-items:center;
  color:#718ca8;
  padding:2rem 1.5rem;
  text-align:center;
}
.pos-card{
  padding:.92rem;
  border:1px solid rgba(39,80,111,.6);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(8,22,35,.96), rgba(7,20,31,.98));
  display:grid;
  gap:.8rem;
}
.pos-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  font-weight:900;
}
.pos-title span{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
  flex-wrap:wrap;
}
.pos-metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.6rem;
}
.pos-metrics div{
  padding:.64rem;
  border:1px solid rgba(39,80,111,.5);
  border-radius:12px;
  background:rgba(7,23,36,.82);
}
.pos-card button{
  justify-self:end;
  padding:.62rem .96rem;
  border-radius:10px;
}

.log-panel .panel-head button{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:10px;
}
.logs{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:.92rem .95rem 1rem;
  background:
    linear-gradient(180deg, rgba(4,13,22,.92), rgba(3,10,17,.98));
  font-family:var(--mono);
  font-size:.86rem;
  line-height:1.66;
  scrollbar-width:thin;
}
.log-row{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:.78rem;
  padding:.08rem 0;
  color:#d2e8ff;
}
.log-row time{color:#80a6c9}
.log-row.ok span{color:var(--green)}
.log-row.warn span{color:var(--yellow)}
.log-row.err span{color:var(--red)}

@media (max-width:1680px){
  .layout{
    grid-template-columns:minmax(274px,308px) minmax(0,1fr) minmax(274px,308px);
    gap:14px;
    padding:14px;
  }
  .side-stack{gap:12px}
}

@media (max-width:1540px){
  .activity-summary{grid-template-columns:repeat(2, minmax(0,1fr))}
  .record-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
}

@media (max-width:1420px){
  .layout{
    width:min(100%, 1380px);
    grid-template-columns:minmax(280px,330px) minmax(0,1fr);
    grid-template-areas:
      "control market"
      "side side";
  }
  .control-panel{
    grid-area:control;
    position:sticky;
  }
  .market-panel{grid-area:market}
  .side-stack{
    grid-area:side;
    position:static;
    min-height:0;
    height:auto;
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-template-rows:none;
  }
  .official-panel,
  .log-panel{
    height:auto;
    max-height:none;
  }
  .market-panel{min-height:0}
}

@media (min-width:1900px){
  :root{
    --late5-record-height:620px;
  }
  .layout{
    grid-template-columns:minmax(304px,356px) minmax(0,1fr) minmax(296px,332px);
    gap:22px;
    padding:20px 26px 24px;
  }
  .market-stage{
    padding:1.8rem 1.8rem 1.15rem;
  }
}

@media (min-width:2800px){
  :root{
    --late5-record-height:720px;
  }
  .topbar{
    padding-inline:18px;
    min-height:92px;
  }
  .brand{
    font-size:1.18rem;
  }
  .brand img{
    width:38px;
    height:38px;
  }
  .brand b{
    font-size:.88rem;
  }
  .ticker>div{
    font-size:1.08rem;
  }
  #clock{
    font-size:1.28rem;
  }
  .layout{
    grid-template-columns:minmax(320px,380px) minmax(0,1fr) minmax(310px,360px);
    gap:24px;
    padding:22px 28px 28px;
  }
  .control-actions button{
    min-height:58px;
    font-size:1.15rem;
  }
  .market-stage{
    min-height:190px;
    padding:1.95rem 2rem 1.28rem;
  }
  .side strong{
    font-size:clamp(4rem, 4.6vw, 7rem);
  }
  .timer strong{
    font-size:clamp(2.8rem, 3.6vw, 5.4rem);
  }
}

@media (max-width:1180px){
  :root{
    --late5-record-height:460px;
  }
  .topbar{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand actions"
      "ticker ticker"
      "clock clock";
  }
  .brand{
    border-right:0;
    min-height:64px;
  }
  .ticker{
    grid-template-columns:repeat(3, minmax(0,1fr));
    border-top:1px solid rgba(39,80,111,.42);
    border-bottom:1px solid rgba(39,80,111,.42);
  }
  .ticker>div{
    min-height:48px;
    justify-content:space-between;
  }
  #clock{
    padding:.85rem 1rem 1rem;
    justify-self:start;
  }
  .layout{
    grid-template-columns:1fr;
    grid-template-areas:
      "market"
      "side"
      "control";
  }
  .control-panel{
    position:static;
    max-height:none;
  }
  .side-stack{
    grid-template-columns:1fr;
    height:auto;
  }
  .official-panel,
  .log-panel{
    max-height:none;
  }
  .market-stage{
    grid-template-columns:1fr;
    text-align:left;
  }
  .timer,
  .side.down{text-align:left}
  .book-grid{grid-template-columns:1fr}
  .decision-card{grid-template-columns:1fr}
  .decision-card div{
    border-right:0;
    border-bottom:1px solid rgba(39,80,111,.55);
  }
  .decision-card div:last-child{border-bottom:0}
  .record-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}

@media (max-width:860px){
  :root{
    --late5-record-height:380px;
  }
  .ticker{grid-template-columns:repeat(2, minmax(0,1fr))}
  .settings-card,
  .activity-summary,
  .summary-grid,
  .pos-metrics{
    grid-template-columns:1fr;
  }
  .record-card{
    padding:.84rem .88rem;
  }
  .record-top{
    grid-template-columns:1fr;
  }
  .record-meta,
  .activity-feed-head{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }
  .record-meta{
    justify-content:flex-start;
  }
}

@media (max-width:640px){
  :root{
    --late5-record-height:300px;
  }
  html,body{font-size:13px}
  .topbar{
    grid-template-columns:1fr;
    grid-template-areas:
      "brand"
      "actions"
      "clock"
      "ticker";
  }
  .top-actions{
    padding:0 .9rem .8rem;
    justify-self:start;
  }
  #clock{padding:.1rem .9rem .9rem}
  .ticker{grid-template-columns:1fr}
  .layout{padding:8px;gap:8px}
  .panel-head,
  .activity-head{
    padding:.9rem 1rem;
    min-height:58px;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .control-actions,
  .phase-grid,
  .book-grid{
    padding-inline:.8rem;
  }
  .state-hero,
  .settings-card,
  .rule-note{
    margin-inline:.8rem;
  }
  .odds-track,
  .decision-card,
  .activity-panel,
  .market-stage{
    margin-inline:.8rem;
  }
  .market-stage,
  .settings-card{padding:1rem}
  .record-grid{grid-template-columns:1fr}
}