/* Layout: a cargo paperwork portal. Stencil-like condensed headings, container numbers in mono, one working column. */
:root{--bg:#eef2f3;--panel:#fff;--panel2:#e3eaec;--fg:#14262e;--muted:#566a73;--line:#c8d4d8;--accent:#0b5c7a;--accent-fg:#fff;--amber:#a85f00;--amber-bg:#fff0d6;--green:#14703f;--green-bg:#dcf3e5;--red:#a12b2b;--band:#10303d;--band-fg:#eaf3f5;--display:"Arial Narrow",Arial,"Microsoft YaHei",sans-serif;--body:Arial,"Microsoft YaHei",sans-serif;--mono:Consolas,monospace}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e1b21;--panel:#16272f;--panel2:#1e333d;--fg:#e6f0f3;--muted:#9eb2ba;--line:#2f4752;--accent:#5cc0e0;--accent-fg:#082029;--amber:#f2b552;--amber-bg:#3b2c12;--green:#67d496;--green-bg:#123323;--red:#f08a8a;--band:#081318;--band-fg:#e6f0f3;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0e1b21;--panel:#16272f;--panel2:#1e333d;--fg:#e6f0f3;--muted:#9eb2ba;--line:#2f4752;--accent:#5cc0e0;--accent-fg:#082029;--amber:#f2b552;--amber-bg:#3b2c12;--green:#67d496;--green-bg:#123323;--red:#f08a8a;--band:#081318;--band-fg:#e6f0f3;color-scheme:dark}
*{box-sizing:border-box}[hidden]{display:none!important}
body{background:var(--bg);color:var(--fg);font:15px/1.5 var(--body)}
.top{background:var(--band);color:var(--band-fg);padding-block:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top-in,.wrap{max-width:1040px;margin:auto}
.top-in{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.brand{font:700 24px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.brand small{display:block;font:400 12px/1.4 var(--body);letter-spacing:0;text-transform:none;opacity:.8;margin-top:3px}
.switch{display:flex;gap:4px;background:rgba(255,255,255,.12);padding:3px;border-radius:6px}
.switch button{border:0;background:none;color:inherit;padding:6px 12px;border-radius:4px;font:600 13px var(--body);cursor:pointer}
.switch button.on{background:var(--band-fg);color:var(--band)}
.notice{background:var(--amber-bg);color:var(--amber);padding-block:7px;font-size:13px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.notice div{max-width:1040px;margin:auto}
.wrap{padding-block:20px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:18px}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:34px}h2{font-size:26px}h3{font-size:20px}
p{margin:0}.muted{color:var(--muted)}.small{font-size:13px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px;min-width:0}
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.wrap{grid-template-columns:minmax(0,1fr)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.btn{border:1px solid var(--accent);background:var(--accent);color:var(--accent-fg);padding:9px 14px;border-radius:5px;font:600 14px var(--body);cursor:pointer}
.btn.alt{background:transparent;color:var(--accent)}
.btn:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tile{text-align:left;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:6px;padding:14px;color:inherit;cursor:pointer;font:inherit;display:grid;gap:5px}
.tile.on{background:var(--panel2)}
.tile b{font:700 22px/1.1 var(--display)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:6px;min-width:0}
.stat span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.stat b{font:700 28px/1.2 var(--display);font-variant-numeric:tabular-nums}
.stat.pending b{color:var(--amber)}
.tablebox{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;background:var(--panel2)}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td.text{white-space:normal;min-width:190px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:13px}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:var(--panel2);color:var(--muted)}
.pill.amber{background:var(--amber-bg);color:var(--amber)}.pill.green{background:var(--green-bg);color:var(--green)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{padding:7px 12px;border:1px solid var(--line);background:var(--panel);color:var(--fg);border-radius:5px;font:600 13px var(--body);cursor:pointer}
.seg button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.cards{display:grid;gap:10px}
.cntr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;text-align:left;width:100%;background:var(--panel);color:inherit;font:inherit;border:1px solid var(--line);border-radius:6px;padding:12px;cursor:pointer;align-items:center}
.cntr:hover{border-color:var(--accent)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.fact span{display:block;font-size:12px;color:var(--muted)}.fact b{font-weight:600;overflow-wrap:anywhere}
.pics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pics figure{margin:0;border:1px solid var(--line);border-radius:5px;padding:6px;background:var(--panel2)}
.pics img{display:block;width:100%;height:210px;object-fit:cover;border-radius:3px;cursor:zoom-in}
.pics figcaption{font-size:12px;padding-top:5px}
.big{position:fixed;inset:0;z-index:20;background:rgba(5,12,16,.9);display:grid;place-items:center;padding:20px}
.big img{max-height:100%;max-width:100%}
.big button{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));top:calc(14px + env(safe-area-inset-top,0px))}
form{display:grid;gap:12px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
label{display:grid;gap:4px;font-size:13px;font-weight:600}
input,textarea,select{width:100%;font:15px var(--body);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:9px}
.login{max-width:420px;width:100%;margin:28px auto}
.sr{font:700 15px var(--mono)}
.msg{white-space:pre-wrap;background:var(--panel2);padding:12px;border-radius:5px;font-size:14px;overflow-wrap:anywhere}
.thumb{width:72px;height:72px;object-fit:cover;border-radius:4px;background:var(--panel2);display:grid;place-items:center;font-size:11px;color:var(--muted);text-align:center;flex:none}
.req{display:flex;gap:12px;align-items:flex-start}
.req>.stack{min-width:0;flex:1}
@media(max-width:620px){.tiles,.stats{grid-template-columns:1fr}.stat b{font-size:26px}}

body{margin:0}.seg{display:flex;flex-wrap:wrap;gap:6px}.tablebox{overflow-x:auto}.err{color:var(--red)}.link{word-break:break-all;background:var(--panel2);padding:8px;border-radius:4px}
.top .btn.alt{color:var(--band-fg);border-color:var(--band-fg);background:transparent}