/* ============================================================
   TYCOON-M · 産業天下圖 — 캐피탈리즘 × 삼국지 × 문명 전략 UI
   중심: 양피지 위 산업 형세도(영토를 색으로 정복) + 군웅 초상 + 턴제
   ============================================================ */
:root {
  --void:   #0c0a06;   /* 배경(먹) */
  --wood:   #17110a;
  --bronze: #b98a3e;   /* 청동/금 프레임 */
  --bronze-hi:#e8c583;
  --bronze-dk:#6e4e1d;
  --parch:  #e7d6ad;   /* 양피지 지도 */
  --parch-hi:#f2e6c6;
  --parch-ink:#4a3a1f;
  --coast:  #b89a63; --coast2:#a8874f;
  --ink:    #ece0c8;
  --ink-dim:#a89a7d;
  --ink-faint:#6d6047;
  --line:   #2b2113;
  /* 군웅 색 */
  --lord-eden: #d8a24a;   /* 정이든 금 */
  --lord-rock: #c1443b;   /* 록펠러 적 */
  --lord-jobs: #8a5bb0;   /* 욥스 자 */
  --lord-huang:#3f7bd8;   /* 황렌순 청 */
  --neutral:#7a7154;
  --jade:#46c08a;
  --disp: "Black Han Sans", "Noto Sans KR", sans-serif;
  --serif: "Noto Serif KR", serif;
  --sans: "Noto Sans KR", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body{ height:100%; }
body {
  background:
    radial-gradient(130% 90% at 50% 0%, #241a0e 0%, var(--wood) 55%, var(--void) 100%);
  color: var(--ink); font-family: var(--sans); font-size: 15px; -webkit-font-smoothing: antialiased; overflow-x:hidden;
}
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.dim{ color:var(--ink-dim);} .faint{ color:var(--ink-faint);} .up{ color:var(--jade);} .down{ color:var(--lord-rock);}
button{ font-family:inherit; cursor:pointer; }

/* 청동 이중 프레임(패널 공통) */
.frame {
  background: linear-gradient(180deg,#1c150c,#140e07);
  border: 1px solid var(--bronze-dk);
  border-radius: 4px;
  box-shadow: 0 0 0 3px #120c06, 0 0 0 4px #3a2a12, 0 12px 30px rgba(0,0,0,.5);
  position: relative;
}

/* ---------- 타이틀 ---------- */
#title{ position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background: radial-gradient(80% 60% at 50% 40%, #2a1e0f 0%, #140d06 60%, #0a0704 100%); }
#title .seal{ width:96px; height:96px; border-radius:50%; display:grid; place-items:center; font-family:var(--disp); font-size:44px; color:#3a2408;
  background: radial-gradient(circle at 40% 35%, var(--bronze-hi), #9a6a24); box-shadow:0 0 0 4px #2a1a0a, 0 0 0 6px var(--bronze-dk), 0 10px 40px rgba(0,0,0,.6); margin-bottom:22px; }
#title .eyebrow{ color:var(--bronze); letter-spacing:.55em; font-size:12px; margin-bottom:8px; }
#title h1{ font-family:var(--disp); font-size:clamp(56px,13vw,140px); line-height:.86; color:var(--parch-hi); text-shadow:0 3px 0 #6e4e1d, 0 0 50px rgba(216,162,74,.25); }
#title h1 .a{ color:var(--bronze); }
#title .sub{ color:var(--ink-dim); max-width:480px; margin:16px auto 28px; line-height:1.8; }
#title .sub b{ color:var(--ink); }
.startbtn{ font-family:var(--disp); font-size:22px; letter-spacing:.05em; color:#2a1a06;
  background:linear-gradient(180deg,var(--bronze-hi),var(--bronze)); border:none; padding:15px 44px; border-radius:6px;
  box-shadow:0 4px 0 var(--bronze-dk), 0 12px 30px rgba(0,0,0,.5); }
.startbtn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--bronze-dk); }

/* ---------- 상단 HUD(청동 현판 + 계기) ---------- */
.hud{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px; padding:9px 16px; flex-wrap:wrap;
  background:linear-gradient(180deg,#241a0d,#140d06); border-bottom:3px solid var(--bronze-dk); box-shadow:0 6px 22px rgba(0,0,0,.55); }
.crest{ width:38px; height:38px; border-radius:8px; display:grid; place-items:center; font-family:var(--disp); font-size:20px; color:#2a1a06;
  background:radial-gradient(circle at 40% 35%, var(--bronze-hi), #9a6a24); box-shadow:0 0 0 2px #120c06, 0 0 0 3px var(--bronze-dk); }
.hud .name{ font-family:var(--disp); font-size:20px; color:var(--parch-hi); } .hud .name b{ color:var(--bronze); }
.hud .when{ color:var(--ink-dim); font-size:12px; }
.meters{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }
.meter{ min-width:112px; background:#0e0a05; border:1px solid #3a2a12; border-radius:7px; padding:5px 12px; }
.meter .k{ font-size:10px; color:var(--ink-faint); letter-spacing:.1em; }
.meter .v{ font-family:var(--mono); font-size:18px; font-weight:700; }

#view{ min-height:calc(100vh - 132px); padding-bottom:76px; }

/* ---------- 형세도(양피지 지도) ---------- */
.mapwrap{ padding:16px; }
.board{
  position:relative; border-radius:6px; overflow:hidden;
  box-shadow:0 0 0 3px #120c06, 0 0 0 5px #3a2a12, 0 0 0 7px #22160a, 0 16px 40px rgba(0,0,0,.6);
}
.board svg{ display:block; width:100%; height:auto; }
/* 지도/리스트 전환 토글 */
.mapswitch{ display:flex; gap:4px; justify-content:center; margin-bottom:14px; }
.mapswitch button{ background:#150e07; border:1px solid #3a2a12; color:var(--ink-dim); padding:8px 20px; border-radius:8px; font-weight:600; font-size:13px; }
.mapswitch button.on{ background:linear-gradient(180deg,var(--bronze-hi),var(--bronze)); color:#2a1a06; border-color:var(--bronze-dk); }
.mapswitch button:not(.on):hover{ color:var(--ink); }
/* 영토 리스트 */
.terr-list{ background:linear-gradient(180deg,var(--parch-hi),var(--parch)); border-radius:4px; padding:8px 6px;
  box-shadow:0 0 0 3px #120c06, 0 0 0 4px var(--bronze-dk), 0 12px 30px rgba(0,0,0,.5); }
.terr{ display:grid; grid-template-columns:16px 1.4fr 1.3fr 70px 1fr; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #cbb98d; color:var(--parch-ink); }
.terr:last-child{ border-bottom:none; }
.terr .dot{ width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.3); }
.terr .tname{ font-family:var(--disp); font-size:15px; color:#3a2c14; }
.terr .tstat{ font-size:12px; color:#6a5a34; } .terr .tstat.lock{ color:#9a3a34; } .terr .tstat.mine{ color:#1f7a52; font-weight:700; }
.terr .ttier{ font-size:11px; color:#8a7648; } .terr .tsize{ font-size:12px; color:#5a4a28; text-align:right; }
.terr-head{ display:grid; grid-template-columns:16px 1.4fr 1.3fr 70px 1fr; gap:10px; padding:8px 14px; font-size:11px; color:#8a7648; letter-spacing:.06em; border-bottom:2px solid #b89a63; }
.legend{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:14px 0 4px; font-size:12px; color:var(--ink-dim); }
.legend .sw{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:middle; box-shadow:0 0 0 1px rgba(0,0,0,.4); }

/* 군웅 초상 열 */
.lords{ display:flex; gap:10px; flex-wrap:wrap; padding:14px 16px 0; }
.lord{ flex:1; min-width:150px; display:flex; gap:10px; align-items:center; background:linear-gradient(180deg,#1c150c,#130d06); border:1px solid #3a2a12; border-radius:8px; padding:10px;
  box-shadow:0 0 0 2px #120c06 inset; }
.lord .port{ width:52px; height:52px; border-radius:6px; flex:none; box-shadow:0 0 0 2px #120c06, 0 0 0 3px var(--bronze-dk); }
.lord.eden .port{ box-shadow:0 0 0 2px #120c06, 0 0 0 3px var(--bronze); }
.lord .ln{ font-family:var(--disp); font-size:15px; color:var(--parch-hi); }
.lord .lt{ font-size:11px; color:var(--ink-faint); }
.lord .lp{ font-family:var(--mono); font-size:13px; margin-top:3px; }

/* 턴 옥새 버튼 */
.turnbar{ display:flex; align-items:center; justify-content:center; gap:16px; padding:16px; }
.era{ font-family:var(--serif); font-size:15px; color:var(--ink-dim); }
.era b{ color:var(--bronze-hi); font-size:18px; }
.seal{ font-family:var(--disp); font-size:20px; color:#2a1a06; background:radial-gradient(circle at 40% 35%,var(--bronze-hi),#9a6a24);
  border:none; border-radius:10px; padding:14px 34px; box-shadow:0 5px 0 var(--bronze-dk), 0 12px 26px rgba(0,0,0,.5); letter-spacing:.04em; }
.seal:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--bronze-dk); }
.seal small{ display:block; font-family:var(--sans); font-size:10px; letter-spacing:.14em; color:#5a3c14; }

/* ---------- 내정(사업 관리) — 양피지 보고서 ---------- */
.room{ padding:18px; max-width:1180px; margin:0 auto; }
.rtitle{ font-family:var(--disp); font-size:26px; color:var(--parch-hi); margin-bottom:2px; }
.rtitle .a{ color:var(--bronze); }
.rdesc{ color:var(--ink-dim); font-size:13px; line-height:1.7; margin-bottom:16px; max-width:780px; }
.parch{ background:linear-gradient(180deg,var(--parch-hi),var(--parch)); color:var(--parch-ink); border-radius:4px; padding:20px 22px;
  box-shadow:0 0 0 3px #120c06, 0 0 0 4px var(--bronze-dk), 0 12px 30px rgba(0,0,0,.5); position:relative; }
.parch h3{ font-family:var(--serif); font-weight:700; font-size:16px; color:#4a3a1f; border-bottom:1.5px solid #c3ad7d; padding-bottom:8px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:baseline; }
.parch h3 .doc{ font-family:var(--mono); font-size:11px; color:#9a875e; }
.rmetrics{ display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; margin-bottom:14px; }
.rmetric .k{ font-size:11px; color:#8f7c56; letter-spacing:.06em; }
.rmetric .v{ font-family:var(--mono); font-size:24px; font-weight:700; color:#2c2214; }
.rmetric .v.up{ color:#1f7a52;} .rmetric .v.down{ color:#b1362f; }
.stamp{ position:absolute; right:16px; top:14px; font-family:var(--disp); font-size:15px; color:#b1362f; border:3px double #b1362f; border-radius:6px; padding:2px 10px; transform:rotate(8deg); opacity:.82; }
.dial{ border-top:1.5px dashed #c3ad7d; padding-top:14px; }
.dial label{ display:flex; justify-content:space-between; font-size:13px; color:#6a5a34; font-weight:600; margin-bottom:8px; }
.dial label .p{ font-family:var(--mono); font-size:18px; color:#2c2214; }
input[type=range]{ -webkit-appearance:none; width:100%; height:6px; border-radius:6px; background:linear-gradient(90deg,#b1362f,#caa64e,#1f7a52); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 40% 35%,var(--bronze-hi),#9a6a24); border:2px solid #5a3c14; cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,.5); }
.two{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; } @media(max-width:820px){ .two{ grid-template-columns:1fr; } }
.side{ display:flex; flex-direction:column; gap:12px; }
.chair{ display:flex; gap:12px; align-items:center; background:linear-gradient(180deg,#1c150c,#130d06); border:1px solid #3a2a12; border-radius:10px; padding:12px; box-shadow:0 0 0 2px #120c06 inset; }
.chair .port{ width:58px; height:58px; border-radius:8px; box-shadow:0 0 0 2px #120c06, 0 0 0 3px var(--bronze); }
.chair .nm{ font-family:var(--disp); font-size:16px; color:var(--parch-hi); } .chair .say{ font-family:var(--serif); font-size:13px; color:var(--ink-dim); margin-top:2px; line-height:1.5;} .chair .say b{ color:var(--bronze-hi); }

/* 공용 게임 패널/딜 */
.panel{ background:linear-gradient(180deg,#1a130a,#120c06); border:1px solid #3a2a12; border-radius:10px; padding:16px; box-shadow:0 0 0 2px #120c06 inset; }
.panel h3{ font-family:var(--disp); color:var(--bronze); font-size:15px; margin-bottom:12px; }
.dossiers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.dossier{ background:linear-gradient(180deg,#1c150c,#130d06); border:1px solid #3a2a12; border-radius:10px; padding:13px; box-shadow:0 0 0 2px #120c06 inset; }
.dossier .port{ width:48px; height:48px; border-radius:8px; margin-bottom:8px; box-shadow:0 0 0 2px #120c06, 0 0 0 3px var(--bronze-dk); }
.dossier .dn{ font-family:var(--disp); font-size:16px; color:var(--parch-hi); } .dossier .dm{ color:var(--ink-faint); font-size:11px; } .dossier .dr{ color:var(--ink-dim); font-size:12px; margin:4px 0 8px; }
.tierbar{ border-left:3px solid var(--ink-faint); } .tierbar.cofounder{border-left-color:var(--bronze);} .tierbar.c_suite{border-left-color:var(--lord-huang);} .tierbar.board{border-left-color:var(--lord-jobs);}
.chip{ display:inline-block; font-size:10px; padding:2px 7px; border-radius:5px; margin:2px 3px 0 0; background:#241606; color:var(--bronze); border:1px solid #3a2a12; }
.chip.j{ color:var(--jade); border-color:#1b4a38; background:#0e2a20; } .chip.o{ color:var(--lord-rock); border-color:#4a201d; background:#2a1210; }
.gauge{ height:6px; background:#0c0803; border-radius:4px; overflow:hidden; margin-top:8px; } .gauge>span{ display:block; height:100%; }
.skilltag{ font-size:11px; color:var(--jade); border-top:1px dashed #2c2011; margin-top:9px; padding-top:8px; }
.techgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.tnode{ background:#150e07; border:1px solid #2c2011; border-radius:9px; padding:11px; } .tnode .tn{ font-weight:700; font-size:13px; } .tnode .tmeta{ font-size:10px; color:var(--ink-faint); margin-top:3px;} .tnode .tpre{ font-size:10px; color:var(--lord-huang); margin-top:3px; }
.tierhead{ font-family:var(--disp); color:var(--bronze); font-size:13px; letter-spacing:.08em; margin:16px 0 8px; }
.chain{ font-family:var(--mono); font-size:12px; color:var(--ink-dim); background:#150e07; border:1px solid #2c2011; border-radius:9px; padding:11px 13px; margin-bottom:8px; overflow-x:auto; white-space:nowrap; } .chain b{ color:var(--bronze); }
.abrow{ display:flex; align-items:center; gap:12px; margin-bottom:8px; } .abrow .al{ width:80px; font-size:12px; color:var(--ink-dim);} .abrow .at{ flex:1; height:16px; background:#0c0803; border-radius:5px; overflow:hidden; border:1px solid #2c2011;} .abrow .af{ height:100%; background:linear-gradient(90deg,#9a6a24,var(--bronze-hi)); } .abrow .av{ width:26px; text-align:right; font-family:var(--mono);}
.acts{ display:flex; gap:8px; flex-wrap:wrap; } .act{ flex:1; min-width:92px; background:#150e07; border:1px solid #2c2011; border-radius:9px; padding:12px; opacity:.45; } .act.done{ opacity:1; border-color:#1b4a38;} .act.cur{ opacity:1; border-color:var(--bronze); box-shadow:0 0 0 1px var(--bronze) inset;} .act .no{ font-size:11px; color:var(--ink-faint);} .act .ti{ font-family:var(--disp); font-size:17px; color:var(--parch-hi); }
.logline{ padding:7px 0; border-bottom:1px solid #221909; font-size:12px; display:flex; gap:8px; } .logline:last-child{border:none;} .logline .mo{ color:var(--ink-faint); min-width:38px; font-family:var(--mono);}
.worldrow{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid #221909; } .worldrow .cn{ font-weight:700; } .worldrow .cc{ color:var(--ink-faint); font-size:11px; }

/* ---------- 하단 전략 메뉴 ---------- */
.navbar{ position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex; justify-content:center; gap:2px; padding:6px;
  background:linear-gradient(180deg,#241a0d,#0e0904); border-top:3px solid var(--bronze-dk); box-shadow:0 -8px 24px rgba(0,0,0,.55); }
.navbar button{ background:transparent; border:none; color:var(--ink-faint); border-radius:9px; padding:7px 16px; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:64px; }
.navbar button .ic{ font-size:19px; filter:grayscale(.4) opacity(.7);} .navbar button .lb{ font-size:11px; font-weight:600; }
.navbar button:hover{ color:var(--ink-dim); }
.navbar button.active{ color:var(--bronze); background:#241606; box-shadow:0 0 0 1px #3a2a12 inset; } .navbar button.active .ic{ filter:none; }

/* 액션 버튼·배지·토스트 */
.tbtn{ margin-top:9px; width:100%; background:linear-gradient(180deg,var(--bronze-hi),var(--bronze)); color:#2a1a06; border:none; border-radius:7px; padding:8px 10px; font-weight:700; font-size:12px; box-shadow:0 2px 0 var(--bronze-dk); }
.tbtn:hover{ filter:brightness(1.06); } .tbtn:active{ transform:translateY(2px); box-shadow:0 0 0 var(--bronze-dk); }
.tbtn.fire{ background:#241209; color:var(--lord-rock); border:1px solid #4a201d; box-shadow:none; }
.tbtn.sm{ width:auto; padding:4px 9px; font-size:11px; margin-top:0; }
.tbadge{ display:inline-block; font-size:10px; padding:2px 7px; border-radius:5px; margin:5px 0 2px; }
.tbadge.ok{ color:var(--jade); background:#0e2a20; border:1px solid #1b4a38; }
.tbadge.prog{ color:var(--lord-huang); background:#0e1f30; border:1px solid #23384f; }
.tbadge.open{ color:#2a1a06; background:linear-gradient(180deg,var(--bronze-hi),var(--bronze)); }
.tbadge.lock{ color:var(--ink-faint); background:#160f07; border:1px solid #2c2011; }
.tnode.owned{ border-color:#1b4a38; box-shadow:0 0 0 1px #1b4a38 inset; }
.toast{ position:fixed; left:50%; bottom:84px; transform:translateX(-50%); z-index:60; background:#1c150c; color:var(--parch-hi); border:1px solid var(--bronze-dk); box-shadow:0 0 0 2px #120c06,0 8px 24px rgba(0,0,0,.5); border-radius:10px; padding:11px 18px; font-size:13px; font-weight:600; animation:toastin .25s ease; }
@keyframes toastin{ from{ opacity:0; transform:translate(-50%,10px);} to{ opacity:1; transform:translate(-50%,0);} }
.foot{ text-align:center; color:var(--ink-faint); font-size:11px; padding:12px; }
@keyframes pop{ 0%{transform:scale(1);} 40%{transform:scale(1.14); color:var(--bronze-hi);} 100%{transform:scale(1);} } .pop{ animation:pop .5s ease; }
.floater{ position:fixed; z-index:40; font-family:var(--disp); font-size:22px; pointer-events:none; animation:rise 1.1s ease-out forwards; } @keyframes rise{ from{transform:translateY(0);opacity:0;} 20%{opacity:1;} to{transform:translateY(-60px);opacity:0;} }
@media (prefers-reduced-motion: reduce){ .pop,.floater{ animation:none; } }

/* ---------- 사업 요약 바 ---------- */
.biz-bar{ background:#150e07; border:1px solid #2c2011; border-left:3px solid var(--jade); border-radius:8px; padding:8px 13px; margin:10px 0; font-size:12px; color:var(--ink-dim); } .biz-bar b{ color:var(--parch-hi); }

/* ---------- 제조 연결(생산 라인) ---------- */
.chain-ui{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; }
.chain-node{ flex:1; min-width:180px; background:linear-gradient(180deg,#170f08,#110b05); border:1px solid #33260f; border-radius:10px; padding:12px; }
.chain-node .cn-h{ font-family:var(--disp); color:var(--bronze); font-size:13px; letter-spacing:.03em; margin-bottom:8px; }
.chain-node .cn-item{ font-size:14px; color:var(--parch-hi); font-weight:700; } .chain-node .cn-item b{ color:var(--bronze-hi); }
.chain-node .cn-cur{ font-size:12px; color:var(--ink-dim); margin-top:5px; } .chain-node .cn-cur b{ color:var(--jade); font-family:var(--mono); }
.chain-arrow{ display:flex; align-items:center; color:var(--bronze); font-size:22px; font-weight:700; flex:none; }
@media (max-width:640px){ .chain-arrow{ transform:rotate(90deg); width:100%; justify-content:center; } .chain-node{ min-width:100%; } }

/* ---------- 필지(부지) 지도 GUI ---------- */
.plotgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.plot{ background:linear-gradient(180deg,#1c1408,#130c06); border:1px solid #33260f; border-radius:11px; padding:12px; position:relative; }
.plot.has{ border-color:#5a4213; box-shadow:0 0 0 1px #5a4213 inset; }
.plot-h{ display:flex; justify-content:space-between; align-items:baseline; } .plot-h b{ font-family:var(--disp); font-size:15px; color:var(--parch-hi); } .plot-city{ font-size:11px; color:var(--ink-faint); }
.plot-meta{ font-size:11px; color:var(--bronze); margin:4px 0 8px; font-family:var(--mono); }
.plot-built{ min-height:22px; margin-bottom:8px; padding-bottom:8px; border-bottom:1px dashed #2c2011; }
.plot-chip{ display:inline-block; font-size:10px; padding:2px 7px; border-radius:5px; margin:2px 3px 0 0; background:#0e2a20; color:var(--jade); border:1px solid #1b4a38; }
.plot-opts{ display:flex; flex-wrap:wrap; gap:5px; }
.tbtn.xs{ width:auto; margin-top:0; padding:4px 8px; font-size:10.5px; font-weight:600; background:#241606; color:var(--bronze-hi); border:1px solid #4a3413; box-shadow:none; }
.tbtn.xs:hover{ background:#2f1d08; } .tbtn.xs:active{ transform:translateY(1px); }
.tbtn.xs .pc{ color:var(--ink-faint); font-weight:400; }

/* ---------- 운영(공급사슬) 화면 ---------- */
.ops-board{ display:flex; align-items:flex-start; gap:6px; overflow-x:auto; padding:4px 0 10px; }
.ops-col{ flex:1; min-width:180px; background:linear-gradient(180deg,#150e07,#100a05); border:1px solid #2c2011; border-radius:10px; padding:8px; }
.ops-colh{ font-family:var(--disp); color:var(--bronze); font-size:14px; text-align:center; padding:4px 0 8px; letter-spacing:.04em; }
.ops-flow{ align-self:center; color:var(--bronze); font-size:24px; font-weight:700; flex:none; }
.unit{ background:linear-gradient(180deg,#1c1408,#140d06); border:1px solid #3a2a12; border-radius:9px; padding:9px; margin-bottom:7px; }
.unit.sel{ border-color:var(--bronze-hi); box-shadow:0 0 0 1px var(--bronze-hi) inset, 0 0 12px rgba(216,162,74,.3); }
.unit.short{ border-color:#5a2420; box-shadow:0 0 0 1px #5a2420 inset; }
.unit .u-h{ display:flex; justify-content:space-between; align-items:baseline; } .unit .u-h b{ font-size:13px; color:var(--parch-hi); } .unit .u-city{ font-size:10px; color:var(--ink-faint); }
.unit .u-flow2{ font-size:11px; color:var(--ink-dim); margin:4px 0; font-family:var(--mono); } .unit .u-flow2 b{ color:var(--jade); }
.unit .u-in{ font-size:10px; color:var(--bronze); } .unit .u-in.warn{ color:var(--lord-rock); }
.unit .u-short{ font-size:10.5px; color:var(--lord-rock); font-weight:700; margin-top:3px; }
.unit .u-retail{ font-size:11px; color:var(--ink-dim); margin:5px 0; border-top:1px dashed #2c2011; padding-top:5px; }
.unit .u-price{ width:56px; background:#0c0803; color:var(--parch-hi); border:1px solid var(--bronze-dk); border-radius:4px; padding:2px 4px; font-family:var(--mono); font-size:12px; }
.unit .u-btns{ display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.tbtn.xs.go{ background:linear-gradient(180deg,var(--bronze-hi),var(--bronze)); color:#2a1a06; border-color:var(--bronze-dk); }
.tbtn.xs.del{ color:var(--lord-rock); border-color:#4a201d; }
.u-empty{ text-align:center; padding:14px 0; font-size:12px; }
.ops-add{ margin-top:12px; } .ops-addrow{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.ops-addrow select{ background:#0c0803; color:var(--parch-hi); border:1px solid var(--bronze-dk); border-radius:5px; padding:6px 8px; font-size:12px; font-family:var(--sans); flex:1; min-width:90px; }
.ops-sum{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.ops-sumt{ font-size:13px; color:var(--parch); } .ops-sumt b{ color:var(--parch-hi); }