/* Vexel Design System v1.0 — tokens (see VEXEL-DESIGN-SYSTEM.md). Light theme, B2B internal tooling. */
:root{
  --bg:#f4f4f1; --surface:#ffffff; --surface-2:#fbfbfa;
  --ink:#17170f; --ink-soft:#3c3c33; --muted:#7c7c72; --faint:#a6a69c;
  --line:rgba(20,20,10,.09); --line-2:rgba(20,20,10,.14); --brand:#111110; --ring:rgba(20,20,10,.16);
  --ai-bg:#eee9fb; --ai-fg:#6747d6; --quality-bg:#e1f2e7; --quality-fg:#1d864b; --ops-bg:#e4ecfb; --ops-fg:#2a5fc4;
  --docs-bg:#f9efdd; --docs-fg:#a9700d; --analysis-bg:#dff0ef; --analysis-fg:#0c8784; --support-bg:#fae3e9; --support-fg:#bd3a57;
  --success:#1d864b; --warning:#a9700d; --danger:#e23b3b; --info:#2a5fc4; --pin:#f0b429;
  --radius-sm:7px; --radius-md:9px; --radius-lg:12px; --radius-xl:14px; --radius-pill:999px;
  --shadow:0 1px 2px rgba(20,20,10,.04), 0 1px 1px rgba(20,20,10,.03);
  --shadow-h:0 6px 22px -10px rgba(20,20,10,.22), 0 2px 6px -2px rgba(20,20,10,.10);
  --font-ui:"Hanken Grotesk", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace;
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.14s; --t:.16s;
  /* legacy aliases used by older markup */
  --text:var(--ink); --panel:var(--surface); --accent:var(--brand); --accent-2:var(--surface-2); --ok:var(--success); --warn:var(--warning); --ok-bg:var(--quality-bg); --warn-bg:var(--docs-bg); --draft-bg:var(--surface-2);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--font-ui);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-mono);letter-spacing:0}
