/* Waybill — Transport Costing Console */

:root{
  color-scheme:light;
  --asphalt-900:#14171A;
  --asphalt-800:#1E2226;
  --asphalt-700:#2A2F35;
  --paper-50:#F6F4EF;
  --paper-100:#EDEAE1;
  --paper-200:#E2DDD0;
  --ink-900:#20242A;
  --ink-600:#4B5158;
  --ink-400:#868C93;
  --amber-500:#E8A33D;
  --amber-600:#C98423;
  --amber-100:#FBEACD;
  --teal-600:#1F6F78;
  --teal-700:#175860;
  --teal-100:#DCEDEE;
  --rust-500:#C4472B;
  --rust-100:#F6E1DB;
  --green-500:#4C8B5D;
  --green-100:#E1EFE4;
  --border:#DDD8CC;
  --radius:10px;
  --shadow-card: 0 1px 2px rgba(20,23,26,0.06), 0 6px 16px rgba(20,23,26,0.05);
  --surface:#fff;
  --surface-muted:var(--paper-50);
  --surface-hover:#FBFAF7;
  --input-bg:#fff;
}

[data-theme="dark"]{
  color-scheme:dark;
  --paper-50:#181c21;
  --paper-100:#222830;
  --paper-200:#2e3540;
  --ink-900:#e8eaed;
  --ink-600:#b4bac1;
  --ink-400:#808890;
  --border:#3a424c;
  --teal-100:#1a3336;
  --amber-100:#3d3020;
  --green-100:#1e3324;
  --rust-100:#3d2420;
  --shadow-card:0 1px 2px rgba(0,0,0,0.35), 0 6px 16px rgba(0,0,0,0.28);
  --surface:#222830;
  --surface-muted:#181c21;
  --surface-hover:#2a3038;
  --input-bg:#1a1e24;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper-50);
  color:var(--ink-900);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:14px;
  overflow:hidden;
}
body:has(.login-wrap){
  overflow:auto;
}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'IBM Plex Mono',monospace; font-variant-numeric: tabular-nums;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:'Inter',sans-serif;color:var(--ink-900);}
input::placeholder,textarea::placeholder{color:var(--ink-400);}

