@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --ink:#16212B; --ink-2:#4A5A68; --ink-3:#7B8A96;
  --paper:#F4F6F8; --surface:#FFFFFF; --surface-2:#FAFBFC;
  --rule:#DDE3E8; --rule-strong:#C3CDD5;
  --blue:#1B4F8C; --blue-wash:#EAF0F7;
  --profit:#146B45; --profit-wash:#E7F2EC;
  --loss:#A8322A; --loss-wash:#FAEDEC;
  --caution:#9A6408; --caution-wash:#FBF2E2;
  --r:4px;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--ink);background:var(--paper);font-variant-numeric:tabular-nums}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-weight:600;letter-spacing:-0.01em;margin:0}
h1{font-size:19px}
h2{font-size:16px;margin-bottom:10px}
h3{font-size:14px;color:var(--ink-2)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---- shell ---- */
.shell{display:flex;min-height:100vh}
.rail{width:212px;flex:0 0 212px;background:var(--ink);color:#C6D2DC;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.rail .brand{padding:16px 18px 14px;border-bottom:1px solid rgba(255,255,255,.09)}
.rail .brand b{display:block;color:#fff;font-size:14px;font-weight:600;line-height:1.3}
.rail .brand span{font-size:11.5px;color:#8398A8;font-family:var(--mono)}
.rail nav{padding:8px 0;overflow-y:auto;flex:1}
.rail .grp{padding:13px 18px 5px;font-size:11px;color:#6F8697;letter-spacing:.04em}
.rail a{display:block;padding:6px 18px;color:#C6D2DC;font-size:13.5px;border-left:2px solid transparent}
.rail a:hover{background:rgba(255,255,255,.06);text-decoration:none;color:#fff}
.rail a.on{background:rgba(255,255,255,.10);color:#fff;border-left-color:#6FA0DC;font-weight:500}
.rail .foot{padding:11px 18px;border-top:1px solid rgba(255,255,255,.09);font-size:12px;color:#8398A8}
.rail .foot a{padding:0;display:inline;color:#A9BDCC}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:13px 24px;background:var(--surface);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:5}
.topbar .sp{flex:1}
.content{padding:20px 24px 64px;max-width:1240px;width:100%}

/* ---- buttons ---- */
.btn{display:inline-block;padding:6px 13px;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--surface);color:var(--ink);font:500 13.5px var(--sans);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--ink-3);text-decoration:none;background:var(--surface-2)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:#16406F}
.btn.danger{color:var(--loss);border-color:#E2BDB9}
.btn.danger:hover{background:var(--loss-wash)}
.btn.sm{padding:3px 9px;font-size:12.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---- forms ---- */
.field{display:block;margin-bottom:13px}
.field>span{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:3px;font-weight:500}
.field small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px}
input,select,textarea{width:100%;padding:6px 9px;border:1px solid var(--rule-strong);border-radius:var(--r);font:400 13.5px var(--sans);color:var(--ink);background:var(--surface)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 2px var(--blue-wash)}
input[type=number],input.num{font-family:var(--mono);text-align:right}
input[readonly]{background:var(--surface-2);color:var(--ink-2)}
textarea{min-height:62px;resize:vertical}
fieldset{border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px 4px;margin:0 0 16px}
legend{font-size:12.5px;font-weight:600;padding:0 6px;color:var(--ink-2)}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>*{flex:1;min-width:150px}
.row.tight>*{min-width:110px}

/* ---- panels & tables ---- */
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);margin-bottom:18px}
.panel>header{padding:11px 15px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:10px}
.panel>header h2{margin:0}
.panel>header .sp{flex:1}
.panel .body{padding:15px}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-weight:600;font-size:12px;color:var(--ink-2);padding:8px 12px;border-bottom:1px solid var(--rule-strong);background:var(--surface-2);white-space:nowrap}
td{padding:8px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
.num,td.num,th.num{text-align:right;font-family:var(--mono);font-size:13px;white-space:nowrap}
th.num{font-family:var(--sans)}
tfoot td{font-weight:600;border-top:1px solid var(--rule-strong);background:var(--surface-2)}
.muted{color:var(--ink-3)}
.small{font-size:12px}
.mono{font-family:var(--mono)}
.pos{color:var(--profit)}
.neg{color:var(--loss)}
.empty{padding:30px 15px;text-align:center;color:var(--ink-3)}
.empty p{margin:0 0 12px}

/* ---- position band on the dashboard ---- */
.band{display:flex;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);margin-bottom:18px;flex-wrap:wrap}
.band>div{flex:1;min-width:150px;padding:13px 16px;border-right:1px solid var(--rule)}
.band>div:last-child{border-right:none}
.band dt{font-size:12px;color:var(--ink-2);margin:0 0 3px}
.band dd{margin:0;font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:-0.02em}
.band .sub{font-size:11.5px;color:var(--ink-3);font-family:var(--sans);margin-top:2px}

/* ---- tags ---- */
.tag{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11.5px;font-weight:500;border:1px solid}
.tag.blue{background:var(--blue-wash);color:var(--blue);border-color:#C5D6E9}
.tag.green{background:var(--profit-wash);color:var(--profit);border-color:#BEDCCB}
.tag.red{background:var(--loss-wash);color:var(--loss);border-color:#E8C8C5}
.tag.amber{background:var(--caution-wash);color:var(--caution);border-color:#EBD8B0}
.tag.grey{background:var(--paper);color:var(--ink-2);border-color:var(--rule-strong)}

.msg{padding:9px 13px;border-radius:var(--r);border:1px solid;margin-bottom:16px;font-size:13.5px}
.msg.good{background:var(--profit-wash);border-color:#BEDCCB;color:#0E4E33}
.msg.bad{background:var(--loss-wash);border-color:#E8C8C5;color:#7E251E}
.msg.info{background:var(--blue-wash);border-color:#C5D6E9;color:var(--blue)}

.filters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.filters .field{margin:0}
.filters input,.filters select{min-width:130px;width:auto}

.lines td{padding:5px 7px}
.lines input,.lines select{padding:5px 7px}
.lines td:first-child{padding-left:12px}
.attachlist{list-style:none;margin:6px 0 0;padding:0;font-size:12.5px}
.attachlist li{padding:2px 0;display:flex;gap:8px;align-items:center}

.plain{background:var(--paper);display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.setup,.loginbox{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:28px 30px;width:100%;max-width:480px}
.loginbox{max-width:370px}
.setup h1,.loginbox h1{margin-bottom:6px}
.lede{color:var(--ink-2);margin:0 0 20px}
.loginbox .btn{width:100%;text-align:center;margin-top:6px}

.trace{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.wrap{overflow-x:auto}
details summary{cursor:pointer;color:var(--blue);font-size:13px}

@media print{
  .rail,.topbar,.btn,.filters{display:none!important}
  body{background:#fff}
  .content{padding:0;max-width:none}
  .panel{border:none;page-break-inside:avoid}
}
@media (max-width:860px){
  .shell{flex-direction:column}
  .rail{width:100%;flex:none;height:auto;position:static}
  .rail nav{display:flex;flex-wrap:wrap;gap:2px;padding:6px}
  .rail .grp{display:none}
  .rail a{border-left:none;border-radius:var(--r);padding:5px 10px}
  .content{padding:14px}
  .band>div{border-right:none;border-bottom:1px solid var(--rule)}
}