a{color:var(--ink);text-decoration:none;text-underline-offset:2px} a:hover{text-decoration:underline}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- app shell: sidebar 248px + content ---------- */
body{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;gap:6px}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;color:var(--ink)}
.sidebar .brand:hover{text-decoration:none}
.sidebar .brand .mark{width:30px;height:30px;border-radius:var(--radius-md);background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;letter-spacing:0}
.sidebar .brand .word{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.sidebar .brand .sub{display:block;font:500 11px var(--font-mono);letter-spacing:0;color:var(--muted);margin-top:2px}
.sidebar .eyebrow{padding:10px 11px 4px}
.sidebar nav{display:flex;flex-direction:column;gap:2px}
.sidebar nav a{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:var(--radius-md);font-size:14.5px;font-weight:500;color:var(--ink-soft);transition:background var(--t-fast) ease,color var(--t-fast) ease}
.sidebar nav a svg{width:18px;height:18px;color:var(--muted);flex:none}
.sidebar nav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.sidebar nav a.active{background:var(--brand);color:#fff} .sidebar nav a.active svg{color:#fff}
.sidebar .foot{margin-top:auto;padding:12px 11px 4px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.sidebar .foot .who{font-size:13.5px;font-weight:600;color:var(--ink-soft)} .sidebar .foot .meta{font:500 11px var(--font-mono);letter-spacing:0;color:var(--faint);word-break:break-word}
main{padding:26px 34px 60px;min-width:0}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.page-head h1{margin:0}
.page-head .lede{color:var(--muted);font-size:14px;margin:4px 0 0}
h1{font-size:27px;font-weight:800;letter-spacing:-.03em;margin:0 0 14px;line-height:1.15}
h2{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
.eyebrow{font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)} .faint{color:var(--faint)} .right{text-align:right} .center{text-align:center} .nowrap{white-space:nowrap}
.caption{font-size:12.5px;color:var(--muted)}

/* ---------- section header: eyebrow · hairline · count ---------- */
.section{margin:0 0 26px}
.section-head{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.section-head .eyebrow{flex:none} .section-head .ct{font:500 11px var(--font-mono);letter-spacing:0;color:var(--faint)}
.section-head .rule{flex:1;height:1px;background:var(--line)}
.section-head .tools{display:flex;gap:8px;align-items:center;flex:none}

/* ---------- cards / panels ---------- */
.panel,.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);padding:15px;margin-bottom:12px;box-shadow:var(--shadow)}
.panel > h2:first-child{font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.panel > .row.between > h2{font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.panel > p.muted{font-size:12.5px;margin:-4px 0 12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .row.between{justify-content:space-between} .grow{flex:1}

/* ---------- buttons ---------- */
button,.btn{font:600 13.5px/1.2 var(--font-ui);letter-spacing:-.01em;padding:9px 14px;border:1px solid var(--line-2);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;transition:background var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease}
button:hover,.btn:hover{background:var(--surface-2);text-decoration:none}
button:disabled,.btn[aria-disabled]{color:var(--faint);opacity:.6;cursor:not-allowed;box-shadow:none;background:var(--surface)}
button.primary,.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)} button.primary:hover,.btn.primary:hover{background:#2a2a27}
button.danger{color:var(--danger);border-color:transparent;background:transparent} button.danger:hover{background:var(--support-bg)}
button.ghost,.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)} button.ghost:hover,.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
button.small,.btn.small{padding:5px 10px;font-size:12.5px;border-radius:var(--radius-sm)}
button.icon{width:30px;height:30px;padding:0;justify-content:center;border-radius:var(--radius-sm);border-color:transparent;background:transparent;color:var(--muted)} button.icon:hover{background:var(--surface-2);color:var(--ink)} button.icon svg{width:16px;height:16px}
button:focus-visible,.btn:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(20,20,10,.12),var(--shadow-h);border-color:var(--ring)}

/* ---------- pills (filters) ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--radius-pill);font-size:13px;font-weight:600;background:var(--surface);border:1px solid var(--line-2);color:var(--ink-soft);transition:border-color var(--t-fast) ease}
.pill:hover{border-color:var(--ring);text-decoration:none} .pill.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.pill .ct{font:500 11px var(--font-mono);letter-spacing:0;color:var(--faint)} .pill.active .ct{color:rgba(255,255,255,.65)}

/* ---------- inputs ---------- */
input,select,textarea{font:400 14px var(--font-ui);letter-spacing:-.01em;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);width:100%;box-shadow:var(--shadow);transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 4px rgba(20,20,10,.06)}
input[readonly],input:disabled,textarea:disabled,select:disabled{background:var(--surface-2);color:var(--ink-soft);box-shadow:none}
input.num{text-align:right;font-family:var(--font-mono);letter-spacing:0;font-size:13px} input.calc{background:var(--surface-2);border-style:dashed}
input[type=date]{font-family:var(--font-mono);letter-spacing:0;font-size:13px}
textarea{resize:vertical;line-height:1.4}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)} label.f > span{font-weight:600;color:var(--ink-soft)}
.search{position:relative} .search input{padding-left:36px;border-radius:var(--radius-lg)} .search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--faint);pointer-events:none}
.grid{display:grid;gap:12px} .grid.c4{grid-template-columns:repeat(4,1fr)} .grid.c3{grid-template-columns:repeat(3,1fr)} .grid.c2{grid-template-columns:repeat(2,1fr)}
.span2{grid-column:span 2} .span4{grid-column:span 4}

/* ---------- tables ---------- */
table{border-collapse:collapse;width:100%} th,td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:middle;font-size:13.5px}
th{background:var(--surface-2);font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
tfoot th{font:700 13.5px var(--font-ui);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
tr.clickable{cursor:pointer} tr.clickable:hover td{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}
.panel > table:first-child thead th:first-child{border-top-left-radius:var(--radius-xl)} .panel > table:first-child thead th:last-child{border-top-right-radius:var(--radius-xl)}
td .mono,td.mono{font-family:var(--font-mono);letter-spacing:0;font-size:12.5px}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--radius-pill);font:600 11px var(--font-mono);letter-spacing:0;text-transform:uppercase;white-space:nowrap}
.badge.REPAIR{background:var(--ops-bg);color:var(--ops-fg)} .badge.MELTING{background:var(--docs-bg);color:var(--docs-fg)}
.badge.DRAFT{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)} .badge.FINAL{background:var(--quality-bg);color:var(--quality-fg)}
.badge.INDIA,.badge.DUBAI,.badge.neutral{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}
.badge.OPEN{background:var(--analysis-bg);color:var(--analysis-fg)}