.brandmark{
  display:flex; align-items:center; gap:10px; margin-bottom:28px;
}
.brandmark .dot{
  width:12px;height:12px;border-radius:50%;background:var(--amber-500);
  box-shadow:0 0 0 4px var(--amber-100);
}
.brandmark span{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; letter-spacing:-0.01em;}
.brand-logo{height:28px;width:auto;max-width:120px;object-fit:contain;flex-shrink:0;}
.brandmark-sidebar .brand-logo{height:32px;max-width:140px;}
.brandmark-sidebar{margin-bottom:34px;padding-left:4px;}
.brandmark-sidebar span{color:#fff;}

.theme-toggle{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--paper-200);
  background:var(--surface);color:var(--ink-600);display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.theme-toggle:hover{background:var(--paper-100);color:var(--ink-900);border-color:var(--ink-400);}
.theme-toggle svg{width:18px;height:18px;}
.theme-toggle .icon-moon{display:none;}
.theme-toggle.is-dark .icon-sun{display:none;}
.theme-toggle.is-dark .icon-moon{display:block;}
.login-theme-wrap{position:absolute;top:20px;right:20px;z-index:3;}
.login-theme-wrap .theme-toggle{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.2);color:#e8eaed;}
.login-theme-wrap .theme-toggle:hover{background:rgba(255,255,255,0.2);color:#fff;}
.sidebar-util{margin-bottom:10px;}
.sidebar .theme-toggle{background:var(--asphalt-700);border-color:var(--asphalt-700);color:#C5C9CD;}
.sidebar .theme-toggle:hover{background:var(--asphalt-800);color:#fff;border-color:var(--asphalt-800);}

.logo-preview{
  margin-bottom:10px;padding:12px;background:var(--surface-muted);border:1px solid var(--border);
  border-radius:8px;display:inline-block;
}
.logo-preview img{max-height:48px;max-width:200px;object-fit:contain;display:block;}

.field{margin-bottom:16px;}
.field label{display:block; font-size:12px; font-weight:600; color:var(--ink-600); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;}
.field input, .field select, .wb-input{
  width:100%; padding:11px 13px; border-radius:8px; border:1.5px solid var(--paper-200);
  background:var(--input-bg); font-size:14px; color:var(--ink-900);
}
.field input:focus, .field select:focus, .wb-input:focus{
  outline:none; border-color:var(--teal-600); box-shadow:0 0 0 3px var(--teal-100);
}
.hint{font-size:11.5px; color:var(--ink-400); margin-top:5px;}

.btn-primary-amber{
  width:100%; padding:12px; border-radius:8px; border:none;
  background:var(--amber-500); color:var(--asphalt-900); font-weight:700; font-size:14.5px;
  margin-top:6px; transition:background .15s ease;
}
.btn-primary-amber:hover{background:var(--amber-600);}

.alert-banner{
  padding:11px 14px; border-radius:8px; margin-bottom:16px; font-size:13px; font-weight:500;
}
.alert-banner.error{background:var(--rust-100); color:var(--rust-500); border:1px solid #efc5bb;}
.alert-banner.success{background:var(--green-100); color:#2f6a3e; border:1px solid #c5e0cb;}
.alert-banner.warn{background:var(--amber-100); color:var(--amber-600); border:1px solid #efd7a8;}

/* ===================== LOGIN ===================== */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1200px 600px at 15% 15%, rgba(31,111,120,0.35), transparent 60%),
    var(--asphalt-900);
  position:relative; overflow:hidden;
  padding:24px;
}
.route-motif{position:absolute; inset:0; opacity:.55; pointer-events:none; width:100%; height:100%;}
.login-card{
  position:relative; z-index:2;
  width:100%; max-width:400px;
  background:var(--paper-50);
  border-radius:14px;
  padding:40px 36px 34px;
  box-shadow:0 30px 60px rgba(0,0,0,0.45);
}
.login-card h1{font-size:24px; font-weight:700; margin:0 0 6px; letter-spacing:-0.01em;}
.login-card p.sub{color:var(--ink-600); margin:0 0 28px; font-size:13.5px;}
.login-foot{margin-top:20px; font-size:12.5px; color:var(--ink-400); text-align:center;}
.login-error{
  background:var(--rust-100); color:var(--rust-500); border-radius:8px;
  padding:10px 12px; font-size:13px; margin-bottom:16px; font-weight:500;
}
.login-error.success{background:var(--green-100); color:#2f6a3e;}
.login-options{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:-4px 0 14px; flex-wrap:wrap;
}
.remember-check{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-600);
  cursor:pointer; user-select:none;
}
.remember-check input{width:15px; height:15px; accent-color:var(--teal-600); margin:0;}
.forgot-link, .back-login{
  font-size:13px; font-weight:600; color:var(--teal-700); text-decoration:none;
}
.forgot-link:hover, .back-login:hover{text-decoration:underline;}
.password-field{position:relative;}
.password-field input{padding-right:44px;}
.password-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:none; border-radius:6px; background:transparent;
  color:var(--ink-400); display:flex; align-items:center; justify-content:center;
}
.password-toggle:hover{background:var(--paper-100); color:var(--ink-600);}
.password-toggle svg{width:18px; height:18px;}
.password-toggle .icon-eye-off{display:none;}
.password-toggle.revealed .icon-eye{display:none;}
.password-toggle.revealed .icon-eye-off{display:block;}
.login-dev-link{
  background:var(--teal-100); border:1px solid #b8d9dc; border-radius:8px;
  padding:10px 12px; margin-bottom:16px; font-size:12px; color:var(--teal-700);
  word-break:break-all;
}
.login-dev-link .label{font-weight:700; margin-bottom:6px;}
.login-dev-link a{color:var(--teal-700); text-decoration:underline;}
.role-badge{
  display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.role-badge.role-app_admin{background:var(--teal-100); color:var(--teal-700);}
.role-badge.role-admin{background:var(--amber-100); color:var(--amber-600);}
.role-badge.role-user{background:var(--paper-100); color:var(--ink-600);}
.company-filter{min-width:180px;}
.company-filter .wb-input{padding:8px 10px; font-size:13px;}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.status-badge{
  display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.status-badge.status-active{background:var(--green-100); color:#2f6a3e;}
.status-badge.status-inactive{background:var(--rust-100); color:var(--rust-500);}
.user-inactive td{opacity:.72;}
.user-inactive td:last-child{opacity:1;}
.icon-btn.toggle:hover{background:var(--amber-100); border-color:var(--amber-600); color:var(--amber-600);}
.icon-btn.toggle.on:hover{background:var(--green-100); border-color:var(--green-500); color:var(--green-500);}
.inline-delete-form{display:inline;}

/* ===================== APP SHELL ===================== */
.app{
  display:grid;
  grid-template-columns:230px 1fr;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}
.sidebar{
  background:var(--asphalt-900); color:#D8DBDE;
  padding:22px 16px; display:flex; flex-direction:column;
  height:100%;
  overflow-y:auto;
  position:sticky;
  top:0;
  align-self:stretch;
}
.sidebar .brandmark{margin-bottom:34px; padding-left:4px;}
.sidebar .brandmark span{color:#fff;}
.nav-group{margin-bottom:22px;}
.nav-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#6D7278; padding:0 10px; margin-bottom:8px; font-weight:600;}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  font-size:13.5px; font-weight:500; color:#C5C9CD; margin-bottom:2px;
}
.nav-item.active{background:var(--asphalt-700); color:#fff;}
.nav-item:hover{color:#fff;}
.nav-item svg{width:16px;height:16px; flex-shrink:0; opacity:.85;}
.sidebar-foot{margin-top:auto; padding-top:16px; border-top:1px solid var(--asphalt-700);}
.help-nav{margin-bottom:10px;}
.user-chip{display:flex; align-items:center; gap:9px; padding:6px 8px;}
.avatar{width:28px;height:28px;border-radius:50%; background:var(--teal-600); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-family:'Space Grotesk',sans-serif;}
.user-chip .name{font-size:13px; font-weight:600; color:#fff;}
.user-chip .company-label{font-size:11px; color:#A8B0B6; margin-top:1px;}
.user-chip .role{font-size:11px; color:#8B9096;}
.logout-link{color:#8B9096;}
.logout-link:hover{color:var(--amber-500);}

.main{
  padding:26px 34px 60px;
  overflow-y:auto;
  height:100%;
  min-width:0;
}
.topbar{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:14px;}
.topbar h1{font-size:24px; margin:0 0 4px; font-weight:700; letter-spacing:-0.01em;}
.topbar .meta{color:var(--ink-400); font-size:13px;}
.btn-new{
  display:flex; align-items:center; gap:8px;
  background:var(--asphalt-900); color:#fff; border:none; padding:11px 18px;
  border-radius:8px; font-weight:600; font-size:13.5px;
}
.btn-new svg{width:15px;height:15px;}
.btn-new:hover{background:var(--asphalt-700);}

.toolbar{
  display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap;
}
.search{
  flex:1; min-width:220px; display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1.5px solid var(--paper-200); border-radius:8px; padding:9px 12px;
}
.search svg{width:15px;height:15px; color:var(--ink-400); flex-shrink:0;}
.search input{border:none; outline:none; font-size:13.5px; width:100%; background:transparent; color:var(--ink-900);}
.chip-filter{
  display:flex; gap:6px; background:var(--surface); border:1.5px solid var(--paper-200); border-radius:8px; padding:4px;
}
.chip-filter button{
  border:none; background:transparent; padding:7px 12px; border-radius:6px; font-size:12.5px; font-weight:600; color:var(--ink-600);
}
.chip-filter button.active{background:var(--asphalt-900); color:#fff;}

/* ===== Table ===== */
.table-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-card); overflow:hidden;
}
table.shipments{width:100%; border-collapse:collapse;}
table.shipments thead th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-400); font-weight:700; padding:12px 16px; background:var(--paper-50);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
table.shipments tbody tr{border-bottom:1px solid var(--paper-100); transition:background .12s;}
table.shipments tbody tr:last-child{border-bottom:none;}
table.shipments tbody tr:hover{background:var(--surface-hover);}
table.shipments tbody tr.flash-error{background:var(--rust-100);}
table.shipments tbody tr.flash-ok{background:var(--green-100);}
table.shipments tbody tr.is-hidden{display:none;}
table.shipments td{padding:14px 16px; vertical-align:middle; font-size:13.5px;}

.route-cell{display:flex; flex-direction:column; gap:2px;}
.route-cell .leg{display:flex; align-items:center; gap:6px; font-weight:600; color:var(--ink-900); flex-wrap:wrap;}
.route-cell .leg .arrow{color:var(--ink-400); font-weight:400;}
.route-cell .ref{font-size:11.5px; color:var(--ink-400); margin-top:2px;}
.route-cell .calc-error{font-size:11.5px; color:var(--rust-500); margin-top:4px; font-weight:500;}
.owner-cell{font-size:13px; color:var(--ink-600); white-space:nowrap;}

.num{font-weight:600; color:var(--ink-900);}
.budget-cell{display:flex; flex-direction:column; gap:3px;}
.budget-val{font-size:15px; font-weight:700; color:var(--ink-900);}
.freshness{display:flex; align-items:center; gap:5px; font-size:11px; color:var(--ink-400);}
.status-dot{width:7px;height:7px;border-radius:50%; flex-shrink:0;}
.status-dot.fresh{background:var(--green-500); box-shadow:0 0 0 3px var(--green-100);}
.status-dot.stale{background:var(--amber-500); box-shadow:0 0 0 3px var(--amber-100);}

.badge-mlp{
  display:inline-flex; align-items:center; background:var(--teal-100); color:var(--teal-700);
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; padding:3px 8px; border-radius:6px;
}

.row-actions{display:flex; align-items:center; gap:4px; justify-content:flex-end;}
.icon-btn{
  width:30px; height:30px; border-radius:7px; border:1px solid var(--paper-200); background:var(--surface);
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink-600);
  transition:all .12s ease; text-decoration:none;
}
.icon-btn svg{width:14px;height:14px;}
.icon-btn:hover{border-color:var(--ink-400); color:var(--ink-900);}
.icon-btn.refresh:hover{background:var(--teal-100); border-color:var(--teal-600); color:var(--teal-700);}
.icon-btn.edit:hover{background:var(--paper-100); border-color:var(--ink-400); color:var(--ink-900);}
.icon-btn.delete:hover{background:var(--rust-100); border-color:var(--rust-500); color:var(--rust-500);}
.icon-btn.reset:hover{background:var(--amber-100); border-color:var(--amber-600); color:var(--amber-600);}
.icon-btn.map:hover{background:var(--amber-100); border-color:var(--amber-600); color:var(--amber-600);}
.reset-user-meta{font-size:13px; color:var(--ink-600); margin:0 0 16px; line-height:1.5;}
.reset-email-form{padding:0 24px 20px; border-top:1px solid var(--paper-100); margin-top:-4px;}
.btn-link-reset{
  width:100%; margin-top:14px; padding:10px 0; border:none; background:transparent;
  color:var(--teal-700); font-size:13px; font-weight:600; text-align:center;
}
.btn-link-reset:hover{text-decoration:underline;}
.modal-foot-split{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.modal-foot-actions{display:flex; gap:8px;}
.password-field .wb-input{padding-right:44px;}
.icon-btn.is-loading svg{animation:spin .8s linear infinite;}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.table-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 16px; font-size:12px; color:var(--ink-400); background:var(--paper-50);
  border-top:1px solid var(--border);
}
.table-foot a{color:var(--teal-600); font-weight:600;}

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-400); font-size:14px;}

/* ===== Settings ===== */
.settings-grid{display:grid; grid-template-columns:1fr 1.6fr; gap:18px; align-items:start;}
.settings-left{display:flex; flex-direction:column; gap:18px;}
.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-card); padding:22px 24px;
}
.panel h2{font-size:17px; margin:0 0 6px; font-weight:700;}
.panel .sub{color:var(--ink-400); font-size:13px; margin:0 0 18px;}
.speed-row{display:flex; gap:8px; align-items:stretch;}
.speed-row input{flex:1;}
.speed-row .unit{
  display:flex; align-items:center; padding:0 12px; background:var(--paper-50);
  border:1.5px solid var(--paper-200); border-radius:8px; color:var(--ink-600); font-size:13px; font-weight:600;
}
.btn-save-dark{
  padding:0 16px; border-radius:8px; border:none; background:var(--asphalt-900); color:#fff; font-weight:700; font-size:13px;
}
.btn-save-dark:hover{background:var(--asphalt-700);}
.mlp-list{display:flex; flex-direction:column; gap:10px; margin-bottom:18px;}
.mlp-row{
  display:grid; grid-template-columns:1fr 1fr auto auto; gap:8px; align-items:center;
  padding:10px; background:var(--paper-50); border:1px solid var(--paper-100); border-radius:8px;
}
.mlp-row input{padding:9px 11px; border-radius:7px; border:1.5px solid var(--paper-200); background:var(--input-bg); color:var(--ink-900); font-size:13px; width:100%;}
.btn-sm{
  padding:8px 12px; border-radius:7px; font-size:12px; font-weight:600; border:1.5px solid var(--paper-200); background:var(--surface); color:var(--ink-600);
}
.btn-sm.primary{background:var(--asphalt-900); color:#fff; border-color:var(--asphalt-900);}
.btn-sm.danger:hover{background:var(--rust-100); border-color:var(--rust-500); color:var(--rust-500);}
.mlp-add{display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:end; padding-top:8px; border-top:1px solid var(--paper-100);}
.mlp-add label{font-size:11px; font-weight:600; color:var(--ink-400); text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:5px;}

/* ===== Modal ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,23,26,0.55); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--surface); border-radius:14px; width:100%; max-width:480px; max-height:88vh; overflow:auto;
  box-shadow:0 30px 70px rgba(0,0,0,0.35);
}
.modal.modal-wide{max-width:640px;}
.modal-head{padding:20px 24px; border-bottom:1px solid var(--paper-100); display:flex; justify-content:space-between; align-items:center;}
.modal-head h2{font-size:17px; margin:0; font-weight:700;}
.modal-close{border:none; background:var(--paper-50); width:28px; height:28px; border-radius:50%; color:var(--ink-600); font-size:14px;}
.modal-body{padding:22px 24px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.modal-foot{padding:16px 24px 22px; display:flex; gap:10px; justify-content:flex-end;}
.btn-ghost{padding:10px 16px; border-radius:8px; border:1.5px solid var(--paper-200); background:var(--surface); font-weight:600; font-size:13px; color:var(--ink-600);}
.btn-save{padding:10px 18px; border-radius:8px; border:none; background:var(--asphalt-900); color:#fff; font-weight:700; font-size:13px;}

.map-preview{
  height:280px; border-radius:10px; background:linear-gradient(135deg, var(--teal-100), var(--paper-100));
  position:relative; overflow:hidden; margin-bottom:16px; border:1px solid var(--border);
}
#routeMap{width:100%; height:100%;}
.route-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px;}
.stat-box{background:var(--paper-50); border:1px solid var(--border); border-radius:9px; padding:12px;}
.stat-box .label{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-400); font-weight:700; margin-bottom:4px;}
.stat-box .val{font-family:'IBM Plex Mono',monospace; font-size:17px; font-weight:600; color:var(--ink-900);}
.btn-maps{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--amber-500); color:var(--asphalt-900); border:none; padding:11px; border-radius:8px; font-weight:700; font-size:13.5px;
  text-decoration:none;
}
.btn-maps:hover{background:var(--amber-600);}

@media (max-width: 900px){
  .app{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    height:100vh;
    height:100dvh;
  }
  .sidebar{
    display:flex; flex-direction:row; align-items:center; padding:12px 16px; gap:12px; flex-wrap:wrap;
    height:auto; overflow:visible; position:relative;
  }
  .sidebar .brandmark{margin-bottom:0;}
  .nav-group{display:flex; margin-bottom:0; gap:4px;}
  .nav-label{display:none;}
  .sidebar-foot{
    display:flex; align-items:center; gap:8px; margin-top:0; padding-top:0; border-top:none; margin-left:auto;
  }
  .sidebar-foot .help-nav{margin-bottom:0;}
  .sidebar-foot .user-chip{display:none;}
  .main{padding:20px; overflow-y:auto; min-height:0;}
  table.shipments thead{display:none;}
  table.shipments, table.shipments tbody, table.shipments tr, table.shipments td{display:block; width:100%;}
  table.shipments tbody tr{padding:14px 4px; border-bottom:1px solid var(--paper-100);}
  table.shipments td{padding:4px 12px;}
  .row-actions{justify-content:flex-start; margin-top:8px;}
  .grid-2,.settings-grid,.route-stats,.mlp-row,.mlp-add,.help-layout,.help-grid{grid-template-columns:1fr;}
  .help-toc{position:static;}
}

/* ===== Help / How it works ===== */
.help-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:18px;
  align-items:start;
}
.help-toc{
  position:sticky;
  top:20px;
  padding:18px 16px !important;
}
.help-toc-title{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-400); font-weight:700; margin-bottom:12px;
}
.help-toc a{
  display:block; padding:7px 8px; border-radius:6px; font-size:13px; color:var(--ink-600);
  font-weight:500; margin-bottom:2px;
}
.help-toc a:hover{background:var(--paper-50); color:var(--ink-900);}
.help-content{display:flex; flex-direction:column; gap:14px;}
.help-section{scroll-margin-top:20px;}
.help-section h2{font-size:18px; margin:0 0 10px; font-weight:700; letter-spacing:-0.01em;}
.help-section h3{font-size:14px; margin:0 0 6px; font-weight:700;}
.help-section p{margin:0 0 12px; color:var(--ink-600); line-height:1.55; font-size:13.5px;}
.help-section p:last-child{margin-bottom:0;}
.help-list{margin:0 0 12px; padding-left:18px; color:var(--ink-600); line-height:1.6; font-size:13.5px;}
.help-list li{margin-bottom:6px;}
.help-note{
  background:var(--amber-100); border:1px solid #efd7a8; color:var(--amber-600);
  padding:10px 12px; border-radius:8px; font-size:13px; margin:0;
}
.help-inline-link{color:var(--teal-600); font-weight:600;}
.help-inline-link:hover{text-decoration:underline;}

.help-steps{list-style:none; margin:0; padding:0;}
.help-steps li{
  display:flex; gap:12px; align-items:flex-start; margin-bottom:14px;
  color:var(--ink-600); font-size:13.5px; line-height:1.5;
}
.help-steps li:last-child{margin-bottom:0;}
.step-num{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:var(--asphalt-900); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px;
}

.help-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;}
.help-card{
  background:var(--paper-50); border:1px solid var(--border); border-radius:9px; padding:14px;
}
.help-card p{margin:0; font-size:12.5px;}

.help-actions{display:flex; flex-direction:column; gap:12px;}
.help-action{display:flex; gap:12px; align-items:flex-start;}
.help-action p{margin:4px 0 0; font-size:13px;}
.help-action-icon{
  width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex-shrink:0; border:1px solid var(--paper-200); background:var(--surface);
}
.help-action-icon.map{background:var(--amber-100); color:var(--amber-600); border-color:#efd7a8;}
.help-action-icon.refresh{background:var(--teal-100); color:var(--teal-700); border-color:#b9d8da;}
.help-action-icon.delete{background:var(--rust-100); color:var(--rust-500); border-color:#efc5bb;}

.formula-block{
  background:var(--asphalt-900); color:#D8DBDE; border-radius:10px; padding:14px 16px; margin:0 0 14px;
}
.formula-line{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:8px 0; border-bottom:1px solid var(--asphalt-700); font-size:13px;
}
.formula-line:last-child{border-bottom:none; padding-bottom:0;}
.formula-line:first-child{padding-top:0;}
.f-label{color:#8B9096; font-weight:600; min-width:110px;}
.f-val{color:#fff; text-align:right;}

.help-freshness{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.fresh-sample{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--paper-50); border:1px solid var(--border); border-radius:9px; padding:14px;
}
.fresh-sample p{margin:4px 0 0; font-size:12.5px;}

@media (max-width: 900px){
  .help-freshness{grid-template-columns:1fr;}
}