/* ============ 基础 ============ */
:root{
  --bg:#0a0b0c;
  --panel-a:#1b1e22;
  --panel-b:#121417;
  --line:#2b3036;
  --line-hi:#3c434b;
  --amber:#ffb03a;
  --amber-deep:#b8761c;
  --danger:#ff4b3a;
  --cool:#7fc4ff;
  --green:#6fe3a8;
  --txt:#d8dde3;
  --muted:#767f88;
  --mono: ui-monospace, "Cascadia Mono", "Consolas", "Courier New", monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  color:var(--txt);
  font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  background:
    radial-gradient(1100px 520px at 50% -12%, #1a1e22 0%, #0a0b0c 62%),
    repeating-linear-gradient(90deg, #0b0c0d 0 2px, #0a0b0c 2px 4px);
  overflow:hidden;
}
button{font-family:inherit}

.rig{height:100vh;display:flex;flex-direction:column}

/* ============ 顶栏 ============ */
.hdr{
  height:54px;flex:0 0 54px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;
  border-bottom:1px solid #22262a;
  background:linear-gradient(180deg,#191c20,#101214);
}
.brand{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:13px;letter-spacing:.18em;color:#c9d0d7;
}
.brand .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 10px var(--amber), 0 0 2px #fff inset;
  animation:pulse 2.4s infinite;
}
.brand .ver{font-size:10px;letter-spacing:.1em;color:var(--muted)}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}

.hdr-mid{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;
  color:var(--amber);opacity:.9;
}
.hdr-right{display:flex;gap:8px}
.chip{
  background:linear-gradient(180deg,#20242a,#15181b);
  border:1px solid #343a41;color:#aeb6be;
  font-size:11px;padding:6px 11px;border-radius:5px;cursor:pointer;
  box-shadow:inset 0 1px 0 #3b424a;
  transition:color .15s, border-color .15s;
}
.chip:hover{color:var(--amber);border-color:#545c65}
.chip:active{transform:translateY(1px)}

/* ============ 布局 ============ */
.main{
  flex:1;display:grid;grid-template-columns:316px minmax(0,1fr) 292px;
  gap:14px;padding:14px;min-height:0;
}
.col{min-height:0;display:flex;flex-direction:column}
.col-mid{gap:12px}
.col-left{justify-content:space-between}

/* ============ 面板 ============ */
.panel{
  position:relative;
  background:linear-gradient(180deg,var(--panel-a),var(--panel-b) 62%);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
  box-shadow:inset 0 1px 0 #31373d, 0 14px 34px #00000073;
  overflow:hidden;
}
.panel::after{
  content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background-image:radial-gradient(circle, #4b525a 0 1.6px, #23272b 2.2px, transparent 2.6px);
  background-size:6px 6px;background-repeat:no-repeat;
  background-position:9px 9px, calc(100% - 9px) 9px, 9px calc(100% - 9px), calc(100% - 9px) calc(100% - 9px);
  opacity:.85;
}
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}
.panel-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:#8b939c;
  padding-bottom:8px;border-bottom:1px dashed #2c3238;margin-bottom:10px;
}

/* ============ 表盘 ============ */
.gauge{position:relative;width:100%;display:flex;justify-content:center}
.gauge svg{width:100%;height:auto;display:block;overflow:visible}
.mood-cluster{display:flex;flex-direction:column}
.gauge-main{max-width:272px;margin:2px auto 0}
.g-track{stroke:#2f353b;stroke-width:9;stroke-linecap:round}
.g-inner{stroke:#171a1d;stroke-width:3;stroke-linecap:round}
.g-tick{stroke:#4d555d;stroke-width:1.2}
.g-tick.maj{stroke:#79838d;stroke-width:2}
.g-num{
  fill:#78828b;font-size:8px;
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  text-anchor:middle;dominant-baseline:middle;
}
.g-band{stroke-width:9;stroke-linecap:butt;opacity:.75}
.g-needle{
  stroke:var(--amber);stroke-width:3;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(255,176,58,.55));
}
.g-hub{fill:#22272c;stroke:#454d55;stroke-width:2}
.g-hub2{fill:var(--amber)}
.g-marks line{stroke-width:3;stroke-linecap:round}
.g-marks .mk-s{stroke:var(--danger)}
.g-marks .mk-m{stroke:var(--amber)}
.g-marks{transition:opacity .6s, filter .6s}
.g-marks.s1{opacity:0}
.g-marks.s2{opacity:.55;filter:blur(3px);animation:jitter 1.1s infinite}
.g-marks.s3{opacity:1;filter:none}
@keyframes jitter{0%,100%{transform:translate(0,0)}50%{transform:translate(0.8px,1.4px)}}

.readout{
  display:flex;align-items:baseline;justify-content:center;gap:8px;
  font-family:var(--mono);margin-top:-6px;
}
.readout span{
  font-size:34px;color:var(--amber);letter-spacing:.02em;
  text-shadow:0 0 16px rgba(255,176,58,.35);
}
.readout em{font-size:10px;font-style:normal;color:var(--muted);letter-spacing:.14em}

.sub-gauges{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.gsmall{text-align:center}
.gsmall-label{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:#828b94}
.gsmall-val{
  font-family:var(--mono);font-size:15px;color:#cfd6dd;margin-top:-4px;letter-spacing:.04em;
}
.gsmall .gauge svg{max-width:120px;margin:0 auto}
.gsmall .g-track{stroke-width:8}
.gsmall .g-tick{stroke-width:1}
.gsmall .g-needle{stroke-width:2.6}

.debt{display:flex;align-items:center;gap:10px;margin-top:6px;padding-top:10px;border-top:1px dashed #2c3238}
.debt-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:#828b94}
.lamps{display:flex;gap:7px}
.lamp{
  width:13px;height:13px;border-radius:50%;
  background:#1d2126;border:1px solid #3a4149;
  box-shadow:inset 0 1px 2px #00000090;
  transition:all .25s;
}
.lamp.on{background:var(--danger);border-color:#ff7a6b;box-shadow:0 0 9px var(--danger), inset 0 0 3px #ffd9d3}

.linehint{
  padding:9px 10px;border-radius:6px;
  background:#0f1215;border:1px solid #262c32;
  font-family:var(--mono);font-size:10.5px;line-height:1.7;color:#9aa3ac;
  min-height:44px;
}
.legend{display:flex;flex-direction:column;gap:6px;padding-top:9px;border-top:1px dashed #2c3238}
.legend div{
  display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:#7c858e;
}
.legend i{width:11px;height:3px;border-radius:2px;display:block}
.legend i.s{background:var(--danger)}
.legend i.m{background:var(--amber)}

/* 电量 */
.battery{display:flex;align-items:center;gap:9px;padding-top:9px;border-top:1px dashed #2c3238}
.bat-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:#828b94}
.bat-bar{
  flex:1;height:8px;border-radius:2px;overflow:hidden;
  background:#14181c;border:1px solid #2f373f;
}
.bat-bar i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,#2fae78,#6fe3a8);
  transition:width .3s ease;
}
.bat-bar i.mid{background:linear-gradient(90deg,#b8761c,#ffb03a)}
.bat-bar i.low{background:linear-gradient(90deg,#8a2318,#ff4b3a);animation:blink .9s infinite}
.bat-val{font-family:var(--mono);font-size:10.5px;color:#cfd6dd;min-width:36px;text-align:right}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}

/* 下一单预告 */
.offer-wrap{position:relative;margin:0 0 11px}
.offer{
  margin:0;padding:9px 11px;border-radius:7px;
  background:#0e1215;border:1px solid #262c32;
  transition:filter .28s ease;
}
.offer-fog{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#0b0e11d9;border:1px dashed #5a4a2a;border-radius:7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:#c99a52;
  pointer-events:none;
}
.offer-top{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:#6c757e;
}
.offer-tag{font-size:8.5px;padding:1px 6px;border-radius:3px;border:1px solid #3a434c;color:#8b949d;letter-spacing:.06em}
.offer-tag.forced{border-color:#5a241d;color:var(--danger)}
.offer-tag.swap{border-color:#1f5140;color:var(--green)}
.offer-tag.favor{border-color:#6b4a13;color:var(--amber)}
.offer-main{font-family:var(--mono);font-size:15px;color:#d6dde4;margin-top:5px;letter-spacing:.04em}
.offer-sub{font-family:var(--mono);font-size:9.5px;color:#79828b;margin-top:3px;letter-spacing:.04em}
.linehint b{color:var(--amber);font-weight:400}
.linehint .u{color:#5d666f;font-size:9.5px;letter-spacing:.04em}
.linehint.alert{border-color:#5a241d;background:#170e0c}
.linehint.alert b{color:var(--danger)}

/* ============ CRT ============ */
.crt-frame{
  flex:1;display:flex;flex-direction:column;min-height:0;
  border-radius:12px;border:1px solid #2b333a;overflow:hidden;
  background:linear-gradient(180deg,#1a1f23,#0e1114);
  box-shadow:inset 0 1px 0 #3a444c, 0 16px 40px #0000008c;
}
.crt-head,.crt-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  color:#77828b;background:#12161a;
}
.crt-head{border-bottom:1px solid #262d33}
.crt-foot{border-top:1px solid #262d33}
.crt-head-r{color:var(--amber);opacity:.75}
.crt{
  position:relative;flex:1;min-height:0;
  margin:8px;border-radius:10px;overflow:hidden;
  background:#06100b;
  border:1px solid #213029;
  box-shadow:inset 0 0 70px #000000c9, inset 0 0 0 4px #0a1510;
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .5s ease;
}
.crt.warm{
  box-shadow:inset 0 0 90px rgba(255,150,50,.30), inset 0 0 0 4px #1d1409;
}
.crt canvas{
  width:100%;height:100%;display:block;
  filter:saturate(1.05) contrast(1.02);
}
/* 玻璃反光 + 扫描线 */
.crt::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    radial-gradient(120% 70% at 22% 0%, rgba(255,255,255,.075), transparent 56%),
    radial-gradient(90% 60% at 80% 108%, rgba(100,255,190,.05), transparent 60%);
}
.crt::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.34) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.72;
}

.crt-idle{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;pointer-events:none;
  font-family:var(--mono);color:#2f5c46;
}
.crt-idle .idle-t{font-size:19px;letter-spacing:.38em;color:#3d7157;text-shadow:0 0 14px #1c3d2c}
.crt-idle .idle-s{font-size:10.5px;letter-spacing:.1em;opacity:.72}

.crt-hud{
  position:absolute;left:0;right:0;top:0;z-index:5;padding:8px 12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#9cf0c4;
  background:linear-gradient(180deg,#040a07ee, #040a0700);
}
.hud-row{display:flex;justify-content:space-between}
.hud-row2{font-size:10px;color:#5fb98d;margin-top:3px;letter-spacing:.08em}
.timebar{margin-top:6px;height:3px;background:#0d241a;border-radius:2px;overflow:hidden}
.timebar i{display:block;height:100%;width:100%;background:#4fbf8e;opacity:.85;transition:width .1s linear}
.timebar i.warn{background:var(--amber)}
.timebar i.crit{background:var(--danger)}

/* 事件条 */
.crt-event{
  position:absolute;left:12px;right:12px;top:58px;z-index:6;
  padding:6px 12px;border-radius:4px;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:evIn .26s ease-out;
}
.crt-event.bad{background:#2a0f0ae0;border:1px solid #8a3020;color:#ffb0a4}
.crt-event.good{background:#0b2117e0;border:1px solid #2f6b52;color:#9cf0c4}

/* 早晨事件条 */
.crt-morning{
  position:absolute;left:16px;right:16px;bottom:46px;z-index:6;
  padding:8px 12px;border-radius:5px;text-align:center;
  background:#12181ee6;border:1px solid #3a434c;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#c3ccd4;
  animation:evIn .3s ease-out;
}
.crt-morning .m-d{margin-left:10px;color:var(--amber)}
@keyframes evIn{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}}
@keyframes shk{
  0%,100%{transform:none}
  18%{transform:translate(-4px,2px)}
  38%{transform:translate(4px,-2px)}
  58%{transform:translate(-3px,-1px)}
  78%{transform:translate(2px,1px)}
}
.crt.shake{animation:shk .5s ease-in-out}

/* 高峰期：连续接单 3 秒窗口 */
.crt-rush{
  position:absolute;inset:0;z-index:7;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  background:
    repeating-linear-gradient(-45deg, rgba(255,75,58,.07) 0 14px, rgba(255,75,58,0) 14px 28px),
    radial-gradient(circle at 50% 44%, rgba(255,75,58,.14), #050b08f2 64%);
  font-family:var(--mono);color:#ffd9d3;
  animation:rushIn .18s ease-out;
}
@keyframes rushIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.rush-top{display:flex;gap:18px;font-size:11px;letter-spacing:.18em;color:var(--danger)}
.rush-timer{
  width:min(330px,64%);height:5px;background:#2a0f0c;
  border:1px solid #5a241d;border-radius:3px;overflow:hidden;
}
.rush-timer i{
  display:block;height:100%;width:100%;
  background:var(--danger);box-shadow:0 0 10px var(--danger);
}
.rush-order{font-size:30px;letter-spacing:.16em;color:#ffd0c6;margin-top:2px}
.rush-sub{font-size:10.5px;letter-spacing:.1em;color:#a86a5f}
.rush-acts{display:flex;gap:14px;margin-top:5px}
.rush-btn{
  padding:10px 22px;border-radius:6px;cursor:pointer;
  font-size:13px;letter-spacing:.2em;font-family:var(--mono);
  background:#1a1113;border:1px solid #5a241d;color:#ffb0a4;
  transition:background .12s, transform .05s;
}
.rush-btn em{font-style:normal;font-size:9px;color:#7a5148;margin-left:6px;letter-spacing:.08em}
.rush-btn.ok{border-color:#2f6b52;color:#9cf0c4;background:#0d1a15}
.rush-btn.ok:hover{background:#12241c}
.rush-btn.no:hover{background:#24100d}
.rush-btn:active{transform:translateY(1px)}
.rush-hint{font-size:9.5px;color:#8a5c52;letter-spacing:.1em}

.crt-toast{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:6;padding:6px 14px;border-radius:4px;
  background:#1a1206ee;border:1px solid #6b4a13;color:var(--amber);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap;
}
.crt-toast.on{opacity:1}

.crt-result{
  position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  background:#030806d0;opacity:0;pointer-events:none;transition:opacity .18s;
  font-family:var(--mono);
}
.crt-result.on{opacity:1}
.crt-result .r-t{font-size:24px;letter-spacing:.3em}
.crt-result .r-s{font-size:11.5px;letter-spacing:.12em;color:#8fa39a}
.crt-result.ok .r-t{color:var(--green);text-shadow:0 0 18px #2fae78}
.crt-result.bad .r-t{color:var(--danger);text-shadow:0 0 18px #a3281c}

/* ============ 槽位 ============ */
.slots{
  display:flex;align-items:center;gap:12px;padding:8px 14px;
  border-radius:8px;border:1px solid #262d33;background:#101418;
}
.slots-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:#828b94}
.pips{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.pip{
  width:17px;height:9px;border-radius:2px;
  background:#1b2026;border:1px solid #333b43;
  transition:all .2s;
}
.pip.used{background:#0e1114;border-color:#242a30;box-shadow:inset 0 1px 2px #000}
.pip.now{background:var(--amber);border-color:#ffd08a;box-shadow:0 0 8px #ffb03a99}
.slots-num{font-family:var(--mono);font-size:15px;color:var(--amber)}

/* ============ 按键 ============ */
.act{
  display:block;width:100%;margin:0 0 9px;padding:10px 13px;
  text-align:left;cursor:pointer;border-radius:8px;
  background:linear-gradient(180deg,#23282e,#181b1f);
  border:1px solid #333a41;color:var(--txt);
  box-shadow:inset 0 1px 0 #3b424a, 0 2px 0 #0b0d0f;
  transition:filter .12s, transform .05s;
}
.act b{display:block;font-size:15px;letter-spacing:.2em;font-weight:500}
.act small{display:block;font-size:10.5px;color:#6f7881;margin-top:2px;letter-spacing:.04em}
.act:hover:not(:disabled){filter:brightness(1.22)}
.act:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px 8px #000000a6}
.act:disabled{opacity:.3;cursor:not-allowed;filter:grayscale(.5)}
.act-accept{border-color:#5c4517}
.act-accept b{color:var(--amber)}
.act-cancel b{color:var(--cool)}
.act-relief b{color:var(--green)}
.act-borrow{border-color:#6a3129}
.act-borrow b{color:#ff8f7d}
.act-pedal{border-color:#2f6b52}
.act-pedal b{color:var(--green)}
.act-end{margin-top:auto}
.act-end b{color:#dfe5ea;font-size:13px}

.relief-wrap{position:relative}
.relief-pop{
  position:absolute;right:4px;left:4px;top:-6px;z-index:20;
  display:flex;flex-direction:column;gap:6px;padding:8px;
  background:#151a1e;border:1px solid #3d464f;border-radius:8px;
  box-shadow:0 14px 30px #000000b3;
  transform:translateY(-100%);
}
.relief-pop button{
  background:#1d2329;border:1px solid #333c45;color:#c6cdd4;
  font-size:11.5px;padding:8px 10px;border-radius:5px;cursor:pointer;text-align:left;
}
.relief-pop button:hover{border-color:var(--green);color:var(--green)}

/* ============ 记账 ============ */
.feed-wrap{margin-top:10px;display:flex;flex-direction:column;min-height:0;flex:1}
.feed-label{
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:#6c757e;
  margin-bottom:6px;padding-bottom:5px;border-bottom:1px dashed #2c3238;
}
.feed{
  flex:1;overflow-y:auto;font-family:var(--mono);font-size:10px;line-height:1.85;
  color:#8b949d;padding-right:4px;
}
.feed::-webkit-scrollbar{width:4px}
.feed::-webkit-scrollbar-thumb{background:#333a41;border-radius:2px}
.feed .li{border-bottom:1px dotted #232a30;padding:3px 0}
.feed .li .t{color:#5c6670;font-size:9px}
.feed .li .plus{color:var(--green)}
.feed .li .minus{color:var(--danger)}
.feed .li .amber{color:var(--amber)}
.feed .li .b{color:#c8d0d7}

/* ============ 覆盖层 ============ */
.overlay{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:#05070899;backdrop-filter:blur(6px);
}
.overlay[hidden]{display:none}
.sheet{
  width:min(720px,92vw);max-height:86vh;overflow:auto;
  background:linear-gradient(180deg,#1b2025,#101316);
  border:1px solid #3a434c;border-radius:12px;padding:26px 30px;
  box-shadow:0 30px 80px #000000c4, inset 0 1px 0 #414b55;
  font-family:var(--mono);
}
.sheet h2{
  margin:0 0 4px;font-size:15px;letter-spacing:.22em;color:var(--amber);font-weight:500;
}
.sheet .sub{font-size:10.5px;color:#6d767f;letter-spacing:.1em;margin-bottom:18px}
.sheet .grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;
}
.sheet .cell{
  background:#0e1215;border:1px solid #262e35;border-radius:7px;padding:10px 12px;
}
.sheet .cell .k{font-size:9px;letter-spacing:.16em;color:#6b747d}
.sheet .cell .v{font-size:19px;color:#d6dde4;margin-top:3px}
.sheet .cell .v.a{color:var(--amber)}
.sheet .cell .v.d{color:var(--danger)}
.sheet .cell .v.g{color:var(--green)}
.sheet .note{
  border-left:2px solid var(--amber);padding:10px 14px;margin-bottom:16px;
  background:#14171a;color:#b9c2ca;font-size:12px;line-height:1.85;
}
.sheet .note em{color:var(--amber);font-style:normal}
.sheet .note .d{color:var(--danger)}
.sheet .rows{font-size:10.5px;color:#8b949d;line-height:2;margin-bottom:18px}
.sheet .rows .h{color:#5d666f;border-bottom:1px dashed #2a3138;letter-spacing:.1em}
.sheet .row{display:grid;grid-template-columns:56px 1fr 90px 90px;gap:8px}
.sheet .row span:first-child{color:#5d666f}
.sheet .btn{
  display:inline-block;padding:10px 22px;border-radius:6px;cursor:pointer;
  background:linear-gradient(180deg,#2a2015,#1a140c);border:1px solid #6b4a13;
  color:var(--amber);font-family:var(--mono);font-size:12px;letter-spacing:.2em;
}
.sheet .btn:hover{filter:brightness(1.25)}
.sheet .btns{display:flex;gap:10px;justify-content:flex-end}
.sheet .badge{
  display:inline-block;padding:2px 8px;border-radius:3px;font-size:9px;letter-spacing:.12em;
  border:1px solid #3a434c;color:#8b949d;margin-left:8px;
}
.sheet .badge.warn{border-color:#6b4a13;color:var(--amber)}
.sheet .badge.crit{border-color:#5a241d;color:var(--danger)}

@media (max-width:1180px){
  .main{grid-template-columns:280px minmax(0,1fr) 260px;gap:10px;padding:10px}
}