/* ---------- banners ---------- */
.banner{padding:10px 14px;border-radius:var(--radius-lg);margin-bottom:12px;font-size:13.5px;border:1px solid transparent}
.banner.ok{background:var(--quality-bg);color:var(--quality-fg)} .banner.warn{background:var(--docs-bg);color:var(--docs-fg)} .banner.info{background:var(--ops-bg);color:var(--ops-fg)}
.banner a{color:inherit;text-decoration:underline}

/* ---------- annexure lines table (dense variant) ---------- */
.lines-wrap{overflow:auto;padding:0!important} table.lines{min-width:1500px} table.lines th,table.lines td{padding:5px 6px;font-size:12.5px} table.lines td.empty{position:sticky;left:12px;text-align:left}
table.lines input,table.lines select,table.dia input{padding:4px 7px;font-size:12.5px;border-radius:var(--radius-sm);box-shadow:none}
table.lines td.img{width:58px} table.lines img.thumb{width:50px;height:50px;object-fit:contain;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;cursor:zoom-in;display:block}
table.lines .noimg{width:50px;height:50px;border:1px dashed var(--line-2);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--faint);font:500 10px var(--font-mono);letter-spacing:0}
table.lines .btn.small{padding:1px 4px;font-size:10px;border-radius:5px}
tr.dia-row td{background:var(--surface-2)} table.dia{width:auto;min-width:820px;margin:6px 0 8px 60px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden} table.dia th{background:var(--surface-2)} table.dia td{padding:3px 6px} table.dia input{width:84px}
.totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.totals .t{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:10px 12px}
.totals .t .k{font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .totals .t .v{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-top:2px}
.totals .t.big{background:var(--brand);border-color:var(--brand);color:#fff} .totals .t.big .k{color:rgba(255,255,255,.65)}

/* ---------- client cards (Settings → Shipment clients) ---------- */
.client-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:12px}
.client-card{position:relative;display:flex;gap:13px;padding:15px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow);cursor:pointer;text-align:left;animation:rise .4s var(--ease) both;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) ease}
.client-card:hover,.client-card:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-h);border-color:var(--line-2)}
.client-card .tile{flex:none;width:40px;height:40px;border-radius:11px;background:var(--ops-bg);color:var(--ops-fg);display:flex;align-items:center;justify-content:center;font:700 13px var(--font-mono);letter-spacing:0}
.client-card .body{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.client-card .name{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:56px}
.client-card .where{font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ops-fg)}
.client-card .addr{font-size:12.5px;color:var(--muted);white-space:pre-line;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.client-card .addr.empty{font-style:italic;color:var(--faint)}
.client-card .meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:4px;font:500 11px var(--font-mono);letter-spacing:0;color:var(--faint)} .client-card .meta b{font-weight:500;color:var(--muted)}
.client-card .actions{position:absolute;top:10px;right:10px;display:flex;gap:2px;opacity:0;transition:opacity var(--t-fast) ease}
.client-card:hover .actions,.client-card:focus-within .actions{opacity:1}
.client-card .arrow{position:absolute;right:14px;bottom:12px;color:var(--faint);opacity:0;transition:opacity var(--t-fast) ease} .client-card:hover .arrow{opacity:1} .client-card .arrow svg{width:16px;height:16px}
.client-card.add{border-style:dashed;border-color:var(--line-2);box-shadow:none;align-items:center;justify-content:center;min-height:110px;color:var(--muted);font-weight:600;font-size:13.5px;background:transparent}
.client-card.add:hover{background:var(--surface);color:var(--ink)}
.empty-state{text-align:center;padding:64px 20px;color:var(--muted)} .empty-state .ico{width:46px;height:46px;margin:0 auto 12px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--faint)} .empty-state .ico svg{width:22px;height:22px}
.empty-state h3{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 4px} .empty-state p{margin:0;font-size:14px} .empty-state code{font-family:var(--font-mono);letter-spacing:0;font-size:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.savebar{position:sticky;bottom:0;display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:12px 0 6px;background:linear-gradient(to top,var(--bg) 70%,transparent)}

/* ---------- toast / popover / modal ---------- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;padding:11px 18px;border-radius:11px;font-size:14px;font-weight:500;box-shadow:0 14px 40px -12px rgba(20,20,10,.45);z-index:40;animation:rise .25s var(--ease) both} .toast.err{background:var(--danger)}
.suggest{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-h),0 14px 40px -12px rgba(20,20,10,.3);z-index:10;max-height:280px;overflow:auto;min-width:380px;padding:4px}
.suggest div{padding:7px 10px;cursor:pointer;display:flex;gap:10px;align-items:center;border-radius:var(--radius-md);font-size:13.5px} .suggest div:hover{background:var(--surface-2)} .suggest img{width:28px;height:28px;object-fit:contain;border-radius:5px}
.suggest b{font-family:var(--font-mono);letter-spacing:0;font-weight:600;font-size:12.5px}
.rel{position:relative}
.modal-bg{position:fixed;inset:0;background:rgba(23,23,15,.42);display:flex;align-items:center;justify-content:center;z-index:30;padding:20px}
.modal{background:var(--surface);border-radius:var(--radius-xl);padding:22px;min-width:440px;max-width:min(92vw,720px);max-height:90vh;overflow:auto;box-shadow:0 30px 80px -20px rgba(20,20,10,.45);animation:rise .22s var(--ease) both} .modal img{max-width:80vw;max-height:80vh}
.modal h1{font-size:19px;letter-spacing:-.02em;margin-bottom:6px} .modal > p.muted{font-size:13px;margin:0 0 16px}
.modal .foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.modal .foot .left{margin-right:auto}
.kv td{border:none;padding:4px 14px 4px 0;font-size:13.5px} .kv td:first-child{color:var(--muted);white-space:nowrap}
.saving{font:500 11px var(--font-mono);letter-spacing:0;color:var(--faint)}
details summary{cursor:pointer;font-weight:600;color:var(--muted)}

@media (max-width:900px){.grid.c4,.grid.c3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  body{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;padding:10px 18px;border-right:none;border-bottom:1px solid var(--line);gap:4px 10px}
  .sidebar .brand{padding:0 8px 0 0} .sidebar .brand .sub{display:none} .sidebar .eyebrow{display:none}
  .sidebar nav{flex-direction:row;flex-wrap:wrap} .sidebar nav a{padding:7px 10px;font-size:13.5px}
  .sidebar .foot{margin:0 0 0 auto;border:none;padding:0;align-items:flex-end} .sidebar .foot .meta{display:none}
  main{padding:18px}
  .modal{min-width:0;width:100%}
}
.panel.tbl{padding:0;overflow:auto} .panel.tbl td{white-space:nowrap} .panel.tbl td.wrap{white-space:normal;min-width:180px}
.panel.tbl table{min-width:100%} .panel.tbl tbody tr:last-child td{border-bottom:none}

/* ---------- annexure editor: compact, text-first lines ---------- */
#app[data-view=annexures] .panel{padding:12px 14px;margin-bottom:10px}
#app[data-view=annexures] .page-head{margin-bottom:12px}
#app[data-view=annexures] .banner{padding:7px 12px;font-size:13px;margin-bottom:10px}
#app[data-view=annexures] .grid{gap:8px 12px}
#app[data-view=annexures] label.f{gap:3px;font-size:12px} #app[data-view=annexures] label.f > span{font-weight:600;color:var(--muted)}
#app[data-view=annexures] .head input,#app[data-view=annexures] .head select,#app[data-view=annexures] .head textarea{padding:6px 9px;font-size:13.5px;box-shadow:none}
details.more{margin-top:10px;border-top:1px solid var(--line);padding-top:8px} details.more summary{font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);list-style:none;display:flex;align-items:center;gap:6px} details.more summary::before{content:"▸";font-size:10px} details.more[open] summary::before{content:"▾"}
.lines-card{padding:0!important;overflow:hidden}
.lines-tools{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.lines-tools .ct{font:500 11px var(--font-mono);letter-spacing:0;color:var(--faint);margin-right:6px} .lines-tools .rule{flex:1}
.lines-tools input{padding:7px 10px;font-size:13px;box-shadow:none} .lines-tools .search input{padding-left:32px}
.lines-wrap{overflow:auto} table.lines{min-width:1040px;width:100%}
table.lines th{padding:7px 10px;background:var(--surface);border-bottom:1px solid var(--line)} table.lines th.c-n{width:60px} table.lines th.c-size{width:64px} table.lines th.c-qty{width:64px} table.lines th.c-metal{width:250px} table.lines th.c-dia{width:170px} table.lines th.c-act{width:36px}
table.lines td{padding:9px 10px;vertical-align:top;font-size:13px} table.lines tr.line:hover td{background:var(--surface-2)}
table.lines td.right b,table.lines td .sub{display:block} table.lines td.right b{font-family:var(--font-mono);letter-spacing:0;font-weight:600;font-size:13px;padding-top:4px}
table.lines .sub{font:500 11px var(--font-mono);letter-spacing:0;color:var(--muted);margin-top:3px;white-space:nowrap}
/* ghost inputs: look like text, show their box on hover / focus */
table.lines input,table.lines select,table.dia input{border-color:transparent;background:transparent;box-shadow:none;padding:3px 6px;border-radius:6px;font-size:13px;width:auto;transition:border-color var(--t-fast) ease,background var(--t-fast) ease}
table.lines tr:hover input:not(:disabled),table.lines tr:hover select:not(:disabled),table.dia tr:hover input:not(:disabled){border-color:var(--line)}
table.lines input:focus,table.lines select:focus,table.dia input:focus{border-color:var(--ring);background:var(--surface);box-shadow:0 0 0 3px rgba(20,20,10,.06)}
table.lines input:disabled,table.lines select:disabled,table.dia input:disabled{background:transparent;color:var(--ink);opacity:1;-webkit-text-fill-color:var(--ink)} table.lines select:disabled{appearance:none}
table.lines input.num{font-family:var(--font-mono);letter-spacing:0;font-size:12.5px;text-align:right} table.lines input.calc{border-style:dashed;border-color:var(--line)} table.lines input.calc::placeholder{color:var(--muted)}
table.lines input::placeholder{color:var(--faint)}
table.lines td.c-n{width:60px;padding-right:4px} table.lines .sr{font:600 11px var(--font-mono);letter-spacing:0;color:var(--faint);margin-bottom:4px}
table.lines .pic{position:relative;width:40px} table.lines img.thumb{width:40px;height:40px;object-fit:contain;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;cursor:zoom-in;display:block}
table.lines .noimg{width:40px;height:40px;border:1px dashed var(--line-2);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--faint);font:500 9px/1.1 var(--font-mono);letter-spacing:0}
table.lines .up{position:absolute;right:-6px;bottom:-6px;width:18px;height:18px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;cursor:pointer;transition:opacity var(--t-fast) ease;border:none;padding:0} table.lines .up svg{width:11px!important;height:11px!important} table.lines tr:hover .up{opacity:1}
table.lines td.c-item{min-width:300px} table.lines .l1{display:flex;align-items:center;gap:6px;margin-left:-6px} table.lines .l2{margin:1px 0 2px -6px}
table.lines input.code{font-family:var(--font-mono);letter-spacing:0;font-weight:600;font-size:13px;width:200px} table.lines .l2 input{width:100%;color:var(--ink-soft)}
table.lines .meta{display:flex;align-items:center;flex-wrap:wrap;gap:0 2px;margin-left:-6px;font:600 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
table.lines .meta span{padding:0 2px 0 6px} table.lines .meta span:first-child{padding-left:6px} table.lines .meta input{font:500 12px var(--font-mono);letter-spacing:0;color:var(--ink-soft);width:92px;padding:2px 5px;text-transform:none}
table.lines .meta input.num{width:72px} table.lines .c-metal .l1{gap:4px} table.lines .c-metal select{width:76px;font-weight:600;padding-left:4px} table.lines .c-metal .l1 input.num{width:80px} table.lines .c-metal .u{font:500 11px var(--font-mono);letter-spacing:0;color:var(--muted)}
table.lines td.c-size input,table.lines td.c-qty input{width:56px;text-align:right;font-family:var(--font-mono);letter-spacing:0;margin-top:1px;margin-left:-6px} table.lines td.c-qty input{font-weight:600}
table.lines .dia-toggle{border:none;background:transparent;padding:4px 6px 4px 0;font:500 12.5px var(--font-mono);letter-spacing:0;color:var(--ink-soft);border-radius:6px} table.lines .dia-toggle:hover{color:var(--ink);background:var(--surface)}
table.lines td.c-dia .sub{padding-left:0} table.lines td.c-dia{white-space:nowrap}
table.lines td.c-act{padding-left:0;padding-right:8px;text-align:right} table.lines td.c-act .icon{opacity:0} table.lines tr:hover td.c-act .icon{opacity:1}
button.icon.xs{width:24px;height:24px;font-size:12px} button.icon.xs svg{width:13px;height:13px} button.icon.danger{color:var(--danger)} button.icon.danger:hover{background:var(--support-bg)}
tr.dia-row td{background:var(--surface-2);padding:8px 14px 10px 70px;border-bottom:1px solid var(--line)}
table.dia{width:auto;min-width:760px;margin:0 0 6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden} table.dia th{background:var(--surface-2);padding:5px 8px;font-size:10px} table.dia td{padding:2px 6px;font-size:12.5px;border-bottom:1px solid var(--line)} table.dia tbody tr:last-child td{border-bottom:none} table.dia input{width:84px} table.dia td.mono{font-family:var(--font-mono);letter-spacing:0;font-size:12.5px}
table.dia input.num{font-family:var(--font-mono);letter-spacing:0;text-align:right}
#app[data-view=annexures] .totals{grid-template-columns:repeat(8,1fr);gap:8px} #app[data-view=annexures] .totals .t{padding:8px 10px}
#app[data-view=annexures] .totals .t .k{font-size:10px} #app[data-view=annexures] .totals .t .v{font-size:15px;font-family:var(--font-mono);letter-spacing:0;font-weight:600;white-space:nowrap} .totals .t .v small{font:500 10px var(--font-mono);color:var(--muted);margin:0 3px 0 1px} .totals .t.big .v small{color:rgba(255,255,255,.65)}
.totals .t.cta{background:transparent;border:none;padding:0;display:flex;align-items:center;justify-content:flex-end} .totals .t.cta button{width:100%;justify-content:center;white-space:normal;text-align:center;padding:8px 10px;font-size:12.5px;line-height:1.2}
.grid.bottom{align-items:start} .grid.bottom .panel{margin-bottom:0} .grid.bottom h2{font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
#app[data-view=annexures] .kv td{padding:3px 12px 3px 0;font-size:12.5px}
@media (max-width:1300px){#app[data-view=annexures] .totals{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1000px){.grid.bottom{grid-template-columns:1fr}}
table.lines th.c-metal{width:290px} table.lines .c-metal .l1,table.lines .c-metal .meta{flex-wrap:nowrap;white-space:nowrap}
table.lines .c-metal select{width:68px} table.lines .c-metal .l1 input.num{width:72px} table.lines .c-metal .meta input.num{width:68px} table.lines .c-metal .meta input.calc{width:76px}
#app[data-view=annexures] .totals{grid-template-columns:repeat(7,1fr)}
#app[data-view=annexures]{padding-left:24px;padding-right:24px}
table.lines{min-width:1000px} table.lines td.c-item{min-width:250px} table.lines th.c-metal{width:240px} table.lines th.c-dia{width:160px}
table.lines .c-metal .meta input.num{width:62px} table.lines .c-metal .meta input.calc{width:72px} table.lines .c-metal .meta span{padding-left:4px}
table.lines .dia-toggle{font-size:12px} table.lines input.code{width:180px}