:root{
  --bg:#F3F4F7; --surface:#FFFFFF; --surface-2:#EBEDF2; --border:#DFE2E9;
  --text:#171A21; --text-muted:#666E7C; --text-faint:#98A0AC;
  --brand:#0E2A47; --brand-2:#173C61; --brand-ink:#CBD9E8;
  --accent:#B9832A; --accent-ink:#7A5514; --accent-bg:#F7ECD8;
  --green:#1D8A57; --green-bg:#E4F5EC; --red:#D0473F; --red-bg:#FBEAE9;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 1px rgba(16,24,40,.04);
  --shadow-lg:0 12px 32px rgba(16,24,40,.18);
  --radius:10px;
}
:root[data-theme="dark"]{
    --bg:#0B0E14; --surface:#131824; --surface-2:#1A2130; --border:#262E3E;
    --text:#E9EBF1; --text-muted:#9CA5B5; --text-faint:#69707F;
    --accent:#E0B15C; --accent-ink:#F6DFA9; --accent-bg:rgba(224,177,92,.13);
    --green:#3FC98A; --green-bg:rgba(63,201,138,.13);
    --red:#F0817A; --red-bg:rgba(240,129,122,.13);
    --brand-2:#8FB6DE;
    --shadow:0 1px 2px rgba(0,0,0,.5); --shadow-lg:0 12px 32px rgba(0,0,0,.55);
  }
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;
  font-size:14px; line-height:1.6;
}
.num{font-family:'IBM Plex Mono','Manrope',monospace; font-variant-numeric:tabular-nums;}
h1,h2,h3{margin:0; font-weight:700;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:14px;}

