:root{
  --font:"Segoe UI",system-ui,Arial,sans-serif;

  --fs-title:24px;
  --fs-section:16px;
  --fs-card:14px;
  --fs-body:14px;
  --fs-table:13px;
  --fs-label:12px;
  --fs-input:14px;
  --fs-btn:13px;
  --fs-badge:11px;
  --fs-nav:13.5px;
  --fs-nav-group:10px;
  --fs-crumb:13px;
  --fs-chip:12px;
  --lh:1.45;
  --lh-tight:1.25;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --page-pad-x:24px;
  --page-pad-y:20px;
  --section-gap:20px;
  --card-pad:16px;
  --table-pad-y:9px;
  --table-pad-x:12px;
  --form-gap:12px;
  --btn-pad-x:14px;
  --input-h:38px;
  --btn-h:38px;
  --th-h:40px;
  --td-h:40px;
  --header-h:56px;
  --sidebar-w:268px;

  --radius:8px;
  --radius-sm:6px;
  --radius-report:3px;

  --bg:#e5decf;
  --bg-2:#ddd3c0;
  --surface:#faf9f6;
  --card:#fffaf3;
  --sidebar-bg:#efe4d2;
  --champagne:#f4ead8;
  --ink:#1b1712;
  --ink-strong:#14110c;
  --muted:#5c5348;
  --line:#d8c7ae;
  --line-strong:#cbb896;
  --gold:#b8860b;
  --gold-2:#c49a2a;
  --gold-ink:#7a5a10;
  --maroon:#7a2e2e;
  --shadow:0 8px 20px rgba(70,50,20,.08);
  --shadow-sm:0 3px 10px rgba(70,50,20,.06);
  --focus:0 0 0 3px rgba(184,134,11,.18);

  --acc-gold:#b8860b;
  --acc-blue:#3d6ea8;
  --acc-green:#3d7a5a;
  --acc-amber:#c08a2e;
  --acc-burgundy:#7a2e3a;
  --acc-teal:#2f6f6a;
  --acc-violet:#6b4c7a;
  --acc-stock:#3d6e62;

  --btn-primary:#8a6a1a;
  --btn-success:#3d7a5a;
  --btn-warning:#b8860b;
  --btn-danger:#9b2c2c;
  --ok:#2f6a45;
  --warn:#8a5a22;
  --info:#3d5a7a;
}
*{box-sizing:border-box}
html,body{
  margin:0;min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh);
}
body{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
a{color:var(--gold-ink);font-weight:650;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink-strong);font-weight:750;letter-spacing:-.015em;line-height:var(--lh-tight);margin:0 0 var(--space-3)}
h1,.page-header h1{font-size:var(--fs-title);margin:0}
h2,.section-title{font-size:var(--fs-section);margin:0 0 var(--space-3)}
h3,.card h3,.form h3,.section h3{font-size:var(--fs-card);margin:0 0 var(--space-2)}
h4{font-size:var(--fs-body);margin:0 0 var(--space-2)}
p{margin:0 0 var(--space-3);font-size:var(--fs-body)}
hr{border:0;border-top:1px solid var(--line);margin:var(--space-4) 0}

/* AppShell */
.app-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
  background:var(--sidebar-bg);
  border-right:1px solid var(--line-strong);
  box-shadow:4px 0 18px rgba(70,50,20,.08);
  overflow:auto;z-index:40;padding:16px 12px 96px;
}
.app-brand{display:flex;align-items:center;gap:10px;padding:8px 10px 16px;border-bottom:1px solid var(--line);margin-bottom:12px}
.app-brand strong{display:block;font-size:13px;line-height:1.25;font-weight:750}
.app-brand span{display:block;font-size:11px;color:var(--muted);font-weight:700}
.nav-group{margin:14px 0 6px;padding:0 10px;font-size:var(--fs-nav-group);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);opacity:.72}
.nav-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);text-decoration:none;font-weight:650;font-size:var(--fs-nav);color:#2a241c}
.nav-link:hover{background:rgba(250,249,246,.7);text-decoration:none}
.nav-link.is-active{background:var(--surface);color:var(--ink-strong);font-weight:750;box-shadow:inset 3px 0 0 var(--acc-gold)}
.nav-icon{width:18px;height:18px;flex:0 0 18px;stroke:currentColor}

