/* Tab-style invert toggle */
#invertToggle {
  appearance: none;
  border: 1px solid #d0d0d0;
  border-bottom: none;
  background: #f3f3f3;
  color: #333;
  padding: 6px 14px;
  font: 13px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  position: relative;
  top: 1px;
}

/* Hover = subtle like browser tabs */
#invertToggle:hover {
  background: #f8f8f8;
}

/* Active / ON state looks like selected tab */
html.invert-all #invertToggle {
  background: #ffffff;
  border-color: #c8c8c8;
  color: #000;
  font-weight: 500;
}

/* Remove ugly focus ring but keep accessibility */
#invertToggle:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 #4a90e2;
}

/* When ON, invert the whole page */
html.invert-all {
  filter: invert(1) hue-rotate(180deg);
}

/* Optional: keep media looking normal by double-inverting it */
html.invert-all img,
html.invert-all video,
html.invert-all iframe,
html.invert-all canvas,
html.invert-all svg {
  filter: invert(1) hue-rotate(180deg);
}

  /* Inline missing pallet size input field */
.psg-size-missing {
  background: #fff7d6;
  border: 1px solid #e9c46a;
  padding: 4px 6px;
  border-radius: 4px;
  width: 110px;
  font-size: 0.82rem;
}

/* Saved pallet size viewer window styling */
#palletSizeManager {
  padding: 16px;
  max-width: 420px;
  font-family: Arial, sans-serif;
}

#palletSizeManager table {
  width: 100%;
  border-collapse: collapse;
}

#palletSizeManager th, #palletSizeManager td {
  border-bottom: 1px solid #ccc;
  padding: 6px 4px;
  font-size: 0.85rem;
}

 :root{
 --bg:#f4f6f9;
 --surface:#ffffff;
 --border:#d1d9e0;
 --accent:#1a56db;
 --accent2:#0e9f6e;
 --text:#111827;
 --muted:#6b7280;
 --danger:#e02424;
 --container-max:1400px;
 }
 *{box-sizing:border-box;margin:0;padding:0;}
 body{
 background:var(--bg);
 color:var(--text);
 font-family:Arial, sans-serif;
 min-height:100vh;
 display:flex;
 flex-direction:column;
 align-items:center;
 padding:40px 20px;
 }
 header{text-align:center;margin-bottom:32px;}
 header h1{
 font-size:2rem;font-weight:900;letter-spacing:.08em;
 text-transform:uppercase;color:var(--accent);
 }
 header p{color:var(--muted);font-size:.85rem;margin-top:6px;letter-spacing:.05em;}
 /* ── TABS WRAPPER ── */
 .tabs{
 position: relative;
 z-index: 5;
 display:flex;
 gap:0;
 width:90%;
 max-width:var(--container-max);
 margin-bottom:0;
 border-radius:12px 12px 0 0;
 overflow:hidden;
 border:1px solid var(--border);
 border-bottom:none;
 flex-wrap:wrap;
 }
 .tab-btn{
 flex:1;
 padding:14px 20px;
 background:#eef0f5;
 border:none;
 font-size:.82rem;
 font-weight:700;
 letter-spacing:.07em;
 text-transform:uppercase;
 color:var(--muted);
 cursor:pointer;
 transition:background .2s,color .2s;
 border-right:1px solid var(--border);
 min-width:180px;
 }
 .tab-btn:last-child{border-right:none;}
 .tab-btn.active{
 background:var(--surface);
 color:var(--accent);
 border-bottom:2px solid var(--accent);
 }
 .tab-btn:hover:not(.active){background:#e2e6ed;color:var(--text);}
 /* GROUP LABELS IN TAB BAR */
 .tab-group-label{
 flex-basis:100%;
 padding:6px 14px;
 background:#dde3f0;
 font-size:.7rem;
 font-weight:700;
 letter-spacing:.16em;
 text-transform:uppercase;
 color:var(--muted);
 border-bottom:1px solid var(--border);
 }
 /* ── PANELS ── */
 .tab-panel{display:none;width:90%;max-width:var(--container-max);}
 .tab-panel.active{display:block;}
 /* ── CARDS ── */
 .card{
 background:var(--surface);border:1px solid var(--border);
 border-top:none;border-radius:0 0 12px 12px;padding:28px;width:100%;
 margin-bottom:24px;
 }
 .card.standalone{border-top:1px solid var(--border);border-radius:12px;margin-top:0;}
 .card-title{
 font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
 color:var(--accent2);margin-bottom:18px;
 }
 .pn-textarea{
 background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);
 font-size:.9rem;padding:14px 16px;width:100%;min-height:160px;resize:vertical;outline:none;
 line-height:1.8;transition:border-color .2s;letter-spacing:.03em;
 }
 .pn-textarea:focus{border-color:var(--accent2);}
 .pn-textarea.report-ta{min-height:200px;font-size:.85rem;line-height:1.7;}
 .parse-preview{
 margin-top:12px;display:flex;flex-direction:column;gap:4px;
 }
 .parse-row{
 display:flex;gap:10px;align-items:center;
 font-size:.78rem;color:var(--muted);padding:3px 0;
 }
 .parse-row .badge-pn{color:var(--accent2);flex:1;}
 .parse-row .badge-qty{
 color:var(--accent);
 background:rgba(26,86,219,.08);
 border:1px solid rgba(26,86,219,.2);
 border-radius:4px;
 padding:1px 8px;
 font-size:.72rem;
 }
 .parse-row .badge-err{color:var(--danger);font-size:.7rem;}
 .btn-row{display:flex;gap:10px;flex-wrap:wrap;}