/* ---------- Login ---------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:radial-gradient(circle at 15% 20%, var(--accent-bg), transparent 45%), var(--bg);
}
.login-card{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow-lg); padding:36px 30px;
}
.login-brand{display:flex; align-items:center; gap:10px; margin-bottom:26px;}
.login-brand .mark{
  width:40px; height:40px; border-radius:10px; background:var(--brand);
  display:flex; align-items:center; justify-content:center; flex:none; color:#fff;
}
.login-brand .mark svg{width:22px; height:22px;}
.login-brand h1{font-size:17px;}
.login-brand p{margin:2px 0 0; font-size:12px; color:var(--text-muted);}
.login-hint{margin-top:18px; font-size:11.5px; color:var(--text-faint); line-height:1.7; text-align:center;}

/* ---------- Forms ---------- */
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--text-muted); margin-bottom:6px;}
.form-control{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); outline:none; transition:border-color .15s;
}
.form-control:focus{border-color:var(--accent);}
textarea.form-control{resize:vertical;}
.helptext{font-size:11.5px; color:var(--text-faint); margin-top:4px;}
.errorlist{list-style:none; margin:4px 0 0; padding:0; color:var(--red); font-size:12px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px 12px;}
.form-grid .span2{grid-column:1/-1;}
@media (max-width:520px){.form-grid{grid-template-columns:1fr;}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 18px; border-radius:8px; border:1px solid transparent; font-weight:600;
  font-size:13.5px; transition:filter .15s, background .15s; white-space:nowrap;
}
.btn:active{filter:brightness(.92);}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-2);}
.btn-accent{background:var(--accent); color:#241a05;}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-danger{background:var(--red-bg); color:var(--red); border-color:transparent;}
.btn-block{width:100%;}
.btn-sm{padding:6px 12px; font-size:12.5px; border-radius:7px;}

.alert{border-radius:8px; padding:10px 14px; font-size:13px; margin-bottom:14px;}
.alert-success{background:var(--green-bg); color:var(--green);}
.alert-error{background:var(--red-bg); color:var(--red);}
.error-box{background:var(--red-bg); color:var(--red); border-radius:8px; padding:10px 12px; font-size:12.5px; margin-bottom:14px;}

/* ---------- Shell ---------- */
.shell{display:flex; min-height:100vh;}
.sidebar{
  width:230px; flex:none; background:var(--brand); color:var(--brand-ink);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  padding:18px 14px; z-index:20;
}
.sb-brand{display:flex; align-items:center; gap:10px; padding:4px 6px 20px;}
.sb-brand .mark{
  width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; flex:none; color:#fff;
}
.sb-brand .mark svg{width:19px; height:19px;}
.sb-brand strong{color:#fff; font-size:14.5px; display:block;}
.sb-brand span{font-size:10.5px; color:var(--brand-ink); opacity:.75;}
.sb-nav{display:flex; flex-direction:column; gap:3px; flex:1;}
.sb-link{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
  color:var(--brand-ink); font-size:13px; font-weight:600; opacity:.82;
  border:1px solid transparent; background:none; text-align:start; width:100%;
}
.sb-link svg{width:16px; height:16px; flex:none;}
.sb-link:hover{background:rgba(255,255,255,.06); opacity:1;}
.sb-link.active{background:rgba(255,255,255,.12); opacity:1; color:#fff; border-color:rgba(255,255,255,.08);}
.sb-foot{border-top:1px solid rgba(255,255,255,.1); padding-top:12px; margin-top:12px;}
.sb-user{display:flex; align-items:center; gap:9px; padding:6px; border-radius:8px;}
.sb-avatar{
  width:30px; height:30px; border-radius:50%; background:var(--accent); color:#241a05;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex:none;
}
.sb-user-name{color:#fff; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sb-user-role{font-size:10.5px; color:var(--brand-ink); opacity:.75;}
.sb-foot-actions{display:flex; gap:6px; margin-top:8px;}
.sb-foot-actions a,.sb-foot-actions button{
  flex:1; background:rgba(255,255,255,.06); color:var(--brand-ink); border:none;
  padding:7px; border-radius:7px; font-size:11.5px; font-weight:600; text-align:center;
}
.sb-foot-actions a:hover,.sb-foot-actions button:hover{background:rgba(255,255,255,.13); color:#fff;}

.main{flex:1; min-width:0;}
.view{padding:22px 26px 60px; max-width:1180px; width:100%; margin:0 auto;}
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:20px; flex-wrap:wrap;}
.page-head h2{font-size:20px;}
.page-head p{margin:4px 0 0; font-size:12.5px; color:var(--text-muted);}
.head-actions{display:flex; gap:8px; flex-wrap:wrap;}

/* ---------- KPIs ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:20px;}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);}
.kpi-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.kpi-label{font-size:12px; color:var(--text-muted); font-weight:600;}
.kpi-icon{width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none;}
.kpi-icon svg{width:16px; height:16px;}
.kpi-value{font-size:22px; font-weight:700;}
.kpi-sub{font-size:11.5px; color:var(--text-faint); margin-top:2px;}
.tone-brand{background:var(--surface-2); color:var(--brand-2);}
.tone-accent{background:var(--accent-bg); color:var(--accent-ink);}
.tone-green{background:var(--green-bg); color:var(--green);}
.tone-red{background:var(--red-bg); color:var(--red);}

.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:18px;}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); gap:10px; flex-wrap:wrap;}
.panel-head h3{font-size:14.5px;}
.panel-body{padding:16px 18px;}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{
  text-align:start; font-size:11.5px; color:var(--text-muted); font-weight:600;
  padding:9px 14px; border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td{padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
.cell-muted{color:var(--text-muted);}
.row-actions{display:flex; gap:6px; justify-content:flex-end;}
.icon-btn{
  width:28px; height:28px; border-radius:7px; border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; color:var(--text-muted);
}
.icon-btn svg{width:14px; height:14px;}
.icon-btn:hover{background:var(--surface-2); color:var(--text);}

.badge{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:99px; font-size:11.5px; font-weight:600;}
.badge-dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
.badge-stock{background:var(--accent-bg); color:var(--accent-ink);}
.badge-sold{background:var(--green-bg); color:var(--green);}
.badge-inactive{background:var(--red-bg); color:var(--red);}
.empty-state{padding:44px 20px; text-align:center; color:var(--text-muted);}
.empty-state svg{width:34px; height:34px; margin-bottom:10px; color:var(--text-faint);}

.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.toolbar input[type=search],.toolbar select,.toolbar input[type=date]{
  padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:12.5px;
}
.seg{display:flex; background:var(--surface-2); border-radius:8px; padding:3px; gap:2px;}
.seg a{padding:6px 12px; border-radius:6px; font-size:12px; font-weight:600; color:var(--text-muted);}
.seg a.active{background:var(--surface); color:var(--text); box-shadow:var(--shadow);}

.profit-pos{color:var(--green); font-weight:600;}
.profit-neg{color:var(--red); font-weight:600;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:28px; max-width:480px; margin:40px auto;}

.chart-wrap{position:relative; height:230px;}
.topbar{
  display:none; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; background:var(--brand); position:sticky; top:0; z-index:25;
}
.topbar a{color:#fff;}

@media (max-width:900px){
  .sidebar{display:none;}
  .topbar{display:flex;}
  .view{padding:16px 14px 50px;}
}

/* =====================================================================
   WORLD AUTO IMPORT additions
   ===================================================================== */
:root{ --yellow:#FFC61A; --yellow-ink:#3D2C00; --yellow-bg:#FFF6D6; --blue:#2F6FEB; --blue-bg:#E7EFFE; --violet:#7B4CD8; --violet-bg:#F0EAFC; }
:root[data-theme="dark"]{ --yellow-bg:rgba(255,198,26,.14); --blue:#7EA6F7; --blue-bg:rgba(126,166,247,.14); --violet:#B79AF0; --violet-bg:rgba(183,154,240,.14); }
body{ background:var(--bg); }
.link{ color:var(--brand-2); font-weight:600; }
.link:hover{ text-decoration:underline; }
.req{ color:var(--red); }
.warn-text{ color:var(--accent-ink) !important; font-weight:600; }
.back-link{ display:inline-block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
.back-link:hover{ color:var(--text); }
.cell-end{ text-align:end; }
.alert-info{ background:var(--blue-bg); color:var(--blue); }
.alert .link{ color:inherit; text-decoration:underline; }
a.kpi{ display:block; transition:transform .12s, box-shadow .12s; }
a.kpi:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.panel-foot{ padding:12px 18px; border-top:1px solid var(--border); }
.panel.narrow{ max-width:760px; }
.btn svg{ width:15px; height:15px; flex:none; }
.btn-danger-solid{ background:var(--red); color:#fff; }
.btn-danger svg{ width:16px; height:16px; }
.form-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; }
.sticky-actions{ position:sticky; bottom:0; background:linear-gradient(transparent, var(--bg) 35%); padding:18px 0 10px; margin-top:0; }

/* ---- logo --------------------------------------------------------------- */
.logo-mark{ width:36px; height:36px; flex:none; border-radius:9px; display:block; }
.sidebar .logo-mark{ box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.login-brand .logo-mark{ width:44px; height:44px; }
.wordmark{ font-weight:800; letter-spacing:-.02em; color:var(--brand); }
.wordmark span{ color:var(--accent); }
.wordmark-light{ color:#fff; }
.wordmark-light span{ color:#E7BD6A; }
h1.wordmark{ font-size:24px; line-height:1.1; }
:root[data-theme="dark"] h1.wordmark{ color:#fff; }
.sb-brand{ color:inherit; }
.sb-brand strong.wordmark{ font-size:19px; }

/* ---- form grid ---------------------------------------------------------- */
.form-grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.form-grid .span-all, .spec .span-all{ grid-column:1/-1; }
@media (max-width:860px){ .form-grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .form-grid-3{ grid-template-columns:1fr; } }
select.form-control{ appearance:auto; }
.field.has-error .form-control{ border-color:var(--red); }
.field-check label{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text); cursor:pointer; }
.field-check input{ width:17px; height:17px; accent-color:var(--brand-2); }
.money-preview{ font-size:11.5px; color:var(--accent-ink); font-weight:600; margin-top:4px; min-height:1em; font-family:'IBM Plex Mono',monospace; }
.customer-search{ margin-bottom:6px; }
.customer-select[size]:not([size="1"]){ padding:4px; }
.helptext ul{ margin:4px 0 0; padding-inline-start:18px; }
input[type=file].form-control{ padding:8px; background:var(--surface-2); }

/* ---- toolbar ------------------------------------------------------------- */
.toolbar{ margin-bottom:14px; }
.toolbar input[type=search]{ flex:1; min-width:220px; }
.toggle{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-muted); cursor:pointer; }
.pager{ display:flex; align-items:center; justify-content:center; gap:12px; padding:14px; font-size:12.5px; border-top:1px solid var(--border); }
tr.row-link{ cursor:pointer; }

/* ---- stage badges --------------------------------------------------------- */
.stage-badge{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:99px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.st-registered{ background:var(--surface-2); color:var(--text-muted); }
.st-payment{ background:var(--accent-bg); color:var(--accent-ink); }
.st-ship{ background:var(--blue-bg); color:var(--blue); }
.st-ship2{ background:var(--violet-bg); color:var(--violet); }
.st-done{ background:var(--green-bg); color:var(--green); }
.stage-strip{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.stage-cell{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; box-shadow:var(--shadow); min-width:0; }
.stage-cell:hover{ border-color:var(--accent); }
.stage-dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.stage-dot.st-registered{ background:var(--text-faint); }
.stage-dot.st-payment{ background:var(--accent); }
.stage-dot.st-ship{ background:var(--blue); }
.stage-dot.st-ship2{ background:var(--violet); }
.stage-dot.st-done{ background:var(--green); }
.stage-cell-label{ font-size:11.5px; font-weight:600; color:var(--text-muted); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stage-cell-count{ font-weight:700; font-size:16px; }
@media (max-width:900px){ .stage-strip{ grid-template-columns:1fr 1fr; } }

/* ---- the yellow "edited" button (admin) ----------------------------------- */
.edit-flag{
  display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 11px; border-radius:99px;
  background:var(--yellow); color:var(--yellow-ink); font-size:12px; font-weight:800; white-space:nowrap;
  box-shadow:0 0 0 3px rgba(255,198,26,.28), 0 4px 12px rgba(255,170,0,.35);
  transition:transform .12s, box-shadow .12s; animation:edit-glow 2.4s ease-in-out infinite;
}
.edit-flag:hover{ transform:translateY(-1px) scale(1.03); box-shadow:0 0 0 4px rgba(255,198,26,.4), 0 6px 16px rgba(255,170,0,.45); }
.edit-flag svg{ width:14px; height:14px; }
.edit-flag-count{ background:var(--yellow-ink); color:var(--yellow); min-width:22px; height:22px; padding:0 6px; border-radius:99px;
  display:inline-flex; align-items:center; justify-content:center; font-size:11.5px; font-family:'IBM Plex Mono',monospace; }
@keyframes edit-glow{ 0%,100%{ box-shadow:0 0 0 3px rgba(255,198,26,.25), 0 4px 12px rgba(255,170,0,.3); } 50%{ box-shadow:0 0 0 6px rgba(255,198,26,.12), 0 4px 16px rgba(255,170,0,.45); } }
@media (prefers-reduced-motion: reduce){ .edit-flag{ animation:none; } }
.money-flag{ display:inline-flex; padding:3px 9px; border-radius:99px; background:var(--red-bg); color:var(--red); font-size:11px; font-weight:800; white-space:nowrap; }

/* ---- edit history --------------------------------------------------------- */
.edit-card.edit-money{ border-color:var(--red); }
table.diff td{ white-space:normal; vertical-align:top; }
.diff-old{ color:var(--red); text-decoration:line-through; text-decoration-color:rgba(208,71,63,.5); }
.diff-new{ color:var(--green); font-weight:700; }
.diff-arrow{ color:var(--text-faint); width:24px; text-align:center; }
tr.diff-money{ background:var(--yellow-bg); }
tr.diff-money:hover{ background:var(--yellow-bg); }
[dir=rtl] .diff-arrow{ transform:scaleX(-1); }

/* ---- lists & cards ---------------------------------------------------------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.two-col > .panel{ margin-bottom:0; }
.detail-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:960px){ .two-col, .detail-grid{ grid-template-columns:1fr; } }
.two-col{ margin-bottom:18px; }
.mini-list{ display:flex; flex-direction:column; }
.mini-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 18px; border-bottom:1px solid var(--border); }
.mini-row:last-child{ border-bottom:none; }
a.mini-row:hover{ background:var(--surface-2); }
.mini-row strong{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-row .cell-muted{ font-size:12px; }
.row-actions{ align-items:center; }
.inline-form{ display:flex; gap:8px; align-items:center; }
.inline-form select{ flex:1; padding:7px 10px; font-size:12.5px; }

/* ---- spec lists --------------------------------------------------------------- */
.spec{ display:grid; grid-template-columns:1fr 1fr; margin:0; }
.spec > div{ padding:10px 18px; border-bottom:1px solid var(--border); min-width:0; }
.spec dt{ font-size:11.5px; color:var(--text-muted); font-weight:600; }
.spec dd{ margin:2px 0 0; font-weight:600; overflow-wrap:anywhere; }
.spec-1{ grid-template-columns:1fr; }
@media (max-width:520px){ .spec{ grid-template-columns:1fr; } }

/* ---- costs ---------------------------------------------------------------------- */
.costs{ padding:6px 0 0; }
.cost-row{ display:flex; justify-content:space-between; gap:12px; padding:10px 18px; border-bottom:1px solid var(--border); font-size:13px; }
.cost-row .num{ font-weight:600; white-space:nowrap; }
.cost-row.pending .num{ color:var(--text-faint); font-weight:400; }
.cost-total{ display:flex; justify-content:space-between; gap:12px; padding:14px 18px; background:var(--brand); color:#fff; font-weight:800; border-radius:0 0 var(--radius) var(--radius); }
.cost-total .num{ font-size:16px; white-space:nowrap; }

/* ---- journey timeline ---------------------------------------------------------- */
.timeline{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); counter-reset:tl; }
.tl-step{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:0 6px; }
.tl-step::before{ content:''; position:absolute; top:16px; inset-inline-start:calc(-50% + 18px); inset-inline-end:calc(50% + 18px); height:3px; background:var(--border); border-radius:3px; }
.tl-step:first-child::before{ display:none; }
.tl-step.done::before{ background:var(--green); }
.tl-dot{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--text-faint); font-weight:800; font-size:13px; border:2px solid var(--border); z-index:1; }
.tl-dot svg{ width:16px; height:16px; }
.tl-step.done .tl-dot{ background:var(--green); border-color:var(--green); color:#fff; }
.tl-step.current .tl-dot{ box-shadow:0 0 0 5px var(--green-bg); }
.tl-label{ font-size:12.5px; font-weight:700; line-height:1.35; }
.tl-step:not(.done) .tl-label{ color:var(--text-muted); font-weight:600; }
.tl-date{ font-size:11.5px; color:var(--text-muted); }
.tl-step:not(.done) .tl-date{ color:var(--text-faint); }
@media (max-width:700px){
  .timeline{ grid-template-columns:1fr; gap:0; }
  .tl-step{ flex-direction:row; text-align:start; padding:0 0 18px; gap:12px; }
  .tl-step::before{ top:auto; bottom:calc(100% - 16px); inset-inline-start:16px; inset-inline-end:auto; width:3px; height:calc(100% - 16px); }
  .tl-step:first-child::before{ display:none; }
  .tl-label{ flex:1; }
}
.stage-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:18px; padding-top:14px; border-top:1px dashed var(--border); }
.done-text{ color:var(--green); font-weight:700; font-size:13px; }

/* ---- customer order cards ------------------------------------------------------ */
.order-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:16px; }
.order-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; }
.order-card-main{ padding:18px; display:flex; flex-direction:column; gap:14px; flex:1; }
.order-card-main:hover{ background:var(--surface-2); }
.order-card-top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.order-card-title{ font-weight:800; font-size:15.5px; line-height:1.3; }
.order-card-top .cell-muted{ font-size:11.5px; overflow-wrap:anywhere; }
.mini-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.mini-step{ height:6px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); }
.mini-step.done{ background:var(--green); border-color:var(--green); }
.mini-step.current{ background:var(--accent); border-color:var(--accent); }
.order-card-foot{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; }
.order-card-actions{ display:flex; gap:8px; padding:12px 18px; border-top:1px solid var(--border); }

/* ---- photos ----------------------------------------------------------------------- */
.photo-group-title{ margin:4px 0 10px; font-size:13px; font-weight:700; }
.photo-group-title + .photo-grid{ margin-bottom:20px; }
.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px; }
.photo{ position:relative; margin:0; aspect-ratio:4/3; border-radius:9px; overflow:hidden; background:var(--surface-2); border:1px solid var(--border); }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; }
.photo:hover img{ transform:scale(1.04); }
.photo form{ position:absolute; top:6px; inset-inline-end:6px; }
.photo-del{ width:26px; height:26px; border-radius:50%; border:none; background:rgba(0,0,0,.6); color:#fff; font-size:17px; line-height:1; opacity:0; transition:opacity .15s; }
.photo:hover .photo-del, .photo-del:focus{ opacity:1; }
@media (hover:none){ .photo-del{ opacity:1; } }
.upload-box{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px; padding:14px; border:1.5px dashed var(--border); border-radius:10px; background:var(--surface-2); }
.upload-box select{ width:auto; }
.upload-box input[type=file]{ flex:1; min-width:200px; width:auto; }
.lightbox{ position:fixed; inset:0; background:rgba(5,8,14,.92); z-index:100; display:flex; align-items:center; justify-content:center; padding:40px 60px; }
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%; max-height:100%; border-radius:6px; box-shadow:0 20px 50px rgba(0,0,0,.6); }
.lightbox button{ position:absolute; background:rgba(255,255,255,.1); color:#fff; border:none; width:44px; height:44px; border-radius:50%; font-size:26px; line-height:1; }
.lightbox button:hover{ background:rgba(255,255,255,.2); }
.lb-close{ top:14px; inset-inline-end:14px; }
.lb-prev{ inset-inline-start:10px; top:50%; }
.lb-next{ inset-inline-end:10px; top:50%; }

.confirm-box{ margin:40px auto; }
.confirm-box h2{ font-size:18px; margin-bottom:6px; }

/* ---- mobile ------------------------------------------------------------------------- */
.topbar-brand{ display:flex; align-items:center; gap:8px; }
.topbar-brand .logo-mark{ width:28px; height:28px; box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.topbar-brand .wordmark{ font-size:17px; }
.topbar-btn{ background:rgba(255,255,255,.1); color:#fff; border:none; padding:7px 12px; border-radius:7px; font-size:12px; font-weight:600; }
.mobile-nav{ display:none; }
@media (max-width:900px){
  .mobile-nav{ display:flex; gap:4px; overflow-x:auto; padding:8px 12px; background:var(--brand); position:sticky; top:52px; z-index:24; }
  .mobile-nav .sb-link{ width:auto; white-space:nowrap; padding:7px 11px; }
  .mobile-nav .sb-link svg{ display:none; }
}
.sb-brand .wordmark span{ font-size:inherit; opacity:1; display:inline; color:#E7BD6A; }

/* Keep long names, amounts and uploads inside narrow mobile screens. */
.field,.panel,.two-col > *,.detail-grid > *{ min-width:0; }
.verification-page{ max-width:900px; margin:0 auto; padding:24px 14px; overflow-wrap:anywhere; }
.verification-brand{ color:var(--brand-2); font-size:24px; font-weight:800; margin-bottom:18px; }
.verification-brand span{ display:block; font-size:13px; color:var(--text-muted); font-weight:500; }
.verification-status h1{ font-size:24px; margin:14px 0 8px; }
.verification-id{ font-size:12px; color:var(--text-muted); overflow-wrap:anywhere; }
.verification-page .panel{ margin-bottom:12px; }
.verification-page .panel-body p{ margin:6px 0; }
.verification-page .panel-head{ padding:10px 14px; }
.verification-page .spec > div{ padding:8px 14px; }
@media (max-width:600px){
  .verification-page{ padding:14px 10px; font-size:14px; }
  .verification-page .two-col{ gap:12px; margin-bottom:12px; }
  .verification-page .spec{ grid-template-columns:minmax(0,1fr); }
  .verification-page .spec > div{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:10px; align-items:start; padding:8px 12px; }
  .verification-page .spec dt{ font-size:12px; }
  .verification-page .spec dd{ margin:0; font-size:14px; }
  .verification-page .cost-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
  .verification-page .cost-row .num{ white-space:normal; overflow-wrap:anywhere; max-width:145px; }
}
.form-control{ max-width:100%; }
.page-head,.panel-head,.cost-row,.order-card-title{ overflow-wrap:anywhere; }
.order-cards{ grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }
.table-wrap{ max-width:100%; overscroll-behavior-inline:contain; }
.mini-row > *{ min-width:0; }
.mobile-nav .sb-link{ flex-shrink:0; }
.tl-dot{ flex-shrink:0; }
.tl-date{ flex-shrink:0; }

@media (max-width:600px){
  .topbar{ min-height:68px; }
  .mobile-nav{ top:68px; }
  .view{ padding:14px 12px 36px; }
  .panel-body,.panel-head,.panel-foot{ padding:14px 12px; }
  .form-control,.toolbar input,.toolbar select,.inline-form select{ font-size:16px; }
  .btn,.topbar-btn,.mobile-nav .sb-link{ min-height:44px; }
  .head-actions{ width:100%; }
  .head-actions .btn{ flex:1 1 auto; }
  .toolbar input[type=search],.toolbar select{ width:100%; min-width:0; max-width:100%; }
  .mini-row{ flex-wrap:wrap; padding:12px; }
  .mini-row > :first-child{ flex:1 1 100%; }
  .mini-row strong{ white-space:normal; overflow-wrap:anywhere; }
  .mini-row .row-actions{ flex-wrap:wrap; justify-content:flex-start; }
  .stage-badge{ max-width:100%; white-space:normal; }
  .stage-cell-label{ white-space:normal; overflow:visible; }
  .order-card-top,.order-card-foot{ flex-wrap:wrap; gap:10px; }
  .order-card-main{ padding:14px; }
  .order-card-actions{ padding:12px 14px; flex-wrap:wrap; }
  .cost-row,.cost-total{ flex-wrap:wrap; padding:12px; }
  .cost-row .num,.cost-total .num{ margin-inline-start:auto; }
  .inline-form{ flex-wrap:wrap; }
  .inline-form select{ flex:1 1 100%; min-width:0; max-width:100%; }
  .upload-box{ padding:10px; }
  .upload-box input[type=file],.upload-box select{ width:100%; min-width:0; max-width:100%; flex-basis:100%; }
  .photo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .photo-del{ width:44px; height:44px; opacity:1; }
  .lightbox{ padding:68px 12px; }
  .lightbox .lb-prev,.lightbox .lb-next{ top:auto; bottom:14px; }
  .pager{ flex-wrap:wrap; gap:8px; }
  .sticky-actions{ padding-bottom:max(10px,env(safe-area-inset-bottom)); }
  .form-actions .btn{ flex:1 1 auto; }
  .tl-step{ gap:8px; }
  .tl-label{ min-width:0; overflow-wrap:anywhere; }
  .tl-date{ font-size:10px; }
}

/* Keep list columns intact; scroll only the list on narrow screens. */
.table-wrap{min-width:0; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.table-wrap table:not(.diff){min-width:700px;}
.table-wrap .stage-badge,.table-wrap .row-actions{white-space:nowrap; flex-wrap:nowrap;}

:root{color-scheme:light;}
:root[data-theme="dark"]{color-scheme:dark;}
.theme-toggle{position:fixed;inset-inline-end:16px;bottom:16px;z-index:100;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:24px;padding:10px 16px;min-height:44px;box-shadow:var(--shadow-lg);}
body{padding-bottom:64px;}

.finance-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0;}
.finance-summary>div{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;min-width:0;}
.finance-summary span,.month-grid span{display:block;color:var(--text-muted);font-size:12px;margin-bottom:8px;}
.finance-summary strong{font-size:20px;overflow-wrap:anywhere;}
.finance-summary .finance-highlight{border-color:var(--accent);background:var(--accent-bg);}
.finance-eyebrow{font-size:11px;letter-spacing:.14em;color:var(--accent-ink);}
.month-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--border);}
.month-grid a{background:var(--surface);padding:16px;overflow-wrap:anywhere;}
.month-grid a.selected{background:var(--accent-bg);}
.payment-note{white-space:normal;min-width:240px;max-width:450px;overflow-wrap:anywhere;}
@media(max-width:1000px){.finance-summary{grid-template-columns:repeat(2,minmax(0,1fr));}.month-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:480px){.finance-summary>div{padding:12px;}.finance-summary strong{font-size:16px;}.month-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

.stage-payments .panel-head p {margin: 6px 0 0; font-size: .85rem;}
.stage-payments td small {display:block; margin-top:4px;}
.stage-payment-badge {display:inline-block; padding:5px 10px; border-radius:20px; background:var(--bg); white-space:nowrap;}
.stage-payment-badge.settled {background:var(--green-bg);color:var(--green);}
.stage-payment-badge.unpaid {background:var(--accent-bg);color:var(--accent-ink);}
.stage-payment-dialog {width:min(540px, calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow:auto; box-sizing:border-box; padding:24px; border:1px solid #8490a0; border-radius:18px; background:var(--surface); color:var(--text, #171a21);}
.stage-payment-dialog::backdrop {background:rgba(5,15,30,.65);}
.payment-question-fields {display:grid;gap:14px;}
.stage-payment-dialog .form-actions {flex-wrap:wrap;}

.completed-filter {flex:1 1 180px;min-width:0;}
.completed-filter label {display:block;font-size:12px;color:var(--text-muted);margin-bottom:4px;}
.completed-filter select,.completed-filter input {width:100%;min-width:0;box-sizing:border-box;}
@media(max-width:520px){.completed-filter {flex-basis:100%;}}