.app-main{margin-left:var(--sidebar-w);min-height:100vh;padding:0;background:transparent}
.app-header{
  position:sticky;top:0;z-index:30;min-height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:0 var(--page-pad-x);
  background:rgba(229,222,207,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-left,.header-right{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.crumb{font-size:var(--fs-crumb);color:var(--muted);font-weight:650}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line);
  font-size:var(--fs-chip);font-weight:700;box-shadow:none;text-decoration:none;color:var(--ink)
}
.search{min-width:220px;height:var(--input-h);padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-weight:600;font-size:var(--fs-input)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex:0 0 36px}
.user-meta{display:flex;flex-direction:column;line-height:1.2}
.user-meta strong{font-size:12px;font-weight:750}
.user-meta span{font-size:11px;color:var(--muted);font-weight:650}

.page-canvas{padding:var(--page-pad-y) var(--page-pad-x) 96px}
.page-header{padding:0 0 var(--space-4);margin:0 0 var(--section-gap);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-3);flex-wrap:wrap}
.page-header p{margin:6px 0 0;color:var(--muted);font-weight:600;font-size:13px}
.page-body{display:flex;flex-direction:column;gap:var(--section-gap)}

/* Cards */
.card,.form,.section,.panel,.box,.kpi,.kpi-card,.purity-card,.trading-group-card,.tab{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:var(--card-pad);
}
.kpi-grid,.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-3);margin:0}
.kpi,.kpi-card,.cards > .card{padding:14px 16px;border-radius:var(--radius-sm);border-top:2px solid var(--acc-gold)}
.kpi .label,.card .l,.card .label{font-size:var(--fs-label);font-weight:750;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.kpi .value,.card .v,.card .value,.value{margin-top:var(--space-2);font-size:22px;font-weight:750;letter-spacing:-.3px;color:var(--ink-strong)}
.kpi-head{display:flex;align-items:center;gap:10px}
.kpi-ico{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;background:var(--champagne);color:var(--gold-ink);font-size:13px;font-weight:800;flex:0 0 32px}
.kpi .hint{font-size:12px;color:var(--muted);font-weight:650;margin-top:2px}
.kpi.accent-gold,.kpi.mod-dashboard{border-top-color:var(--acc-gold);background:#f8f1e4}
.kpi.accent-bronze{border-top-color:#9a7048;background:#f6efe4}
.kpi.accent-teal,.kpi.mod-stock{border-top-color:var(--acc-teal);background:#eef4f2}
.kpi.accent-green,.kpi.mod-purchase{border-top-color:var(--acc-green);background:#eef4ef}
.kpi.accent-amber,.kpi.mod-mfg{border-top-color:var(--acc-amber);background:#f7f1e4}
.kpi.accent-blue,.kpi.mod-sales{border-top-color:var(--acc-blue);background:#eef2f6}
.kpi.mod-acct{border-top-color:var(--acc-burgundy)}
.grid,.grid-2,.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}

/* Forms */
label{display:block;font-weight:700;font-size:var(--fs-label);margin:0 0 var(--space-1);color:var(--muted)}
.page-body label{margin-top:var(--space-2)}
input,select,textarea,.search{
  width:100%;height:var(--input-h);padding:0 10px;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);
  font-size:var(--fs-input);font-weight:600;font-family:var(--font)
}
textarea,input[type=file]{height:auto;min-height:88px;padding:8px 10px;resize:vertical}
input[type=file]{min-height:var(--input-h);padding:6px 10px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:var(--focus)}
input[type=checkbox],input[type=radio]{width:auto;height:auto;display:inline-block;margin-right:8px;box-shadow:none;padding:0}
.inline-form{display:flex;gap:var(--form-gap);flex-wrap:wrap;align-items:flex-end;margin:var(--space-2) 0}
.inline-form label{margin:0}
.inline-form input,.inline-form select{width:auto;min-width:140px}

/* Buttons */
.btn,button,input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--btn-h);min-height:var(--btn-h);padding:0 var(--btn-pad-x);
  border-radius:var(--radius-sm);border:1px solid transparent;
  font-weight:750;cursor:pointer;text-decoration:none;font-family:var(--font);font-size:var(--fs-btn);
  background:var(--btn-primary);color:#fff;box-shadow:none
}
.btn:hover,button:hover{filter:brightness(1.05);text-decoration:none;color:#fff;transform:none}
.btn-primary{background:var(--btn-primary);color:#fff}
.btn-secondary,button.secondary{background:var(--champagne);color:var(--ink);border-color:var(--line)}
.btn-secondary:hover,button.secondary:hover{color:var(--ink)}
.btn-success,button.success{background:var(--btn-success);color:#fff}
.btn-warning,button.warning{background:var(--btn-warning);color:#fff}
.btn-danger,button.danger{background:var(--btn-danger);color:#fff}
.btn:disabled,button:disabled{opacity:.5;cursor:not-allowed;filter:none}
button.sm,.btn-sm{height:32px;min-height:32px;padding:0 10px;font-size:var(--fs-label)}

/* Tables */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm)}
table,table.data{
  width:100%;border-collapse:collapse;background:var(--surface);
  margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden
}
.page-body table{margin:0}
th,td,table.data th,table.data td{
  padding:var(--table-pad-y) var(--table-pad-x);
  border-bottom:1px solid var(--line);
  text-align:left;font-size:var(--fs-table);vertical-align:middle;line-height:1.35
}
th,table.data th{
  height:var(--th-h);font-weight:750;background:var(--champagne);color:var(--ink-strong);
  position:sticky;top:0;font-size:var(--fs-label);text-transform:none
}
td{height:var(--td-h)}
tbody tr:hover{background:rgba(255,248,234,.7)}
.num,.amount-col,.r,th.num,td.num,th.r,td.r{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.neg,.gp-neg{color:var(--maroon);font-weight:750}
.gp-pos{color:var(--ok);font-weight:750}
.t-account-table,.trading-group-card,table.report,.page-body .trading-groups table{
  border-radius:var(--radius-report)
}
.t-account-table th,.t-account-table td{padding:6px 8px;font-size:var(--fs-table)}
.t-account-table .t-divider{border-left:2px solid var(--gold);width:4px}

/* Badges / alerts */
.badge,.chip-status{
  display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);
  font-size:var(--fs-badge);font-weight:750;border:1px solid transparent;line-height:1.4
}
.badge-ok,.badge-green,.b-pass{background:#e7f2ea;color:var(--ok);border-color:#cfe0d4}
.badge-warn,.badge-orange,.b-pending,.b-progress,.b-rework{background:#f5ead4;color:var(--warn);border-color:#e4d3b0}
.badge-danger,.badge-red,.b-fail{background:#f6e4e4;color:var(--maroon);border-color:#e3c8c8}
.badge-info,.badge-purple{background:#ece6f0;color:var(--acc-violet);border-color:#d9d0df}
.badge-gray{background:#eeeae4;color:var(--muted)}
.b-done{background:#e7f2ea;color:var(--ok)}
p.ok,div.ok,.ok:not(.badge){display:block;padding:10px 12px;border-radius:var(--radius-sm);margin:0 0 var(--space-3);font-weight:700;font-size:var(--fs-body);background:#e7f2ea;border:1px solid #cfe0d4;color:#2f6a45}
p.err,div.err,.err{display:block;padding:10px 12px;border-radius:var(--radius-sm);margin:0 0 var(--space-3);font-weight:700;font-size:var(--fs-body);background:#f6e4e4;border:1px solid #e3c8c8;color:var(--maroon)}

/* Tabs */
.tabs{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:0}
.tab-btn,.tabs a{
  height:34px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;font-weight:750;font-size:var(--fs-btn);
  text-decoration:none;box-shadow:none;display:inline-flex;align-items:center
}
.tab-btn.active,.tabs a.active,.tabs a.is-active{background:#f4ead8;color:var(--gold-ink);border-color:var(--line-strong)}
.tab{display:none;margin:0}
.tab.active{display:block}

.modal,.drawer{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:var(--space-6)}
.modal.is-open,.drawer.is-open{display:flex}
.modal-backdrop,.drawer-backdrop{position:absolute;inset:0;background:rgba(40,30,10,.4)}
.modal-card{position:relative;width:min(640px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-5);z-index:1}
.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow);padding:var(--space-5);z-index:1;overflow:auto}

.alert-item{padding:var(--space-2) 0;border-bottom:1px solid var(--line);font-weight:650;font-size:var(--fs-table)}
.empty,.t-no-data{padding:var(--space-6) var(--space-4);text-align:center;color:var(--muted);font-weight:650;background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius)}
.small{font-size:var(--fs-label);color:var(--muted);font-weight:650}
.loading{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
.pagination{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-4) 0 0}
.pagination a,.pagination span{min-width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);font-weight:750;font-size:var(--fs-table);text-decoration:none;color:var(--ink)}
.pagination .is-active{background:#f4ead8;color:var(--gold-ink)}

.page-body .menu,.page-body .sgh-topbar,.page-body .ui-sidebar-toggle,.page-body .ui-sidebar-overlay{display:none !important}
.page-body .c,.page-body .container{max-width:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--section-gap)}
.page-body > .c > h2:first-child,.page-body > h2:first-child{display:none}
.page-body a[style]{color:var(--gold-ink) !important}
.purity-card,.trading-group-card{padding:0;overflow:hidden}
.purity-card summary,.trading-group-card > summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;font-weight:750;font-size:var(--fs-card)}
.purity-title,.trading-group-title{color:var(--ink);font-size:var(--fs-card)}
.purity-meta,.trading-group-meta{color:var(--muted);font-size:var(--fs-label);font-weight:650}
.trading-grand-summary{margin-top:var(--space-3);padding:12px 14px;background:#f4ead8;border:1px solid var(--line);border-radius:var(--radius-sm);display:flex;gap:20px;flex-wrap:wrap}

.menu-toggle,.bottom-nav{display:none}
@media (max-width:1100px){
  .grid,.grid-2,.grid2,.grid3,.grid4{grid-template-columns:1fr}
  --page-pad-x:16px;
}
@media (max-width:900px){
  .kpi-grid,.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .app-sidebar{transform:translateX(-110%);transition:transform .2s ease}
  body.nav-open .app-sidebar{transform:none}
  .app-main{margin-left:0}
  .page-canvas{padding:12px 12px 96px}
  .menu-toggle{display:inline-flex;width:40px;height:40px;border:0;border-radius:var(--radius-sm);background:var(--btn-primary);color:#fff;font-weight:800}
  .search{display:none}
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--sidebar-bg);border-top:1px solid var(--line);justify-content:space-around;padding:8px 6px 10px}
  .bottom-nav a{flex:1;text-align:center;text-decoration:none;font-size:11px;font-weight:800;color:var(--muted);padding:6px}
  .nav-scrim{display:none;position:fixed;inset:0;background:rgba(40,30,10,.35);z-index:35}
  body.nav-open .nav-scrim{display:block}
  h1,.page-header h1{font-size:22px}
}