.btn-copy{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:3px 10px;font-size:.7rem;font-weight:600;cursor:pointer;transition:opacity .2s;}
.btn-copy:hover{opacity:.88;}
 .plaque-style-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
 .plaque-style-select{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--text);
  font-weight:600;
  min-width:180px;
 }
 button.primary{
 background:var(--accent);color:#fff;border:none;border-radius:8px;padding:12px 24px;
 font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
 transition:opacity .2s, transform .1s;
 }
 button.primary:hover{opacity:.88;transform:translateY(-1px);}
 button.primary:active{transform:translateY(0);}
 button.secondary{
 background:transparent;color:var(--accent2);border:1px solid var(--accent2);
 border-radius:8px;padding:12px 24px;font-weight:600;font-size:.85rem;letter-spacing:.08em;
 text-transform:uppercase;cursor:pointer;transition:background .2s;
 }
 button.secondary:hover{background:rgba(14,159,110,.08);}
 /* ── MODALS ── */
 .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:100;align-items:center;justify-content:center;}
 .modal-overlay.active{display:flex;}
 .modal{background:#fff;border-radius:10px;max-width:92vw;max-height:92vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.5);}
 .modal-toolbar{
 background:#f9fafb;border-bottom:1px solid var(--border);padding:12px 20px;display:flex;justify-content:space-between;align-items:center;
 border-radius:10px 10px 0 0;gap:12px;position:sticky;top:0;z-index:10;
 }
 .modal-toolbar span{color:var(--text);font-size:.8rem;letter-spacing:.08em;font-weight:700;text-transform:uppercase;}
 .modal-toolbar-btns{display:flex;gap:8px;}
 .modal-toolbar button.primary,.modal-toolbar button.secondary{padding:8px 18px;font-size:.78rem;}
 /* ── PLAQUE PREVIEW ── */
 .plaques-container{
 padding:20px;
 background:#e5e7eb;
 display:flex;
 flex-direction:column;
 gap:20px;
 align-items:center;
 }
 .plaque-card{
 background:#fff;
 border:none;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 width:740px;
 padding:40px 60px;
 position:relative;
 }
 .plaque-pallet-num{
 font-weight:900;
 font-size:96px;
 text-transform:uppercase;
 letter-spacing:.03em;
 color:#111;
 text-align:center;
 line-height:1.1;
 white-space:nowrap;
 }
 .plaque-divider{
 width:100%;
 height:5px;
 background:#111;
 margin:18px 0;
 flex-shrink:0;
 }
 .pn-list{
 width:100%;
 display:flex;
 flex-direction:column;
 }
 .pn-row{
 display:flex;
 justify-content:space-between;
 align-items:baseline;
 width:100%;
 font-size:52px;
 color:#111;
 border-bottom:2px solid #ccc;
 padding:6px 0;
 white-space:nowrap;
 }
 .pn-row:last-child{border-bottom:none;}
 .pn-code{font-weight:700;letter-spacing:.02em;}
 .pn-qty{font-weight:700;margin-left:20px;}
 .single-pn-code{
 font-weight:700;
 font-size:68px;
 color:#111;
 text-align:center;
 letter-spacing:.02em;
 white-space:nowrap;
 }
 .single-qty-label{
 font-weight:900;
 font-size:44px;
 color:#111;
 text-transform:uppercase;
 letter-spacing:.1em;
 text-align:center;
 margin-top:16px;
 }
 .single-qty-val{
 font-weight:900;
 font-size:80px;
 color:#111;
 display:inline;
 }
 .single-serials{
 font-size:15px;
 font-weight:400;
 color:#444;
 margin-top:10px;
 line-height:1.6;
 text-align:center;
 letter-spacing:.01em;
 }
 /* REPORT PREVIEW PAGE */
 .preview-container{
 padding:24px;
 background:#dde1e7;
 display:flex;
 flex-direction:column;
 align-items:center;
 }
 .report-page{
 width:748px;
 min-height:1056px;
 background:#fff;
 padding:36px 44px 32px;
 font-family:Arial, sans-serif;
 display:flex;
 flex-direction:column;
 box-shadow:0 2px 16px rgba(0,0,0,.12);
 }
 .report-header{
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
 margin-bottom:20px;
 border-bottom:3px solid #111;
 padding-bottom:14px;
 }
 .report-title{
 font-size:28px;
 font-weight:900;
 color:#111;
 letter-spacing:.04em;
 text-transform:uppercase;
 }
 .report-meta{
 text-align:right;
 font-size:13px;
 color:#444;
 line-height:1.6;
 }
 .report-meta strong{
 color:#111;
 font-size:15px;
 }
 .report-table{
 width:100%;
 border-collapse:collapse;
 font-size:13px;
 flex:1;
 }
 .report-table thead tr{background:#111;color:#fff;}
 .report-table thead th{
 padding:10px 12px;
 text-align:left;
 font-weight:700;
 font-size:12px;
 letter-spacing:.06em;
 text-transform:uppercase;
 white-space:nowrap;
 }
 .report-table thead th.center{text-align:center;}
 .report-table tbody tr{border-bottom:1px solid #e5e7eb;}
 .report-table tbody tr.pallet-main{background:#f8fafc;}
 .report-table tbody tr.pallet-sub{background:#fff;}
 .report-table tbody tr:last-child{border-bottom:2px solid #111;}
 .report-table tbody td{
 padding:8px 12px;
 color:#111;
 vertical-align:middle;
 }
 .report-table tbody td.center{text-align:center;}
 .report-table tbody td.right{text-align:right;}
 .report-table tbody td.pallet-num{
 font-weight:900;
 font-size:15px;
 color:#1a56db;
 text-align:center;
 }
 .report-table tbody td.pn-cell{
 font-weight:700;
 font-size:13px;
 letter-spacing:.02em;
 }
 .report-table tbody td.qty-cell{
 font-weight:700;
 text-align:center;
 font-size:14px;
 }
 .report-table tfoot tr{
 background:#f0f4ff;
 border-top:2px solid #111;
 }
 .report-table tfoot td{
 padding:10px 12px;
 font-weight:700;
 font-size:13px;
 color:#111;
 }
 .report-footer{
 margin-top:18px;
 display:flex;
 justify-content:space-between;
 font-size:11px;
 color:#888;
 border-top:1px solid #e5e7eb;
 padding-top:10px;
 }
 /* PRINT AREAS (unused with popup style print) */
 #plaque-print-area, #report-print-area{display:none;}
 @media print{
 @page{size:11in 8.5in;margin:0;}
 html,body{margin:0;padding:0;background:#fff;overflow:hidden;}
 .side-nav,.tabs,.card,.tab-btn,.nav-btn,.btn-row,header,.layout .side-nav,footer{display:none !important;}
 #bad-label-card{display:block !important;margin:0 auto;page-break-inside:avoid;break-inside:avoid;width:100% !important;height:100vh !important;box-sizing:border-box;padding:0.3in !important;}
 .bad-label-card{page-break-inside:avoid;break-inside:avoid;overflow:hidden;width:4in;height:3in;box-sizing:border-box;}
 }
 .wo-stats-bar{
 display:grid;grid-template-columns:repeat(5,1fr);
 border:1px solid var(--border);border-radius:10px;background:#f9fafb;margin-bottom:18px;overflow:hidden;
 }
 .wo-stat{text-align:center;padding:10px 4px 11px;border-right:1px solid var(--border);}
 .wo-stat:last-child{border-right:none;}
 .wo-stat-value{font-size:1.6rem;font-weight:800;line-height:1;}
 .wo-stat-label{margin-top:3px;font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);}
 .wo-total .wo-stat-value{color:var(--text);}
 .wo-complete .wo-stat-value{color:var(--accent2);}
 .wo-missing .wo-stat-value{color:var(--danger);}
 .wo-grid{display:grid;grid-template-columns:1.05fr 1.15fr;gap:22px;}
 @media (max-width:1100px){.wo-grid{grid-template-columns:1fr;}}
 .wo-pane{display:flex;flex-direction:column;}
 .wo-pane-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
 .wo-badge{background:var(--muted);color:#fff;border-radius:999px;padding:2px 8px;font-size:.65rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
 .wo-pane-title{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--text);}
 .wo-hint{font-size:.72rem;color:var(--muted);line-height:1.7;margin-bottom:8px;}
 .wo-input{
 background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);
 font-size:.86rem;padding:12px 12px;min-height:200px;resize:vertical;outline:none;line-height:1.7;
 transition:border-color .2s, box-shadow .2s;margin-bottom:10px;
 }
 /* Better looking input areas for Pallet Finder */
#amcor-pf-matrix,
#amcor-pf-pdf {
  font-family: "Segoe UI", Arial, sans-serif;
  background: #f8fafc;
  border: 1.5px solid #d1d9e0;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  resize: vertical;
  min-height: 220px;
  width: 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color .2s, box-shadow .2s, background .2s;
}

#amcor-pf-matrix:focus,
#amcor-pf-pdf:focus {
  background: #ffffff;
  border-color: #1a56db;
  box-shadow: 0 0 0 2px rgba(26, 86, 219, 0.15);
  outline: none;
}
/* Better looking input areas for Pallet Finder */
#amcor-pf-matrix,
#amcor-pf-pdf {
  font-family: "Segoe UI", Arial, sans-serif;
  background: #f8fafc;
  border: 1.5px solid #d1d9e0;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  resize: vertical;
  min-height: 220px;
  width: 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color .2s, box-shadow .2s, background .2s;
}

#amcor-pf-matrix:focus,
#amcor-pf-pdf:focus {
  background: #ffffff;
  border-color: #1a56db;
  box-shadow: 0 0 0 2px rgba(26, 86, 219, 0.15);
  outline: none;
}
 .wo-input:focus{border-color:var(--accent);box-shadow:0 0 0 1px rgba(26,86,219,.18);}
 .wo-btn-run{
 width:100%;padding:11px 18px;border:none;border-radius:8px;background:var(--accent);color:#fff;
 font-size:.8rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:opacity .2s, transform .1s;
 }
 .wo-right-top{display:flex;flex-direction:column;gap:4px;margin-bottom:6px;}
 .wo-pane-actions{display:none;align-items:center;justify-content:space-between;gap:10px;}
 .wo-count-pill{background:var(--danger);color:#fff;font-size:.72rem;font-weight:600;padding:2px 10px;border-radius:999px;white-space:nowrap;}
 /* Tables (shared) */
 .tbl-wrapper,.ple-table-wrapper{max-height:420px;overflow:auto;border-radius:8px;border:1px solid var(--border);background:#fff;}
 .tbl,.ple-table{width:100%;border-collapse:collapse;font-size:.84rem;}
 .tbl th,.tbl td,.ple-table th,.ple-table td{padding:6px 8px;border-bottom:1px solid #e5e7eb;text-align:left;white-space:nowrap;}
 .tbl th,.ple-table th{background:#eff6ff;color:#1d4ed8;font-weight:600;font-size:.8rem;border-bottom:1px solid #bfdbfe;position:sticky;top:0;z-index:1;}
 .tbl tbody tr:nth-child(even),.ple-table tbody tr:nth-child(even){background:#f9fafb;}
 .tbl tbody tr:hover,.ple-table tbody tr:hover{background:#e5f0ff;transition:background .12s ease;}
 .wo-output-shell{border:1px solid var(--border);border-radius:8px;background:#f9fafb;padding:10px 10px 8px;display:flex;flex-direction:column;}
 .wo-output-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:8px;flex-wrap:wrap;}
 .wo-output-scroll{flex:1;overflow-y:auto;padding-right:4px;}
 .wo-empty-state{text-align:center;color:var(--muted);margin-top:8px;font-size:.86rem;line-height:1.9;}
 /* Repair Vendor badges */
 .rv-badge-btn{
  background:#f9fafb;border:1px solid var(--border);border-radius:999px;
  padding:5px 12px;font-size:.78rem;font-weight:600;color:var(--text);cursor:pointer;
  transition:all .2s ease;
 }
 .rv-badge-btn:hover{background:#e5f0ff;border-color:#1a56db;color:#1a56db;transform:translateY(-1px);}
 .rv-badge-btn.active{background:#1a56db;border-color:#1a56db;color:#fff;}
 /* Summary card */
 .summary-card{padding:18px 22px;border:1px solid var(--border);background:#fff;border-radius:12px;margin-bottom:18px;}
 .summary-title{font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-size:.78rem;margin-bottom:10px;}
 .summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px;}
 @media (max-width:900px){.summary-grid{grid-template-columns:1fr;}}
 .summary-pill{background:#f9fafb;border:1px solid var(--border);border-radius:8px;padding:10px 12px;}
 .summary-pill .lbl{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;}
 .summary-pill .val{font-size:1.25rem;font-weight:800;color:var(--text);line-height:1;margin-top:4px;}
 .summary-list{margin-top:8px;border-top:1px dashed var(--border);padding-top:8px;max-height:220px;overflow:auto;}
 .summary-list-item{display:flex;justify-content:space-between;padding:6px 4px;border-bottom:1px solid #eef0f4;font-size:.86rem;}
 .summary-list-item:last-child{border-bottom:none;}
 .summary-tag{font-weight:700;color:var(--accent);}
 .summary-badge{font-weight:700;color:#111;background:#e5edff;border:1px solid #c7d2fe;padding:2px 8px;border-radius:999px;font-size:.72rem;}
 /* ===== Email Drafter ===== */
 .eml-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr);gap:22px;}
 @media (max-width:1100px){.eml-grid{grid-template-columns:1fr;}}
 .eml-field-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.2fr);gap:14px;margin-bottom:14px;}
 .eml-two-col{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;margin-bottom:14px;}
 .eml-label{font-weight:700;font-size:.82rem;color:#374151;margin-bottom:6px;}
 .eml-input,.eml-textarea,.eml-select{width:100%;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;font:inherit;transition:border-color .2s,box-shadow .2s,background-color .2s;}
 .eml-input:focus,.eml-textarea:focus,.eml-select:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 1px rgba(26,86,219,.14);}
 .eml-textarea{min-height:200px;resize:vertical;}
 .eml-mini-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
 .eml-mini-btn{border:1px solid var(--border);background:#fff;color:var(--muted);border-radius:999px;padding:6px 10px;font-size:.78rem;cursor:pointer;transition:border-color .2s,color .2s,background .2s;}
 /* packing-slip priority picker (per pallet: — / P1 / P2, prints lowkey in the page footer) */
 #amcor-priority-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;}
 /* hidden at Jansenn's request (2026-10-06): the Amcor status lines and priority picker row are still
    updated by JS (which needs the elements to exist) but are no longer shown on screen */
 #amcor-pf-status,#amcor-bulk-pdf-status,#amcor-priority-row{display:none!important;}
 .amcor-prio-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--border);border-radius:8px;background:var(--bg);}
 .amcor-prio-name{font-size:12px;font-weight:700;color:var(--muted);}
 .amcor-prio-sel{font:inherit;font-size:12px;font-weight:700;padding:2px 4px;border-radius:6px;border:1px solid var(--border);background:#fff;cursor:pointer;}
 .eml-mini-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(26,86,219,.04);}
 .eml-preview-card{border:1px solid var(--border);background:#fff;border-radius:12px;padding:16px 16px 12px;}
 .eml-preview-header{display:grid;gap:6px;margin-bottom:8px;grid-template-columns:1fr;}
 .eml-kv{font-size:.85rem;color:#374151;}
 .eml-kv strong{color:#0f172a;}
 .eml-preview-body{white-space:pre-wrap;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:.9rem;color:#111827;line-height:1.6;padding-top:8px;border-top:1px dashed #e5e7eb;}
 .eml-toast{position:fixed;bottom:16px;right:16px;background:#111827;color:#f9fafb;padding:9px 12px;border-radius:999px;font-size:.85rem;display:none;align-items:center;gap:8px;box-shadow:0 12px 30px rgba(15,23,42,.45);z-index:120;}
 /* PACKING LIST TABLE */
 .ple-table-wrapper{max-height:420px;overflow:auto;border-radius:8px;border:1px solid var(--border);background:#fff;}
 .ple-table{width:100%;border-collapse:collapse;font-size:.84rem;}
 .ple-table th,.ple-table td{padding:6px 8px;border-bottom:1px solid #e5e7eb;text-align:left;white-space:nowrap;}
 .ple-table th{background:#eff6ff;color:#1d4ed8;font-weight:600;font-size:.8rem;border-bottom:1px solid #bfdbfe;position:sticky;top:0;z-index:1;}
 footer{
 margin-top:24px;
 font-size:.7rem;
 color:var(--muted);
 text-align:center;
 }
 /* ============ REDESIGN ============ */
 :root{--glass:#ffffffcc;--glass-dark:#111827ee;--neon:#00e5ff;--accent-grad:linear-gradient(135deg,#1a56db,#0e9f6e);}
 body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:linear-gradient(135deg,#f4f6f9 0%,#e5e7eb 100%);color:#111827;min-height:100vh;display:flex;flex-direction:column;}
 /* Sidebar */
 .layout{display:flex;width:100%;max-width:1400px;margin:0 auto;padding:24px;gap:28px;align-items:flex-start;animation:fadeInUp .7s ease;}
 .side-nav{position:sticky;top:24px;width:260px;flex-shrink:0;background:rgba(255,255,255,0.75);backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,0.3);border-radius:20px;padding:24px 18px;box-shadow:0 12px 40px rgba(26,86,219,0.08),0 1px 2px rgba(0,0,0,0.06);transition:box-shadow .3s;}
 .side-nav:hover{box-shadow:0 20px 60px rgba(26,86,219,0.12);}
 .side-nav h2{font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;font-weight:900;display:flex;align-items:center;gap:10px;}
 .side-nav h2::before{content:"";display:block;width:6px;height:24px;background:linear-gradient(180deg,#1a56db,#0e9f6e);border-radius:4px;}
 .nav-section{margin-bottom:22px;}
 .nav-section-title{font-size:.65rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#6b7280;margin:10px 0 8px;padding-left:8px;border-left:3px solid #d1d9e0;}
 .nav-btn{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:none;border-radius:10px;background:transparent;color:#374151;font-size:.82rem;font-weight:600;text-align:left;cursor:pointer;transition:all .2s ease;margin-bottom:4px;position:relative;overflow:hidden;}
 .nav-btn:hover{background:rgba(26,86,219,0.06);color:#1a56db;transform:translateX(4px);}
 .nav-btn.active{background:linear-gradient(135deg,#1a56db,#0e9f6e);color:#fff;box-shadow:0 4px 16px rgba(26,86,219,0.35);transform:translateX(4px);}
 .nav-btn.active:hover{transform:translateX(4px) scale(1.02);}
 .nav-btn .dot{width:8px;height:8px;border-radius:50%;background:#d1d9e0;flex-shrink:0;transition:background .2s;}
 .nav-btn.active .dot{background:#fff;box-shadow:0 0 6px rgba(255,255,255,0.8);}
 .main-content{flex:1;min-width:0;animation:fadeInUp .6s ease .15s both;}
 /* Hide old tabs visually */
 .tabs{display:none!important;}
 /* Animations */
 @keyframes fadeInUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
 @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(26,86,219,0.25);}70%{box-shadow:0 0 0 10px rgba(26,86,219,0);}100%{box-shadow:0 0 0 0 rgba(26,86,219,0);}}
 .nav-btn.active{animation:pulse 2.5s infinite;}
 /* Modern card tweaks */
 .card{border-radius:16px;background:#ffffff;box-shadow:0 4px 24px rgba(0,0,0,0.03),0 1px 2px rgba(0,0,0,0.04);border:1px solid rgba(209,217,224,0.6);transition:box-shadow .3s;}
 .card:hover{box-shadow:0 12px 36px rgba(26,86,219,0.08);}
 .tab-panel.active{animation:fadeInUp .35s ease;display:block!important;}
 .tab-panel{display:none;}
 /* Responsive */
 @media(max-width:1000px){.layout{flex-direction:column;}.side-nav{width:100%;position:relative;top:0;}}