:root{--bg:#f8fafc;--card:#fff;--pri:#4f46e5;--priH:#4338ca;--ok:#10b981;--okH:#059669;--warn:#f59e0b;--warnH:#d97706;--danger:#ef4444;--txt:#1e293b;--muted:#64748b;--bd:#e2e8f0;--side:#0f172a}*{box-sizing:border-box}body{margin:0;font-family:Vazir,sans-serif;background:var(--bg);color:var(--txt)}button,input,textarea,select{font-family:inherit}textarea,input,select{font-size:14px}.app{display:flex;min-height:100vh}.side{width:280px;background:linear-gradient(180deg,#0f172a,#111827);color:#fff;padding:20px;position:sticky;top:0;height:100vh;overflow:auto}.brand{font-size:20px;font-weight:900}.sub{font-size:13px;color:#cbd5e1;line-height:1.9;margin:8px 0 18px}.mini-title{margin:0 0 10px;font-weight:800}.popular-agents-title{text-align:left;direction:ltr}.nav{display:grid;gap:10px}.nav button,.mini,.btn{border:none;cursor:pointer;border-radius:12px;transition:.2s}.nav button{background:rgba(255,255,255,.05);color:#fff;padding:14px 16px;font-weight:800;display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(255,255,255,.08)}.nav button:hover,.nav button.active{background:#1e293b}.sep{height:1px;background:rgba(255,255,255,.08);margin:18px 0}.miniWrap{display:grid;gap:10px}.miniCard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px}.miniName{font-weight:800}.miniDate{font-size:12px;color:#94a3b8;margin:6px 0 10px}.miniActions{display:flex;gap:8px;flex-wrap:wrap}.mini{padding:8px 10px;font-size:12px;font-weight:800}.mini.edit{background:#312e81;color:#fff}.mini.del{background:rgba(239,68,68,.15);color:#fecaca}.main{flex:1;padding:32px 18px}.wrap{max-width:1350px;margin:auto}.card{background:var(--card);border:1px solid #f1f5f9;border-radius:20px;box-shadow:0 10px 25px -5px rgba(0,0,0,.05);padding:32px;margin-bottom:24px}.hero{text-align:center}.hero h1{margin:0 0 8px;font-size:28px}.hero p{margin:0;color:var(--muted)}.label{display:inline-block;margin-bottom:18px;font-size:18px;font-weight:900;color:var(--pri);border-bottom:2px solid var(--pri);padding-bottom:5px}.label-dark{color:var(--txt);border-color:var(--txt)}.label-success{color:var(--ok);border-color:var(--ok)}.no-margin{margin:0}.no-top{margin-top:0}.code{width:100%;min-height:160px;padding:16px;border:2px solid var(--bd);border-radius:12px;background:#f8fafc;direction:ltr;text-align:left;resize:vertical}.out-code{min-height:200px}.code:focus,input:focus,textarea:focus{outline:none;border-color:var(--pri);background:#fff;box-shadow:0 0 0 4px rgba(79,70,229,.12)}.btn{padding:13px 22px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px}.pri{background:var(--pri);color:#fff}.pri:hover{background:var(--priH)}.ok{background:var(--ok);color:#fff}.ok:hover{background:var(--okH)}.warn{background:var(--warn);color:#fff}.warn:hover{background:var(--warnH)}.danger{background:var(--danger);color:#fff}.full{width:100%;margin-top:18px;font-size:17px;padding:15px}.hidden{display:none!important}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}.gcard{background:#f8fafc;border:2px solid var(--bd);border-radius:16px;padding:22px}.gtitle{font-size:18px;font-weight:900;border-bottom:2px solid #e2e8f0;padding-bottom:10px;margin-bottom:18px}.field{margin-bottom:14px}.field label{display:block;margin-bottom:8px;font-weight:700;color:var(--muted)}.field input,.field textarea{width:100%;padding:12px 14px;border:2px solid var(--bd);border-radius:10px;background:#f8fafc}.field textarea{min-height:100px;resize:vertical;line-height:1.8}.ltr{direction:ltr;text-align:left}.headRow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}.actions{display:flex;gap:10px;flex-wrap:wrap}.save{margin-top:18px;padding:18px;border:1px solid var(--bd);border-radius:14px;background:#f8fafc;display:grid;grid-template-columns:minmax(240px,1fr) auto;gap:12px;align-items:end}.hint{font-size:13px;color:var(--muted);margin-top:10px}#preview{width:100%;height:600px;border:2px solid var(--bd);border-radius:12px;margin-top:18px;background:#fff}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}.search{width:100%;max-width:360px}.search input{width:100%;padding:12px 14px;border:2px solid var(--bd);border-radius:10px;background:#f8fafc}.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.pCard{background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid var(--bd);border-radius:18px;padding:18px}.pTitle{font-size:18px;font-weight:900;margin-bottom:8px}.pMeta{font-size:13px;color:var(--muted);margin-bottom:14px}.pActions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:center}.pActions .btn{width:100%;padding:10px 8px;font-size:12px;white-space:nowrap}.empty{text-align:center;padding:36px 20px;border:2px dashed var(--bd);border-radius:18px;color:var(--muted);background:#fcfdff}.toast{position:fixed;top:22px;right:22px;z-index:9999;min-width:250px;max-width:420px;padding:15px 17px;border-radius:14px;font-weight:800;box-shadow:0 18px 45px rgba(15,23,42,.18);opacity:0;transform:translateY(-10px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}.toast.ok{background:#ecfdf5;border:1px solid rgba(16,185,129,.28);color:#047857}.toast.err{background:#fef2f2;border:1px solid rgba(239,68,68,.22);color:#b91c1c}@media(max-width:980px){.app{flex-direction:column}.side{width:100%;height:auto;position:relative}.main{padding-top:20px}}@media(max-width:640px){.card{padding:22px;border-radius:16px}.save{grid-template-columns:1fr}.actions,.actions .btn{width:100%}}
.var-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:12px}.var-box{padding:14px;border:1px solid var(--bd);border-radius:14px;background:#f8fafc}.table-wrap{overflow:auto;margin-top:14px}.var-table{width:100%;border-collapse:collapse;min-width:760px}.var-table th,.var-table td{padding:12px 10px;border-bottom:1px solid var(--bd);text-align:right;vertical-align:middle}.var-table th{font-size:14px;color:var(--muted);font-weight:800;background:#f8fafc}.var-actions{display:flex;gap:8px;flex-wrap:wrap}.status-ok{background:#ecfdf5;color:#047857;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}.status-pending{background:#fff7ed;color:#b45309;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}.var-empty{text-align:center;color:var(--muted);padding:22px}
.var-filter{min-width:220px;max-width:320px}.var-filter select{width:100%;padding:11px 12px;border:2px solid var(--bd);border-radius:10px;background:#fff;font-family:inherit}
.pActions{grid-template-columns:repeat(6,minmax(0,1fr))}.pActions .btn{font-size:11px!important;padding:10px 6px!important}.modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center}.modal-overlay{position:absolute;inset:0;background:rgba(15,23,42,.45)}.modal-card{position:relative;z-index:1;width:min(720px,92vw);max-height:86vh;overflow:auto;background:#fff;border-radius:18px;padding:18px;border:1px solid var(--bd);box-shadow:0 20px 50px rgba(15,23,42,.2)}
.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;direction:ltr}.pRow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:14px 16px;border:1px solid var(--bd);border-radius:16px;background:linear-gradient(180deg,#fff,#f8fafc);position:relative;overflow:visible;z-index:1;direction:ltr;min-height:132px}.pRowMain{min-width:180px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;justify-content:flex-start;flex:1;direction:ltr}.pMainText{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:72px;text-align:left}.pRowActions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;flex-shrink:0}.pRowActions .btn{padding:10px 12px!important;font-size:13px!important}.pRow .pTitle{margin-bottom:0}
@media(max-width:980px){.products{grid-template-columns:1fr;direction:rtl}.pRow{grid-template-columns:1fr;align-items:flex-start;direction:rtl;min-height:auto}.pRowMain{width:100%}.pRowActions{justify-content:flex-start}}
.plan-row-same td{background:#ecfdf5!important;color:#047857;font-weight:800}.plan-row-changed td{background:#fffbeb!important;color:#92400e}
.rowMenu{position:relative;z-index:2}.rowMenu summary{list-style:none;cursor:pointer;background:#1e293b;color:#fff;padding:10px 12px;border-radius:12px;font-weight:800}.rowMenu summary::-webkit-details-marker{display:none}.rowMenuPanel{position:absolute;top:44px;left:0;z-index:9999;min-width:170px;background:#fff;border:1px solid var(--bd);border-radius:12px;padding:8px;box-shadow:0 10px 30px rgba(15,23,42,.15);display:grid;gap:6px}.rowMenuPanel .btn{width:100%}
.pager{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.pager .page-info{font-size:13px;color:var(--muted);font-weight:700}
.pager .btn{padding:8px 12px!important;font-size:12px!important}

.pRow.menu-open{z-index:300}
.pRow:has(.rowMenu[open]){z-index:300}

/* Modern Gradient Theme Overrides */
:root{
  --bg:#f3f6ff;
  --card:#ffffffcc;
  --txt:#0f172a;
  --muted:#5b6478;
  --bd:#d8def0;
  --pri:#4f46e5;
  --priH:#4338ca;
  --ok:#10b981;
  --okH:#0f9f70;
  --warn:#f59e0b;
  --warnH:#d88908;
  --danger:#ef4444;
  --side:#0b1228;
}

body{
  background:
    radial-gradient(1200px 420px at 90% -10%, #c7d2fe 0%, transparent 60%),
    radial-gradient(900px 360px at -10% 20%, #99f6e4 0%, transparent 58%),
    linear-gradient(160deg, #f8fbff 0%, #eef2ff 48%, #f8fafc 100%);
}

.side{
  background:
    linear-gradient(165deg, rgba(11,18,40,.96) 0%, rgba(30,41,59,.94) 60%, rgba(49,46,129,.88) 100%);
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 50px rgba(2,6,23,.35);
}

.brand{
  letter-spacing:.2px;
  text-shadow:0 6px 20px rgba(79,70,229,.35);
}

.sidebar-brand-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.site-brand-logo{
  width:38px;
  height:38px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 18px rgba(15,23,42,.28);
  flex:0 0 38px;
}

.nav button{
  background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.18);
}

.nav button:hover,
.nav button.active{
  background:linear-gradient(145deg, rgba(79,70,229,.55), rgba(30,41,59,.9));
  border-color:rgba(199,210,254,.45);
}

.card,
.pRow,
.modal-card,
.var-box{
  background:var(--card);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(216,222,240,.9);
  box-shadow:0 12px 30px rgba(15,23,42,.08);
}

.btn{
  border-radius:14px;
  box-shadow:0 10px 18px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.05);
}

.btn:active{
  transform:translateY(0);
}

.pri{background:linear-gradient(135deg, #5b56ff, #4338ca);}
.ok{background:linear-gradient(135deg, #1ecf9a, #0f9f70);}
.warn{background:linear-gradient(135deg, #f8b23c, #e38a0e);}
.danger{background:linear-gradient(135deg, #ff5d5d, #e23c3c);}

input, textarea, select{
  border:1px solid #cfd8ef;
  background:linear-gradient(180deg,#ffffff,#f7f9ff);
}

input:focus, textarea:focus, select:focus{
  border-color:#8b92ff;
  box-shadow:0 0 0 4px rgba(79,70,229,.16);
}

.pRowActions{
  gap:10px;
}

.rowMenu summary{
  background:linear-gradient(140deg,#1f2937,#334155);
}

.rowMenuPanel{
  border:1px solid #d8def0;
  background:linear-gradient(180deg,#fff,#f8faff);
}

/* ── Toast overrides (light theme) ── */
.toast.ok{
  background:#f0fdf4!important;
  border:1px solid rgba(22,163,74,.3)!important;
  color:#14532d!important;
  text-shadow:none!important;
}
.toast.err{
  background:#fff1f2!important;
  border:1px solid rgba(239,68,68,.28)!important;
  color:#7f1d1d!important;
  text-shadow:none!important;
}

/* ── Toast overrides (dark theme) ── */
body:not(.light-theme) .toast.ok{
  background:linear-gradient(135deg,#166534,#15803d)!important;
  border:1px solid rgba(134,239,172,.35)!important;
  color:#ffffff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.25)!important;
}
body:not(.light-theme) .toast.err{
  background:linear-gradient(135deg,#7f1d1d,#991b1b)!important;
  border:1px solid rgba(252,165,165,.3)!important;
  color:#ffffff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.25)!important;
}

.pTitleRow{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-start;
  width:100%;
}

.pTagsRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-start;
  margin-top:8px;
}

.productIcon{
  width:72px;
  height:72px;
  flex:0 0 72px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid #d8def0;
  box-shadow:0 4px 10px rgba(15,23,42,.12);
}

.product-images-preview{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.productImageThumb{
  width:64px;
  height:64px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid #d8def0;
}

.product-image-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.product-image-label{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}

/* Product settings modal compact layout */
.links-modal-card{
  width:min(1120px,97vw)!important;
  max-height:calc(100vh - 24px)!important;
  overflow:hidden!important;
  padding:10px 12px!important;
}

#linksModal .headRow{
  margin-bottom:6px;
}

#linksModal .label{
  font-size:14px;
  padding-bottom:0;
}
.links-head-actions{
  gap:6px!important;
}
.links-head-actions .btn{
  padding:8px 14px!important;
  font-size:12px!important;
  border-radius:10px!important;
  min-height:36px;
  box-shadow:0 6px 14px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.18);
}

.links-modal-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px 8px;
}

.links-check-field{
  grid-column:1/-1;
}
@media(max-width:860px){
  .links-modal-grid{
    grid-template-columns:1fr;
  }
}

#linksModal .field{
  margin-bottom:5px;
}

#linksModal .field label{
  margin-bottom:3px;
  font-size:11px;
  font-weight:700;
}

#linksModal .field input:not([type="checkbox"]),
#linksModal .field select{
  min-height:34px;
  padding:6px 9px;
  border-radius:9px;
  font-size:12px;
}
.invoice-shell{
  display:grid;
  gap:18px;
  width:100%;
  min-width:0;
}

.invoice-page-topbar,
.invoice-page-hero,
.invoice-page-grid{
  display:grid;
  gap:16px;
  min-width:0;
}

.invoice-page-topbar{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
}

.invoice-page-subtitle{
  margin:10px 0 0;
  color:var(--muted);
  line-height:1.9;
  max-width:700px;
}

.invoice-page-hero{
  grid-template-columns:minmax(0,1.45fr) minmax(260px,.8fr);
}

.invoice-page-hero-card,
.invoice-card,
.invoice-preview-paper{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,251,255,.92));
  border:1px solid rgba(216,222,240,.95);
  border-radius:22px;
  box-shadow:0 14px 32px rgba(15,23,42,.08);
}

.invoice-page-hero-card{
  padding:22px 24px;
  min-width:0;
}

.invoice-page-hero-card h1{
  margin:0 0 10px;
  font-size:28px;
}

.invoice-page-hero-card p{
  margin:0;
  color:var(--muted);
  line-height:1.95;
}

.invoice-page-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(79,70,229,.1);
  color:#4338ca;
  font-size:12px;
  font-weight:800;
  margin-bottom:14px;
}

.invoice-page-kpi-label{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  margin-bottom:10px;
}

.invoice-page-kpi-value{
  font-size:22px;
  font-weight:900;
  margin-bottom:8px;
}

.invoice-page-kpi-hint{
  color:var(--muted);
  line-height:1.9;
}

.invoice-page-grid{
  grid-template-columns:1fr;
  align-items:start;
}

.invoice-page-form-column,
.invoice-page-preview-column{
  display:grid;
  gap:16px;
  min-width:0;
}

.invoice-card{
  padding:20px;
  min-width:0;
  overflow:hidden;
}

.invoice-card-sticky{
  position:static;
}

.invoice-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.invoice-card-title{
  font-size:17px;
  font-weight:900;
}

.invoice-template-status{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(16,185,129,.12);
  color:#047857;
  font-size:12px;
  font-weight:800;
}

.invoice-template-mode-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.invoice-mode-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid #d8def0;
  border-radius:999px;
  background:#f8fbff;
  font-weight:700;
  cursor:pointer;
}

.invoice-template-assets{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
  min-width:0;
}

.invoice-template-assets-simple{
  grid-template-columns:1fr;
}

.invoice-template-hints{
  display:grid;
  gap:8px;
  margin-bottom:14px;
  padding:14px;
  border:1px dashed #c8d2fe;
  border-radius:16px;
  background:#f8faff;
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
}

.invoice-template-editor-wrap{
  display:grid;
  gap:10px;
  min-width:0;
}

.invoice-editor-label{
  font-size:13px;
  font-weight:800;
  color:var(--muted);
}

.invoice-template-code{
  width:100%;
  max-width:100%;
  min-height:180px;
  padding:16px;
  border:1px solid #cfd8ef;
  border-radius:18px;
  background:#0f172a;
  color:#e2e8f0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;
  line-height:1.8;
  direction:ltr;
  text-align:left;
  resize:vertical;
}

.invoice-template-code-wide{
  min-height:200px;
}

.invoice-compact-note{
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #d8def0;
  border-radius:14px;
  background:#f8fbff;
  color:var(--muted);
  font-size:13px;
  line-height:1.9;
}

.invoice-items-list{
  display:grid;
  gap:14px;
  min-width:0;
}

.invoice-item-row{
  padding:16px;
  border:1px solid #d8def0;
  border-radius:18px;
  background:rgba(248,251,255,.95);
  min-width:0;
}

.invoice-item-row-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.invoice-item-index{
  font-size:13px;
  font-weight:800;
  color:var(--muted);
}

.invoice-item-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  min-width:0;
}

.invoice-item-grid-compact{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.invoice-preview-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
  color:var(--muted);
  font-size:13px;
}

.invoice-preview-paper{
  padding:24px;
  min-width:0;
}

.invoice-template-frame{
  width:100%;
  max-width:100%;
  min-height:920px;
  border:1px solid #d8def0;
  border-radius:20px;
  background:#fff;
}

.invoice-preview-card-full{
  width:100%;
}

.invoice-live-shell{
  display:grid;
  gap:18px;
  min-width:0;
}

.invoice-live-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.invoice-template-frame-live{
  min-height:calc(100vh - 220px);
}

.site-settings-shell{
  display:grid;
  gap:18px;
}

.site-settings-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:start;
}

.site-settings-subtitle{
  margin:10px 0 0;
  color:var(--muted);
  line-height:1.9;
  max-width:760px;
}

.site-settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.site-settings-card{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,251,255,.94));
  border:1px solid rgba(216,222,240,.95);
  border-radius:22px;
  box-shadow:0 14px 32px rgba(15,23,42,.08);
  padding:20px;
  min-width:0;
}

.site-settings-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.site-settings-card-title{
  font-size:17px;
  font-weight:900;
}

.site-settings-template-summary{
  display:grid;
  gap:14px;
}

.site-settings-template-meta{
  padding:14px 16px;
  border:1px dashed #c8d2fe;
  border-radius:16px;
  background:#f8fbff;
  color:var(--muted);
  line-height:1.9;
}

.site-settings-logo-preview-wrap{
  margin-top:16px;
}

.site-settings-preview-label{
  font-size:13px;
  font-weight:800;
  color:var(--muted);
  margin-bottom:10px;
}

.site-settings-logo-preview-shell{
  min-height:180px;
  border:1px dashed #c8d2fe;
  border-radius:18px;
  background:#f8fbff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.site-settings-logo-preview{
  max-width:100%;
  max-height:140px;
  object-fit:contain;
}

.site-settings-logo-placeholder{
  color:var(--muted);
  text-align:center;
  line-height:1.8;
}

.site-settings-template-code{
  width:100%;
  min-height:360px;
  padding:16px;
  border:1px solid #cfd8ef;
  border-radius:18px;
  background:#0f172a;
  color:#e2e8f0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;
  line-height:1.8;
  direction:ltr;
  text-align:left;
  resize:vertical;
}

.site-settings-template-modal-card{
  width:min(1120px,96vw)!important;
  max-height:90vh!important;
}

.site-settings-template-modal-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:start;
  margin-bottom:18px;
}

.site-settings-template-modal-title{
  font-size:20px;
  font-weight:900;
  margin-bottom:8px;
}

.site-settings-template-modal-sub{
  color:var(--muted);
  line-height:1.9;
}

.site-settings-template-analysis{
  margin-top:18px;
  display:grid;
  gap:12px;
}

.site-settings-template-analysis-meta{
  padding:12px 14px;
  border-radius:14px;
  background:#f8fbff;
  border:1px solid #d8def0;
  color:var(--muted);
  line-height:1.8;
}

.site-settings-template-uploads{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}

.site-settings-template-upload-card{
  border:1px solid #d8def0;
  border-radius:18px;
  background:#f8fbff;
  padding:14px;
  display:grid;
  gap:12px;
}

.site-settings-template-upload-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.site-settings-template-upload-head-copy{
  display:grid;
  gap:4px;
  min-width:0;
}

.site-settings-template-upload-title{
  font-weight:800;
}

.site-settings-template-upload-key{
  font-size:12px;
  color:var(--muted);
  direction:ltr;
}

.site-settings-template-upload-remove{
  padding:8px 12px!important;
  font-size:12px!important;
}

.site-settings-template-upload-input{
  width:100%;
}

.site-settings-template-upload-preview-shell{
  min-height:120px;
  border:1px dashed #c8d2fe;
  border-radius:14px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
}

.site-settings-template-upload-preview{
  max-width:100%;
  max-height:100px;
  object-fit:contain;
}

.site-settings-template-upload-placeholder,
.site-settings-template-empty{
  color:var(--muted);
  text-align:center;
  line-height:1.8;
}

.invoice-preview-head,
.invoice-preview-parties,
.invoice-preview-summary{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.invoice-preview-head{
  align-items:flex-start;
  margin-bottom:18px;
}

.invoice-preview-kicker{
  color:#4f46e5;
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  margin-bottom:8px;
}

.invoice-preview-head h2{
  margin:0;
  font-size:30px;
}

.invoice-preview-head-meta{
  display:grid;
  gap:10px;
}

.invoice-preview-head-meta div,
.invoice-preview-party,
.invoice-preview-summary div,
.invoice-preview-notes{
  background:#f8fbff;
  border:1px solid #d8def0;
  border-radius:16px;
  padding:14px;
}

.invoice-preview-head-meta span,
.invoice-preview-summary span{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}

.invoice-preview-head-meta strong,
.invoice-preview-summary strong{
  font-size:15px;
}

.invoice-preview-party{
  flex:1 1 280px;
}

.invoice-preview-party-title{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  margin-bottom:8px;
}

.invoice-preview-party-name{
  font-size:18px;
  font-weight:900;
  margin-bottom:8px;
}

.invoice-preview-party p,
.invoice-preview-notes p{
  margin:0;
  color:#334155;
  line-height:1.9;
}

.invoice-preview-table-wrap{
  overflow:auto;
  margin:18px 0;
}

.invoice-preview-table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
}

.invoice-preview-table th,
.invoice-preview-table td{
  padding:12px 10px;
  border-bottom:1px solid #e2e8f0;
  text-align:right;
  vertical-align:top;
}

.invoice-preview-table th{
  color:var(--muted);
  background:#f8fbff;
  font-weight:800;
}

.invoice-preview-table-note{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
}

.invoice-preview-summary{
  margin-bottom:18px;
}

.invoice-preview-summary div{
  min-width:180px;
  flex:1 1 180px;
}

.invoice-preview-total{
  background:rgba(79,70,229,.08)!important;
  border-color:rgba(79,70,229,.18)!important;
}

.invoice-preview-paper-clean .invoice-preview-sub{
  margin-top:8px;
  color:var(--muted);
  line-height:1.8;
}

.invoice-preview-summary-clean{
  display:flex;
  justify-content:flex-end;
}

@media(max-width:1100px){
  .invoice-page-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:820px){
  .invoice-page-topbar,
  .invoice-page-hero,
  .invoice-item-grid,
  .invoice-template-assets{
    grid-template-columns:1fr;
  }

  .invoice-page-topbar{
    grid-template-columns:1fr;
  }

  .invoice-card{
    padding:16px;
  }

  .invoice-preview-table{
    min-width:460px;
  }

  .site-settings-hero,
  .site-settings-grid,
  .site-settings-template-modal-head{
    grid-template-columns:1fr;
  }

  .invoice-live-head{
    flex-direction:column;
    align-items:stretch;
  }
}

/* ===== Toggle Switch ===== */
.links-check-field > label:first-child{
  display:block;
  font-size:11px;
  font-weight:800;
  color:rgba(255,255,255,.38);
  letter-spacing:.07em;
  text-transform:uppercase;
  margin-bottom:5px;
}

.links-check-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  direction:rtl;
  padding:8px 12px;
  border:1px solid rgba(129,140,248,.22);
  border-radius:18px;
  background:linear-gradient(145deg, rgba(15,23,42,.60) 0%, rgba(30,41,59,.72) 100%);
  cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.16);
  transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.links-check-row:hover{
  border-color:rgba(129,140,248,.44);
  background:linear-gradient(145deg, rgba(20,30,56,.68) 0%, rgba(35,48,76,.78) 100%);
  box-shadow:0 6px 24px rgba(0,0,0,.22);
}

.links-check-row:has(input:checked){
  border-color:rgba(91,86,255,.48);
  background:linear-gradient(145deg, rgba(91,86,255,.14) 0%, rgba(124,58,237,.10) 100%);
}

/* Toggle track */
.links-check-row input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  flex-shrink:0;
  width:48px;
  height:26px;
  border-radius:99px;
  background:rgba(255,255,255,.10);
  border:1.5px solid rgba(255,255,255,.14);
  position:relative;
  cursor:pointer;
  margin:0;
  padding:0;
  transition:background .28s ease, border-color .28s ease, box-shadow .28s ease;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.22);
  vertical-align:middle;
}

/* Toggle thumb */
.links-check-row input[type="checkbox"]::before{
  content:'';
  position:absolute;
  top:4px;
  right:4px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  box-shadow:0 2px 8px rgba(0,0,0,.24);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), background .22s ease, box-shadow .22s ease;
}

.links-check-row input[type="checkbox"]:checked{
  background:linear-gradient(135deg, #5b56ff, #7c3aed);
  border-color:transparent;
  box-shadow:0 0 0 3px rgba(91,86,255,.20), 0 4px 14px rgba(91,86,255,.30);
}

.links-check-row input[type="checkbox"]:checked::before{
  transform:translateX(-20px);
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.28);
}

.links-check-row span{
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  color:#c8d4f0;
  text-align:right;
  flex:1;
}

#linksModal .field .links-check-row{
  margin-bottom:0;
}

/* Light theme */
body.light-theme .links-check-field > label:first-child{
  color:rgba(15,23,42,.42);
}

body.light-theme .links-check-row{
  background:#fff;
  border-color:rgba(99,102,241,.18);
  box-shadow:0 4px 14px rgba(15,23,42,.06);
}

body.light-theme .links-check-row:hover{
  border-color:rgba(99,102,241,.38);
  box-shadow:0 6px 20px rgba(15,23,42,.10);
}

body.light-theme .links-check-row:has(input:checked){
  border-color:rgba(91,86,255,.35);
  background:rgba(91,86,255,.05);
}

body.light-theme .links-check-row span{
  color:#1e293b;
}

body.light-theme .links-check-row input{
  background:rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.14);
}

body.light-theme .links-check-row input::before{
  background:rgba(255,255,255,.92);
}

body.light-theme .links-check-row input:checked{
  background:linear-gradient(135deg,#5b56ff,#7c3aed);
  border-color:transparent;
}

body.light-theme .links-check-row input:checked::before{
  background:#fff;
}

.links-section-field{
  margin-top:0;
  padding:7px 9px;
  border:1px solid var(--bd);
  border-radius:10px;
  background:rgba(255,255,255,.02);
}

.links-images-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px 8px;
  margin-top:5px;
}

.links-nested-field{
  margin-bottom:0!important;
}

.links-inline-actions{
  margin-top:5px;
  gap:5px;
}

.links-inline-actions .btn{
  padding:6px 11px!important;
  font-size:11px!important;
  border-radius:10px!important;
}

.links-icon-row{
  gap:10px;
}
.links-icon-note{
  padding:14px 16px;
  gap:8px;
  border-radius:14px;
}
.links-icon-note-text{
  font-size:13px;
  line-height:1.8;
}

#linksModal .builder-plan-image-field{
  padding:6px!important;
}
#linksModal .builder-plan-image-actions{
  gap:5px;
}
#linksModal .builder-paste-btn{
  min-height:24px!important;
  padding:4px 6px!important;
  font-size:.6rem!important;
}
#linksModal .builder-plan-image-thumb{
  max-width:68px;
  height:46px;
}
#linksModal .builder-plan-image-thumb-wrap{
  max-width:68px;
}
#clearProductImagesBtn,
#clearProductIconBtn{
  padding:6px 10px!important;
  font-size:11px!important;
}

.links-footer-actions{
  justify-content:flex-start;
  margin-top:0;
}

.links-footer-actions .btn{
  padding:9px 16px!important;
  font-size:13px!important;
}

body:not(.light-theme) .links-section-field{
  background:rgba(15,23,42,.25);
  border-color:rgba(148,163,184,.26);
}

body.light-theme .links-section-field{
  background:#f8faff;
  border-color:#dbe3f2;
}

@media(max-width:900px){
  .links-modal-grid{
    grid-template-columns:1fr;
  }
  .links-images-grid{
    grid-template-columns:1fr;
  }
}

.image-price-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.image-price-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  border:1px solid transparent;
}

.image-price-badge.monthly{
  background:rgba(16,185,129,.16);
  border-color:rgba(16,185,129,.35);
  color:#34d399;
}

.image-price-badge.yearly{
  background:rgba(59,130,246,.16);
  border-color:rgba(59,130,246,.35);
  color:#60a5fa;
}

.image-price-badge.business{
  background:rgba(168,85,247,.16);
  border-color:rgba(168,85,247,.35);
  color:#c4b5fd;
}

.image-price-compare{
  color:#e5ecfb;
  line-height:1.8;
}

body.light-theme .image-price-compare{
  color:#0f172a;
}

.image-price-empty{
  color:#94a3b8;
}

.plan-name-wrap{
  display:grid;
  gap:6px;
}

.cycle-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.ltr-inline{
  direction:ltr;
  unicode-bidi:plaintext;
  text-align:left;
  display:block;
  width:100%;
}

.cycle-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:3px 9px;
  font-size:11px;
  font-weight:800;
  border:1px solid transparent;
}

.cycle-badge.monthly{
  background:rgba(16,185,129,.16);
  border-color:rgba(16,185,129,.35);
  color:#34d399;
}

.cycle-badge.yearly{
  background:rgba(59,130,246,.16);
  border-color:rgba(59,130,246,.35);
  color:#60a5fa;
}

.cycle-badge.business{
  background:rgba(168,85,247,.16);
  border-color:rgba(168,85,247,.35);
  color:#c4b5fd;
}

.cycle-badge.neutral{
  background:rgba(148,163,184,.16);
  border-color:rgba(148,163,184,.35);
  color:#cbd5e1;
}

body.light-theme .cycle-badge.monthly{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#065f46;
}

body.light-theme .cycle-badge.yearly{
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#1e40af;
}

body.light-theme .cycle-badge.business{
  background:#f5f3ff;
  border-color:#ddd6fe;
  color:#5b21b6;
}

body.light-theme .cycle-badge.neutral{
  background:#f1f5f9;
  border-color:#cbd5e1;
  color:#334155;
}

body.light-theme .image-price-badge.monthly{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#065f46;
}

body.light-theme .image-price-badge.yearly{
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#1e40af;
}

body.light-theme .image-price-badge.business{
  background:#f5f3ff;
  border-color:#ddd6fe;
  color:#5b21b6;
}

.toolbar .var-filter{
  min-width:220px;
}

.tagBadge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid transparent;
}

.priorityTag{
  background:linear-gradient(135deg,#eff6ff,#dbeafe);
  color:#1d4ed8;
  border-color:#bfdbfe;
}

.categoryTag{
  background:linear-gradient(135deg,#ccfbf1,#99f6e4);
  color:#0f766e;
  border-color:#5eead4;
}

.verifiedTag{
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);
  color:#1d4ed8;
  border-color:#93c5fd;
  box-shadow:0 8px 18px rgba(59,130,246,.16);
}

.hotTag{
  background:linear-gradient(135deg,#fff7ed,#ffedd5);
  color:#c2410c;
  border-color:#fed7aa;
}

.midTag{
  background:linear-gradient(135deg,#f5f3ff,#ede9fe);
  color:#6d28d9;
  border-color:#ddd6fe;
}

.lowTag{
  background:linear-gradient(135deg,#f8fafc,#e2e8f0);
  color:#334155;
  border-color:#cbd5e1;
}

#productSalesTagInput{
  width:100%;
  padding:12px 42px 12px 14px;
  border:2px solid var(--bd);
  border-radius:12px;
  background:
    linear-gradient(180deg,#ffffff,#f8faff),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:0 0,14px center;
  background-size:auto,14px;
  color:var(--txt);
  font-size:14px;
  font-weight:700;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
}

#productSalesTagInput:focus{
  border-color:#8b92ff;
  box-shadow:0 0 0 4px rgba(79,70,229,.16);
}

select option{
  font-family:Vazir,sans-serif;
}

/* Deep Navy Slate — Dark Theme */
:root{
  --bg:#0f172a;
  --card:#1e293b;
  --surface:#1e293b;
  --surface2:#243350;
  --text:#f1f5f9;
  --muted:#94a3b8;
  --bd:rgba(148,163,184,.1);
  --pri:#818cf8;
  --priH:#6366f1;
  --ok:#10b981;
  --okH:#059669;
  --warn:#38bdf8;
  --warnH:#0ea5e9;
  --danger:#f43f5e;

  /* ── SP Sales Portal — semantic color tokens (dark defaults) */
  --sp-shell-bg:linear-gradient(135deg,#0f0f1a 0%,#1a1a2e 50%,#16213e 100%);
  --sp-panel-bg:rgba(255,255,255,.025);
  --sp-panel-border:rgba(56,189,248,.07);
  --sp-assign-bg:linear-gradient(160deg,#111126 0%,#151530 55%,#121e38 100%);
  --sp-assign-border:rgba(255,255,255,.08);
  --sp-assign-bar:linear-gradient(90deg,#64c8ff,#a064ff 50%,#64ffa0);
  --sp-assign-shadow:0 20px 50px rgba(0,0,0,.45);
  --sp-card-bg:rgba(255,255,255,.04);
  --sp-card-border:rgba(255,255,255,.08);
  --sp-output-bg:rgba(100,255,160,.04);
  --sp-output-border:rgba(100,255,160,.14);
  --sp-output-sep:rgba(100,255,160,.12);
  --sp-input-bg:rgba(255,255,255,.06);
  --sp-input-border:rgba(255,255,255,.1);
  --sp-input-focus-border:rgba(100,200,255,.35);
  --sp-input-focus-ring:rgba(100,200,255,.08);
  --sp-input-color:rgba(255,255,255,.72);
  --sp-input-placeholder:rgba(255,255,255,.28);
  --sp-text-hero:#ffffff;
  --sp-text-hero-label:#64c8ff;
  --sp-text-hero-sub:rgba(255,255,255,.42);
  --sp-text-card-title:#ffffff;
  --sp-text-kicker:#64c8ff;
  --sp-text-kicker-output:#64ffa0;
  --sp-text-card-sub:rgba(255,255,255,.38);
  --sp-text-field-label:rgba(255,255,255,.38);
  --sp-text-empty:rgba(255,255,255,.28);
  --sp-badge-1-bg:rgba(100,200,255,.08);
  --sp-badge-1-border:rgba(100,200,255,.28);
  --sp-badge-1-text:#64c8ff;
  --sp-badge-2-bg:rgba(160,100,255,.08);
  --sp-badge-2-border:rgba(160,100,255,.28);
  --sp-badge-2-text:#a064ff;
  --sp-badge-3-bg:rgba(100,255,160,.08);
  --sp-badge-3-border:rgba(100,255,160,.28);
  --sp-badge-3-text:#64ffa0;
  --sp-btn-bg:linear-gradient(135deg,#4f46e5,#7c3aed);
  --sp-btn-bg-hover:linear-gradient(135deg,#4338ca,#6d28d9);
  --sp-btn-shadow:0 4px 20px rgba(124,58,237,.35);
  --sp-btn-shadow-hover:0 6px 28px rgba(124,58,237,.5);
  --sp-btn-color:#ffffff;
  --sp-dot-color:#64ffa0;
  --sp-dot-glow:#64ffa0;
  --sp-panel-title-color:rgba(148,163,184,.85);
  --sp-stat-bg:rgba(255,255,255,.025);
  --sp-stat-border:rgba(56,189,248,.07);
  --sp-stat-val:#e2e8f0;
  --sp-stat-label:rgba(148,163,184,.82);
  --sp-product-card-bg:rgba(255,255,255,.04);
  --sp-product-card-border:rgba(96,165,250,.12);
  --sp-product-name:#e2e8f0;
  --sp-product-meta:rgba(148,163,184,.65);
  --sp-inventory-strip-bg:linear-gradient(160deg,rgba(15,23,42,.9),rgba(10,16,36,.88));
  --sp-strip-card-1-bg:linear-gradient(135deg,rgba(56,189,248,.18),rgba(99,102,241,.12));
  --sp-strip-card-1-border:rgba(56,189,248,.22);
  --sp-strip-card-2-bg:linear-gradient(135deg,rgba(139,92,246,.18),rgba(236,72,153,.12));
  --sp-strip-card-2-border:rgba(139,92,246,.22);
  --sp-strip-card-3-bg:linear-gradient(135deg,rgba(52,211,153,.16),rgba(14,165,233,.12));
  --sp-strip-card-3-border:rgba(52,211,153,.22);
  --sp-strip-card-4-bg:linear-gradient(135deg,rgba(251,191,36,.14),rgba(248,113,113,.1));
  --sp-strip-card-4-border:rgba(251,191,36,.22);
  --sp-panel-head-border:rgba(255,255,255,.055);
  --sp-table-head-color:rgba(56,189,248,.65);
  --sp-table-row-hover:rgba(56,189,248,.035);
  --sp-table-border:rgba(255,255,255,.035);
  --sp-broken-bg:rgba(255,255,255,.025);
}

body{
  font-family:Vazirmatn,Vazir,sans-serif;
  background:var(--bg);
  color:var(--text);
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 55% 45% at 80% 5%, rgba(59,130,246,.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 10% 90%, rgba(129,140,248,.05) 0%, transparent 55%);
  pointer-events:none;
  z-index:0;
}

.app,.main,.wrap{
  position:relative;
  z-index:1;
}

.side{
  background:linear-gradient(180deg,#0c1628 0%,#0f172a 50%,#0d1a2e 100%);
  border-left:1px solid rgba(59,130,246,.12);
}

.sub,.miniDate,.pMeta,.hint,.field label{
  color:var(--muted)!important;
}

.pTitle,
.miniName,
.brand,
.card h1,
.card h2,
.card h3{
  color:var(--text)!important;
}

.pMeta,
.miniDate,
.hint,
.sub{
  color:#c3cee0!important;
}

.card,.pRow,.var-box,.modal-card{
  background:linear-gradient(145deg,#1e293b 0%,#182236 100%)!important;
  border:1px solid rgba(148,163,184,.1)!important;
  box-shadow:0 8px 32px rgba(0,0,0,.4)!important;
}
body:not(.light-theme) .gcard{
  background:#1e293b!important;
  border:1px solid rgba(148,163,184,.1)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.35)!important;
}
body:not(.light-theme) .gtitle{
  color:#f1f5f9!important;
  border-bottom-color:rgba(148,163,184,.1)!important;
}
body:not(.light-theme) #varsSection .field label{
  color:#cbd5e1!important;
}

.label{
  color:#93c5fd!important;
  border-color:#60a5fa!important;
}

.search input,
.field input,
.field textarea,
.field select,
.save,
.code{
  background:var(--surface)!important;
  color:var(--text)!important;
  border:1px solid var(--bd)!important;
}

input::placeholder,textarea::placeholder{
  color:#95a3bb!important;
  opacity:1!important;
}

.search input{
  color:#e9eefb!important;
}

.search input::placeholder{
  color:#9db0cf!important;
  opacity:1!important;
}

.var-table td{
  color:#e5ecfb!important;
}

input:focus,textarea:focus,select:focus,.code:focus{
  border-color:rgba(96,165,250,.5)!important;
  background:var(--surface2)!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.12)!important;
}

.btn{
  border-radius:10px!important;
  box-shadow:0 4px 20px rgba(59,130,246,.2)!important;
}

.pri{
  background:linear-gradient(135deg,#3b82f6,#818cf8)!important;
}

.ok{
  background:linear-gradient(135deg,#10b981,#059669)!important;
}

.warn{
  background:linear-gradient(135deg,#06b6d4,#0891b2)!important;
}

.danger{
  background:linear-gradient(135deg,#f43f5e,#e11d48)!important;
}

.rowMenu summary{
  background:var(--surface)!important;
  border:1px solid var(--bd);
}

.rowMenuPanel{
  background:linear-gradient(160deg,#1a2235 0%, #111827 100%)!important;
  border:1px solid var(--bd)!important;
}

.var-table th,.var-table td{
  border-bottom:1px solid var(--bd)!important;
}

.var-table th{
  background:rgba(255,255,255,.02)!important;
  color:var(--muted)!important;
}

.portal-global-header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin:0;
}

html.auth-session-cached #portalHomeAuthBtn{
  display:none !important;
}

html.auth-session-cached #portalGlobalHeader{
  display:flex !important;
}

.portal-global-header-actions{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}

.portal-global-btn,
.theme-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:44px;
  border:1px solid var(--bd);
  border-radius:12px;
  background:linear-gradient(135deg,#1f2937,#111827);
  color:#e5ecfb;
  font-family:inherit;
  font-size:18px;
  font-weight:800;
  padding:0 14px;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.24);
  white-space:nowrap;
}

.portal-global-btn-profile{
  font-size:13px;
}

.main > .wrap > section.card > .headRow:first-child{
  position:sticky;
  top:14px;
  z-index:85;
  margin:-4px 0 22px;
  padding:18px 20px;
  border-radius:26px;
  border:1px solid rgba(148,163,184,.14);
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.86));
  box-shadow:0 18px 42px rgba(2,6,23,.22);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

body.light-theme .main > .wrap > section.card > .headRow:first-child{
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,245,255,.9));
  border-color:rgba(203,213,225,.7);
  box-shadow:0 16px 36px rgba(15,23,42,.1);
}

body.light-theme{
  background:#f4f7ff!important;
  color:#1e293b!important;
  color-scheme:light;

  /* ── SP Sales Portal — semantic color tokens (light overrides) */
  --sp-shell-bg:linear-gradient(135deg,#f0f4f8 0%,#e8edf5 60%,#f0f4f8 100%);
  --sp-panel-bg:rgba(255,255,255,.75);
  --sp-panel-border:rgba(99,144,210,.1);
  --sp-assign-bg:linear-gradient(135deg,#ffffff 0%,#f5f8ff 55%,#eef2ff 100%);
  --sp-assign-border:rgba(37,99,235,.13);
  --sp-assign-bar:linear-gradient(90deg,#3b82f6,#6366f1 50%,#22c55e);
  --sp-assign-shadow:0 12px 36px rgba(15,23,42,.08);
  --sp-card-bg:rgba(255,255,255,.97);
  --sp-card-border:rgba(99,144,210,.15);
  --sp-output-bg:rgba(22,163,74,.04);
  --sp-output-border:rgba(22,163,74,.15);
  --sp-output-sep:rgba(22,163,74,.15);
  --sp-input-bg:#ffffff;
  --sp-input-border:rgba(99,144,210,.2);
  --sp-input-focus-border:rgba(37,99,235,.32);
  --sp-input-focus-ring:rgba(37,99,235,.07);
  --sp-input-color:#1e293b;
  --sp-input-placeholder:#94a3b8;
  --sp-text-hero:#0f172a;
  --sp-text-hero-label:#2563eb;
  --sp-text-hero-sub:rgba(30,41,59,.6);
  --sp-text-card-title:#0f172a;
  --sp-text-kicker:#2563eb;
  --sp-text-kicker-output:#15803d;
  --sp-text-card-sub:rgba(30,41,59,.54);
  --sp-text-field-label:rgba(51,65,85,.6);
  --sp-text-empty:rgba(30,41,59,.38);
  --sp-badge-1-bg:rgba(37,99,235,.07);
  --sp-badge-1-border:rgba(37,99,235,.2);
  --sp-badge-1-text:#1d4ed8;
  --sp-badge-2-bg:rgba(109,40,217,.07);
  --sp-badge-2-border:rgba(109,40,217,.2);
  --sp-badge-2-text:#6d28d9;
  --sp-badge-3-bg:rgba(22,163,74,.07);
  --sp-badge-3-border:rgba(22,163,74,.2);
  --sp-badge-3-text:#15803d;
  --sp-btn-bg:linear-gradient(135deg,#4f46e5,#7c3aed);
  --sp-btn-bg-hover:linear-gradient(135deg,#4338ca,#6d28d9);
  --sp-btn-shadow:0 4px 16px rgba(109,40,217,.22);
  --sp-btn-shadow-hover:0 6px 22px rgba(109,40,217,.32);
  --sp-btn-color:#ffffff;
  --sp-dot-color:#22c55e;
  --sp-dot-glow:rgba(34,197,94,.5);
  --sp-panel-title-color:#64748b;
  --sp-stat-bg:rgba(255,255,255,.88);
  --sp-stat-border:rgba(99,144,210,.1);
  --sp-stat-val:#0f172a;
  --sp-stat-label:rgba(51,65,85,.55);
  --sp-product-card-bg:rgba(255,255,255,.78);
  --sp-product-card-border:rgba(99,144,210,.12);
  --sp-product-name:#1e293b;
  --sp-product-meta:rgba(51,65,85,.5);
  --sp-inventory-strip-bg:linear-gradient(160deg,rgba(255,255,255,.96),rgba(245,250,255,.92));
  --sp-strip-card-1-bg:linear-gradient(135deg,rgba(59,130,246,.08),rgba(99,102,241,.06));
  --sp-strip-card-1-border:rgba(59,130,246,.16);
  --sp-strip-card-2-bg:linear-gradient(135deg,rgba(139,92,246,.08),rgba(236,72,153,.06));
  --sp-strip-card-2-border:rgba(139,92,246,.16);
  --sp-strip-card-3-bg:linear-gradient(135deg,rgba(16,185,129,.07),rgba(14,165,233,.06));
  --sp-strip-card-3-border:rgba(16,185,129,.16);
  --sp-strip-card-4-bg:linear-gradient(135deg,rgba(217,119,6,.07),rgba(220,38,38,.05));
  --sp-strip-card-4-border:rgba(217,119,6,.16);
  --sp-panel-head-border:rgba(99,144,210,.1);
  --sp-table-head-color:rgba(14,165,233,.7);
  --sp-table-row-hover:rgba(14,165,233,.04);
  --sp-table-border:rgba(99,144,210,.08);
  --sp-broken-bg:rgba(255,255,255,.75);
}

body.light-theme::before{
  background:
    radial-gradient(ellipse 50% 40% at 80% 10%, rgba(99,102,241,.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(6,182,212,.08) 0%, transparent 60%)!important;
}

body.light-theme .theme-toggle{
  background:linear-gradient(135deg,#ffffff,#eef2ff);
  color:#1e293b;
  border-color:#d8e0f2;
  box-shadow:0 8px 20px rgba(15,23,42,.12);
}

body.light-theme .portal-global-header-actions{
  background:transparent;
  border-color:transparent;
}

body.light-theme .portal-global-btn{
  background:linear-gradient(135deg,#ffffff,#eef2ff);
  color:#1e293b;
  border-color:#d8e0f2;
  box-shadow:0 8px 20px rgba(15,23,42,.12);
}

.content-portal-header{
  position:sticky;
  top:14px;
  z-index:92;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 22px;
  padding:18px 26px;
  border-radius:30px;
  border:1px solid rgba(148,163,184,.16);
  background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(15,23,42,.88));
  box-shadow:0 20px 48px rgba(2,6,23,.24);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.content-portal-header-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  direction:ltr;
}

.content-portal-header-title-wrap{
  display:flex;
  align-items:center;
  min-width:0;
}

.content-portal-header-title{
  color:#93c5fd;
  font-size:18px;
  font-weight:900;
  line-height:1.7;
  text-align:right;
}

body.light-theme .content-portal-header{
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,245,255,.92));
  border-color:rgba(203,213,225,.78);
  box-shadow:0 18px 40px rgba(15,23,42,.1);
}

body.light-theme .content-portal-header-title{
  color:#2563eb;
}

@media(max-width:900px){
  .content-portal-header{
    padding:16px 18px;
    border-radius:24px;
    flex-direction:column-reverse;
    align-items:stretch;
  }
  .content-portal-header-actions{
    justify-content:flex-start;
  }
}

.sales-portal-header{
  position:sticky;
  top:14px;
  z-index:92;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 18px;
  padding:18px 26px;
  border-radius:30px;
  border:1px solid rgba(56,189,248,.18);
  background:linear-gradient(180deg, rgba(7,23,38,.96), rgba(11,31,49,.9));
  box-shadow:0 20px 48px rgba(2,6,23,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.sales-portal-header-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  direction:ltr;
}

.sales-portal-header-title-wrap{
  display:flex;
  align-items:center;
  min-width:0;
}

.sales-portal-header-title{
  color:#67e8f9;
  font-size:18px;
  font-weight:900;
  line-height:1.7;
  text-align:right;
}

body.light-theme .sales-portal-header{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(236,254,255,.92));
  border-color:rgba(125,211,252,.42);
  box-shadow:0 18px 40px rgba(15,23,42,.1);
}

body.light-theme .sales-portal-header-title{
  color:#0284c7;
}

.management-portal-header{
  position:sticky;
  top:14px;
  z-index:92;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 18px;
  padding:18px 26px;
  border-radius:30px;
  border:1px solid rgba(165,180,252,.18);
  background:linear-gradient(180deg, rgba(17,24,39,.96), rgba(30,27,75,.9));
  box-shadow:0 20px 48px rgba(2,6,23,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.management-portal-header-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  direction:ltr;
}

.management-portal-header-page-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.management-portal-header-action-btn{
  border:none;
  cursor:pointer;
  border-radius:14px;
  padding:12px 18px;
  font-weight:800;
  font-family:inherit;
  font-size:13px;
  color:#eef2ff;
  background:linear-gradient(135deg, rgba(91,86,255,.92), rgba(99,102,241,.78));
  box-shadow:0 10px 18px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.management-portal-header-action-btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.05);
}

.management-portal-header-title-wrap{
  display:flex;
  align-items:center;
  min-width:0;
}

.management-portal-header-title{
  color:#c4b5fd;
  font-size:18px;
  font-weight:900;
  line-height:1.7;
  text-align:right;
}

body.light-theme .management-portal-header{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,243,255,.92));
  border-color:rgba(196,181,253,.45);
  box-shadow:0 18px 40px rgba(15,23,42,.1);
}

body.light-theme .management-portal-header-title{
  color:#6d28d9;
}

body.light-theme .management-portal-header-action-btn{
  color:#312e81;
  background:linear-gradient(135deg, rgba(221,214,254,.98), rgba(237,233,254,.96));
  box-shadow:0 10px 18px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.28);
}

body.management-portal-active #managementPage .mgmt-topbar,
body.management-portal-active #suppliersPage > .headRow:first-child,
body.management-portal-active #adminsPage .adm-header,
body.management-portal-active #orderTrainingManagementPage .training-hero,
body.management-portal-active #orderTrainingManagementDetailPage .training-modal-head,
body.management-portal-active #faqManagementPage .faq-header,
body.management-portal-active #notificationsPage > .headRow:first-child,
body.management-portal-active #reviewRequestsManagementPage .noti-hero,
body.management-portal-active #inventoryVaultPage .iv-topbar{
  display:none !important;
}

body.light-theme .side{
  background:linear-gradient(180deg,#ffffff,#eef3ff)!important;
  color:#1e293b!important;
  border-left:1px solid #dde5f5!important;
}

body.light-theme .nav button{
  color:#1e293b!important;
  background:linear-gradient(145deg,#ffffff,#eef2ff)!important;
  border:1px solid #dbe3f2!important;
}

body.light-theme .nav button:hover,
body.light-theme .nav button.active{
  background:linear-gradient(145deg,#e0e7ff,#c7d2fe)!important;
}

body.light-theme .card,
body.light-theme .pRow,
body.light-theme .var-box,
body.light-theme .modal-card{
  background:linear-gradient(160deg,#ffffff 0%, #f5f8ff 100%)!important;
  border:1px solid #dbe3f2!important;
  box-shadow:0 10px 26px rgba(15,23,42,.08)!important;
}

body.light-theme .pTitle,
body.light-theme .miniName,
body.light-theme .brand,
body.light-theme .card h1,
body.light-theme .card h2,
body.light-theme .card h3{
  color:#0f172a!important;
}

body.light-theme .sub,
body.light-theme .miniDate,
body.light-theme .pMeta,
body.light-theme .hint,
body.light-theme .field label{
  color:#5f6b84!important;
}

body.light-theme .search input,
body.light-theme .field input,
body.light-theme .field textarea,
body.light-theme .field select,
body.light-theme .save,
body.light-theme .code{
  background:#f8faff!important;
  color:#1e293b!important;
  -webkit-text-fill-color:#1e293b!important;
  caret-color:#0f172a!important;
  border:1px solid #dbe3f2!important;
}

body.light-theme input::placeholder,
body.light-theme textarea::placeholder,
body.light-theme .search input::placeholder{
  color:#7b8aa5!important;
  -webkit-text-fill-color:#7b8aa5!important;
}

body.light-theme .search input:focus,
body.light-theme .field input:focus,
body.light-theme .field textarea:focus,
body.light-theme .field select:focus,
body.light-theme .code:focus{
  background:#ffffff!important;
  border-color:rgba(99,102,241,.38)!important;
  box-shadow:0 0 0 3px rgba(99,102,241,.08)!important;
  color:#1e293b!important;
  -webkit-text-fill-color:#1e293b!important;
  caret-color:#0f172a!important;
}

body.light-theme input:hover,
body.light-theme textarea:hover,
body.light-theme select:hover,
body.light-theme input:active,
body.light-theme textarea:active,
body.light-theme select:active{
  background:#fdfefe!important;
  color:#1e293b!important;
  -webkit-text-fill-color:#1e293b!important;
  caret-color:#0f172a!important;
}

body.light-theme input,
body.light-theme textarea,
body.light-theme select{
  color-scheme:light;
  color:#1e293b!important;
  -webkit-text-fill-color:#1e293b!important;
  caret-color:#0f172a!important;
}

body.light-theme select option{
  background:#ffffff!important;
  color:#1e293b!important;
}

body.light-theme input[type="search"]::-webkit-search-cancel-button{
  opacity:.55;
  cursor:pointer;
}

body.light-theme input:-webkit-autofill,
body.light-theme input:-webkit-autofill:hover,
body.light-theme input:-webkit-autofill:focus,
body.light-theme textarea:-webkit-autofill,
body.light-theme textarea:-webkit-autofill:hover,
body.light-theme textarea:-webkit-autofill:focus,
body.light-theme select:-webkit-autofill,
body.light-theme select:-webkit-autofill:hover,
body.light-theme select:-webkit-autofill:focus{
  -webkit-text-fill-color:#0f172a!important;
  box-shadow:0 0 0 1000px #ffffff inset!important;
  transition:background-color 9999s ease-out 0s;
  caret-color:#0f172a;
}

body.light-theme .rowMenuPanel{
  background:linear-gradient(180deg,#fff,#f7f9ff)!important;
  border:1px solid #dbe3f2!important;
}

body.light-theme .var-table td{
  color:#334155!important;
}

body.light-theme .mini.edit{
  background:linear-gradient(135deg,#4f46e5,#3730a3)!important;
  color:#ffffff!important;
}

body.light-theme .mini.del{
  background:linear-gradient(135deg,#fee2e2,#fecaca)!important;
  color:#b91c1c!important;
  border:1px solid #fca5a5!important;
}

body.light-theme .miniCard{
  background:linear-gradient(180deg,#ffffff,#f5f8ff)!important;
  border:1px solid #dbe3f2!important;
}

.links-icon-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  align-items:stretch;
}
.links-icon-field{
  margin:0!important;
}
.links-icon-note{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:18px 20px;
  border:1px solid rgba(99,102,241,.16);
  border-radius:16px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(56,189,248,.11) 0%, rgba(56,189,248,0) 58%),
    linear-gradient(145deg, rgba(18,28,45,.78) 0%, rgba(8,14,27,.92) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.links-icon-note-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(99,102,241,.16);
  border:1px solid rgba(99,102,241,.28);
  color:#c7d2fe;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
}
.links-icon-note-text{
  color:#dbe7fb;
  font-size:14px;
  font-weight:700;
  line-height:1.95;
}
.links-icon-note-brand{
  color:#7dd3fc;
  font-weight:900;
  letter-spacing:.02em;
}
@media (max-width:860px){
  .links-icon-row{
    grid-template-columns:1fr;
  }
}
body.light-theme .links-icon-note{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(56,189,248,.08) 0%, rgba(56,189,248,0) 58%),
    linear-gradient(145deg, rgba(255,255,255,.96) 0%, rgba(241,245,255,.96) 100%);
  border-color:rgba(99,102,241,.14);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
body.light-theme .links-icon-note-badge{
  color:#4338ca;
}
body.light-theme .links-icon-note-text{
  color:#1e293b;
}
body.light-theme .links-icon-note-brand{
  color:#0369a1;
}

.smart-tools-shell{
  display:grid;
  gap:18px;
}

.smart-tools-hero{
  padding:20px 22px;
  border:1px solid var(--bd);
  border-radius:18px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(56,189,248,.10) 0%, rgba(56,189,248,0) 55%),
    radial-gradient(120% 120% at 0% 100%, rgba(129,140,248,.10) 0%, rgba(129,140,248,0) 58%),
    linear-gradient(145deg, rgba(18,28,45,.86) 0%, rgba(8,14,27,.96) 100%);
}

.smart-tools-hero h1{
  margin:0 0 10px;
  font-size:30px;
  font-weight:950;
  color:#eef2ff;
}

.smart-tools-hero p{
  margin:0;
  color:#b8c6de;
  line-height:2;
}

.smart-tools-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.smart-tool-card{
  border:1px solid rgba(129,140,248,.22);
  border-radius:18px;
  padding:18px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(56,189,248,.12) 0%, rgba(56,189,248,0) 52%),
    radial-gradient(120% 120% at 0% 100%, rgba(129,140,248,.12) 0%, rgba(129,140,248,0) 58%),
    linear-gradient(145deg, rgba(22,31,48,.88) 0%, rgba(10,16,30,.96) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(2,6,23,.18);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.smart-tool-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.smart-tool-title-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.smart-tool-title{
  font-size:20px;
  font-weight:900;
  color:#eef2ff;
}

.smart-tool-codename{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  color:#93c5fd;
  background:linear-gradient(180deg,rgba(23,37,84,.92),rgba(30,41,59,.88));
  border:1px solid rgba(96,165,250,.26);
}

.smart-tool-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid transparent;
}

.smart-tool-badge.global{
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);
  color:#1d4ed8;
  border-color:#93c5fd;
}

.smart-tool-badge.product{
  background:linear-gradient(135deg,#dcfce7,#bbf7d0);
  color:#15803d;
  border-color:#86efac;
}

.smart-tool-badge.plan{
  background:linear-gradient(135deg,#ede9fe,#ddd6fe);
  color:#6d28d9;
  border-color:#c4b5fd;
}

.smart-tool-badge.builder{
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  color:#b45309;
  border-color:#fcd34d;
}

.smart-tool-desc{
  color:#dbe7fb;
  line-height:1.9;
  font-weight:700;
}

.smart-tool-logic{
  color:#aebfdc;
  line-height:2;
  font-size:14px;
}

.smart-tool-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:auto;
}

.smart-tool-runner{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(148,163,184,.16);
  display:grid;
  gap:14px;
}

.smart-tool-runner-grid{
  display:grid;
  grid-template-columns:1.5fr .7fr;
  gap:12px;
}

#newSiteAnalyzerPage .smart-tool-runner-grid:first-of-type{
  grid-template-columns:minmax(260px,.78fr) minmax(380px,1.22fr);
  align-items:start;
}

#newSiteAnalyzerSearch{
  min-height:56px;
}

.smart-select{
  position:relative;
}

.smart-select-toggle{
  width:100%;
  min-height:56px;
  padding:14px 50px 14px 16px;
  border-radius:16px;
  border:1px solid rgba(129,140,248,.20);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(56,189,248,.10) 0%, rgba(56,189,248,0) 52%),
    linear-gradient(145deg, rgba(18,28,45,.92) 0%, rgba(8,14,27,.98) 100%);
  color:#e2e8f0;
  font-size:15px;
  font-weight:800;
  text-align:right;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(2,6,23,.18);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#newSiteAnalyzerSelected{
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:font-size .15s ease;
  min-width:0;
}

.smart-select-toggle:hover{
  border-color:rgba(96,165,250,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 28px rgba(2,6,23,.22);
}

.smart-select.open .smart-select-toggle,
.smart-select-toggle:focus{
  outline:none;
  border-color:rgba(96,165,250,.40);
  box-shadow:0 0 0 4px rgba(59,130,246,.12), inset 0 1px 0 rgba(255,255,255,.05);
}

.smart-select-arrow{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:#93c5fd;
  font-size:20px;
  line-height:1;
  pointer-events:none;
  transition:transform .18s ease;
}

.smart-select.open .smart-select-arrow{
  transform:translateY(-50%) rotate(180deg);
}

.smart-select-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  left:0;
  z-index:90;
  max-height:320px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(129,140,248,.20);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(56,189,248,.12) 0%, rgba(56,189,248,0) 52%),
    linear-gradient(145deg, rgba(18,28,45,.96) 0%, rgba(8,14,27,.99) 100%);
  box-shadow:0 22px 48px rgba(2,6,23,.38), inset 0 1px 0 rgba(255,255,255,.04);
  display:grid;
  gap:8px;
}

.smart-select-option{
  width:100%;
  padding:12px 14px;
  border:none;
  border-radius:14px;
  background:rgba(19,31,54,.66);
  border:1px solid rgba(99,102,241,.14);
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  align-items:start;
  justify-items:start;
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
  direction:ltr;
  text-align:left;
  overflow:hidden;
}

.smart-select-option:hover{
  transform:translateY(-1px);
  border-color:rgba(96,165,250,.34);
  background:rgba(31,46,78,.88);
}

.smart-select-option.active{
  border-color:rgba(96,165,250,.44);
  background:linear-gradient(135deg, rgba(79,70,229,.24), rgba(6,182,212,.18));
  box-shadow:0 10px 22px rgba(37,99,235,.16);
}

.smart-select-option-title{
  color:#eef2ff;
  font-size:14px;
  font-weight:800;
  width:100%;
  line-height:1.55;
  word-break:break-word;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.smart-select-option-tag{
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(79,70,229,.16);
  border:1px solid rgba(129,140,248,.26);
  color:#c7d2fe;
  font-size:12px;
  font-weight:700;
  width:auto;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.smart-select-empty{
  padding:16px;
  border-radius:14px;
  border:1px dashed rgba(148,163,184,.24);
  color:#94a3b8;
  text-align:center;
  background:rgba(7,13,26,.45);
}

.smart-tool-output{
  width:100%;
  min-height:560px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(129,140,248,.18);
  background:rgba(7,13,26,.68);
  color:#e2e8f0;
  line-height:2.15;
  font-size:16px;
  overflow:hidden;
  resize:none;
}

.smart-tool-output:focus{
  outline:none;
  border-color:rgba(96,165,250,.36);
  box-shadow:0 0 0 4px rgba(59,130,246,.12);
}

.smart-tool-output-compact{
  min-height:260px;
  line-height:1.8;
  font-size:14px;
}

.smart-tool-output-json{
  font-family:Consolas,"Courier New",monospace;
  direction:ltr;
  text-align:left;
  white-space:pre;
}

.smart-tool-inline-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
}

.smart-tool-meta-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(99,102,241,.28);
  background:linear-gradient(180deg,rgba(42,56,92,.8),rgba(28,38,66,.78));
  color:#c7d2fe;
  font-weight:700;
  font-size:13px;
}

.smart-tool-meta-link{
  text-decoration:none;
}

.smart-tool-meta-note{
  flex:1 1 100%;
  color:#94a3b8;
  font-size:14px;
  line-height:1.9;
}

.smart-tool-pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.smart-tool-pricing-card{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(129,140,248,.18);
  background:rgba(7,13,26,.55);
  display:grid;
  gap:8px;
}

.smart-tool-pricing-head{
  color:#a5b4fc;
  font-size:12px;
  font-weight:800;
}

.smart-tool-pricing-label{
  color:#cbd5e1;
  font-size:14px;
  font-weight:700;
  line-height:1.8;
}

.smart-tool-pricing-value{
  color:#86efac;
  font-size:15px;
  font-weight:900;
}

.smart-tool-pricing-empty{
  padding:14px 16px;
  border-radius:16px;
  border:1px dashed rgba(148,163,184,.22);
  color:#94a3b8;
  background:rgba(7,13,26,.35);
}

.new-ai-widget-mount{
  min-height:380px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(108,99,255,.12) 0%, rgba(108,99,255,0) 48%),
    radial-gradient(80% 110% at 0% 100%, rgba(6,182,212,.12) 0%, rgba(6,182,212,0) 52%),
    rgba(7,10,24,.76);
  box-shadow:0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.03);
  padding:26px;
  overflow:auto;
}

.new-ai-page-shell{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  background:#04060f;
  color:#e8eeff;
  isolation:isolate;
}

.new-ai-page-shell::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
  z-index:0;
}

.new-ai-page-orbs{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.new-ai-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.18;
  animation:newAiDrift linear infinite;
}

.new-ai-orb-1{
  width:600px;
  height:600px;
  background:#6c63ff;
  top:-200px;
  right:-100px;
  animation-duration:25s;
}

.new-ai-orb-2{
  width:500px;
  height:500px;
  background:#06b6d4;
  bottom:-150px;
  left:-100px;
  animation-duration:30s;
  animation-direction:reverse;
}

.new-ai-orb-3{
  width:350px;
  height:350px;
  background:#f472b6;
  top:40%;
  left:30%;
  animation-duration:20s;
  opacity:.1;
}

@keyframes newAiDrift{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,-30px) scale(1.05)}
  66%{transform:translate(-30px,40px) scale(.95)}
  100%{transform:translate(0,0) scale(1)}
}

.new-ai-page-header,
.new-ai-hero,
.new-ai-toolbar,
.new-ai-page-status,
.new-ai-grid-wrap{
  position:relative;
  z-index:1;
}

.new-ai-page-header{
  position:sticky;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:68px;
  padding:0 32px;
  background:rgba(4,6,15,.75);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.new-ai-header-logo{
  font-size:14px;
  font-weight:900;
  letter-spacing:1.5px;
  text-transform:uppercase;
  background:linear-gradient(135deg,#6c63ff,#8b5cf6,#06b6d4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.new-ai-header-meta{
  display:flex;
  align-items:center;
  gap:18px;
}

.new-ai-header-title{
  font-size:15px;
  font-weight:800;
  color:#e8eeff;
}

.new-ai-count-badge{
  font-size:11px;
  color:#67e8f9;
  background:rgba(6,182,212,.1);
  border:1px solid rgba(6,182,212,.25);
  padding:4px 10px;
  border-radius:20px;
  direction:ltr;
}

.new-ai-hero{
  text-align:center;
  padding:64px 40px 34px;
}

.new-ai-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(108,99,255,.12);
  border:1px solid rgba(108,99,255,.3);
  padding:6px 16px;
  border-radius:30px;
  font-size:12px;
  font-weight:700;
  color:#a5a0ff;
  letter-spacing:1px;
  margin-bottom:24px;
  animation:fadeDown .6s ease both;
}

.new-ai-pulse-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#06b6d4;
  box-shadow:0 0 8px #06b6d4;
  animation:newAiPulse 1.8s ease-in-out infinite;
}

@keyframes newAiPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.7)}
}

.new-ai-hero-title{
  font-size:clamp(28px,4vw,52px);
  font-weight:900;
  line-height:1.15;
  letter-spacing:-1px;
  margin-bottom:14px;
  animation:fadeDown .6s .1s ease both;
}

.new-ai-hero-title span{
  background:linear-gradient(135deg,#6c63ff,#8b5cf6,#06b6d4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.new-ai-hero-sub{
  font-size:15px;
  color:#5a6a8a;
  font-weight:400;
  animation:fadeDown .6s .2s ease both;
}

.new-ai-toolbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  padding:0 40px 30px;
  animation:fadeUp .6s .3s ease both;
}

.new-ai-filters{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.new-ai-filter-btn{
  padding:8px 18px;
  border-radius:30px;
  font-family:Vazirmatn,sans-serif;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#5a6a8a;
  cursor:pointer;
  transition:all .22s ease;
}

.new-ai-filter-btn:hover{
  border-color:rgba(255,255,255,.18);
  color:#e8eeff;
  background:rgba(255,255,255,.07);
}

.new-ai-filter-btn.active{
  background:rgba(108,99,255,.18);
  border-color:rgba(108,99,255,.5);
  color:#c4c0ff;
}

.new-ai-search-box{
  position:relative;
  flex:1;
  min-width:240px;
  max-width:320px;
}

.new-ai-search-box input{
  width:100%;
  padding:9px 16px 9px 40px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  color:#e8eeff;
  font-family:Vazirmatn,sans-serif;
  font-size:13px;
  outline:none;
  transition:all .2s;
}

.new-ai-search-box input:focus{
  border-color:rgba(108,99,255,.45);
  background:rgba(255,255,255,.07);
}

.new-ai-search-box input::placeholder{
  color:#5a6a8a;
}

.new-ai-search-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:#5a6a8a;
  font-size:14px;
  pointer-events:none;
}

.new-ai-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.new-ai-page-status{
  padding:0 40px 22px;
  color:#5a6a8a;
  text-align:center;
  font-size:14px;
  font-weight:700;
}

.new-ai-grid-wrap{
  padding:0 32px 60px;
}

.new-ai-empty-state{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  padding:24px;
  text-align:center;
  color:#cbd5e1;
  line-height:1.9;
}

.new-ai-catalog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
  align-items:stretch;
}

.new-ai-card{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:24px;
  min-height:430px;
  height:100%;
  display:flex;
  flex-direction:column;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  animation:cardIn .5s ease both;
}

.new-ai-card:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
}

.new-ai-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  background:linear-gradient(135deg,var(--new-ai-c1,#6c63ff),transparent 60%);
  opacity:0;
  transition:opacity .3s;
}

.new-ai-card:hover::before{
  opacity:.12;
}

.new-ai-card-accent{
  position:absolute;
  top:0;
  right:24px;
  left:24px;
  height:2px;
  background:linear-gradient(135deg,var(--new-ai-c1,#6c63ff),var(--new-ai-c2,#8b5cf6),var(--new-ai-c3,#06b6d4));
  border-radius:0 0 4px 4px;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}

.new-ai-card:hover .new-ai-card-accent{
  transform:scaleX(1);
}

.new-ai-card-num{
  position:absolute;
  top:20px;
  left:20px;
  font-family:'Space Mono',monospace;
  font-size:10px;
  font-weight:700;
  color:#2a3550;
  letter-spacing:1px;
}

.new-ai-card-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--new-ai-c1,#6c63ff) 0%,var(--new-ai-c2,#8b5cf6) 52%,var(--new-ai-c3,#06b6d4) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:900;
  margin-bottom:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  position:relative;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
  direction:ltr;
  margin-right:auto;
  margin-left:auto;
}

.new-ai-card:hover .new-ai-card-icon{
  transform:scale(1.1) rotate(-3deg);
  box-shadow:0 12px 32px rgba(0,0,0,.4), 0 0 20px color-mix(in srgb, var(--new-ai-c1,#6c63ff) 45%, transparent);
}

.new-ai-card-icon::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.25), transparent);
}

.new-ai-card-tag{
  display:inline-block;
  margin-bottom:16px;
  padding:3px 10px;
  border-radius:20px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
  background:rgba(108,99,255,.12);
  color:#a5a0ff;
  border:1px solid rgba(108,99,255,.2);
  direction:ltr;
  align-self:center;
  text-align:center;
}

.new-ai-card-name{
  font-size:18px;
  font-weight:800;
  color:#e8eeff;
  margin-bottom:6px;
  letter-spacing:.2px;
  text-align:center;
  line-height:1.45;
  min-height:52px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-wrap:balance;
}

.new-ai-card.is-title-long .new-ai-card-name{
  font-size:16px;
  min-height:70px;
}

.new-ai-card.is-title-xlong .new-ai-card-name{
  font-size:14px;
  min-height:78px;
}

.new-ai-card-desc{
  font-size:12px;
  color:#5a6a8a;
  line-height:1.7;
  margin-bottom:18px;
  min-height:84px;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.new-ai-card-desc:lang(en),
.new-ai-card-desc,
.new-ai-card-pricing{
  direction:ltr;
  text-align:left;
}

.new-ai-card-pricing{
  font-size:12px;
  color:#9ff2bf;
  line-height:1.8;
  min-height:46px;
  margin-bottom:18px;
  font-weight:700;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.new-ai-card-actions{
  margin-top:auto;
  display:grid;
  gap:8px;
  justify-items:start;
}

.new-ai-telegram-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  color:#9ff2bf;
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.25);
}

.new-ai-card-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:100%;
  justify-content:center;
  padding:11px 20px;
  border-radius:12px;
  font-family:Vazirmatn,sans-serif;
  font-size:13px;
  font-weight:800;
  border:none;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,var(--new-ai-c1,#6c63ff),var(--new-ai-c2,#8b5cf6));
  position:relative;
  overflow:hidden;
  transition:all .25s ease;
  box-shadow:0 4px 16px color-mix(in srgb, var(--new-ai-c1,#6c63ff) 35%, transparent);
  letter-spacing:.3px;
  text-decoration:none;
}

.new-ai-card-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.15), transparent);
}

.new-ai-card-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px color-mix(in srgb, var(--new-ai-c1,#6c63ff) 50%, transparent);
}

.new-ai-card-btn.disabled{
  pointer-events:none;
  opacity:.55;
}

.new-ai-card-btn--telegram{
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  box-shadow:0 4px 16px rgba(37,99,235,.28);
  width:auto;
  min-width:132px;
  padding:8px 14px;
  font-size:12px;
  border-radius:999px;
}

.new-ai-card-btn--telegram:hover{
  box-shadow:0 8px 24px rgba(37,99,235,.4);
}

.new-ai-card-arrow{
  font-size:16px;
  transition:transform .25s ease;
}

.new-ai-card:hover .new-ai-card-arrow{
  transform:translateX(-4px);
}

.new-ai-widget-host{
  min-height:340px;
}

.new-ai-fallback-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
}

.new-ai-fallback-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(52,211,153,.12) 0%, rgba(52,211,153,0) 46%),
    radial-gradient(90% 120% at 0% 100%, rgba(108,99,255,.14) 0%, rgba(108,99,255,0) 52%),
    rgba(9,13,30,.84);
  box-shadow:0 22px 44px rgba(0,0,0,.28);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:100%;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), border-color .22s ease, box-shadow .28s ease;
}

.new-ai-fallback-card::before{
  content:'';
  position:absolute;
  top:0;
  right:24px;
  left:24px;
  height:2px;
  border-radius:0 0 4px 4px;
  background:linear-gradient(135deg,#6c63ff,#8b5cf6,#06b6d4);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .38s cubic-bezier(.34,1.56,.64,1);
}

.new-ai-fallback-card:hover{
  transform:translateY(-6px) scale(1.01);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 28px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.04);
}

.new-ai-fallback-card:hover::before{
  transform:scaleX(1);
}

.new-ai-fallback-top{
  display:flex;
  justify-content:flex-start;
}

.new-ai-fallback-category{
  display:inline-flex;
  align-items:center;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(108,99,255,.12);
  border:1px solid rgba(108,99,255,.24);
  color:#c7c2ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
}

.new-ai-fallback-title{
  margin:0;
  font-size:18px;
  font-weight:900;
  color:#eef2ff;
  line-height:1.5;
}

.new-ai-fallback-desc{
  margin:0;
  color:#b7c2da;
  line-height:2;
  font-size:13px;
  direction:ltr;
  text-align:left;
}

.new-ai-fallback-pricing{
  color:#9ff2bf;
  font-weight:800;
  font-size:13px;
  direction:ltr;
  text-align:left;
}

.new-ai-fallback-actions{
  display:flex;
  justify-content:flex-start;
  margin-top:auto;
  padding-top:12px;
  direction:ltr;
}

#newAiWidgetStatus[data-state="loading"]{
  color:#93c5fd;
}

#newAiWidgetStatus[data-state="success"]{
  color:#86efac;
}

#newAiWidgetStatus[data-state="error"]{
  color:#fca5a5;
}

.smart-tool-config-modal{
  width:min(980px,94vw)!important;
}

.smart-tool-config-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:14px;
}

.smart-tool-config-box{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(56,189,248,.08) 0%, rgba(56,189,248,0) 52%),
    radial-gradient(120% 120% at 0% 100%, rgba(129,140,248,.08) 0%, rgba(129,140,248,0) 58%),
    linear-gradient(145deg, rgba(22,31,48,.88) 0%, rgba(10,16,30,.96) 100%);
  border:1px solid rgba(129,140,248,.22);
}

.smart-tool-config-text,
.smart-tool-config-prompt{
  margin:0;
  white-space:pre-wrap;
  line-height:2;
  font-size:14px;
  color:#dbe7fb;
}

.smart-tool-config-prompt{
  direction:ltr;
  text-align:left;
  font-family:Consolas, "Courier New", monospace;
  min-height:320px;
  max-height:42vh;
  width:100%;
  resize:vertical;
  overflow:auto;
  background:rgba(15,23,42,.38);
  border:1px solid rgba(148,163,184,.22);
  border-radius:14px;
  padding:16px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.9;
}

.smart-tool-model-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  margin-top:10px;
}

.smart-tool-model-row select{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,42,.38);
  color:#dbe7fb;
}

.smart-tool-model-row select:focus{
  outline:none;
  border-color:rgba(96,165,250,.36);
  box-shadow:0 0 0 4px rgba(59,130,246,.12);
}

.smart-tool-config-prompt[readonly]{
  opacity:1;
  cursor:default;
}

.smart-tool-config-text{
  min-height:120px;
  max-height:26vh;
  overflow:auto;
  padding:2px 0;
}

/* dashboard top styles moved to end of file */

.dashboard-placeholder-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.dashboard-placeholder-box{
  padding:18px;
  border-radius:16px;
  border:1px dashed rgba(148,163,184,.28);
  background:rgba(15,23,42,.22);
}

.dashboard-placeholder-title{
  color:#eef2ff;
  font-size:16px;
  font-weight:900;
  margin-bottom:8px;
}

.dashboard-placeholder-text{
  color:#b8c6de;
  line-height:1.9;
  font-size:14px;
}

.dashboard-tasks-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.dashboard-task-card{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  direction:rtl;
  border-radius:14px;
  background:rgba(15,23,42,.38);
  border:1px solid rgba(148,163,184,.13);
  text-align:inherit;
  width:100%;
  overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.dashboard-task-summary{
  cursor:pointer;
}

.dashboard-task-summary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(8,15,33,.28);
}

.dashboard-task-summary.is-empty{
  opacity:.6;
}

/* colored accent stripe on right (RTL start) */
.dashboard-task-summary.is-low{
  border-color:rgba(56,189,248,.24);
  box-shadow:inset 4px 0 0 0 rgba(56,189,248,.55);
}
.dashboard-task-summary.is-medium{
  border-color:rgba(251,191,36,.26);
  box-shadow:inset 4px 0 0 0 rgba(251,191,36,.70);
}
.dashboard-task-summary.is-high{
  border-color:rgba(248,113,113,.30);
  box-shadow:inset 4px 0 0 0 rgba(248,113,113,.75);
}

/* text area */
.dashboard-task-main{
  flex:1;
  min-width:0;
  padding:14px 18px 14px 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.dashboard-task-title{
  color:#eef2ff;
  font-size:15px;
  font-weight:800;
  margin-bottom:4px;
  line-height:1.3;
}

.dashboard-task-meta{
  color:#94a3b8;
  font-size:12px;
  font-weight:600;
  line-height:1.55;
  margin-bottom:0;
}

.dashboard-task-reasons{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}

.dashboard-task-reason{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(239,68,68,.12);
  border:1px solid rgba(248,113,113,.24);
  color:#fecaca;
  font-size:11px;
  font-weight:700;
}

/* count + link column on left (RTL end) */
.dashboard-task-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:100px;
  width:100px;
  padding:12px 10px;
  border-right:1px solid rgba(148,163,184,.10);
  background:rgba(255,255,255,.025);
  flex-shrink:0;
}

.dashboard-task-count{
  font-size:26px;
  font-weight:950;
  line-height:1;
  color:#e0e7ff;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

.dashboard-task-summary.is-low .dashboard-task-count{ color:#7dd3fc; }
.dashboard-task-summary.is-medium .dashboard-task-count{ color:#fcd34d; }
.dashboard-task-summary.is-high .dashboard-task-count{ color:#fca5a5; }

.dashboard-task-link{
  color:rgba(148,163,184,.72);
  font-size:10.5px;
  font-weight:700;
  text-align:center;
  line-height:1.35;
  max-width:90px;
}

.dashboard-task-empty{
  padding:16px 20px;
  border-radius:14px;
  background:linear-gradient(145deg, rgba(16,185,129,.10) 0%, rgba(37,99,235,.08) 100%);
  border:1px solid rgba(110,231,183,.18);
  color:#a7f3d0;
  line-height:1.8;
  font-weight:700;
  font-size:13px;
}

/* ===== New Sites Catalog Cards ===== */
.dashboard-new-sites{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}

#dashboardNewSites .new-ai-card{
  min-height:340px;
  padding:20px;
}

#dashboardNewSites .new-ai-card-icon{
  width:46px;
  height:46px;
  font-size:16px;
  margin-bottom:14px;
}

#dashboardNewSites .new-ai-card-tag{
  margin-bottom:12px;
}

#dashboardNewSites .new-ai-card-name{
  min-height:44px;
  font-size:16px;
  margin-bottom:4px;
}

#dashboardNewSites .new-ai-card.is-title-long .new-ai-card-name{
  font-size:15px;
  min-height:58px;
}

#dashboardNewSites .new-ai-card.is-title-xlong .new-ai-card-name{
  font-size:13px;
  min-height:70px;
}

#dashboardNewSites .new-ai-card-desc{
  min-height:68px;
  margin-bottom:14px;
  -webkit-line-clamp:3;
}

#dashboardNewSites .new-ai-card-btn{
  padding:10px 18px;
  font-size:12px;
}

.dns-card{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(9,14,34,.80);
  box-shadow:0 20px 48px rgba(0,0,0,.38);
  padding:22px 20px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  transition:transform .34s cubic-bezier(.34,1.56,.64,1), box-shadow .34s ease, border-color .22s ease;
}

/* Glow blob */
.dns-glow{
  position:absolute;
  top:-40px;
  right:-40px;
  width:140px;
  height:140px;
  border-radius:50%;
  background:var(--c1);
  opacity:.18;
  filter:blur(32px);
  pointer-events:none;
  transition:opacity .32s ease, transform .32s ease;
  z-index:0;
}

/* Bottom secondary glow */
.dns-card::after{
  content:'';
  position:absolute;
  bottom:-50px;
  left:-30px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:var(--c3);
  opacity:.10;
  filter:blur(28px);
  pointer-events:none;
}

/* Top accent bar */
.dns-bar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
  z-index:2;
}

.dns-card:hover{
  transform:translateY(-10px) scale(1.025);
  border-color:rgba(255,255,255,.20);
  box-shadow:
    0 36px 72px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 60px rgba(0,0,0,.18);
}

.dns-card:hover .dns-glow{
  opacity:.35;
  transform:scale(1.18);
}

.dns-card:hover .dns-bar{
  transform:scaleX(1);
}

/* Header row */
.dns-top{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  position:relative;
  z-index:1;
  width:100%;
}

.dns-num{
  font-size:10px;
  font-weight:900;
  color:rgba(255,255,255,.28);
  letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}

.dns-tag{
  font-size:9px;
  font-weight:800;
  padding:3px 9px;
  border-radius:99px;
  background:var(--c1);
  color:#fff;
  opacity:.88;
  letter-spacing:.05em;
  text-transform:uppercase;
  max-width:78px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.22);
}

/* Icon circle */
.dns-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  background:linear-gradient(135deg, var(--c1), var(--c2));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:900;
  color:#fff;
  letter-spacing:-.02em;
  flex-shrink:0;
  position:relative;
  z-index:1;
  box-shadow:
    0 10px 28px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
}

.dns-card:hover .dns-icon{
  transform:scale(1.10) rotate(-5deg);
  box-shadow:0 16px 36px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.28);
}

/* Title */
.dns-title{
  margin:0;
  font-size:18px;
  font-weight:900;
  color:#e8edff;
  line-height:1.4;
  text-align:center;
  position:relative;
  z-index:1;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Footer */
.dns-footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
  width:100%;
}

.dns-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  border-radius:13px;
  font-size:12px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg, var(--c1), var(--c2));
  text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.20);
  transition:transform .22s ease, box-shadow .22s ease;
  font-family:Vazir,sans-serif;
}

.dns-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.20);
}

.dns-btn-arrow{
  display:inline-block;
  transition:transform .22s ease;
  font-size:13px;
}

.dns-btn:hover .dns-btn-arrow{
  transform:translateX(-4px);
}

.dns-no-link{
  font-size:11px;
  color:rgba(255,255,255,.25);
  font-weight:700;
}

.dashboard-new-site-empty{
  grid-column:1/-1;
  border-radius:18px;
  padding:20px;
  background:linear-gradient(145deg, rgba(16,185,129,.12) 0%, rgba(37,99,235,.10) 100%);
  border:1px solid rgba(110,231,183,.20);
  color:#ecfdf5;
  line-height:2;
  font-weight:700;
}

body.light-theme .smart-tools-hero{
  background:
    radial-gradient(130% 110% at 100% 0%, rgba(59,130,246,.10) 0%, rgba(59,130,246,0) 58%),
    radial-gradient(120% 120% at 0% 100%, rgba(129,140,248,.10) 0%, rgba(129,140,248,0) 60%),
    linear-gradient(145deg,#ffffff 0%,#eef6ff 100%);
  border-color:#dbe3f2;
}

body.light-theme .smart-tools-hero h1{color:#0f172a}
body.light-theme .smart-tools-hero p{color:#5f6b84}

body.light-theme .smart-tool-card{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(56,189,248,.08) 0%, rgba(56,189,248,0) 52%),
    radial-gradient(120% 120% at 0% 100%, rgba(129,140,248,.08) 0%, rgba(129,140,248,0) 58%),
    linear-gradient(145deg,#ffffff 0%,#f4f8ff 100%);
  border-color:#dbe3f2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 22px rgba(15,23,42,.06);
}

body.light-theme .smart-tool-title{color:#0f172a}
body.light-theme .smart-tool-codename{
  color:#1d4ed8;
  background:linear-gradient(180deg,#eff6ff,#e0ecff);
  border-color:#bfdbfe;
}
body.light-theme .smart-tool-desc{color:#334155}
body.light-theme .smart-tool-logic{color:#64748b}
body.light-theme .smart-tool-config-box{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(56,189,248,.08) 0%, rgba(56,189,248,0) 52%),
    radial-gradient(120% 120% at 0% 100%, rgba(129,140,248,.08) 0%, rgba(129,140,248,0) 58%),
    linear-gradient(145deg,#ffffff 0%,#f4f8ff 100%);
  border-color:#dbe3f2;
}
body.light-theme .smart-tool-config-text{color:#334155}
body.light-theme .smart-tool-config-prompt{
  color:#0f172a;
  background:#f8fbff;
  border-color:#dbe3f2;
}
body.light-theme #smartToolConfigModal .smart-tool-config-box{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(56,189,248,.08) 0%, rgba(56,189,248,0) 52%),
    radial-gradient(120% 120% at 0% 100%, rgba(129,140,248,.08) 0%, rgba(129,140,248,0) 58%),
    linear-gradient(145deg,#ffffff 0%,#f4f8ff 100%) !important;
  border-color:#dbe3f2 !important;
}
body.light-theme #smartToolConfigModal .smart-tool-config-text{
  color:#334155 !important;
}
body.light-theme #smartToolConfigModal .smart-tool-config-prompt{
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  caret-color:#0f172a !important;
  background:#f8fbff !important;
  background-color:#f8fbff !important;
  background-image:none !important;
  border-color:#dbe3f2 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
body.light-theme #smartToolConfigModal textarea.smart-tool-config-prompt,
body.light-theme #smartToolConfigModal textarea.smart-tool-config-prompt:focus,
body.light-theme #smartToolConfigModal textarea.smart-tool-config-prompt:active{
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  caret-color:#0f172a !important;
  background:#f8fbff !important;
  background-color:#f8fbff !important;
  background-image:none !important;
  border:1px solid #dbe3f2 !important;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 3px rgba(99,102,241,.08) !important;
}
body.light-theme #smartToolConfigModal .smart-tool-config-prompt::placeholder{
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
}
body.light-theme #smartToolConfigModal .smart-tool-config-prompt[readonly]{
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  background:#f8fbff !important;
  background-color:#f8fbff !important;
  background-image:none !important;
  opacity:1 !important;
}
body.light-theme .smart-tool-model-row select{
  color:#0f172a;
  background:#f8fbff;
  border-color:#dbe3f2;
}
body.light-theme .smart-tool-output{
  color:#0f172a;
  background:#f8fbff;
  border-color:#dbe3f2;
}
body.light-theme .smart-tool-output-json{
  background:linear-gradient(145deg,#ffffff 0%,#f8fbff 100%);
}
body.light-theme .smart-select-toggle{
  background:linear-gradient(145deg,#ffffff 0%,#f4f8ff 100%);
  border-color:#dbe3f2;
  color:#0f172a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 10px 22px rgba(15,23,42,.06);
}
body.light-theme .smart-select-arrow{color:#4f46e5}
body.light-theme .smart-select-menu{
  background:linear-gradient(145deg,#ffffff 0%,#f4f8ff 100%);
  border-color:#dbe3f2;
  box-shadow:0 18px 40px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.88);
}
body.light-theme .smart-select-option{
  background:#f8fbff;
  border-color:#dbe3f2;
}
body.light-theme .smart-select-option:hover{
  background:#eef4ff;
  border-color:#bfdbfe;
}
body.light-theme .smart-select-option.active{
  background:linear-gradient(135deg, rgba(79,70,229,.10), rgba(6,182,212,.10));
  border-color:rgba(79,70,229,.30);
}
body.light-theme .smart-select-option-title{color:#0f172a}
body.light-theme .smart-select-option-tag{
  color:#334155;
  background:linear-gradient(180deg,#eff6ff,#e0ecff);
  border-color:#bfdbfe;
}
body.light-theme .smart-select-empty{
  background:#f8fbff;
  border-color:#dbe3f2;
  color:#64748b;
}
body.light-theme .smart-tool-meta-pill{
  background:linear-gradient(180deg,#f8faff,#eef2ff);
  border-color:#dbe3f2;
  color:#334155;
}
body.light-theme .smart-tool-meta-note{
  color:#64748b;
}
body.light-theme .smart-tool-pricing-card{
  background:#f8fbff;
  border-color:#dbe3f2;
}
body.light-theme .smart-tool-pricing-head{
  color:#4f46e5;
}
body.light-theme .smart-tool-pricing-label{
  color:#334155;
}
body.light-theme .smart-tool-pricing-value{
  color:#15803d;
}
body.light-theme .smart-tool-pricing-empty{
  background:#f8fbff;
  border-color:#dbe3f2;
  color:#64748b;
}
.smart-tool-provider-hint{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(129,140,248,.24);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(59,130,246,.10) 0%, rgba(59,130,246,0) 55%),
    linear-gradient(145deg, rgba(15,23,42,.86) 0%, rgba(30,41,59,.82) 100%);
  color:#cbd5f5;
  font-size:12.5px;
  font-weight:700;
  line-height:1.8;
}
body.light-theme .smart-tool-provider-hint{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(59,130,246,.08) 0%, rgba(59,130,246,0) 55%),
    linear-gradient(145deg,#ffffff 0%,#f6f9ff 100%);
  border-color:#dbe3f2;
  color:#334155;
}
body.light-theme .new-ai-widget-mount{
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(108,99,255,.08) 0%, rgba(108,99,255,0) 48%),
    radial-gradient(80% 110% at 0% 100%, rgba(6,182,212,.08) 0%, rgba(6,182,212,0) 52%),
    rgba(248,251,255,.96);
  border-color:#dbe3f2;
}
body.light-theme .new-ai-fallback-card{
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(52,211,153,.08) 0%, rgba(52,211,153,0) 46%),
    radial-gradient(90% 120% at 0% 100%, rgba(108,99,255,.10) 0%, rgba(108,99,255,0) 52%),
    #ffffff;
  border-color:#dbe3f2;
}
body.light-theme .new-ai-fallback-title{color:#0f172a}
body.light-theme .new-ai-fallback-desc{color:#334155}
body.light-theme .new-ai-fallback-pricing{color:#15803d}
body.light-theme .new-ai-page-shell{
  background:#f8fbff;
  color:#0f172a;
}
body.light-theme .new-ai-page-shell::before{
  background-image:
    linear-gradient(rgba(15,23,42,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.03) 1px, transparent 1px);
}
body.light-theme .new-ai-page-header{
  background:rgba(248,251,255,.78);
  border-bottom-color:#dbe3f2;
}
body.light-theme .new-ai-header-title{color:#0f172a;background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:#0f172a}
body.light-theme .new-ai-count-badge{
  color:#0ea5e9;
  background:rgba(14,165,233,.08);
  border-color:rgba(14,165,233,.18);
}
body.light-theme .new-ai-hero-sub,
body.light-theme .new-ai-page-status{color:#64748b}
body.light-theme .new-ai-filter-btn{
  border-color:#dbe3f2;
  background:rgba(255,255,255,.78);
  color:#64748b;
}
body.light-theme .new-ai-filter-btn:hover{
  border-color:#c7d2fe;
  background:#ffffff;
  color:#0f172a;
}
body.light-theme .new-ai-filter-btn.active{
  background:rgba(108,99,255,.12);
  border-color:rgba(108,99,255,.32);
  color:#5b4df5;
}
body.light-theme .new-ai-search-box input{
  background:rgba(255,255,255,.84);
  border-color:#dbe3f2;
  color:#0f172a;
}
body.light-theme .new-ai-search-box input:focus{
  background:#ffffff;
  border-color:rgba(108,99,255,.38);
  box-shadow:0 0 0 3px rgba(108,99,255,.08);
  color:#0f172a;
}
body.light-theme .new-ai-search-box input::placeholder,
body.light-theme .new-ai-search-icon{color:#94a3b8}
body.light-theme .new-ai-empty-state{
  background:#ffffff;
  border-color:#dbe3f2;
  color:#475569;
}
body.light-theme .new-ai-card{
  background:rgba(255,255,255,.9);
  border-color:#dbe3f2;
}
body.light-theme .new-ai-card:hover{
  border-color:#cbd5e1;
  box-shadow:0 24px 60px rgba(15,23,42,.12), 0 0 0 1px rgba(255,255,255,.8);
}
body.light-theme .new-ai-card-num{color:#cbd5e1}
body.light-theme .new-ai-card-name{color:#0f172a}
body.light-theme .new-ai-card-desc{color:#64748b}
body.light-theme .new-ai-card-pricing{color:#15803d}
body.light-theme #newAiWidgetStatus[data-state="loading"]{color:#2563eb}
body.light-theme #newAiWidgetStatus[data-state="success"]{color:#15803d}
body.light-theme #newAiWidgetStatus[data-state="error"]{color:#b91c1c}
/* dashboard light-theme overrides moved to end of file */
body.light-theme .dashboard-placeholder-text{color:#5f6b84}
body.light-theme .dashboard-placeholder-box{
  background:#f8fbff;
  border-color:#dbe3f2;
}
body.light-theme .dashboard-placeholder-title{ color:#0f172a; }
body.light-theme .dashboard-task-card{
  background:#f4f7fe;
  border-color:#dbe3f2;
}
body.light-theme .dashboard-task-summary.is-low{
  border-color:#93c5fd;
  box-shadow:inset 4px 0 0 0 #3b82f6;
}
body.light-theme .dashboard-task-summary.is-medium{
  border-color:#fcd34d;
  box-shadow:inset 4px 0 0 0 #f59e0b;
}
body.light-theme .dashboard-task-summary.is-high{
  border-color:#fca5a5;
  box-shadow:inset 4px 0 0 0 #ef4444;
}
body.light-theme .dashboard-task-title{color:#0f172a}
body.light-theme .dashboard-task-meta{color:#475569}
body.light-theme .dashboard-task-reason{
  background:#fff1f2;
  border-color:#fecdd3;
  color:#be123c;
}
body.light-theme .dashboard-task-actions{
  background:rgba(0,0,0,.025);
  border-right-color:rgba(0,0,0,.07);
}
body.light-theme .dashboard-task-count{color:#1e293b}
body.light-theme .dashboard-task-summary.is-low .dashboard-task-count{color:#1d4ed8}
body.light-theme .dashboard-task-summary.is-medium .dashboard-task-count{color:#b45309}
body.light-theme .dashboard-task-summary.is-high .dashboard-task-count{color:#b91c1c}
body.light-theme .dashboard-task-link{color:#64748b}
body.light-theme .dashboard-task-empty{
  background:linear-gradient(145deg, rgba(16,185,129,.08) 0%, rgba(37,99,235,.06) 100%);
  border-color:#bfdbfe;
  color:#0f172a;
}
body.light-theme .dns-card{
  background:rgba(255,255,255,.96);
  border-color:rgba(0,0,0,.07);
  box-shadow:0 14px 36px rgba(15,23,42,.09);
}
body.light-theme .dns-glow{opacity:.12}
body.light-theme .dns-card:hover .dns-glow{opacity:.22}
body.light-theme .dns-title{color:#0f172a}
body.light-theme .dns-num{color:rgba(0,0,0,.28)}
body.light-theme .dashboard-new-site-empty{
  background:linear-gradient(145deg, rgba(16,185,129,.10) 0%, rgba(37,99,235,.08) 100%);
  border-color:#bfdbfe;
  color:#0f172a;
}

@media(max-width:980px){
  .dashboard-new-sites{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .smart-tools-grid{
    grid-template-columns:1fr;
  }
  .smart-tool-runner-grid{
    grid-template-columns:1fr;
  }
  .dashboard-hero,
  .dashboard-stats,
  .dashboard-grid,
  .dashboard-placeholder-grid,
  .dashboard-system-grid{
    grid-template-columns:1fr;
  }
  .dashboard-task-actions{
    min-width:80px;
    width:80px;
  }
}

@media(max-width:1600px){
  .dashboard-new-sites{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media(max-width:1400px){
  .dashboard-new-sites{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:640px){
  .dashboard-new-sites{
    grid-template-columns:1fr;
  }
}

.pRow .pTitle{
  font-size:30px;
  font-weight:950;
  line-height:1.08;
  letter-spacing:-0.03em;
  background:linear-gradient(135deg,#dcfce7 0%,#86efac 28%,#22c55e 62%,#16a34a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:0 10px 26px rgba(22,163,74,.18);
}

body.light-theme .pRow .pTitle{
  background:linear-gradient(135deg,#166534 0%,#15803d 44%,#22c55e 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:none;
}

.pRow .pMeta{
  margin:0;
  font-size:14px;
  font-weight:700;
  color:#b9c5db!important;
  white-space:nowrap;
}

body.light-theme .pRow .pMeta{
  color:#64748b!important;
}

/* Warranty Writer Section */
.wg-shell{
  max-width:860px;
  margin:0 auto;
}
.wg-header{
  text-align:center;
  margin-bottom:20px;
}
.wg-header h2{
  font-size:28px;
  font-weight:900;
  background:linear-gradient(135deg,#6366f1,#8b5cf6,#06b6d4);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.wg-header p{color:#9fb0cc}
.wg-badge{
  display:inline-flex;
  background:rgba(99,102,241,.15);
  border:1px solid rgba(99,102,241,.35);
  color:#a5b4fc;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  margin-bottom:10px;
}
.wg-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
}
.wg-step{
  display:flex;
  align-items:center;
  gap:8px;
  color:#6f7f99;
  font-size:12px;
  font-weight:700;
}
.wg-step span{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bd);
  background:var(--surface);
}
.wg-step.active{color:#a5b4fc}
.wg-step.active span{
  border-color:transparent;
  background:linear-gradient(135deg,#6366f1,#8b5cf6,#06b6d4);
  color:#fff;
}
.wg-step.done{color:#6ee7b7}
.wg-step.done span{background:#10b981;border-color:transparent;color:#fff}
.wg-line{
  width:52px;height:2px;background:var(--bd);margin:0 6px;
}
.wg-line.done{background:#10b981}
.wg-card{
  background:linear-gradient(160deg,#1a2235 0%, #111827 100%);
  border:1px solid var(--bd);
  border-radius:14px;
  padding:22px;
  margin-bottom:14px;
}
.wg-card h3{
  margin-bottom:12px;
  font-size:16px;
  font-weight:800;
}
.wg-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}
@media(max-width:760px){
  .wg-grid{grid-template-columns:1fr}
}
body.light-theme .wg-card{
  background:linear-gradient(160deg,#ffffff 0%, #f5f8ff 100%)!important;
  border:1px solid #dbe3f2!important;
}
body.light-theme .wg-step{
  color:#667188;
}
body.light-theme .wg-step span{
  background:#eef3ff;
  border-color:#dbe3f2;
}

/* Exact Warranty Generator UI/UX (scoped) */
#warrantyPage .wg-root{
  --wg-bg:#080b14;
  --wg-card:#111827;
  --wg-surface:#1a2235;
  --wg-surface2:#1e2a40;
  --wg-border:rgba(255,255,255,0.07);
  --wg-text:#f0f4ff;
  --wg-muted:#8892a4;
  --wg-dim:#4a5568;
  --wg-grad:linear-gradient(135deg,#6366f1,#8b5cf6,#06b6d4);
  color:var(--wg-text);
  max-width:760px;
  margin:0 auto;
}
#warrantyPage .wg-root .header{text-align:center;margin-bottom:40px}
#warrantyPage .wg-root .header-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);
  padding:6px 16px;border-radius:20px;font-size:12px;color:#a5b4fc;font-weight:600;margin-bottom:16px;
}
#warrantyPage .wg-root .header h1{
  font-size:28px;font-weight:900;margin-bottom:8px;
  background:var(--wg-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
#warrantyPage .wg-root .header p{font-size:14px;color:var(--wg-muted);line-height:1.7}
#warrantyPage .wg-root .steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:36px}
#warrantyPage .wg-root .step{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
#warrantyPage .wg-root .step-circle{
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;border:2px solid var(--wg-border);color:var(--wg-dim);background:var(--wg-surface);transition:all .3s;
}
#warrantyPage .wg-root .step.active .step-circle{background:var(--wg-grad);border-color:transparent;color:#fff;box-shadow:0 0 16px rgba(99,102,241,.5)}
#warrantyPage .wg-root .step.done .step-circle{background:#10b981;border-color:transparent;color:#fff}
#warrantyPage .wg-root .step-label{color:var(--wg-dim);transition:color .3s}
#warrantyPage .wg-root .step.active .step-label{color:#a5b4fc}
#warrantyPage .wg-root .step.done .step-label{color:#10b981}
#warrantyPage .wg-root .step-line{width:50px;height:2px;background:var(--wg-border);margin:0 4px;transition:background .3s}
#warrantyPage .wg-root .step-line.done{background:#10b981}
#warrantyPage .wg-root .card{
  background:linear-gradient(160deg,#1a2235 0%,#111827 100%)!important;
  border:1px solid var(--wg-border)!important;border-radius:14px;padding:32px;margin-bottom:20px;
}
#warrantyPage .wg-root .card-title{font-size:16px;font-weight:800;color:var(--wg-text);margin-bottom:6px;display:flex;align-items:center;gap:8px}
#warrantyPage .wg-root .card-desc{font-size:13px;color:var(--wg-muted);margin-bottom:24px;line-height:1.6}
#warrantyPage .wg-root .form-group{margin-bottom:20px}
#warrantyPage .wg-root .wg-suggest-wrap{position:relative}
#warrantyPage .wg-root .wg-suggest-list{
  position:absolute;
  right:0;
  left:0;
  top:calc(100% + 6px);
  z-index:30;
  background:var(--wg-surface2);
  border:1px solid var(--wg-border);
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  max-height:240px;
  overflow:auto;
}
#warrantyPage .wg-root .wg-suggest-item{
  width:100%;
  text-align:right;
  border:none;
  border-bottom:1px solid var(--wg-border);
  background:transparent;
  color:var(--wg-text);
  padding:10px 14px;
  font-family:Vazirmatn,Vazir,sans-serif;
  cursor:pointer;
}
#warrantyPage .wg-root .wg-suggest-item:last-child{border-bottom:none}
#warrantyPage .wg-root .wg-suggest-item:hover{background:rgba(99,102,241,.2)}
#warrantyPage .wg-root .form-label{display:block;font-size:13px;font-weight:700;color:var(--wg-muted);margin-bottom:8px}
#warrantyPage .wg-root .form-label span{color:#f43f5e;margin-right:3px}
#warrantyPage .wg-root .form-input,
#warrantyPage .wg-root .form-select,
#warrantyPage .wg-root .form-textarea{
  width:100%;background:var(--wg-surface);border:1px solid var(--wg-border);border-radius:10px;padding:12px 16px;
  font-family:Vazirmatn,Vazir,sans-serif;font-size:14px;color:var(--wg-text);outline:none;transition:all .2s;direction:rtl;
}
#warrantyPage .wg-root .form-input:focus,
#warrantyPage .wg-root .form-select:focus,
#warrantyPage .wg-root .form-textarea:focus{
  border-color:rgba(99,102,241,.5);background:var(--wg-surface2);box-shadow:0 0 0 3px rgba(99,102,241,.1);
}
#warrantyPage .wg-root .form-input::placeholder,
#warrantyPage .wg-root .form-textarea::placeholder{color:var(--wg-dim)}
#warrantyPage .wg-root .form-textarea{resize:vertical;min-height:90px;line-height:1.7}
#warrantyPage .wg-root .chip-group{display:flex;flex-wrap:wrap;gap:8px}
#warrantyPage .wg-root .chip{
  padding:8px 16px;border-radius:8px;border:1px solid var(--wg-border);background:var(--wg-surface);color:var(--wg-muted);
  font-size:13px;font-weight:600;cursor:pointer;font-family:Vazirmatn,Vazir,sans-serif;transition:all .2s;
}
#warrantyPage .wg-root .chip:hover{border-color:rgba(99,102,241,.4);color:var(--wg-text)}
#warrantyPage .wg-root .chip.selected{background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.6);color:#a5b4fc}
#warrantyPage .wg-root .btn-primary{
  display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:10px;background:var(--wg-grad);color:#fff;
  font-family:Vazirmatn,Vazir,sans-serif;font-size:14px;font-weight:700;border:none;cursor:pointer;box-shadow:0 4px 20px rgba(99,102,241,.35);
}
#warrantyPage .wg-root .btn-secondary{
  display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:10px;background:var(--wg-surface);color:var(--wg-muted);
  font-family:Vazirmatn,Vazir,sans-serif;font-size:14px;font-weight:600;border:1px solid var(--wg-border);cursor:pointer;
}
#warrantyPage .wg-root .btn-copy-result{
  display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:10px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;cursor:pointer;font-weight:700;
}
#warrantyPage .wg-root .btn-reset{
  display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:10px;background:rgba(244,63,94,.15);color:#fb7185;border:1px solid rgba(244,63,94,.25);cursor:pointer;font-weight:700;
}
#warrantyPage .wg-root .btn-row{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
#warrantyPage .wg-root .loading-wrap{text-align:center;padding:48px 20px;display:none}
#warrantyPage .wg-root .spinner{
  width:44px;height:44px;border-radius:50%;border:3px solid rgba(99,102,241,.2);border-top-color:#6366f1;animation:spin .8s linear infinite;margin:0 auto 16px;
}
#warrantyPage .wg-root .loading-text{font-size:14px;color:var(--wg-muted)}
#warrantyPage .wg-root .loading-dots::after{content:'...';animation:dots 1.5s infinite}
#warrantyPage .wg-root .result-wrap{display:none}
#warrantyPage .wg-root .result-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
#warrantyPage .wg-root .result-title{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px}
#warrantyPage .wg-root .result-badge{
  display:inline-flex;align-items:center;gap:5px;background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);color:#6ee7b7;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;
}
#warrantyPage .wg-root .result-box{
  background:var(--wg-surface);border:1px solid var(--wg-border);border-radius:10px;padding:20px;font-size:14px;line-height:2;color:var(--wg-text);white-space:pre-wrap;direction:rtl;text-align:right;max-height:500px;overflow-y:auto;
}
#warrantyPage .wg-root .section{display:none}
#warrantyPage .wg-root .section.active{display:block}
body.light-theme #warrantyPage .wg-root{
  --wg-card:#fff;
  --wg-surface:#f5f8ff;
  --wg-surface2:#eef3ff;
  --wg-border:#dbe3f2;
  --wg-text:#0f172a;
  --wg-muted:#667188;
  --wg-dim:#8a97b0;
}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dots{
  0%,20%{content:'.'}
  40%,60%{content:'..'}
  80%,100%{content:'...'}
}

.linkWarn{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#fff1f2,#ffe4e6);
  color:#be123c;
  border:1px solid #fecdd3;
  font-size:12px;
  font-weight:800;
}

/* Plan modal row contrast fix */
body:not(.light-theme) .plan-row-same td{
  background:rgba(16,185,129,.16)!important;
  color:#6ee7b7!important;
  font-weight:800;
}
body:not(.light-theme) .plan-row-changed td{
  background:rgba(245,158,11,.18)!important;
  color:#fcd34d!important;
  font-weight:800;
}
body.light-theme .plan-row-same td{
  background:#ecfdf5!important;
  color:#047857!important;
}
body.light-theme .plan-row-changed td{
  background:#fffbeb!important;
  color:#92400e!important;
}

/* Product Detail Page */
#productDetailPage{padding:0}
#productDetailPage .pd-topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(8,11,20,.88);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:12px 16px;
  margin-bottom:14px;
}
#productDetailPage .pd-back{
  border:1px solid rgba(255,255,255,.12);
  background:#1a2235;
  color:#c7d2fe;
  border-radius:10px;
  padding:10px 14px;
  font-family:Vazirmatn,Vazir,sans-serif;
  font-weight:700;
  cursor:pointer;
}
#productDetailPage .pd-main{max-width:980px;margin:0 auto}
#productDetailPage .pd-hero,
#productDetailPage .pd-section{
  background:linear-gradient(145deg,#131d2e 0%,#0f1623 100%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
}
#productDetailPage .pd-hero{
  border:1px solid rgba(129,140,248,.24);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(56,189,248,.16) 0%, rgba(56,189,248,0) 48%),
    radial-gradient(100% 120% at 0% 100%, rgba(129,140,248,.18) 0%, rgba(129,140,248,0) 56%),
    linear-gradient(145deg, rgba(18,28,45,.92) 0%, rgba(8,14,27,.98) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 28px rgba(2,6,23,.28);
  padding:24px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 108px;
  align-items:start;
  gap:20px;
  direction:ltr;
  margin-bottom:14px;
}
#productDetailPage .pd-thumb{
  width:108px;height:108px;border-radius:22px;
  display:flex;align-items:center;justify-content:center;
  background:#1a2235;border:1px solid rgba(255,255,255,.1);flex-shrink:0;
  justify-self:end;
}
#productDetailPage .pd-thumb img{width:100%;height:100%;object-fit:cover;border-radius:22px}
#productDetailPage .pd-thumb span{
  background:linear-gradient(135deg,#6366f1,#8b5cf6,#06b6d4);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-size:26px;font-weight:900;
}
#productDetailPage .pd-info{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:left;
  direction:ltr;
}
#productDetailPage .pd-headline-row{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:16px;
  direction:ltr;
  width:100%;
  flex-wrap:wrap;
}
#productDetailPage .pd-name{
  font-size:42px;
  font-weight:950;
  line-height:1.05;
  color:#eef2ff;
  letter-spacing:-0.03em;
  text-shadow:0 12px 28px rgba(59,130,246,.16);
  text-align:left;
}
#productDetailPage .pd-side-badges{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
#productDetailPage .pd-verify-row{
  display:flex;
  justify-content:flex-start;
}
#productDetailPage .pd-tags-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
}
#productDetailPage .pd-meta{font-size:12px;color:#64748b;margin-top:10px}
@media(max-width:760px){
  #productDetailPage .pd-hero{
    grid-template-columns:1fr;
  }
  #productDetailPage .pd-thumb{
    justify-self:start;
  }
}
#productDetailPage .pd-badge-priority,#productDetailPage .pd-badge-status,#productDetailPage .pd-badge-category{
  font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;border:1px solid;white-space:nowrap
}
#productDetailPage .pd-badge-category{background:rgba(20,184,166,.15);border-color:rgba(45,212,191,.42);color:#99f6e4}
#productDetailPage .pd-badge-priority.p1{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.4);color:#a5b4fc}
#productDetailPage .pd-badge-priority.p2{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.4);color:#fcd34d}
#productDetailPage .pd-badge-priority.p3{background:rgba(107,114,128,.15);border-color:rgba(107,114,128,.3);color:#9ca3af}
#productDetailPage .pd-badge-status.hot{background:rgba(244,63,94,.15);border-color:rgba(244,63,94,.4);color:#fb7185}
#productDetailPage .pd-badge-status.nolink{background:rgba(249,115,22,.15);border-color:rgba(249,115,22,.4);color:#fdba74}
#productDetailPage .pd-badge-status.ok{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.4);color:#6ee7b7}
#productDetailPage .pd-section{padding:20px;margin-bottom:12px}
#productDetailPage .pd-title{
  font-size:12px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px
}
#productDetailPage .pd-desc{font-size:13px;color:#94a3b8;margin-bottom:10px}
#productDetailPage .pd-desc-block{
  white-space:normal;
  line-height:2.1;
  font-size:15px;
  color:#dbe7fb;
  margin-bottom:0;
}
#productDetailPage .pd-grid{display:flex;gap:10px;flex-wrap:wrap}
#productDetailPage .pd-btn{
  border:none;border-radius:10px;padding:11px 16px;color:#fff;font-family:Vazirmatn,Vazir,sans-serif;
  font-weight:700;cursor:pointer;
}
#productDetailPage .pd-btn.edit{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
#productDetailPage .pd-btn.ok{background:linear-gradient(135deg,#10b981,#059669)}
#productDetailPage .pd-btn.copy{background:linear-gradient(135deg,#f59e0b,#f97316)}
#productDetailPage .pd-btn.preview{background:linear-gradient(135deg,#10b981,#059669)}
#productDetailPage .pd-btn.settings{background:linear-gradient(135deg,#3b82f6,#2563eb)}
#productDetailPage .pd-btn.plans{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
#productDetailPage .pd-btn.price-site{background:linear-gradient(135deg,#6366f1,#4f46e5)}
#productDetailPage .pd-btn.price-image{background:linear-gradient(135deg,#a855f7,#9333ea)}
#productDetailPage .pd-btn.link{background:linear-gradient(135deg,#14b8a6,#0d9488)}
#productDetailPage .pd-btn.dicardo{background:linear-gradient(135deg,#06b6d4,#0891b2)}
#productDetailPage .pd-btn.del{background:linear-gradient(135deg,#f43f5e,#e11d48)}
#productDetailPage .pd-section.danger{border-color:rgba(244,63,94,.22)}
#productDetailPage .pd-section.danger{
  background:linear-gradient(145deg,#be123c 0%,#e11d48 100%);
  border-color:rgba(254,202,202,.35);
}
#productDetailPage .pd-section.danger .pd-title{
  color:#ffe4e6;
}
#productDetailPage .pd-section.danger .pd-desc{
  color:#fff1f2;
}
#productDetailPage .pd-section.danger .pd-btn.del{
  background:linear-gradient(135deg,#fb7185,#f43f5e);
  color:#ffffff;
  box-shadow:0 8px 18px rgba(136,19,55,.35);
}
#productDetailPage .pd-meta-history{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:12px;
  padding-top:12px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
#productDetailPage .pd-plan-filter-wrap{
  margin-top:10px;
  overflow-x:auto;
  padding-bottom:4px;
}
#productDetailPage .pd-plan-tab-bar{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:0;
  min-width:max-content;
}
#productDetailPage .pd-plan-tab-bar::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 20%,rgba(255,255,255,.08) 80%,transparent);
}
#productDetailPage .pd-plan-tab-item{
  position:relative;
  padding:12px 28px;
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,.32);
  cursor:pointer;
  border:none;
  background:none;
  transition:color .22s;
  white-space:nowrap;
  user-select:none;
}
#productDetailPage .pd-plan-tab-item:hover{color:rgba(255,255,255,.68)}
#productDetailPage .pd-plan-tab-item.active{
  color:#fff;
  text-shadow:0 0 20px rgba(108,99,255,.6);
}
#productDetailPage .pd-plan-tab-item::before{
  content:'';
  position:absolute;
  bottom:-1px;
  left:50%;
  transform:translateX(-50%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:#06b6d4;
  opacity:0;
  transition:opacity .2s;
  box-shadow:0 0 8px #06b6d4;
}
#productDetailPage .pd-plan-tab-item.active::before{opacity:1}
#productDetailPage .pd-plan-tab-underline{
  position:absolute;
  bottom:0;
  height:2px;
  width:calc(100% / var(--tab-count));
  right:calc((100% / var(--tab-count)) * var(--tab-index));
  border-radius:2px 2px 0 0;
  background:linear-gradient(90deg,#6c63ff,#8b5cf6,#06b6d4);
  box-shadow:0 0 12px rgba(108,99,255,.8),0 0 30px rgba(108,99,255,.3);
  transition:right .35s cubic-bezier(.34,1.4,.64,1),width .35s cubic-bezier(.34,1.4,.64,1);
  z-index:1;
}
#productDetailPage .pd-meta-item{
  border:1px solid rgba(129,140,248,.26);
  border-radius:16px;
  padding:12px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(56,189,248,.16) 0%, rgba(56,189,248,0) 52%),
    radial-gradient(120% 110% at 0% 100%, rgba(129,140,248,.16) 0%, rgba(129,140,248,0) 58%),
    linear-gradient(145deg, rgba(30,41,59,.78) 0%, rgba(15,23,42,.9) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px rgba(2,6,23,.28);
}
#productDetailPage .pd-meta-item-title{
  font-weight:900;
  font-size:33px;
  line-height:1.15;
  color:#eef2ff;
  margin-bottom:10px;
}
#productDetailPage .pd-meta-item-date{font-size:12px;color:#93a4bf;margin:4px 0 8px}
#productDetailPage .pd-meta-empty{color:#93a4bf;font-size:13px}
#productDetailPage .pd-meta-item-actions{display:flex;gap:8px;justify-content:flex-start}
body.light-theme #productDetailPage .pd-topbar{
  background:rgba(255,255,255,.92);
  border-color:#dbe3f2;
}
body.light-theme #productDetailPage .pd-back{
  background:#eef3ff;border-color:#dbe3f2;color:#1e40af
}
body.light-theme #productDetailPage .pd-hero,
body.light-theme #productDetailPage .pd-section{
  background:linear-gradient(145deg,#ffffff 0%,#f5f8ff 100%);
  border-color:#dbe3f2;
}
body.light-theme #productDetailPage .pd-hero{
  border-color:#c7d2fe;
  background:
    radial-gradient(130% 110% at 100% 0%, rgba(59,130,246,.12) 0%, rgba(59,130,246,0) 56%),
    radial-gradient(120% 120% at 0% 100%, rgba(129,140,248,.12) 0%, rgba(129,140,248,0) 60%),
    linear-gradient(145deg,#ffffff 0%,#eff6ff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(30,64,175,.10);
}
body.light-theme #productDetailPage .pd-section.danger{
  background:linear-gradient(145deg,#fee2e2 0%,#fecdd3 100%);
  border-color:#fda4af;
}
body.light-theme #productDetailPage .pd-meta-history{
  border-top:1px solid #dbe3f2;
}
body.light-theme #productDetailPage .pd-plan-tab-bar::after{
  background:linear-gradient(90deg,transparent,rgba(148,163,184,.26) 20%,rgba(148,163,184,.26) 80%,transparent);
}
body.light-theme #productDetailPage .pd-plan-tab-item{color:rgba(51,65,85,.55)}
body.light-theme #productDetailPage .pd-plan-tab-item:hover{color:#334155}
body.light-theme #productDetailPage .pd-plan-tab-item.active{
  color:#0f172a;
  text-shadow:none;
}
body.light-theme #productDetailPage .pd-meta-item{
  border:1px solid #c7d2fe;
  background:
    radial-gradient(130% 100% at 100% 0%, rgba(59,130,246,.12) 0%, rgba(59,130,246,0) 58%),
    radial-gradient(120% 120% at 0% 100%, rgba(129,140,248,.12) 0%, rgba(129,140,248,0) 60%),
    linear-gradient(145deg,#ffffff 0%,#f2f7ff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(30,64,175,.08);
}
body.light-theme #productDetailPage .pd-meta-item-title{color:#0f172a}
body.light-theme #productDetailPage .pd-meta-item-date,
body.light-theme #productDetailPage .pd-meta-empty{color:#64748b}
@media(max-width:900px){
  #productDetailPage .pd-meta-history{
    grid-template-columns:1fr;
  }
  #productDetailPage .pd-meta-item-title{
    font-size:28px;
  }
}
body.light-theme #productDetailPage .pd-section.danger .pd-title{color:#9f1239}
body.light-theme #productDetailPage .pd-section.danger .pd-desc{color:#881337}
body.light-theme #productDetailPage .pd-desc-block{color:#334155}
body.light-theme #productDetailPage .pd-name{
  color:#0f172a;
  text-shadow:none;
}
body.light-theme #productDetailPage .pd-meta{color:#64748b}

/* Badge readability in dark theme */
body:not(.light-theme) .status-ok{
  background:rgba(16,185,129,.30)!important;
  color:#ecfdf5!important;
  border:1px solid rgba(110,231,183,.45)!important;
}

/* Confirm Modal */
#confirmModal .confirm-card{
  width:min(520px,92vw);
  text-align:right;
  border-radius:18px;
}
#confirmModal .confirm-title{
  font-size:22px;
  font-weight:900;
  color:#e5ecfb;
  margin-bottom:10px;
}
#confirmModal .confirm-text{
  font-size:16px;
  line-height:1.9;
  color:#c7d2fe;
  margin-bottom:18px;
}
body.light-theme #confirmModal .confirm-title{color:#0f172a}
body.light-theme #confirmModal .confirm-text{color:#334155}

#metaToolHistoryList{
  display:grid;
  gap:8px;
}
.meta-tool-history-empty{
  color:#94a3b8;
  font-size:13px;
  padding:8px 2px;
}
.meta-tool-item{
  border:1px solid var(--bd);
  border-radius:12px;
  padding:10px;
  background:rgba(255,255,255,.03);
}
.meta-tool-item-title{font-weight:800;color:#e2e8f0}
.meta-tool-item-date{font-size:12px;color:#93a4bf;margin:4px 0 8px}
.meta-tool-item-actions{display:flex;gap:8px;justify-content:flex-start}
body.light-theme .meta-tool-item{
  background:#f8faff;
  border-color:#dbe3f2;
}
body.light-theme .meta-tool-item-title{color:#0f172a}
body.light-theme .meta-tool-item-date,
body.light-theme .meta-tool-history-empty{color:#64748b}

/* Plan info modal */
.plan-info-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.plan-info-item{
  border:1px solid var(--bd);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  padding:12px;
  min-height:96px;
}
.plan-info-item-span-2{grid-column:span 2}
.plan-info-item-full{grid-column:1/-1}
.plan-info-item-compact{
  min-height:82px;
  padding:10px 12px;
}
.plan-info-item-center{
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.plan-info-item-center .plan-info-label,
.plan-info-item-center .plan-info-value{
  text-align:center;
}
.plan-info-item-title-big .plan-info-value{
  font-size:19px;
  font-weight:900;
  line-height:1.5;
}
.plan-info-item-title-big{
  border:1px solid rgba(129,140,248,.30);
  border-radius:16px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(56,189,248,.18) 0%, rgba(56,189,248,0) 52%),
    radial-gradient(120% 110% at 0% 100%, rgba(129,140,248,.18) 0%, rgba(129,140,248,0) 58%),
    linear-gradient(145deg, rgba(30,41,59,.88) 0%, rgba(15,23,42,.96) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(2,6,23,.28);
}
.plan-info-item-title-big .plan-info-value .ltr-inline{
  font-size:34px;
  font-weight:900;
  line-height:1.05;
  letter-spacing:-0.02em;
  background:linear-gradient(135deg,#f8fbff 0%,#c7d2fe 42%,#7dd3fc 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:0 10px 24px rgba(59,130,246,.18);
}
body.light-theme .plan-info-item-title-big .plan-info-value .ltr-inline{
  background:linear-gradient(135deg,#0f172a 0%,#1d4ed8 48%,#0ea5e9 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:none;
}
body.light-theme .plan-info-item-title-big{
  border-color:#c7d2fe;
  background:
    radial-gradient(130% 100% at 100% 0%, rgba(59,130,246,.12) 0%, rgba(59,130,246,0) 58%),
    radial-gradient(120% 120% at 0% 100%, rgba(129,140,248,.12) 0%, rgba(129,140,248,0) 60%),
    linear-gradient(145deg,#ffffff 0%,#f2f7ff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(30,64,175,.08);
}
.plan-info-label{
  font-size:12px;
  font-weight:800;
  color:#a5b4fc;
  margin-bottom:6px;
}
.plan-info-value{
  font-size:15px;
  font-weight:700;
  color:#e5ecfb;
  line-height:1.9;
  word-break:break-word;
}
.plan-info-textarea{
  width:100%;
  min-height:180px;
  resize:vertical;
  border:1px solid rgba(129,140,248,.26);
  border-radius:14px;
  background:linear-gradient(145deg, rgba(15,23,42,.92) 0%, rgba(30,41,59,.82) 100%);
  color:#e5ecfb;
  padding:14px 16px;
  font:inherit;
  line-height:1.9;
  outline:none;
  margin-top:8px;
}
.plan-info-textarea:focus{
  border-color:rgba(129,140,248,.6);
  box-shadow:0 0 0 3px rgba(99,102,241,.18);
}
.plan-info-textarea::placeholder{color:#94a3b8}
.plan-info-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.plan-features-list{
  margin:0;
  padding-right:18px;
  display:grid;
  gap:4px;
}
.plan-features-list li{
  font-size:14px;
  font-weight:700;
  color:inherit;
}
body.light-theme .plan-info-item{
  background:#f8faff;
  border-color:#dbe3f2;
}
body.light-theme .plan-info-label{color:#4338ca}
body.light-theme .plan-info-value{color:#0f172a}
body.light-theme .plan-info-textarea{
  background:linear-gradient(145deg,#ffffff 0%,#f8fbff 100%);
  border-color:#dbe3f2;
  color:#0f172a;
}
body.light-theme .plan-info-textarea:focus{
  background:#ffffff;
  border-color:rgba(129,140,248,.42);
  box-shadow:0 0 0 3px rgba(99,102,241,.08);
  color:#0f172a;
}
body.light-theme .plan-info-textarea::placeholder{color:#64748b}
@media(max-width:980px){
  .plan-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan-info-item-span-2{grid-column:1/-1}
}
@media(max-width:760px){
  .plan-info-grid{grid-template-columns:1fr}
  .plan-info-item,
  .plan-info-item-compact{min-height:auto}
  .plan-info-item-span-2{grid-column:auto}
}

/* Product uploaded images modal */
.product-images-modal-grid{
  margin-top:10px;
  height:calc(88vh - 120px);
  max-height:calc(88vh - 120px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.product-image-slider-main{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px;
  gap:10px;
  align-items:center;
  min-height:0;
  flex:1 1 auto;
}

.product-image-main-link{
  display:block;
  border:1px solid var(--bd);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
}

.product-image-main-img{
  display:block;
  width:100%;
  max-height:calc(88vh - 280px);
  object-fit:contain;
  background:#0b1228;
}

.product-image-nav{
  width:48px;
  height:48px;
  border-radius:12px;
  border:1px solid var(--bd);
  background:linear-gradient(145deg,#334155,#1e293b);
  color:#e2e8f0;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}

.product-image-main-caption{
  margin-top:10px;
  text-align:center;
  color:#c7d2fe;
  font-weight:800;
  font-size:14px;
}

.product-images-thumbs{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  flex:0 0 auto;
}

.product-image-thumb-btn{
  border:1px solid var(--bd);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  padding:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  color:#cbd5e1;
  font-weight:700;
  font-size:12px;
}

.product-image-thumb-btn.active{
  border-color:#818cf8;
  box-shadow:0 0 0 3px rgba(99,102,241,.25);
}

.product-image-thumb-img{
  width:100%;
  height:68px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:#0f172a;
}

#productImagesModal .modal-card{
  width:min(940px,92vw)!important;
  max-height:88vh!important;
  overflow:hidden!important;
  padding:14px!important;
}

body.light-theme .product-image-main-link{
  border-color:#dbe3f2;
  background:#f8faff;
}

body.light-theme .product-image-main-img{
  background:#ffffff;
}

body.light-theme .product-image-nav{
  background:linear-gradient(145deg,#ffffff,#eef2ff);
  color:#1e293b;
  border-color:#dbe3f2;
}

body.light-theme .product-image-main-caption{
  color:#334155;
}

body.light-theme .product-image-thumb-btn{
  background:#f8faff;
  border-color:#dbe3f2;
  color:#334155;
}

body.light-theme .product-image-thumb-img{
  border-color:#dbe3f2;
  background:#ffffff;
}

@media(max-width:960px){
  #productImagesModal .modal-card{
    width:min(94vw,94vw)!important;
    max-height:90vh!important;
    padding:12px!important;
  }
  .product-image-slider-main{
    grid-template-columns:40px minmax(0,1fr) 40px;
    gap:8px;
  }
  .product-image-nav{
    width:40px;
    height:40px;
    font-size:24px;
  }
  .product-image-main-img{
    max-height:calc(90vh - 290px);
  }
  .product-images-thumbs{
    grid-template-columns:1fr;
    overflow:auto;
    max-height:120px;
  }
}

@media(max-width:900px){
  .smart-tool-pricing-grid{
    grid-template-columns:1fr;
  }
}

/* ===================================================
   Builder Page – No-Scroll Dashboard Redesign
   =================================================== */

/* ---- Root container: full height flex column ---- */
#builderPage{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow-y:auto;
  padding:0;
  margin:0;
  max-width:none;
}

/* ---- Header bar ---- */
.bldr-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:9px 16px;
  border-bottom:1px solid rgba(255,255,255,.05);
  flex-shrink:0;
  background:rgba(7,12,28,.45);
}
.bldr-header-brand{
  display:flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
}
.bldr-header-icon{ font-size:.95rem; }
.bldr-header-title{
  font-size:.72rem;
  font-weight:700;
  color:#64748b;
  white-space:nowrap;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.bldr-header-name{
  flex:0 1 42%;
  max-width:42%;
}
.bldr-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  margin-inline-start:auto;
}
.bldr-prompt-btn{
  min-width:144px;
  padding:8px 14px!important;
  border-radius:10px!important;
  border:1px solid rgba(99,102,241,.18)!important;
  background:rgba(99,102,241,.08)!important;
  color:#c7d2fe!important;
  font-size:.74rem!important;
  font-weight:700!important;
}
.bldr-name-input{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  color:#cbd5e1;
  font-size:.8rem;
  padding:6px 12px;
  outline:none;
  font-family:inherit;
  transition:border-color .15s,background .15s;
}
.bldr-name-input:focus{
  border-color:rgba(99,102,241,.38);
  background:rgba(99,102,241,.05);
}
.bldr-name-input::placeholder{ color:rgba(148,163,184,.3); }
.bldr-prompt-modal-card{
  width:min(860px,92vw);
  max-height:88vh;
  background:linear-gradient(180deg,rgba(11,18,36,.98),rgba(15,23,42,.96));
  border:1px solid rgba(99,102,241,.16);
  box-shadow:0 24px 70px rgba(2,6,23,.55);
  color:#e2e8f0;
}
.bldr-prompt-sub{
  margin-top:6px;
  color:rgba(148,163,184,.72);
  font-size:.82rem;
  line-height:1.7;
}
.bldr-prompt-status{
  margin-top:14px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(99,102,241,.08);
  border:1px solid rgba(99,102,241,.14);
  color:#c7d2fe;
  font-size:.8rem;
  line-height:1.75;
}
.bldr-prompt-textarea{
  margin-top:14px!important;
  min-height:320px!important;
  background:rgba(2,6,16,.82)!important;
  border:1px solid rgba(99,102,241,.18)!important;
  border-radius:14px!important;
  color:#e2e8f0!important;
  line-height:1.9;
}
.bldr-prompt-textarea[readonly]{
  opacity:.9;
  cursor:default;
}
.bldr-prompt-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:14px;
}
.bldr-smart-settings-field{
  margin-top:14px!important;
}
.bldr-smart-loader-actions{
  justify-content:flex-start;
  margin-top:14px;
}

/* ---- Workspace (the full-height 2-col row) ---- */
.bldr-workspace{
  display:flex;
  flex-direction:column;
  flex:1;
  gap:8px;
  padding:10px;
}

/* ---- Panel base ---- */
.bldr-panel{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:rgba(255,255,255,.022);
  border:1px solid rgba(255,255,255,.055);
  border-radius:14px;
}
.bldr-step1{
  flex:none;
  border-top:2px solid rgba(99,102,241,.7);
}
.bldr-step2{
  flex:1;
  border-top:2px solid rgba(245,158,11,.7);
}
.bldr-step3{
  flex:1;
  border-top:2px solid rgba(16,185,129,.7);
}

/* ---- Right column ---- */
.bldr-right-col{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* ---- Panel header ---- */
.bldr-panel-hd{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
  flex-shrink:0;
}
.bldr-panel-label{
  font-size:.68rem;
  font-weight:700;
  color:#64748b;
  letter-spacing:.06em;
  text-transform:uppercase;
  flex:1;
}
.bldr-primary-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:100%;
}

/* ---- Step number badges ---- */
.bldr-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  font-size:.64rem;
  font-weight:800;
  background:rgba(99,102,241,.15);
  color:#818cf8;
  border:1px solid rgba(99,102,241,.28);
  flex-shrink:0;
}
.bldr-badge-2{
  background:rgba(245,158,11,.13);
  color:#fcd34d;
  border-color:rgba(245,158,11,.28);
}
.bldr-badge-3{
  background:rgba(16,185,129,.13);
  color:#6ee7b7;
  border-color:rgba(16,185,129,.28);
}

/* ---- Panel body ---- */
.bldr-panel-bd{
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ---- Template textarea ---- */
.bldr-tpl-area{
  min-height:220px;
  resize:vertical;
  background:rgba(2,6,16,.7)!important;
  border:1px solid rgba(99,102,241,.16)!important;
  border-radius:11px!important;
  color:#c7d2fe!important;
  font-size:.76rem;
  line-height:1.7;
  padding:11px 13px;
  outline:none;
  font-family:monospace;
  width:100%!important;
  box-sizing:border-box;
  margin:0!important;
  transition:border-color .2s;
}
.bldr-tpl-area:focus{
  border-color:rgba(99,102,241,.45)!important;
  box-shadow:0 0 0 3px rgba(99,102,241,.08)!important;
}
.bldr-tpl-area::placeholder{ color:rgba(148,163,184,.32)!important; }

/* ---- Images wrap (compact) ---- */
.bldr-images-wrap{
  flex-shrink:0;
  margin:0!important;
  padding:10px 11px!important;
  border:1px solid rgba(255,255,255,.05)!important;
  border-radius:11px!important;
  background:rgba(7,12,24,.38)!important;
}
.bldr-images-wrap .builder-upload-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.bldr-images-wrap .builder-upload-head label{
  font-size:.64rem!important;
  font-weight:700!important;
  color:#64748b!important;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin:0!important;
}
.bldr-images-wrap .builder-upload-sub{
  font-size:.62rem;
  color:rgba(148,163,184,.45);
}
.bldr-images-wrap .builder-plan-images-grid{
  grid-template-columns:repeat(3,1fr)!important;
  gap:7px!important;
}
.bldr-images-wrap .builder-plan-image-field{
  padding:7px!important;
  gap:4px!important;
  margin-top:0!important;
  background:rgba(255,255,255,.022)!important;
  border:1px solid rgba(255,255,255,.05)!important;
  border-radius:9px!important;
}
.bldr-images-wrap .builder-plan-image-field label{
  font-size:.62rem!important;
  color:rgba(148,163,184,.6)!important;
}
.bldr-images-wrap .builder-plan-image-hint{ display:none; }
.bldr-images-wrap input[type="file"]{
  background:rgba(255,255,255,.03)!important;
  border:1px dashed rgba(255,255,255,.07)!important;
  border-radius:8px!important;
  color:rgba(148,163,184,.65)!important;
  padding:4px 7px!important;
  min-height:30px!important;
  font-size:.65rem!important;
  cursor:pointer;
  width:100%;
  transition:border-color .15s;
}
.bldr-images-wrap input[type="file"]:hover{
  border-color:rgba(99,102,241,.3)!important;
}
.bldr-images-wrap .builder-paste-btn{
  width:100%;
  min-height:26px!important;
  padding:4px 7px!important;
  font-size:.63rem!important;
  border:1px solid rgba(99,102,241,.18)!important;
  background:rgba(99,102,241,.06)!important;
  color:#a5b4fc!important;
}
.bldr-images-wrap .builder-upload-actions{
  justify-content:flex-end;
  margin-top:6px!important;
}
#clearBuilderImagesBtn{
  padding:5px 11px!important;
  font-size:.65rem!important;
  border-radius:7px!important;
}
.bldr-images-wrap .builder-plan-image-preview{ min-height:0; }
.bldr-images-wrap .builder-plan-image-thumb{
  max-width:80px;
  height:54px;
  border-radius:7px;
}
.bldr-images-wrap .builder-plan-image-thumb-wrap{ max-width:80px; }
.bldr-images-wrap .builder-plan-image-remove{
  top:3px;
  left:3px;
  padding:2px 5px!important;
  font-size:.58rem;
}
.links-modal-card .builder-plan-image-preview{
  min-height:0;
  margin-top:6px;
}
.links-modal-card .builder-plan-image-thumb{
  max-width:80px;
  height:54px;
  border-radius:7px;
}
.links-modal-card .builder-plan-image-thumb-wrap{
  max-width:80px;
}
.links-modal-card .builder-plan-image-remove{
  top:3px;
  left:3px;
  padding:2px 5px!important;
  font-size:.58rem;
}

/* ---- Panel footer ---- */
.bldr-panel-ft{
  flex-shrink:0;
  padding:10px 14px;
  border-top:1px solid rgba(255,255,255,.05);
}

/* ---- Action buttons ---- */
.bldr-action-btn{
  width:100%;
  padding:9px 16px!important;
  font-size:.78rem!important;
  font-weight:700!important;
  border-radius:10px!important;
  margin:0!important;
  transition:box-shadow .18s,transform .15s;
}
#analyzeBtn{
  background:linear-gradient(135deg,#4f46e5,#7c3aed)!important;
  box-shadow:0 4px 18px rgba(79,70,229,.28)!important;
}
#analyzeBtn:hover{
  box-shadow:0 6px 26px rgba(79,70,229,.48)!important;
  transform:translateY(-1px);
}
.bldr-smart-generate-btn{
  background:rgba(56,189,248,.12)!important;
  border:1px solid rgba(56,189,248,.28)!important;
  box-shadow:0 4px 18px rgba(14,165,233,.18)!important;
  color:#bfdbfe!important;
}
.bldr-smart-generate-btn:hover{
  box-shadow:0 6px 24px rgba(14,165,233,.3)!important;
  transform:translateY(-1px);
}
#generateBtn{
  background:linear-gradient(135deg,#059669,#10b981)!important;
  box-shadow:0 4px 16px rgba(16,185,129,.28)!important;
}
#generateBtn:hover{
  box-shadow:0 6px 24px rgba(16,185,129,.48)!important;
  transform:translateY(-1px);
}

/* ---- Groups grid (step 2) ---- */
.bldr-groups-grid{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  gap:9px!important;
  align-items:start;
}
#builderPage .gcard{
  background:rgba(4,8,20,.62)!important;
  border:1px solid rgba(245,158,11,.13)!important;
  border-radius:11px!important;
  padding:12px 13px!important;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
#builderPage .gtitle{
  font-size:.64rem!important;
  font-weight:800!important;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#fcd34d!important;
  border-bottom:1px solid rgba(245,158,11,.12)!important;
  padding-bottom:8px!important;
  margin-bottom:10px!important;
}

/* ---- Output textarea ---- */
.bldr-out-area{
  min-height:200px;
  resize:vertical;
  width:100%!important;
  background:rgba(2,6,16,.82)!important;
  border:1px solid rgba(16,185,129,.18)!important;
  border-radius:11px!important;
  color:#6ee7b7!important;
  font-size:.74rem!important;
  line-height:1.75;
  padding:11px 13px;
  outline:none;
  margin:0!important;
  box-sizing:border-box;
}
.bldr-out-area::placeholder{ color:rgba(110,231,183,.22)!important; }

/* ---- Out panel buttons ---- */
.bldr-out-btns{
  display:flex;
  gap:5px;
  margin-right:auto;
}
.bldr-out-btns .btn{
  padding:5px 11px!important;
  font-size:.7rem!important;
  border-radius:8px!important;
}

/* ---- Save footer ---- */
.bldr-save-ft{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.bldr-save-btn{
  width:100%;
  padding:9px 16px!important;
  font-size:.78rem!important;
  font-weight:700!important;
  border-radius:10px!important;
  background:linear-gradient(135deg,#059669,#10b981)!important;
  box-shadow:0 4px 14px rgba(16,185,129,.26)!important;
  margin:0!important;
}
.bldr-save-btn:hover{
  box-shadow:0 6px 22px rgba(16,185,129,.44)!important;
  transform:translateY(-1px);
}
.bldr-hint{
  font-size:.65rem;
  color:rgba(110,231,183,.4);
  text-align:center;
}

/* ---- Form fields inside panels ---- */
#builderPage .field label{
  font-size:.66rem!important;
  font-weight:700!important;
  color:rgba(148,163,184,.65)!important;
  margin-bottom:4px!important;
  letter-spacing:.04em;
}
#builderPage .field input:not([type="file"]),
#builderPage .field textarea:not(.bldr-tpl-area):not(.bldr-out-area),
#builderPage .field select{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:9px!important;
  color:#e2e8f0!important;
  padding:7px 10px!important;
  min-height:32px;
  font-size:.76rem!important;
  transition:border-color .15s;
  width:100%;
}
#builderPage .field input:not([type="file"]):focus,
#builderPage .field textarea:not(.bldr-tpl-area):not(.bldr-out-area):focus{
  border-color:rgba(245,158,11,.38)!important;
  box-shadow:0 0 0 3px rgba(245,158,11,.07)!important;
  background:rgba(255,255,255,.06)!important;
}
#builderPage .field input::placeholder,
#builderPage .field textarea::placeholder{
  color:rgba(148,163,184,.3)!important;
}

/* ---- iframe preview ---- */
#preview{
  display:block;
  width:100%;
  border-radius:10px;
  border:1px solid rgba(16,185,129,.16)!important;
  margin:0!important;
  flex-shrink:0;
}

/* ===== Light theme – Builder ===== */
body.light-theme #builderPage{ background:transparent; }
body.light-theme .bldr-header{
  background:rgba(255,255,255,.72);
  border-bottom-color:rgba(99,144,210,.1);
}
body.light-theme .bldr-header-title{ color:#64748b; }
body.light-theme .bldr-prompt-btn{
  background:rgba(99,102,241,.08)!important;
  border-color:rgba(99,102,241,.18)!important;
  color:#4f46e5!important;
}
body.light-theme .bldr-smart-generate-btn{
  background:rgba(14,165,233,.08)!important;
  border-color:rgba(14,165,233,.18)!important;
  color:#0369a1!important;
}
body.light-theme .bldr-name-input{
  background:rgba(255,255,255,.85);
  border-color:rgba(99,144,210,.18);
  color:#1e293b;
}
body.light-theme .bldr-name-input:focus{ border-color:rgba(99,102,241,.38); }
body.light-theme .bldr-panel{
  background:rgba(255,255,255,.88);
  border-color:rgba(0,0,0,.07);
  box-shadow:0 4px 20px rgba(15,23,42,.07);
}
body.light-theme .bldr-panel-label{ color:#64748b; }
body.light-theme .bldr-panel-hd{ border-bottom-color:rgba(0,0,0,.06); }
body.light-theme .bldr-panel-ft{ border-top-color:rgba(0,0,0,.06); }
body.light-theme .bldr-tpl-area{
  background:#f1f5fe!important;
  border-color:rgba(99,102,241,.2)!important;
  color:#1e293b!important;
}
body.light-theme .bldr-out-area{
  background:#ecfdf5!important;
  border-color:rgba(16,185,129,.22)!important;
  color:#065f46!important;
}
body.light-theme .bldr-images-wrap{
  background:rgba(0,0,0,.02)!important;
  border-color:rgba(0,0,0,.07)!important;
}
body.light-theme .bldr-images-wrap .builder-plan-image-field{
  background:rgba(0,0,0,.02)!important;
  border-color:rgba(0,0,0,.06)!important;
}
body.light-theme .bldr-images-wrap input[type="file"]{
  background:rgba(0,0,0,.02)!important;
  border-color:rgba(0,0,0,.1)!important;
  color:#475569!important;
}
body.light-theme .bldr-hint{ color:#047857; }
body.light-theme .bldr-prompt-modal-card{
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border-color:rgba(99,102,241,.12);
  color:#1e293b;
}
body.light-theme .bldr-prompt-sub{ color:#64748b; }
body.light-theme .bldr-prompt-status{
  background:rgba(99,102,241,.06);
  border-color:rgba(99,102,241,.12);
  color:#4338ca;
}
body.light-theme .bldr-prompt-textarea{
  background:#f8fafc!important;
  border-color:rgba(99,102,241,.16)!important;
  color:#1e293b!important;
}
body.light-theme #builderPage .gcard{
  background:#fffbeb!important;
  border-color:rgba(245,158,11,.18)!important;
}
body.light-theme #builderPage .gtitle{ color:#92400e!important; border-bottom-color:rgba(245,158,11,.16)!important; }
body.light-theme #builderPage .field label{ color:#64748b!important; }
body.light-theme #builderPage .field input:not([type="file"]),
body.light-theme #builderPage .field textarea:not(.bldr-tpl-area):not(.bldr-out-area){
  background:#fff!important;
  border-color:#e2e8f0!important;
  color:#1e293b!important;
}
body.light-theme #builderPage .field input:not([type="file"]):focus,
body.light-theme #builderPage .field textarea:not(.bldr-tpl-area):not(.bldr-out-area):focus,
body.light-theme #builderPage .field select:focus{
  background:#ffffff!important;
  border-color:rgba(245,158,11,.34)!important;
  box-shadow:0 0 0 3px rgba(245,158,11,.08)!important;
  color:#1e293b!important;
}
@media (max-width:980px){
  .bldr-header{
    flex-wrap:wrap;
  }
  .bldr-header-name{
    flex:1 1 100%;
    max-width:none;
    order:2;
  }
  .bldr-header-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
    order:3;
  }
  .bldr-primary-actions{
    grid-template-columns:1fr;
  }
}

/* ===================================================
   Products Page — Full Redesign
   =================================================== */

#productsPage{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  max-width:1100px;
  margin:0 auto;
}

/* ---- Header ---- */
#productsPage > .headRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:18px 22px;
  margin-bottom:0;
  background:rgba(10,16,35,.80);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px 20px 0 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
}
#productsPage > .headRow .label{
  font-size:17px;
  font-weight:900;
  color:#e0e7ff;
  border:none;
  border-bottom:none;
  background:none;
  padding:0;
  margin:0;
  letter-spacing:-.2px;
}
#productsPage > .headRow .actions{
  gap:8px;
  flex-wrap:nowrap;
}
#productsPage > .headRow .actions .btn{
  padding:9px 16px !important;
  font-size:12.5px !important;
  font-weight:800 !important;
  border-radius:11px !important;
  white-space:nowrap;
}

/* ---- Toolbar ---- */
#productsPage .toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  margin-bottom:0;
  background:rgba(7,12,28,.70);
  border:1px solid rgba(255,255,255,.07);
  border-top:none;
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(12px);
  padding:12px 20px;
}
#productsPage .toolbar .search{
  flex:1;
  max-width:100%;
}
#productsPage .toolbar .search input{
  width:100%;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:11px !important;
  color:#e2e8f0 !important;
  padding:10px 14px !important;
  font-size:13.5px;
  transition:border-color .2s,box-shadow .2s;
}
#productsPage .toolbar .search input:focus{
  border-color:rgba(99,102,241,.45) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.12) !important;
  background:rgba(255,255,255,.07) !important;
}
#productsPage .toolbar .search input::placeholder{
  color:rgba(148,163,184,.45) !important;
}
#productsPage .toolbar .var-filter{
  min-width:200px;
  max-width:240px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
#productsPage .toolbar .var-filter label{
  font-size:10px !important;
  font-weight:700;
  color:rgba(148,163,184,.50) !important;
  letter-spacing:.07em;
  text-transform:uppercase;
}
#productsPage .toolbar .var-filter select{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:11px !important;
  color:#e2e8f0 !important;
  padding:9px 12px !important;
  font-size:13px;
}
#productsPage .toolbar .var-filter select:focus{
  border-color:rgba(99,102,241,.45) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.12) !important;
}

/* ---- Products grid ---- */
#productsGrid.products{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.07);
  border-top:none;
  border-radius:0 0 20px 20px;
  overflow:hidden;
  direction:ltr;
}

/* ---- Product Card ---- */
#productsGrid .pRow{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:0;
  padding:0;
  border-radius:0;
  border:none;
  background:rgba(10,16,35,.72);
  min-height:unset;
  direction:ltr;
  position:relative;
  transition:background .18s ease;
}
#productsGrid .pRow:hover{
  background:rgba(22,32,65,.85);
}
/* accent stripe on the LEFT (start of LTR) */
#productsGrid .pRow::before{
  content:'';
  position:absolute;
  left:0; top:12%; bottom:12%;
  width:3px;
  border-radius:0 3px 3px 0;
  background:rgba(99,102,241,.30);
}
#productsGrid .pRow:has(.hotTag)::before{  background:linear-gradient(180deg,#f59e0b,#d97706); }
#productsGrid .pRow:has(.verifiedTag)::before{ background:linear-gradient(180deg,#6366f1,#8b5cf6); }
#productsGrid .pRow:has(.lowTag)::before{ background:linear-gradient(180deg,#64748b,#475569); }
#productsGrid .pRow:has(.midTag)::before{ background:linear-gradient(180deg,#8b5cf6,#7c3aed); }
#productsGrid .pRow:has(.linkWarn)::before{ background:linear-gradient(180deg,#ef4444,#dc2626); }

/* ---- pRowMain — title + icon on LEFT ---- */
#productsGrid .pRowMain{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  padding:14px 12px 14px 18px;
}
#productsGrid .productIcon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:11px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
#productsGrid .pMainText{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:flex-start;
  min-height:unset;
  text-align:left;
  direction:ltr;
}
#productsGrid .pTitleRow{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  direction:ltr;
}
#productsGrid .pTitle{
  font-size:16px;
  font-weight:900;
  color:#f1f5f9;
  margin:0;
  line-height:1.2;
  letter-spacing:-.1px;
  direction:ltr;
}
#productsGrid .pTagsRow{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  margin:0;
  direction:ltr;
}

/* Tags — dark overrides */
body:not(.light-theme) #productsGrid .tagBadge{
  font-size:11px;
  padding:3px 9px;
}
body:not(.light-theme) #productsGrid .verifiedTag{
  background:rgba(99,102,241,.18);
  color:#a5b4fc;
  border-color:rgba(99,102,241,.30);
  box-shadow:none;
}
body:not(.light-theme) #productsGrid .priorityTag{
  background:rgba(59,130,246,.14);
  color:#93c5fd;
  border-color:rgba(59,130,246,.24);
}
body:not(.light-theme) #productsGrid .categoryTag{
  background:rgba(20,184,166,.12);
  color:#5eead4;
  border-color:rgba(20,184,166,.22);
}
body:not(.light-theme) #productsGrid .hotTag{
  background:rgba(245,158,11,.14);
  color:#fcd34d;
  border-color:rgba(245,158,11,.25);
}
body:not(.light-theme) #productsGrid .midTag{
  background:rgba(139,92,246,.15);
  color:#c4b5fd;
  border-color:rgba(139,92,246,.25);
}
body:not(.light-theme) #productsGrid .lowTag{
  background:rgba(100,116,139,.12);
  color:#94a3b8;
  border-color:rgba(100,116,139,.22);
}
body:not(.light-theme) #productsGrid .linkWarn{
  background:rgba(239,68,68,.14);
  color:#fca5a5;
  border-color:rgba(239,68,68,.25);
}

/* ---- Action button — RIGHT side with gap from edge ---- */
#productsGrid .pRowActions{
  flex-shrink:0;
  padding:0 18px 0 10px;
  display:flex;
  align-items:center;
}
#productsGrid .pRowActions .btn{
  padding:9px 16px !important;
  font-size:12px !important;
  font-weight:800 !important;
  border-radius:11px !important;
  white-space:nowrap;
  background:rgba(99,102,241,.18) !important;
  color:#c7d2fe !important;
  border:1px solid rgba(99,102,241,.26) !important;
  box-shadow:none !important;
  transition:background .18s,border-color .18s,color .18s;
}
#productsGrid .pRowActions .btn:hover{
  background:rgba(99,102,241,.32) !important;
  border-color:rgba(99,102,241,.48) !important;
  color:#e0e7ff !important;
  transform:none;
}

/* ---- Pager ---- */
#productsPager.pager{
  margin-top:14px;
  justify-content:center;
  gap:8px;
}
#productsPager .btn{
  padding:8px 16px !important;
  font-size:13px !important;
  border-radius:10px !important;
}
#productsPager .page-info{
  font-size:13px;
  color:rgba(148,163,184,.65);
  font-weight:700;
}

/* ---- Empty state ---- */
#productsGrid .empty{
  background:rgba(10,16,35,.55);
  border:1px dashed rgba(255,255,255,.10);
  color:rgba(148,163,184,.65);
  font-weight:700;
  font-size:14px;
  border-radius:16px;
  grid-column:1/-1;
}

/* ---- Responsive ---- */
@media(max-width:900px){
  #productsGrid.products{
    grid-template-columns:1fr;
  }
  #productsPage .toolbar{
    flex-wrap:wrap;
  }
  #productsPage .toolbar .var-filter{
    min-width:100%;
    max-width:100%;
  }
  #productsPage > .headRow .actions{
    flex-wrap:wrap;
  }
}

/* ---- Light theme ---- */
body.light-theme #productsPage > .headRow{
  background:rgba(255,255,255,.92);
  border-color:#dbe3f2;
}
body.light-theme #productsPage > .headRow .label{ color:#0f172a; }
body.light-theme #productsPage .toolbar{
  background:rgba(248,250,255,.95);
  border-color:#e2e8f0;
}
body.light-theme #productsPage .toolbar .search input{
  background:#fff !important;
  border-color:#dbe3f2 !important;
  color:#1e293b !important;
}
body.light-theme #productsPage .toolbar .search input:focus{
  background:#ffffff !important;
  border-color:rgba(99,102,241,.42) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.08) !important;
  color:#1e293b !important;
}
body.light-theme #productsPage .toolbar .var-filter select{
  background:#fff !important;
  border-color:#dbe3f2 !important;
  color:#1e293b !important;
}
body.light-theme #productsPage .toolbar .var-filter select:focus{
  background:#ffffff !important;
  border-color:rgba(99,102,241,.42) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.08) !important;
  color:#1e293b !important;
}
body.light-theme #productsGrid.products{
  background:#e2e8f0;
  border-color:#dbe3f2;
}
body.light-theme #productsGrid .pRow{
  background:rgba(255,255,255,.96);
}
body.light-theme #productsGrid .pRow:hover{
  background:#f4f7fe;
}
body.light-theme #productsGrid .pTitle{ color:#0f172a; }
body.light-theme #productsGrid .pRowActions .btn{
  background:rgba(99,102,241,.08) !important;
  color:#4f46e5 !important;
  border-color:rgba(99,102,241,.20) !important;
}
body.light-theme #productsGrid .pRowActions .btn:hover{
  background:rgba(99,102,241,.16) !important;
}


/* ===================================================
   Dashboard Top Section — Full Redesign
   (وظایف روزانه و وبسایت جدید دست نخورده)
   =================================================== */

/* ---- Page wrapper ---- */
#dashboardPage{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* ---- Head row ---- */
#dashboardPage > .headRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  margin-bottom:18px;
  border-radius:18px;
  background:rgba(10,16,35,.60);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(12px);
}
#dashboardPage > .headRow .label{
  font-size:15px;
  font-weight:900;
  color:rgba(165,180,252,.80);
  letter-spacing:.04em;
  border:none;
  background:none;
  padding:0;
  margin:0;
}
#dashboardPage > .headRow .actions{
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
}
#dashboardPage > .headRow .dashboard-header-controls{
  direction:ltr;
}
#dashboardPage > .headRow .portal-global-btn{
  min-width:44px;
  height:44px;
  padding:0 14px;
}
#dashboardPage > .headRow #dashboardRefreshBtn{
  padding:0 !important;
  font-size:20px !important;
}
#dashboardPage > .headRow #dashboardProfileBtn{
  font-size:13px;
}

/* ---- Shell ---- */
.dashboard-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ---- Hero ---- */
.dashboard-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  padding:18px 22px;
  border-radius:16px;
  overflow:hidden;
  background:#070d1e;
  border:1px solid rgba(99,102,241,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,
             0 12px 32px rgba(0,0,0,.38);
}
/* background glow blobs */
.dashboard-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 5% 50%, rgba(99,102,241,.28) 0%, transparent 65%),
    radial-gradient(ellipse 50% 55% at 95% 100%, rgba(6,182,212,.18) 0%, transparent 65%);
  pointer-events:none;
}
/* dot grid overlay */
.dashboard-hero::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}
.dashboard-hero > *{ position:relative; z-index:1; }

.dashboard-hero h1{
  margin:0 0 5px;
  font-size:22px;
  font-weight:900;
  letter-spacing:-.3px;
  line-height:1.15;
  background:linear-gradient(135deg,#fff 0%,#c7d2fe 50%,#67e8f9 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.dashboard-hero p{
  margin:0;
  color:rgba(148,163,184,.7);
  line-height:1.55;
  font-size:13px;
  font-weight:500;
  max-width:560px;
}
/* ═══════════════════════════════════════════════════════
   LNN — Latest News · contentPortal.latestNews
   ═══════════════════════════════════════════════════════ */

/* ── Shell ── */
.lnn-shell{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* ── Top Bar ── */
.lnn-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.lnn-topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.lnn-breadcrumb{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
}
.lnn-breadcrumb-parent{
  color:#64748b;
  font-weight:500;
}
.lnn-breadcrumb-sep{
  color:#334155;
}
.lnn-breadcrumb-current{
  color:#cbd5e1;
  font-weight:800;
}
.lnn-live-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border-radius:999px;
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.18);
  color:#fda4af;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  box-shadow:0 8px 18px rgba(15,23,42,.12);
}
.lnn-live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ef4444;
  animation:lnn-pulse 1.8s ease-in-out infinite;
}
@keyframes lnn-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5);}
  50%{box-shadow:0 0 0 6px rgba(239,68,68,0);}
}
.lnn-topbar-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.lnn-topbar-btn{
  min-height:42px;
  padding:10px 18px;
  border-radius:15px;
  font-size:13px;
  font-weight:800;
  border:1px solid transparent;
  box-shadow:0 12px 26px rgba(2,6,23,.18);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
}
.lnn-topbar-btn:hover{
  transform:translateY(-1px);
}
.lnn-topbar-btn--ghost{
  background:linear-gradient(180deg,rgba(15,23,42,.46) 0%,rgba(15,23,42,.3) 100%);
  border-color:rgba(148,163,184,.16);
  color:#dbeafe;
}
.lnn-topbar-btn--ghost:hover{
  background:linear-gradient(180deg,rgba(30,41,59,.62) 0%,rgba(15,23,42,.46) 100%);
  border-color:rgba(125,211,252,.24);
  box-shadow:0 14px 30px rgba(2,6,23,.24);
}
.lnn-topbar-btn--primary{
  background:linear-gradient(135deg,#38bdf8 0%,#4f46e5 100%);
  border-color:rgba(125,211,252,.28);
  color:#f8fbff;
}
.lnn-topbar-btn--primary:hover{
  background:linear-gradient(135deg,#22d3ee 0%,#4f46e5 100%);
  border-color:rgba(165,180,252,.34);
  box-shadow:0 16px 34px rgba(59,130,246,.28);
}
.lnn-topbar-btn:disabled{
  opacity:.72;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* ── Hero ── */
.lnn-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:24px 26px;
  border-radius:24px;
  overflow:hidden;
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(99,102,241,.16) 0%,transparent 48%),
    radial-gradient(90% 120% at 100% 100%,rgba(34,211,238,.10) 0%,transparent 42%),
    linear-gradient(135deg,rgba(8,13,31,.98) 0%,rgba(6,10,24,.98) 100%);
  border:1px solid rgba(99,102,241,.18);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,
             0 22px 54px rgba(0,0,0,.38);
}
.lnn-hero-orbs{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.lnn-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(72px);
}
.lnn-orb-1{
  width:260px;height:220px;
  top:-72px;left:-56px;
  background:radial-gradient(circle,rgba(99,102,241,.18),transparent 72%);
}
.lnn-orb-2{
  width:220px;height:180px;
  bottom:-70px;right:48px;
  background:radial-gradient(circle,rgba(6,182,212,.14),transparent 72%);
}
.lnn-orb-3{
  width:150px;height:130px;
  top:28px;right:160px;
  background:radial-gradient(circle,rgba(167,139,250,.10),transparent 72%);
}
.lnn-hero-content{
  position:relative;
  z-index:1;
  min-width:0;
}
.lnn-hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(99,102,241,.10);
  border:1px solid rgba(99,102,241,.16);
  color:#a5b4fc;
  font-size:11px;
  font-weight:800;
  letter-spacing:.03em;
  margin-bottom:10px;
}
.lnn-hero-title{
  margin:0 0 8px;
  font-size:30px;
  font-weight:950;
  letter-spacing:-.8px;
  line-height:1.05;
  background:linear-gradient(135deg,#fff 0%,#c7d2fe 45%,#67e8f9 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.lnn-hero-sub{
  margin:0;
  color:rgba(148,163,184,.78);
  font-size:13px;
  line-height:1.8;
  max-width:620px;
}
.lnn-hero-stat{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:right;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  min-width:unset;
  box-shadow:0 12px 30px rgba(2,6,23,.22);
}
.lnn-hero-stat-num{
  font-size:26px;
  font-weight:950;
  line-height:1;
  background:linear-gradient(135deg,#fff,#a5b4fc);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:0;
  min-width:30px;
}
.lnn-hero-stat-label{
  color:#94a3b8;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
}

/* ── Status Bar ── */
.lnn-status{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid rgba(96,165,250,.1);
  background:rgba(15,23,42,.55);
  color:#475569;
  font-size:13px;
  font-weight:500;
  transition:all .3s ease;
}
.lnn-status.is-error{
  border-color:rgba(248,113,113,.24);
  color:#fca5a5;
  background:rgba(69,10,10,.35);
}
.lnn-status.is-ok{
  border-color:rgba(52,211,153,.18);
  color:#6ee7b7;
  background:rgba(6,40,30,.35);
}

/* ── News Grid ── */
.lnn-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.lnn-card--hero{
  grid-column:span 2;
}

/* ── News Card ── */
.lnn-card{
  position:relative;
  display:flex;
  border-radius:20px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 90% 80% at 0% 0%, rgba(99,102,241,.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(6,182,212,.09) 0%, transparent 55%),
    linear-gradient(145deg,rgba(17,24,50,.98) 0%,rgba(10,14,32,.99) 100%);
  border:1px solid rgba(99,102,241,.18);
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.lnn-card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 64px rgba(0,0,0,.55),0 0 0 1px rgba(99,102,241,.4);
  border-color:rgba(99,102,241,.38);
}
.lnn-card-stripe{
  width:4px;
  flex-shrink:0;
  background:linear-gradient(180deg,#6366f1 0%,#06b6d4 100%);
}
.lnn-card--hero .lnn-card-stripe{
  background:linear-gradient(180deg,#818cf8 0%,#34d399 100%);
}
.lnn-card-inner{
  display:grid;
  gap:12px;
  padding:20px;
  flex:1;
  min-width:0;
}
.lnn-card--hero .lnn-card-inner{
  gap:16px;
  padding:26px;
}
.lnn-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.lnn-card-rank{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(99,102,241,.18);
  color:#c7d2fe;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  flex-shrink:0;
}
.lnn-card--hero .lnn-card-rank{
  background:rgba(129,140,248,.22);
  color:#ddd6fe;
  font-size:12px;
  padding:5px 12px;
}
.lnn-card-source{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(148,163,184,.1);
  border:1px solid rgba(148,163,184,.18);
  color:#94a3b8;
  font-size:11px;
  font-weight:600;
  max-width:130px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lnn-card-telegram-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(16,185,129,.14);
  border:1px solid rgba(16,185,129,.24);
  color:#86efac;
  font-size:11px;
  font-weight:800;
  letter-spacing:.03em;
}
.lnn-card-title{
  margin:0;
  line-height:1.65;
}
.lnn-card-title a{
  color:#f1f5f9;
  text-decoration:none;
  font-size:16px;
  font-weight:700;
  transition:color .2s;
}
.lnn-card--hero .lnn-card-title a{
  font-size:21px;
  font-weight:800;
}
.lnn-card-title a:hover{
  color:#93c5fd;
}
.lnn-card-desc{
  margin:0;
  color:#94a3b8;
  font-size:13px;
  line-height:2;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.lnn-card--hero .lnn-card-desc{
  color:#a0aec0;
  font-size:14px;
  -webkit-line-clamp:4;
}
.lnn-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:4px;
}
.lnn-card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.lnn-card-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.lnn-card-cat{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(6,182,212,.12);
  border:1px solid rgba(6,182,212,.22);
  color:#67e8f9;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
}
.lnn-card-time{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(148,163,184,.08);
  border:1px solid rgba(148,163,184,.12);
  color:#94a3b8;
  font-size:11px;
  font-weight:500;
}
.lnn-card-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:12px;
  background:rgba(99,102,241,.15);
  border:1px solid rgba(99,102,241,.3);
  color:#c7d2fe;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s;
  white-space:nowrap;
  flex-shrink:0;
}
.lnn-card-btn:hover{
  background:rgba(99,102,241,.28);
  border-color:rgba(99,102,241,.5);
  transform:scale(1.05);
}
.lnn-card-btn--telegram{
  background:rgba(16,185,129,.14);
  border-color:rgba(16,185,129,.28);
  color:#86efac;
}
.lnn-card-btn--telegram:hover{
  background:rgba(16,185,129,.24);
  border-color:rgba(16,185,129,.42);
}
.lnn-card-btn[disabled]{
  opacity:.65;
  cursor:wait;
  transform:none;
}
.lnn-card-btn-arrow{
  font-size:14px;
  display:inline-block;
  transition:transform .2s;
}
.lnn-card-btn:hover .lnn-card-btn-arrow{
  transform:translateX(-3px);
}

/* ── Placeholder ── */
.lnn-placeholder{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:64px 24px;
  border-radius:20px;
  border:1px dashed rgba(96,165,250,.1);
  background:rgba(15,23,42,.35);
  text-align:center;
}
.lnn-placeholder-icon{
  font-size:48px;
  line-height:1;
  opacity:.4;
}
.lnn-placeholder-title{
  font-size:20px;
  font-weight:700;
  color:#334155;
}
.lnn-placeholder-sub{
  color:#1e293b;
  font-size:14px;
  line-height:1.9;
  max-width:420px;
}

/* ── Article Modal ── */
.lnn-modal{
  position:fixed;
  inset:0;
  z-index:9000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.lnn-modal.hidden{
  display:none;
}
.lnn-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.lnn-modal-card{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-rows:auto auto 1fr;
  width:min(960px,94vw);
  max-height:88vh;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(160deg,rgba(10,16,38,.99) 0%,rgba(5,8,20,.99) 100%);
  border:1px solid rgba(99,102,241,.22);
  box-shadow:0 40px 120px rgba(0,0,0,.7),
             0 0 0 1px rgba(255,255,255,.05) inset;
}
.lnn-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 26px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
  flex-wrap:wrap;
}
.lnn-modal-meta{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.lnn-modal-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(99,102,241,.1);
  border:1px solid rgba(99,102,241,.18);
  color:#a5b4fc;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  width:fit-content;
}
.lnn-modal-source{
  color:#475569;
  font-size:13px;
  font-weight:600;
}
.lnn-modal-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.lnn-modal-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:rgba(248,113,113,.08);
  border:1px solid rgba(248,113,113,.2);
  color:#fca5a5;
  font-size:16px;
  cursor:pointer;
  transition:background .2s,transform .15s;
  flex-shrink:0;
}
.lnn-modal-close:hover{
  background:rgba(248,113,113,.2);
  transform:scale(1.08);
}
.lnn-modal-titlebar{
  padding:22px 26px 16px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.lnn-modal-title{
  margin:0;
  font-size:21px;
  font-weight:800;
  line-height:1.65;
  color:#e2e8f0;
}
.lnn-modal-body{
  overflow-y:auto;
  padding:22px 26px;
  display:grid;
  gap:20px;
  scrollbar-width:thin;
  scrollbar-color:rgba(99,102,241,.3) transparent;
}
.lnn-modal-summary{
  padding:16px 20px;
  border-radius:16px;
  background:rgba(99,102,241,.06);
  border:1px solid rgba(99,102,241,.14);
  border-right:3px solid rgba(99,102,241,.45);
  color:#64748b;
  line-height:2.1;
  font-size:14px;
  margin:0;
}
.lnn-modal-fulltext{
  color:#94a3b8;
  line-height:2.2;
  font-size:15px;
  white-space:pre-wrap;
  margin:0;
}
.lnn-modal-loading{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:60px 24px;
  color:#1e293b;
  text-align:center;
}
.lnn-modal-loading-spinner{
  font-size:36px;
  opacity:.5;
  animation:lnn-spin 2s linear infinite;
}
@keyframes lnn-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.lnn-modal-loading-text{
  color:#334155;
  font-size:14px;
  font-weight:500;
}

/* ── Responsive ── */
@media(max-width:960px){
  .lnn-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .lnn-card--hero{
    grid-column:span 2;
  }
}
@media(max-width:600px){
  .lnn-grid{
    grid-template-columns:1fr;
  }
  .lnn-card--hero{
    grid-column:span 1;
  }
  .lnn-hero{
    grid-template-columns:1fr;
    padding:18px 18px;
    gap:14px;
  }
  .lnn-hero-stat{
    display:flex;
    justify-content:flex-start;
    width:max-content;
    padding:10px 12px;
  }
  .lnn-hero-title{
    font-size:24px;
  }
}

/* date widget */
.dashboard-date-wrap{
  min-width:160px;
  padding:10px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  text-align:center;
  backdrop-filter:blur(8px);
}
.dashboard-date-label{
  color:#7dd3fc;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.dashboard-date-value{
  color:#e0e7ff;
  line-height:1.55;
  font-weight:800;
  font-size:13px;
}

/* ---- Stats row ---- */
.dashboard-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.dashboard-stat-card{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(10,16,35,.70);
  padding:20px 18px 16px;
  overflow:hidden;
  backdrop-filter:blur(10px);
  transition:transform .18s ease, box-shadow .18s ease;
}
.dashboard-stat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.30);
}
/* top accent line per card */
.dashboard-stat-card:nth-child(1){ border-top:2px solid #6366f1; }
.dashboard-stat-card:nth-child(2){ border-top:2px solid #f59e0b; }
.dashboard-stat-card:nth-child(3){ border-top:2px solid #10b981; }
.dashboard-stat-card:nth-child(4){ border-top:2px solid #06b6d4; }
/* subtle glow per card */
.dashboard-stat-card:nth-child(1)::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,.14) 0%, transparent 70%); pointer-events:none; }
.dashboard-stat-card:nth-child(2)::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245,158,11,.12) 0%, transparent 70%); pointer-events:none; }
.dashboard-stat-card:nth-child(3)::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(16,185,129,.12) 0%, transparent 70%); pointer-events:none; }
.dashboard-stat-card:nth-child(4)::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(6,182,212,.12) 0%, transparent 70%); pointer-events:none; }

.dashboard-stat-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  margin-bottom:12px;
  position:relative;
}
.dashboard-stat-card:nth-child(1) .dashboard-stat-label{ color:#a5b4fc; }
.dashboard-stat-card:nth-child(2) .dashboard-stat-label{ color:#fcd34d; }
.dashboard-stat-card:nth-child(3) .dashboard-stat-label{ color:#6ee7b7; }
.dashboard-stat-card:nth-child(4) .dashboard-stat-label{ color:#67e8f9; }

.dashboard-stat-value{
  color:#f1f5f9;
  font-size:38px;
  font-weight:950;
  line-height:1;
  margin-bottom:8px;
  position:relative;
  font-variant-numeric:tabular-nums;
}
.dashboard-stat-value.small{ font-size:26px; line-height:1.2; }
.dashboard-stat-sub{
  color:rgba(148,163,184,.60);
  font-size:12px;
  font-weight:600;
  position:relative;
}

/* ---- Grid (4 panels above وظایف) ---- */
.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.dashboard-panel{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(10,16,35,.65);
  padding:18px 20px;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.dashboard-panel-wide{
  grid-column:1 / -1;
}
.dashboard-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.dashboard-panel-title{
  color:#e0e7ff;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
}

/* ---- Admin assistant ---- */
.dashboard-brief-card{
  padding:14px 16px;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(37,99,235,.14) 0%,rgba(16,185,129,.10) 100%);
  border:1px solid rgba(96,165,250,.18);
  color:#e0e7ff;
  line-height:1.85;
  font-size:14px;
  font-weight:600;
}

/* ---- System status grid ---- */
.dashboard-system-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.dashboard-system-item{
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.dashboard-system-label{
  color:rgba(148,163,184,.55);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.dashboard-system-value{
  color:#e2e8f0;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
}

/* ---- Quick access ---- */
.dashboard-quick-actions{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.dashboard-quick-actions .btn{
  padding:11px 14px !important;
  font-size:13px !important;
  font-weight:800 !important;
  border-radius:12px !important;
  justify-content:center;
}

/* ---- System notes ---- */
.dashboard-note-list{ display:grid; gap:6px; }
.dashboard-note-item{
  padding:10px 13px;
  border-radius:11px;
  color:#cbd5e1;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  line-height:1.7;
  font-size:13.5px;
}

/* ===== Light theme ===== */
body.light-theme #dashboardPage > .headRow{
  background:rgba(255,255,255,.88);
  border-color:#e2e8f0;
}
body.light-theme #dashboardPage > .headRow .label{ color:#4f46e5; }

body.content-portal-active #dashboardPage > .headRow{
  display:none !important;
}

body.light-theme .dashboard-hero{
  background:#1e1b4b;
  border-color:rgba(99,102,241,.35);
}
body.light-theme .dashboard-date-wrap{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.15);
}
body.light-theme .dashboard-stat-card{
  background:rgba(255,255,255,.92);
  border-color:#e2e8f0;
}
body.light-theme .dashboard-stat-card:nth-child(1)::before{ background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(99,102,241,.06) 0%,transparent 70%); }
body.light-theme .dashboard-stat-card:nth-child(2)::before{ background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(245,158,11,.06) 0%,transparent 70%); }
body.light-theme .dashboard-stat-card:nth-child(3)::before{ background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(16,185,129,.06) 0%,transparent 70%); }
body.light-theme .dashboard-stat-card:nth-child(4)::before{ background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(6,182,212,.06) 0%,transparent 70%); }
body.light-theme .dashboard-stat-label{ opacity:.85; }
body.light-theme .dashboard-stat-value{ color:#0f172a; }
body.light-theme .dashboard-stat-sub{ color:#64748b; }
body.light-theme .dashboard-panel{
  background:rgba(255,255,255,.92);
  border-color:#e2e8f0;
  box-shadow:0 6px 20px rgba(15,23,42,.06);
}
body.light-theme .dashboard-panel-title{ color:#0f172a; }
body.light-theme .dashboard-panel-head{ border-bottom-color:#f1f5f9; }
body.light-theme .dashboard-brief-card{
  background:linear-gradient(145deg,rgba(37,99,235,.07) 0%,rgba(16,185,129,.05) 100%);
  border-color:rgba(99,102,241,.15);
  color:#1e293b;
}
body.light-theme .dashboard-system-item{
  background:#f8faff;
  border-color:#e2e8f0;
}
body.light-theme .dashboard-system-value{ color:#0f172a; }
body.light-theme .dashboard-note-item{
  background:#f8faff;
  border-color:#e2e8f0;
  color:#334155;
}

/* ---- Responsive ---- */
@media(max-width:980px){
  .dashboard-hero{
    grid-template-columns:1fr;
  }
  .dashboard-date-wrap{
    text-align:right;
  }
  .dashboard-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dashboard-grid{
    grid-template-columns:1fr;
  }
  .dashboard-quick-actions{
    grid-template-columns:repeat(2,1fr);
  }
}


/* ===================================================
   Variable Products Page — Full Redesign
   =================================================== */

#variableProductsPage{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* ---- Header ---- */
#variableProductsPage > .headRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  padding:16px 22px;
  margin-bottom:14px;
  background:rgba(10,16,35,.70);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  backdrop-filter:blur(12px);
}
#variableProductsPage > .headRow .label{
  font-size:16px;
  font-weight:900;
  color:#e0e7ff;
  border:none;
  background:none;
  padding:0;
  margin:0;
  letter-spacing:-.2px;
}
#variableProductsPage > .headRow .actions .btn{
  padding:9px 16px !important;
  font-size:12.5px !important;
  font-weight:800 !important;
  border-radius:11px !important;
  white-space:nowrap;
}

/* ---- Import boxes grid ---- */
#variableProductsPage .var-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:10px;
}
#variableProductsPage .var-box{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 18px;
  border-radius:16px;
  background:rgba(10,16,35,.65);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
#variableProductsPage .var-box .field{
  margin:0;
}
#variableProductsPage .var-box .field label{
  font-size:11px !important;
  font-weight:700 !important;
  color:rgba(203,213,225,.85) !important;
  letter-spacing:.07em;
  text-transform:uppercase;
  margin-bottom:6px !important;
  display:block;
}
#variableProductsPage .var-box input[type="text"],
#variableProductsPage .var-box input[type="url"]{
  width:100%;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:10px !important;
  color:#e2e8f0 !important;
  padding:9px 12px !important;
  font-size:13px;
  transition:border-color .2s, box-shadow .2s;
}
#variableProductsPage .var-box input[type="text"]:focus,
#variableProductsPage .var-box input[type="url"]:focus{
  border-color:rgba(99,102,241,.45) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.12) !important;
}
#variableProductsPage .var-box input::placeholder{
  color:rgba(148,163,184,.38) !important;
  font-size:12px;
}
#variableProductsPage .var-box input[type="file"]{
  background:rgba(255,255,255,.04) !important;
  border:1px dashed rgba(255,255,255,.12) !important;
  border-radius:10px !important;
  color:rgba(148,163,184,.70) !important;
  padding:8px 12px !important;
  width:100%;
  cursor:pointer;
  font-size:12.5px;
}
#variableProductsPage .var-box input[type="file"]:hover{
  border-color:rgba(99,102,241,.30) !important;
  background:rgba(99,102,241,.05) !important;
}
#variableProductsPage .var-box .btn{
  padding:10px 16px !important;
  font-size:13px !important;
  font-weight:800 !important;
  border-radius:11px !important;
  width:100%;
  margin:0 !important;
}

/* ---- Hint ---- */
#variableProductsPage > .hint{
  margin:0 0 12px;
  padding:9px 14px;
  border-radius:11px;
  font-size:12px;
  color:rgba(203,213,225,.75) !important;
  background:rgba(99,102,241,.06);
  border:1px solid rgba(99,102,241,.14);
}

/* ---- Toolbar (search + filter) ---- */
#variableProductsPage .toolbar{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:nowrap;
  margin-bottom:12px;
  padding:14px 18px;
  background:rgba(7,12,28,.65);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  backdrop-filter:blur(10px);
}
#variableProductsPage .toolbar .var-filter{
  flex:1;
  min-width:0;
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
}
#variableProductsPage .toolbar .var-filter label{
  font-size:10px !important;
  font-weight:700;
  color:rgba(203,213,225,.80) !important;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#variableProductsPage .toolbar input[type="text"],
#variableProductsPage .toolbar select{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:11px !important;
  color:#e2e8f0 !important;
  padding:10px 13px !important;
  font-size:13px;
  width:100%;
  transition:border-color .2s, box-shadow .2s;
}
#variableProductsPage .toolbar input[type="text"]:focus,
#variableProductsPage .toolbar select:focus{
  border-color:rgba(99,102,241,.45) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.12) !important;
}
#variableProductsPage .toolbar input::placeholder{
  color:rgba(148,163,184,.60) !important;
}

/* ---- Table wrapper ---- */
#variableProductsPage .table-wrap{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(10,16,35,.65);
  backdrop-filter:blur(10px);
}

/* ---- Table ---- */
#variableProductsPage .var-table{
  width:100%;
  border-collapse:collapse;
  min-width:600px;
}
#variableProductsPage .var-table thead tr{
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.07);
}
#variableProductsPage .var-table th{
  padding:13px 16px;
  font-size:11px !important;
  font-weight:800 !important;
  color:rgba(203,213,225,.75) !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:transparent !important;
  border-bottom:none !important;
  text-align:right;
}
#variableProductsPage .var-table td{
  padding:13px 16px;
  font-size:14px;
  color:#e2e8f0 !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
  text-align:right;
  vertical-align:middle;
}
#variableProductsPage .var-table tbody tr:last-child td{
  border-bottom:none !important;
}
#variableProductsPage .var-table tbody tr{
  transition:background .15s ease;
}
#variableProductsPage .var-table tbody tr:hover{
  background:rgba(255,255,255,.03);
}

/* ---- Status badges ---- */
#variableProductsPage .status-ok{
  display:inline-flex;
  align-items:center;
  padding:4px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:rgba(16,185,129,.18) !important;
  color:#6ee7b7 !important;
  border:1px solid rgba(16,185,129,.30) !important;
}
#variableProductsPage .status-pending{
  display:inline-flex;
  align-items:center;
  padding:4px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:rgba(245,158,11,.14) !important;
  color:#fcd34d !important;
  border:1px solid rgba(245,158,11,.25) !important;
}

/* ---- Row action buttons ---- */
#variableProductsPage .var-actions{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
}
#variableProductsPage .var-actions .btn{
  padding:7px 12px !important;
  font-size:12px !important;
  font-weight:800 !important;
  border-radius:9px !important;
  white-space:nowrap;
}

/* ---- Empty row ---- */
#variableProductsPage .var-empty{
  padding:28px 16px;
  text-align:center;
  color:rgba(148,163,184,.55) !important;
  font-size:13px;
  font-weight:600;
}

/* ---- Pager ---- */
#variableProductsPage #variablePager.pager{
  margin-top:14px;
  justify-content:center;
  gap:8px;
}
#variableProductsPage #variablePager .btn{
  padding:8px 16px !important;
  font-size:13px !important;
  border-radius:10px !important;
}
#variableProductsPage #variablePager .page-info{
  font-size:13px;
  color:rgba(148,163,184,.60);
  font-weight:700;
}

/* ===== Light theme ===== */
body.light-theme #variableProductsPage > .headRow{
  background:rgba(255,255,255,.92);
  border-color:#e2e8f0;
}
body.light-theme #variableProductsPage > .headRow .label{ color:#0f172a; }
body.light-theme #variableProductsPage .var-box{
  background:rgba(255,255,255,.95);
  border-color:#e2e8f0;
  box-shadow:0 4px 14px rgba(15,23,42,.06);
}
body.light-theme #variableProductsPage .var-box .field label{ color:#64748b !important; }
body.light-theme #variableProductsPage .var-box input[type="text"],
body.light-theme #variableProductsPage .var-box input[type="url"]{
  background:#f8faff !important;
  border-color:#dbe3f2 !important;
  color:#1e293b !important;
}
body.light-theme #variableProductsPage .var-box input[type="text"]:focus,
body.light-theme #variableProductsPage .var-box input[type="url"]:focus{
  background:#ffffff !important;
  border-color:rgba(99,102,241,.42) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.08) !important;
  color:#1e293b !important;
}
body.light-theme #variableProductsPage .var-box input[type="file"]{
  background:rgba(0,0,0,.02) !important;
  border-color:rgba(0,0,0,.10) !important;
  color:#475569 !important;
}
body.light-theme #variableProductsPage > .hint{
  background:rgba(99,102,241,.04);
  border-color:rgba(99,102,241,.12);
  color:#5b6478 !important;
}
body.light-theme #variableProductsPage .toolbar{
  background:rgba(248,250,255,.95);
  border-color:#e2e8f0;
}
body.light-theme #variableProductsPage .toolbar input[type="text"],
body.light-theme #variableProductsPage .toolbar select{
  background:#fff !important;
  border-color:#dbe3f2 !important;
  color:#1e293b !important;
}
body.light-theme #variableProductsPage .toolbar input[type="text"]:focus,
body.light-theme #variableProductsPage .toolbar select:focus{
  background:#ffffff !important;
  border-color:rgba(99,102,241,.42) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.08) !important;
  color:#1e293b !important;
}
body.light-theme #variableProductsPage .toolbar .var-filter label{ color:#64748b !important; }
body.light-theme #variableProductsPage .table-wrap{
  background:rgba(255,255,255,.95);
  border-color:#e2e8f0;
}
body.light-theme #variableProductsPage .var-table thead tr{ background:#f8faff; border-color:#e2e8f0; }
body.light-theme #variableProductsPage .var-table th{ color:#64748b !important; }
body.light-theme #variableProductsPage .var-table td{ color:#1e293b !important; border-bottom-color:#f1f5f9 !important; }
body.light-theme #variableProductsPage .var-table tbody tr:hover{ background:#f4f7fe; }
body.light-theme #variableProductsPage .status-ok{
  background:rgba(16,185,129,.10) !important;
  color:#047857 !important;
  border-color:rgba(16,185,129,.22) !important;
}
body.light-theme #variableProductsPage .status-pending{
  background:rgba(245,158,11,.10) !important;
  color:#b45309 !important;
  border-color:rgba(245,158,11,.22) !important;
}

@media(max-width:900px){
  #variableProductsPage .var-grid{
    grid-template-columns:1fr;
  }
  #variableProductsPage .toolbar{
    flex-wrap:wrap;
  }
}

/* =======================================================
   LIGHT THEME — Gradient text & color contrast global fix
   Dark mode is NOT touched here.
   ======================================================= */

/* --- new-ai-header-title: gradient → solid (color: alone can't beat -webkit-text-fill-color) --- */
body.light-theme .new-ai-header-title{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:#0f172a !important;
  color:#0f172a !important;
}

/* --- new-ai-hero-title span: gradient → solid indigo --- */
body.light-theme .new-ai-hero-title span{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:#4338ca !important;
  color:#4338ca !important;
}

/* --- wg-header h2 (warranty guide outside wg-root): gradient → solid indigo on white --- */
body.light-theme .wg-header h2{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:#4338ca !important;
  color:#4338ca !important;
}

/* --- Dashboard stat labels: fix washed-out / invisible colors in light --- */
body.light-theme .dashboard-stat-card:nth-child(1) .dashboard-stat-label{ color:#4338ca !important; opacity:1; }
body.light-theme .dashboard-stat-card:nth-child(2) .dashboard-stat-label{ color:#92400e !important; opacity:1; }
body.light-theme .dashboard-stat-card:nth-child(3) .dashboard-stat-label{ color:#047857 !important; opacity:1; }
body.light-theme .dashboard-stat-card:nth-child(4) .dashboard-stat-label{ color:#0e7490 !important; opacity:1; }

/* --- Variable products: amber badge color (#fcd34d) → dark amber in light --- */
body.light-theme #variableProductsPage .status-pending{ color:#92400e !important; }

/* --- productsPage hotTag in case it leaks to light --- */
body.light-theme #productsGrid .hotTag{
  background:rgba(245,158,11,.10) !important;
  color:#92400e !important;
  border-color:rgba(245,158,11,.22) !important;
}

/* --- productDetailPage: badge priority p2 (yellow → amber) in light --- */
body.light-theme #productDetailPage .pd-badge-priority.p2{
  background:rgba(245,158,11,.12) !important;
  border-color:rgba(245,158,11,.30) !important;
  color:#92400e !important;
}

/* --- wg-badge (light indigo text): darken in light --- */
body.light-theme .wg-badge{ color:#4338ca; background:rgba(99,102,241,.08); border-color:rgba(99,102,241,.20); }
body.light-theme .wg-header p{ color:#64748b; }

/* =======================================================
   #smartToolsPage — Premium AI Hub Redesign
   ======================================================= */

#smartToolsPage{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  gap:0;
}

#smartToolsPage > .headRow{
  background:rgba(10,16,36,.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  padding:16px 22px;
  margin-bottom:18px;
}

/* ---- Hero ---- */
#smartToolsPage .smart-tools-hero{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:52px 40px 48px;
  background:#07091a;
  border:1px solid rgba(99,102,241,.18);
  box-shadow:0 32px 72px rgba(0,0,0,.50);
  text-align:center;
  margin-bottom:18px;
}

#smartToolsPage .smart-tools-hero::before{
  content:'';
  position:absolute;
  top:-100px; right:-80px;
  width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(99,102,241,.32) 0%, transparent 68%);
  pointer-events:none;
}

#smartToolsPage .smart-tools-hero::after{
  content:'';
  position:absolute;
  bottom:-80px; left:-60px;
  width:360px; height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(6,182,212,.22) 0%, transparent 70%);
  pointer-events:none;
}

#smartToolsPage .smart-tools-hero h1{
  position:relative;
  z-index:1;
  margin:0 0 16px;
  font-size:48px;
  font-weight:950;
  letter-spacing:-.04em;
  line-height:1.1;
  background:linear-gradient(135deg,#fff 0%,#c7d2fe 42%,#67e8f9 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

#smartToolsPage .smart-tools-hero p{
  position:relative;
  z-index:1;
  margin:0 auto;
  max-width:640px;
  font-size:15px;
  color:rgba(188,205,240,.80);
  line-height:2;
}

/* ---- Grid ---- */
#smartToolsPage .smart-tools-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}

/* ---- Base card ---- */
#smartToolsPage .smart-tool-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  padding:0;
  background:rgba(11,17,38,.84);
  border:1px solid rgba(255,255,255,.07);
  border-top-width:3px;
  box-shadow:0 16px 40px rgba(0,0,0,.32);
  display:flex;
  flex-direction:column;
  gap:0;
  transition:transform .30s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease, border-color .20s ease;
}

#smartToolsPage .smart-tool-card:hover{
  transform:translateY(-7px) scale(1.012);
  box-shadow:0 32px 60px rgba(0,0,0,.42);
  border-color:rgba(255,255,255,.14);
}

/* ---- Glow blobs & colored top per badge type ---- */
#smartToolsPage .smart-tool-card:has(.smart-tool-badge.global){
  border-top-color:#6366f1;
}
#smartToolsPage .smart-tool-card:has(.smart-tool-badge.global)::before{
  content:'';
  position:absolute;
  top:-30px; left:50%;
  transform:translateX(-50%);
  width:260px; height:120px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(99,102,241,.22) 0%, transparent 70%);
  pointer-events:none;
}

#smartToolsPage .smart-tool-card:has(.smart-tool-badge.product){
  border-top-color:#10b981;
}
#smartToolsPage .smart-tool-card:has(.smart-tool-badge.product)::before{
  content:'';
  position:absolute;
  top:-30px; left:50%;
  transform:translateX(-50%);
  width:260px; height:120px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(16,185,129,.20) 0%, transparent 70%);
  pointer-events:none;
}

#smartToolsPage .smart-tool-card:has(.smart-tool-badge.plan){
  border-top-color:#8b5cf6;
}
#smartToolsPage .smart-tool-card:has(.smart-tool-badge.plan)::before{
  content:'';
  position:absolute;
  top:-30px; left:50%;
  transform:translateX(-50%);
  width:260px; height:120px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(139,92,246,.22) 0%, transparent 70%);
  pointer-events:none;
}

#smartToolsPage .smart-tool-card:has(.smart-tool-badge.builder){
  border-top-color:#f59e0b;
}
#smartToolsPage .smart-tool-card:has(.smart-tool-badge.builder)::before{
  content:'';
  position:absolute;
  top:-30px; left:50%;
  transform:translateX(-50%);
  width:260px; height:120px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(245,158,11,.18) 0%, transparent 70%);
  pointer-events:none;
}

/* ---- Card header ---- */
#smartToolsPage .smart-tool-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
  padding:22px 20px 16px;
  position:relative;
  z-index:1;
  border-bottom:1px solid rgba(255,255,255,.05);
}

#smartToolsPage .smart-tool-title-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-width:0;
}

#smartToolsPage .smart-tool-title{
  font-size:17px;
  font-weight:900;
  color:#eef2ff;
  line-height:1.3;
}

#smartToolsPage .smart-tool-codename{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  color:#7dd3fc;
  background:rgba(14,165,233,.12);
  border:1px solid rgba(14,165,233,.22);
}

/* ---- Badges — dark card context ---- */
#smartToolsPage .smart-tool-badge{
  flex-shrink:0;
  padding:5px 11px;
  font-size:11px;
  font-weight:800;
  border-radius:999px;
  border:1px solid transparent;
}

#smartToolsPage .smart-tool-badge.global{
  background:rgba(99,102,241,.18);
  color:#a5b4fc;
  border-color:rgba(99,102,241,.35);
}
#smartToolsPage .smart-tool-badge.product{
  background:rgba(16,185,129,.15);
  color:#6ee7b7;
  border-color:rgba(16,185,129,.30);
}
#smartToolsPage .smart-tool-badge.plan{
  background:rgba(139,92,246,.18);
  color:#c4b5fd;
  border-color:rgba(139,92,246,.35);
}
#smartToolsPage .smart-tool-badge.builder{
  background:rgba(245,158,11,.15);
  color:#fcd34d;
  border-color:rgba(245,158,11,.30);
}

/* ---- Card body ---- */
#smartToolsPage .smart-tool-desc{
  padding:16px 20px 0;
  font-size:14px;
  font-weight:700;
  color:#cdd9f0;
  line-height:1.85;
  position:relative;
  z-index:1;
}

#smartToolsPage .smart-tool-logic{
  padding:10px 20px 0;
  font-size:12.5px;
  color:rgba(148,163,184,.72);
  line-height:1.9;
  position:relative;
  z-index:1;
}

/* ---- Card footer / actions ---- */
#smartToolsPage .smart-tool-actions{
  padding:16px 20px 22px;
  margin-top:auto;
  gap:8px;
  flex-wrap:nowrap;
  position:relative;
  z-index:1;
}

#smartToolsPage .smart-tool-actions .btn{
  flex:1;
  justify-content:center;
  padding:9px 14px !important;
  font-size:12px !important;
  font-weight:800 !important;
  border-radius:12px !important;
}

/* ---- Shell spacing ---- */
#smartToolsPage .smart-tools-shell{
  gap:0;
}

/* ---- Light theme overrides ---- */
body.light-theme #smartToolsPage > .headRow{
  background:rgba(255,255,255,.92);
  border-color:#e2e8f0;
}
body.light-theme #smartToolsPage > .headRow .label{ color:#0f172a; }

body.light-theme #smartToolsPage .smart-tools-hero{
  background:#1e1b4b;
  border-color:rgba(99,102,241,.30);
}

body.light-theme #smartToolsPage .smart-tool-card{
  background:rgba(255,255,255,.95);
  border-color:#e2e8f0;
  box-shadow:0 10px 32px rgba(15,23,42,.09);
}
body.light-theme #smartToolsPage .smart-tool-card:hover{
  border-color:#c7d2fe;
  box-shadow:0 20px 48px rgba(15,23,42,.14);
}
body.light-theme #smartToolsPage .smart-tool-card:has(.smart-tool-badge.global)::before,
body.light-theme #smartToolsPage .smart-tool-card:has(.smart-tool-badge.product)::before,
body.light-theme #smartToolsPage .smart-tool-card:has(.smart-tool-badge.plan)::before,
body.light-theme #smartToolsPage .smart-tool-card:has(.smart-tool-badge.builder)::before{
  opacity:.5;
}
body.light-theme #smartToolsPage .smart-tool-top{ border-bottom-color:#f1f5f9; }
body.light-theme #smartToolsPage .smart-tool-title{ color:#0f172a; }
body.light-theme #smartToolsPage .smart-tool-codename{
  color:#0369a1; background:rgba(14,165,233,.08); border-color:rgba(14,165,233,.18);
}
body.light-theme #smartToolsPage .smart-tool-badge.global{
  background:rgba(99,102,241,.10); color:#4338ca; border-color:rgba(99,102,241,.25);
}
body.light-theme #smartToolsPage .smart-tool-badge.product{
  background:rgba(16,185,129,.10); color:#047857; border-color:rgba(16,185,129,.25);
}
body.light-theme #smartToolsPage .smart-tool-badge.plan{
  background:rgba(139,92,246,.10); color:#5b21b6; border-color:rgba(139,92,246,.25);
}
body.light-theme #smartToolsPage .smart-tool-badge.builder{
  background:rgba(245,158,11,.10); color:#92400e; border-color:rgba(245,158,11,.25);
}
body.light-theme #smartToolsPage .smart-tool-desc{ color:#1e293b; }
body.light-theme #smartToolsPage .smart-tool-logic{ color:#64748b; }

/* =======================================================
   #apiPage — Premium API Settings Redesign (2-col compact)
   DOM children order:
     1=.headRow  2=field(key)  3=field(model-text)
     4=field(baseurl)  5=field(endpoint)  6=field(select)
     7=.actions  8=.hint
   Grid layout:
     row2: API Key — full width
     row3: model-text (col1) | model-select (col2)
     row4: base-url  (col1) | endpoint     (col2)
     row5: actions — full width
     row6: hint    — full width
   ======================================================= */

#apiPage{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:0;
  row-gap:0;
  align-items:stretch;
}

/* ---- Head row: full width, separate panel ---- */
#apiPage > .headRow{
  grid-column:1 / -1;
  background:rgba(10,16,36,.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  padding:16px 22px;
  margin-bottom:16px;
}

/* ---- Unified config panel: all fields + actions share same bg ---- */
#apiPage > .field,
#apiPage > .actions{
  background:rgba(11,17,38,.84);
  border-top:1px solid rgba(255,255,255,.05);
  border-right:1px solid rgba(255,255,255,.07);
  border-left:1px solid rgba(255,255,255,.07);
  padding:18px 22px;
  margin:0;
  position:relative;
  z-index:2;
  box-sizing:border-box;
}

/* ---- Grid placement ---- */
/* API Key: full width, row 2 — panel top */
#apiPage > .field:nth-child(2){
  grid-column:1 / -1;
  grid-row:2;
  border-top:3px solid #6366f1;
  border-top-left-radius:22px;
  border-top-right-radius:22px;
  overflow:hidden;
}
/* Glow blob in API Key field */
#apiPage > .field:nth-child(2)::after{
  content:'';
  position:absolute;
  top:-50px; right:-50px;
  width:260px; height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(99,102,241,.24) 0%, transparent 68%);
  pointer-events:none;
  z-index:0;
}

/* Model text: col 1, row 3 */
#apiPage > .field:nth-child(3){
  grid-column:1;
  grid-row:3;
  border-right:none;
}
/* Model select: col 2, row 3 */
#apiPage > .field:nth-child(6){
  grid-column:2;
  grid-row:3;
  z-index:20;
  overflow:visible;
}
/* Shared border between col1 & col2 in row3 */
#apiPage > .field:nth-child(3)::before,
#apiPage > .field:nth-child(4)::before{
  content:'';
  position:absolute;
  top:14px; bottom:14px;
  right:0;
  width:1px;
  background:rgba(255,255,255,.06);
  pointer-events:none;
}

/* Base URL: col 1, row 4 */
#apiPage > .field:nth-child(4){
  grid-column:1;
  grid-row:4;
  border-right:none;
}
/* Endpoint: col 2, row 4 */
#apiPage > .field:nth-child(5){
  grid-column:2;
  grid-row:4;
}

/* Actions: full width, row 5 */
#apiPage > .actions{
  grid-column:1 / -1;
  grid-row:5;
  z-index:1;
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

/* Hint: full width, row 6 */
#apiPage > .hint{
  grid-column:1 / -1;
  grid-row:6;
  z-index:1;
  background:rgba(11,17,38,.50);
  border:1px solid rgba(255,255,255,.06);
  border-top:none;
  border-bottom-left-radius:22px;
  border-bottom-right-radius:22px;
  padding:13px 22px;
  font-size:12.5px !important;
  color:rgba(148,163,184,.60) !important;
  line-height:1.9;
  text-align:center;
}

/* ---- Field labels ---- */
#apiPage > .field label{
  display:block;
  font-size:11px !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  color:rgba(148,163,184,.75) !important;
  margin-bottom:9px !important;
  position:relative;
  z-index:1;
}

/* ---- Inputs & selects ---- */
#apiPage > .field input,
#apiPage > .field select{
  background:rgba(5,10,26,.75) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:12px !important;
  color:#dde6ff !important;
  padding:11px 14px !important;
  font-size:14px !important;
  width:100%;
  box-sizing:border-box;
  position:relative;
  z-index:1;
  transition:border-color .20s ease, box-shadow .20s ease !important;
}

#apiPage > .field input:focus,
#apiPage > .field select:focus{
  border-color:rgba(99,102,241,.55) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.12) !important;
  outline:none !important;
}

/* ---- Action buttons ---- */
#apiPage > .actions .btn{
  flex:1;
  justify-content:center;
  padding:11px 16px !important;
  font-size:13px !important;
  font-weight:800 !important;
  border-radius:12px !important;
}

/* ---- Light theme ---- */
body.light-theme #apiPage > .headRow{
  background:rgba(255,255,255,.92);
  border-color:#e2e8f0;
}
body.light-theme #apiPage > .headRow .label{ color:#0f172a; }

body.light-theme #apiPage > .field,
body.light-theme #apiPage > .actions{
  background:rgba(255,255,255,.97);
  border-color:#e2e8f0;
}
body.light-theme #apiPage > .field:nth-child(2){ border-top-color:#6366f1; }
body.light-theme #apiPage > .field:nth-child(2)::after{ opacity:.12; }
body.light-theme #apiPage > .field:nth-child(3)::before,
body.light-theme #apiPage > .field:nth-child(4)::before{ background:#e2e8f0; }
body.light-theme #apiPage > .field label{ color:#64748b !important; }
body.light-theme #apiPage > .field input,
body.light-theme #apiPage > .field select{
  background:#f8faff !important;
  border-color:#dbe3f2 !important;
  color:#1e293b !important;
}
body.light-theme #apiPage > .field input:focus,
body.light-theme #apiPage > .field select:focus{
  border-color:rgba(99,102,241,.45) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.10) !important;
}
body.light-theme #apiPage > .hint{
  background:rgba(248,250,255,.90);
  border-color:#e2e8f0;
  color:#64748b !important;
}

/* =======================================================
   #apiPage — Custom Model Dropdown
   ======================================================= */

.api-model-dropdown{
  position:relative;
  width:100%;
}

/* ---- Toggle button ---- */
.api-model-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(5,10,26,.75);
  color:#dde6ff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  text-align:right;
  direction:ltr;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.api-model-toggle:hover{
  border-color:rgba(99,102,241,.35);
}

.api-model-dropdown.open .api-model-toggle{
  border-color:rgba(99,102,241,.55);
  box-shadow:0 0 0 3px rgba(99,102,241,.12);
}

.api-model-selected{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.api-model-arrow{
  flex-shrink:0;
  color:#7dd3fc;
  font-size:18px;
  line-height:1;
  display:inline-block;
  transform:rotate(90deg);
  transition:transform .20s ease;
}

.api-model-dropdown.open .api-model-arrow{
  transform:rotate(-90deg);
}

/* ---- Dropdown menu ---- */
.api-model-menu{
  display:none;
  position:fixed;
  z-index:99999;
  background:rgba(8,13,30,.98);
  border:1px solid rgba(99,102,241,.30);
  border-radius:14px;
  box-shadow:0 24px 56px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
}

.api-model-menu.open{
  display:block;
}

/* ---- Search ---- */
.api-model-search-wrap{
  padding:10px 12px 8px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.api-model-search{
  width:100%;
  box-sizing:border-box;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:9px !important;
  color:#e2e8f0 !important;
  font-size:13px !important;
  padding:8px 12px !important;
  direction:rtl;
}

.api-model-search::placeholder{ color:rgba(148,163,184,.55) !important; }
.api-model-search:focus{ border-color:rgba(99,102,241,.45) !important; outline:none !important; }

/* ---- Options list ---- */
.api-model-options{
  max-height:280px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:6px;
  display:block;
  scrollbar-width:thin;
  scrollbar-color:rgba(99,102,241,.30) transparent;
}

.api-model-options::-webkit-scrollbar{ width:4px; }
.api-model-options::-webkit-scrollbar-thumb{ background:rgba(99,102,241,.30); border-radius:99px; }

/* ---- Option item ---- */
.api-model-option{
  display:block !important;
  position:static !important;
  width:100%;
  box-sizing:border-box;
  padding:9px 12px;
  margin-bottom:2px;
  border-radius:9px;
  border:1px solid transparent;
  background:transparent;
  color:rgba(203,213,225,.85);
  font-size:13px;
  font-weight:600;
  text-align:left;
  direction:ltr;
  cursor:pointer;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.api-model-option:hover{
  background:rgba(99,102,241,.14);
  border-color:rgba(99,102,241,.22);
  color:#eef2ff;
}

.api-model-option.active{
  background:linear-gradient(135deg, rgba(79,70,229,.22), rgba(6,182,212,.14));
  border-color:rgba(99,102,241,.38);
  color:#a5b4fc;
  font-weight:800;
}

.api-model-option-empty{
  padding:14px 12px;
  color:rgba(148,163,184,.55);
  font-size:13px;
  text-align:center;
}

/* ---- Light theme ---- */
body.light-theme .api-model-toggle{
  background:#f8faff !important;
  border-color:#dbe3f2 !important;
  color:#1e293b !important;
}
body.light-theme .api-model-toggle:hover{ border-color:rgba(99,102,241,.40) !important; }
body.light-theme .api-model-dropdown.open .api-model-toggle{
  border-color:rgba(99,102,241,.50) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.10) !important;
}
body.light-theme .api-model-menu{
  background:rgba(255,255,255,.99);
  border-color:#c7d2fe;
  box-shadow:0 18px 40px rgba(15,23,42,.14);
}
body.light-theme .api-model-search-wrap{ border-bottom-color:#f1f5f9; }
body.light-theme .api-model-search{
  background:#f8faff !important;
  border-color:#dbe3f2 !important;
  color:#1e293b !important;
}
body.light-theme .api-model-search::placeholder{ color:#94a3b8 !important; }
body.light-theme .api-model-option{ color:#334155; }
body.light-theme .api-model-option:hover{
  background:rgba(99,102,241,.08);
  border-color:rgba(99,102,241,.18);
  color:#1e293b;
}
body.light-theme .api-model-option.active{
  background:rgba(99,102,241,.10);
  border-color:rgba(99,102,241,.28);
  color:#4338ca;
}
body.light-theme .api-model-options{
  scrollbar-color:rgba(99,102,241,.20) transparent;
}

/* ── #newAiPage compact optimisation ─────────────────────────────── */
#newAiPage .new-ai-actions .btn{
  padding:6px 14px !important;
  font-size:12px !important;
  border-radius:10px !important;
  min-height:unset !important;
  height:auto !important;
  line-height:1.5 !important;
}
#newAiPage .new-ai-toolbar{
  padding:0 24px 16px;
}
#newAiPage .new-ai-grid-wrap{
  padding:0 24px 32px;
}
#newAiPage .new-ai-card{
  padding:16px;
  min-height:unset;
}
#newAiPage .new-ai-card-icon{
  width:40px;
  height:40px;
  border-radius:10px;
  font-size:15px;
  margin-bottom:10px;
}
#newAiPage .new-ai-card-tag{
  margin-bottom:10px;
}
#newAiPage .new-ai-card-name{
  font-size:15px;
  min-height:unset;
  margin-bottom:4px;
}
#newAiPage .new-ai-card.is-title-long .new-ai-card-name{
  font-size:14px;
  min-height:unset;
}
#newAiPage .new-ai-card.is-title-xlong .new-ai-card-name{
  font-size:13px;
  min-height:unset;
}
#newAiPage .new-ai-card-desc{
  min-height:unset;
  margin-bottom:10px;
  -webkit-line-clamp:3;
}
#newAiPage .new-ai-card-pricing{
  min-height:unset;
  margin-bottom:10px;
}
/* ─────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
   #apiPage — Dual-Provider Layout (OpenAI + Google)
   Overrides the old single-grid layout; each provider is its own panel
   ══════════════════════════════════════════════════════════════════ */
#apiPage:not(.hidden){
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
  grid-template-columns:unset !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* Each provider block is its own 2-column grid */
.api-provider-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:0;
  row-gap:0;
  align-items:stretch;
  border-radius:22px;
  overflow:visible;
}

/* ── Panel header (provider badge row) ── */
.api-panel-header{
  grid-column:1/-1;
  grid-row:1;
  background:rgba(10,16,36,.88);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.07);
  border-bottom:none;
  border-top-left-radius:22px;
  border-top-right-radius:22px;
  padding:13px 22px;
  display:flex;
  align-items:center;
  gap:10px;
}
.api-panel-badge{
  font-size:10px;
  font-weight:800;
  letter-spacing:1.2px;
  padding:3px 11px;
  border-radius:20px;
  border:1px solid;
  text-transform:uppercase;
}
.openai-panel .api-panel-badge{
  color:#818cf8;
  border-color:rgba(99,102,241,.35);
  background:rgba(99,102,241,.12);
}
.google-panel .api-panel-badge{
  color:#4ade80;
  border-color:rgba(74,222,128,.35);
  background:rgba(74,222,128,.10);
}
.api-panel-header-title{
  font-size:13px;
  font-weight:700;
  color:#e2e8f0;
}

/* ── Shared field + actions styles ── */
.api-provider-panel>.field,
.api-provider-panel>.actions{
  background:rgba(11,17,38,.84);
  border-top:1px solid rgba(255,255,255,.05);
  border-right:1px solid rgba(255,255,255,.07);
  border-left:1px solid rgba(255,255,255,.07);
  border-bottom:none;
  padding:18px 22px;
  margin:0;
  position:relative;
  z-index:2;
  box-sizing:border-box;
}

/* ── API Key: full width, row 2 (right after header) ── */
.api-provider-panel>.field:nth-child(2){
  grid-column:1/-1;
  grid-row:2;
  border-top:none;
  overflow:hidden;
}
/* Accent stripe at top of key field */
.api-provider-panel>.field:nth-child(2)::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  pointer-events:none;
  z-index:3;
}
.openai-panel>.field:nth-child(2)::after{
  background:#6366f1;
}
.google-panel>.field:nth-child(2)::after{
  background:linear-gradient(90deg,#4ade80,#22d3ee);
}
/* Glow blob */
.api-provider-panel>.field:nth-child(2)::before{
  content:'';
  position:absolute;
  top:-50px;right:-50px;
  width:260px;height:180px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
.openai-panel>.field:nth-child(2)::before{
  background:radial-gradient(circle,rgba(99,102,241,.20) 0%,transparent 68%);
}
.google-panel>.field:nth-child(2)::before{
  background:radial-gradient(circle,rgba(74,222,128,.16) 0%,transparent 68%);
}

/* ── Model text: col1, row 3 (both panels) ── */
.api-provider-panel>.field:nth-child(3){
  grid-column:1;
  grid-row:3;
  border-right:none;
}
/* Divider line on right edge of col1 fields */
.api-provider-panel>.field:nth-child(3)::after,
.openai-panel>.field:nth-child(4)::after{
  content:'';
  position:absolute;
  top:14px;bottom:14px;
  right:0;
  width:1px;
  background:rgba(255,255,255,.06);
  pointer-events:none;
}

/* ── OpenAI-specific: Base URL col1 row4, Endpoint col2 row4, Select col2 row3 ── */
.openai-panel>.field:nth-child(4){
  grid-column:1;
  grid-row:4;
  border-right:none;
}
.openai-panel>.field:nth-child(5){
  grid-column:2;
  grid-row:4;
}
.openai-panel>.field:nth-child(6){
  grid-column:2;
  grid-row:3;
  z-index:20;
  overflow:visible;
}
.openai-panel>.actions{
  grid-column:1/-1;
  grid-row:5;
}

/* ── Google-specific: Select col2 row3, Actions row4 ── */
.google-panel>.field:nth-child(4){
  grid-column:2;
  grid-row:3;
  z-index:20;
  overflow:visible;
}
.google-panel>.actions{
  grid-column:1/-1;
  grid-row:4;
}

/* ── Actions row shared styles ── */
.api-provider-panel>.actions{
  z-index:1;
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  border-bottom:1px solid rgba(255,255,255,.07);
  border-bottom-left-radius:22px;
  border-bottom-right-radius:22px;
}

/* ── Field labels ── */
.api-provider-panel>.field label{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:rgba(148,163,184,.55) !important;
  margin-bottom:8px;
  position:relative;
  z-index:1;
}

/* ── Inputs & selects ── */
.api-provider-panel>.field input,
.api-provider-panel>.field select{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:10px 14px;
  font-size:13px;
  color:#e2e8f0;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
  box-sizing:border-box;
  position:relative;
  z-index:1;
}
.api-provider-panel>.field input:focus,
.api-provider-panel>.field select:focus{
  border-color:rgba(99,102,241,.45);
  box-shadow:0 0 0 3px rgba(99,102,241,.10);
}
.google-panel>.field input:focus,
.google-panel>.field select:focus{
  border-color:rgba(74,222,128,.40);
  box-shadow:0 0 0 3px rgba(74,222,128,.09);
}

/* ── Buttons inside panel actions ── */
.api-provider-panel>.actions .btn{
  flex:1;
  min-width:0;
  justify-content:center;
  font-size:12.5px;
  padding:9px 12px;
}

/* ── Light theme overrides ── */
body.light-theme .api-panel-header{
  background:rgba(248,250,252,.92);
  border-color:#e2e8f0;
}
body.light-theme .api-panel-header-title{ color:#1e293b; }
body.light-theme .openai-panel .api-panel-badge{
  color:#4338ca; border-color:rgba(99,102,241,.3); background:rgba(99,102,241,.08);
}
body.light-theme .google-panel .api-panel-badge{
  color:#166534; border-color:rgba(74,222,128,.35); background:rgba(74,222,128,.10);
}
body.light-theme .api-provider-panel>.field,
body.light-theme .api-provider-panel>.actions{
  background:rgba(248,250,252,.85);
  border-color:#e2e8f0;
}
body.light-theme .api-provider-panel>.field label{ color:#64748b !important; }
body.light-theme .api-provider-panel>.field input,
body.light-theme .api-provider-panel>.field select{
  background:#fff;
  border-color:#cbd5e1;
  color:#0f172a;
}
body.light-theme .api-provider-panel>.field input:focus,
body.light-theme .api-provider-panel>.field select:focus{
  border-color:rgba(99,102,241,.5);
  box-shadow:0 0 0 3px rgba(99,102,241,.08);
}
body.light-theme .google-panel>.field input:focus,
body.light-theme .google-panel>.field select:focus{
  border-color:rgba(74,222,128,.5);
  box-shadow:0 0 0 3px rgba(74,222,128,.08);
}
body.light-theme .api-provider-panel>.actions{
  border-bottom-color:#e2e8f0;
}
body.light-theme #apiPage>.hint{
  background:rgba(248,250,252,.70);
  border-color:#e2e8f0;
  color:#64748b !important;
}
/* ══════════════════════════════════════════════════════════════════ */

.portal-home-shell{
  display:grid;
  gap:24px;
}
.portal-home-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:28px 30px;
  border-radius:26px;
  border:1px solid rgba(96,165,250,.16);
  background:
    radial-gradient(120% 120% at 0% 100%, rgba(99,102,241,.16) 0%, rgba(99,102,241,0) 55%),
    radial-gradient(120% 120% at 100% 0%, rgba(16,185,129,.12) 0%, rgba(16,185,129,0) 58%),
    linear-gradient(135deg, rgba(8,15,32,.92) 0%, rgba(13,25,49,.98) 100%);
}
.portal-home-hero h1{
  margin:0 0 10px;
  font-size:42px;
  line-height:1.15;
}
.portal-home-hero p{
  margin:0;
  max-width:900px;
  color:#aebbd5;
  line-height:2;
  font-size:18px;
}
.portal-home-badge{
  flex:0 0 auto;
  padding:14px 18px;
  border-radius:18px;
  border:1px solid rgba(99,102,241,.28);
  background:linear-gradient(135deg, rgba(99,102,241,.18), rgba(56,189,248,.16));
  color:#dbeafe;
  font-weight:800;
  letter-spacing:.04em;
}
.portal-home-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.portal-home-card{
  position:relative;
  padding:26px;
  border-radius:24px;
  border:1px solid rgba(148,163,184,.16);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(56,189,248,.08) 0%, rgba(56,189,248,0) 52%),
    radial-gradient(120% 120% at 0% 100%, rgba(129,140,248,.10) 0%, rgba(129,140,248,0) 58%),
    linear-gradient(145deg, rgba(17,24,39,.94) 0%, rgba(7,13,27,.98) 100%);
  box-shadow:0 20px 44px rgba(2,6,23,.24);
}
.portal-home-card.is-primary{
  border-color:rgba(99,102,241,.32);
  box-shadow:0 24px 52px rgba(79,70,229,.18);
}
.portal-home-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.portal-home-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  border-radius:18px;
  font-size:28px;
  background:linear-gradient(135deg, rgba(99,102,241,.28), rgba(56,189,248,.22));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.portal-home-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(99,102,241,.24);
  background:rgba(99,102,241,.12);
  color:#c7d2fe;
  font-size:13px;
  font-weight:800;
}
.portal-home-card h2{
  margin:0 0 12px;
  font-size:30px;
  line-height:1.25;
}
.portal-home-card p{
  margin:0;
  color:#9fb0cd;
  line-height:2;
  min-height:88px;
}
.portal-home-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.portal-placeholder{
  display:grid;
  justify-items:center;
  gap:14px;
  padding:56px 28px;
  text-align:center;
  border-radius:24px;
  border:1px dashed rgba(96,165,250,.18);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(56,189,248,.08) 0%, rgba(56,189,248,0) 58%),
    linear-gradient(145deg, rgba(17,24,39,.88) 0%, rgba(8,15,32,.96) 100%);
}
.portal-placeholder-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:82px;
  height:82px;
  border-radius:24px;
  font-size:38px;
  background:linear-gradient(135deg, rgba(99,102,241,.24), rgba(16,185,129,.16));
}
.portal-placeholder h2{
  margin:0;
  font-size:32px;
}
.portal-placeholder p{
  margin:0;
  max-width:920px;
  color:#9fb0cd;
  line-height:2;
  font-size:18px;
}
.training-shell{
  display:grid;
  gap:18px;
  padding:8px 4px;
}
.training-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:26px 28px;
  border-radius:24px;
  border:1px solid rgba(96,165,250,.16);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(14,165,233,.12) 0%, rgba(14,165,233,0) 52%),
    linear-gradient(145deg, rgba(17,24,39,.9) 0%, rgba(8,15,32,.96) 100%);
}
.training-kicker{
  display:inline-flex;
  margin-bottom:10px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.22);
  background:rgba(14,165,233,.10);
  color:#7dd3fc;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.training-hero h1{
  margin:0 0 12px;
  font-size:34px;
  line-height:1.3;
}
.training-hero p{
  margin:0;
  max-width:860px;
  color:#9fb0cd;
  line-height:2;
  font-size:16px;
}
.training-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.training-panel-wide{
  grid-column:1 / -1;
}
.training-sales-search-panel{
  min-height:320px;
}
.training-panel{
  padding:22px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.14);
  background:linear-gradient(145deg, rgba(15,23,42,.72) 0%, rgba(6,12,25,.92) 100%);
}
.training-panel-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.training-panel-head-split{
  justify-content:space-between;
  flex-wrap:wrap;
 }
.training-panel-title{
  font-size:18px;
  font-weight:900;
  color:#f8fafc;
}
.training-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.training-sales-search-shell{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  min-height:220px;
}
.training-sales-search-copy{
  display:grid;
  gap:10px;
  justify-items:center;
}
.training-sales-search-sub{
  max-width:720px;
  color:#9fb0cd;
  line-height:1.9;
  font-size:15px;
}
.training-search-box{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:min(360px,100%);
  padding:10px 14px;
  border-radius:18px;
  border:1px solid rgba(125,211,252,.16);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(14,165,233,.12) 0%, rgba(14,165,233,0) 60%),
    linear-gradient(145deg, rgba(15,23,42,.84) 0%, rgba(8,15,32,.96) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 16px 32px rgba(2,6,23,.18);
}
.training-search-box-wide{
  min-width:min(520px,100%);
}
.training-search-box-centered{
  width:min(640px,100%);
  margin:0 auto;
}
.training-search-suggestions{
  width:min(640px,100%);
  margin:-4px auto 0;
  padding:10px;
  border-radius:20px;
  border:1px solid rgba(125,211,252,.14);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(14,165,233,.08) 0%, rgba(14,165,233,0) 60%),
    linear-gradient(145deg, rgba(10,18,38,.96) 0%, rgba(8,15,32,.98) 100%);
  box-shadow:0 20px 36px rgba(2,6,23,.22);
}
.training-search-suggestion-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border:none;
  border-radius:14px;
  background:transparent;
  color:#e2e8f0;
  font:inherit;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.training-search-suggestion-item:hover{
  background:rgba(14,165,233,.1);
  transform:translateY(-1px);
}
.training-search-suggestion-title{
  font-weight:800;
  text-align:right;
}
.training-search-suggestion-meta{
  color:#7dd3fc;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.training-search-box:focus-within{
  border-color:rgba(56,189,248,.36);
  box-shadow:0 0 0 4px rgba(14,165,233,.08), inset 0 1px 0 rgba(255,255,255,.04);
}
.training-search-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  background:rgba(14,165,233,.12);
  color:#7dd3fc;
  font-size:18px;
  flex-shrink:0;
}
.training-search-box input{
  flex:1;
  min-width:0;
  border:none;
  background:transparent;
  color:#f8fafc;
  font-size:15px;
  font-weight:700;
  font-family:inherit;
}
.training-search-box input::placeholder{
  color:#64748b;
}
.training-search-box input:focus{
  outline:none;
}
.training-stats{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.training-stats-centered{
  justify-content:center;
}
.training-stat-chip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.18);
  background:rgba(14,165,233,.08);
  color:#dbeafe;
  font-size:13px;
  font-weight:700;
}
.training-stat-chip strong{
  color:#7dd3fc;
}
.training-list,
.training-steps{
  display:grid;
  gap:12px;
}
.training-list-item,
.training-step{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.42);
  color:#d7e2f0;
  line-height:1.9;
}
.training-step strong{
  color:#7dd3fc;
  margin-left:6px;
}
.training-products-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;
}
.training-products-list-compact{
  grid-template-columns:1fr;
}
.training-recent-searches{
  margin-top:22px;
  display:grid;
  gap:16px;
}
.training-recent-searches-title{
  font-size:15px;
  font-weight:900;
  color:#dbeafe;
  text-align:center;
}
.training-recent-searches-list{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.training-recent-search-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  cursor:pointer;
  border:1px solid rgba(125,211,252,.16);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(14,165,233,.14) 0%, rgba(14,165,233,0) 60%),
    linear-gradient(145deg, rgba(15,23,42,.84) 0%, rgba(8,15,32,.96) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 16px 32px rgba(2,6,23,.18);
  color:#e0f2fe;
  font:inherit;
  font-weight:800;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.training-recent-search-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(56,189,248,.34);
  box-shadow:0 14px 30px rgba(2,6,23,.24);
}
.training-recent-search-chip-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:10px;
  background:rgba(14,165,233,.14);
  color:#7dd3fc;
  font-size:16px;
}
.training-list-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(59,130,246,.08) 0%, rgba(59,130,246,0) 55%),
    linear-gradient(145deg, rgba(15,23,42,.72) 0%, rgba(6,12,25,.88) 100%);
}
.training-list-row-main{
  min-width:0;
}
.training-list-row-title{
  font-size:20px;
  font-weight:900;
  color:#f8fafc;
}
.training-list-row-sub{
  margin-top:6px;
  color:#94a3b8;
  font-size:13px;
}
.training-list-row-actions{
  flex-shrink:0;
}
.training-open-btn{
  min-width:140px;
}
.training-product-card{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(59,130,246,.08) 0%, rgba(59,130,246,0) 55%),
    linear-gradient(145deg, rgba(15,23,42,.72) 0%, rgba(6,12,25,.88) 100%);
}
.training-product-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.training-product-title{
  font-size:20px;
  font-weight:900;
  color:#f8fafc;
}
.training-product-meta{
  margin-top:6px;
  color:#94a3b8;
  font-size:13px;
}
.training-product-badge{
  padding:7px 11px;
  border-radius:999px;
  background:rgba(99,102,241,.14);
  border:1px solid rgba(129,140,248,.2);
  color:#c7d2fe;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.training-product-plans{
  display:grid;
  gap:10px;
}
.training-plan-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.42);
}
.training-plan-name{
  color:#e2e8f0;
  font-weight:700;
}
.training-plan-price{
  color:#7dd3fc;
  font-weight:900;
  direction:ltr;
  text-align:left;
}
.training-plan-empty,
.training-empty{
  padding:18px;
  border-radius:16px;
  border:1px dashed rgba(148,163,184,.18);
  color:#94a3b8;
  background:rgba(15,23,42,.32);
  text-align:center;
}
.training-empty-centered{
  max-width:560px;
  margin:22px auto 0;
}
/* ── FAQ Management Page ───────────────────────────── */
.faq-page{
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100%;
}

/* Header */
.faq-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(30,41,59,.9) 0%,rgba(15,23,42,.95) 100%);
  border:1px solid rgba(129,140,248,.14);
}
.faq-header-title{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.faq-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 12px;
  border-radius:999px;
  border:1px solid rgba(129,140,248,.3);
  background:rgba(129,140,248,.1);
  color:#a5b4fc;
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.faq-title{
  margin:0;
  font-size:20px;
  font-weight:900;
  color:#f1f5f9;
}
.faq-desc{
  margin:0;
  color:#64748b;
  font-size:13px;
}

/* Import bar */
.faq-import-bar{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:14px 20px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.1);
  background:rgba(30,41,59,.6);
}
.faq-import-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex-shrink:0;
}
.faq-section-label{
  font-size:13px;
  font-weight:800;
  color:#cbd5e1;
  white-space:nowrap;
}
.faq-section-hint{
  font-size:12px;
  color:#64748b;
}
.faq-section-hint code{
  color:#93c5fd;
  background:rgba(59,130,246,.1);
  padding:1px 5px;
  border-radius:4px;
  font-family:monospace;
}
.faq-import-fields{
  flex:1;
  min-width:180px;
}
.faq-file-input{
  width:100%;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.6);
  color:#cbd5e1;
  font-size:13px;
  cursor:pointer;
}
.faq-stats{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.faq-stat-chip{
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(96,165,250,.2);
  background:rgba(59,130,246,.08);
  color:#bfdbfe;
  font-size:12px;
  font-weight:700;
}
.faq-stat-chip strong{
  color:#93c5fd;
}
.faq-import-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  flex-wrap:wrap;
}
.faq-import-summary{
  font-size:12px;
  color:#64748b;
  max-width:200px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Preview table (shown when file selected) */
.faq-preview-wrap{
  overflow:auto;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.12);
  max-height:260px;
}
.faq-preview-wrap:empty{
  display:none;
}

/* Stored FAQs card */
.faq-stored-card{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.1);
  background:rgba(30,41,59,.5);
  overflow:hidden;
}
.faq-stored-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 18px;
  border-bottom:1px solid rgba(148,163,184,.1);
  flex-shrink:0;
}
.faq-stored-title-group{
  display:flex;
  align-items:center;
  gap:10px;
}
.faq-stored-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.faq-search-box{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(15,23,42,.6);
  min-width:220px;
}
.faq-search-icon{
  color:#64748b;
  font-size:16px;
  flex-shrink:0;
}
.faq-search-box input{
  background:transparent;
  border:none;
  outline:none;
  color:#cbd5e1;
  font-size:13px;
  width:100%;
}
.faq-search-box input::placeholder{
  color:#475569;
}
.faq-table-wrap{
  flex:1;
  overflow-y:auto;
}

/* Table */
.faq-table{
  width:100%;
  border-collapse:collapse;
}
.faq-table th,
.faq-table td{
  padding:12px 16px;
  border-bottom:1px solid rgba(148,163,184,.08);
  text-align:right;
  vertical-align:top;
  line-height:1.8;
  font-size:13px;
}
.faq-table thead th{
  background:rgba(15,23,42,.95);
  color:#94a3b8;
  font-size:12px;
  font-weight:800;
  position:sticky;
  top:0;
  z-index:1;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.faq-table tbody tr:hover{
  background:rgba(129,140,248,.04);
}

/* Pager */
.faq-pager{
  padding:12px 16px 6px;
  justify-content:space-between;
  gap:10px;
}
.faq-pager .page-info{
  color:#64748b;
  font-size:12px;
  white-space:nowrap;
}
.faq-pager-pages{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
}
.faq-pager-btn{
  min-width:36px;
  padding:6px 8px!important;
  font-size:12px!important;
}
.faq-pager-ellipsis{
  color:#475569;
  font-size:16px;
  font-weight:900;
  line-height:1;
}

/* Empty state */
.faq-empty{
  padding:32px 20px;
  color:#475569;
  text-align:center;
  font-size:14px;
}
body.light-theme .faq-header{
  background:linear-gradient(145deg,#ffffff 0%,#f4f7ff 100%);
  border-color:#dbe3f2;
}
body.light-theme .faq-title{
  color:#0f172a;
}
body.light-theme .faq-desc{
  color:#64748b;
}
body.light-theme .faq-badge{
  color:#4338ca;
  background:rgba(99,102,241,.08);
  border-color:rgba(99,102,241,.18);
}
body.light-theme .faq-import-bar,
body.light-theme .faq-stored-card{
  background:linear-gradient(145deg,#ffffff 0%,#f8fbff 100%);
  border-color:#dbe3f2;
}
body.light-theme .faq-stored-header{
  border-bottom-color:#dbe3f2;
}
body.light-theme .faq-section-label{
  color:#0f172a;
}
body.light-theme .faq-section-hint,
body.light-theme .faq-import-summary,
body.light-theme .faq-search-icon{
  color:#64748b;
}
body.light-theme .faq-section-hint code{
  color:#1d4ed8;
  background:rgba(59,130,246,.08);
}
body.light-theme .faq-file-input,
body.light-theme .faq-search-box{
  background:#ffffff;
  border-color:#dbe3f2;
}
body.light-theme .faq-file-input,
body.light-theme .faq-search-box input{
  color:#0f172a;
}
body.light-theme .faq-search-box input::placeholder{
  color:#94a3b8;
}
body.light-theme .faq-stat-chip{
  color:#1d4ed8;
  background:rgba(59,130,246,.08);
  border-color:rgba(59,130,246,.14);
}
body.light-theme .faq-stat-chip strong{
  color:#1e40af;
}
body.light-theme .faq-preview-wrap{
  border-color:#dbe3f2;
  background:#ffffff;
}
body.light-theme .faq-table tbody tr:hover{
  background:rgba(99,102,241,.05);
}
.support-shell{
  display:grid;
  gap:20px;
}
.support-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:28px 30px;
  border-radius:28px;
  border:1px solid rgba(96,165,250,.16);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(59,130,246,.1) 0%, rgba(59,130,246,0) 56%),
    linear-gradient(145deg, rgba(15,23,42,.92) 0%, rgba(5,11,24,.98) 100%);
}
.support-kicker{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.2);
  background:rgba(14,165,233,.1);
  color:#7dd3fc;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.support-hero h1{
  margin:14px 0 10px;
  font-size:34px;
  line-height:1.3;
}
.support-hero p{
  margin:0;
  max-width:880px;
  color:#9fb0cd;
  line-height:2;
  font-size:16px;
}
.support-stats{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.support-stat-chip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.18);
  background:rgba(14,165,233,.08);
  color:#dbeafe;
  font-size:13px;
  font-weight:700;
}
.support-stat-chip strong{
  color:#7dd3fc;
}
.support-chat-shell{
  display:grid;
  gap:16px;
}
.support-chat-stage,
.support-composer{
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(148,163,184,.14);
  background:linear-gradient(145deg, rgba(15,23,42,.72) 0%, rgba(6,12,25,.92) 100%);
}
.support-chat-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.support-panel-title{
  font-size:18px;
  font-weight:900;
  color:#f8fafc;
}
.support-chat-sub{
  margin-top:8px;
  color:#94a3b8;
  line-height:1.9;
}
.support-question-input{
  width:100%;
  min-height:120px;
  resize:vertical;
  border:1px solid rgba(129,140,248,.26);
  border-radius:20px;
  background:linear-gradient(145deg, rgba(15,23,42,.92) 0%, rgba(30,41,59,.82) 100%);
  color:#e5ecfb;
  padding:16px 18px;
  font:inherit;
  line-height:1.9;
  outline:none;
}
.support-question-input:focus{
  border-color:rgba(129,140,248,.6);
  box-shadow:0 0 0 3px rgba(99,102,241,.18);
}
.support-question-input::placeholder{
  color:#94a3b8;
}
.support-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.support-actions-chat{
  margin-top:16px;
}
.support-header-controls{
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  direction:ltr;
}
.support-suggestions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.support-suggestion-chip{
  border:none;
  cursor:pointer;
  font:inherit;
  font-weight:800;
  color:#dbeafe;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.18);
  background:rgba(14,165,233,.08);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.support-suggestion-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(56,189,248,.32);
  background:rgba(14,165,233,.14);
}
.support-messages{
  min-height:420px;
  max-height:640px;
  overflow:auto;
  display:grid;
  gap:12px;
}
.support-messages-chat{
  padding:4px;
}
.support-message{
  display:flex;
  align-items:flex-end;
  gap:10px;
  line-height:1.95;
}
.support-message-user{
  justify-content:flex-end;
}
.support-message-assistant{
  justify-content:flex-start;
}
.support-message-avatar{
  width:42px;
  height:42px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:12px;
  font-weight:900;
  color:#dbeafe;
  border:1px solid rgba(125,211,252,.16);
  background:rgba(14,165,233,.1);
}
.support-message-user .support-message-avatar{
  order:2;
  background:rgba(99,102,241,.14);
  border-color:rgba(129,140,248,.2);
}
.support-message-bubble{
  max-width:min(82%,760px);
  padding:16px 18px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.14);
}
.support-message-assistant .support-message-bubble{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(59,130,246,.08) 0%, rgba(59,130,246,0) 55%),
    linear-gradient(145deg, rgba(15,23,42,.72) 0%, rgba(6,12,25,.88) 100%);
}
.support-message-user .support-message-bubble{
  background:linear-gradient(145deg, rgba(37,99,235,.22) 0%, rgba(30,41,59,.92) 100%);
}
.support-message-role{
  margin-bottom:8px;
  font-size:12px;
  font-weight:900;
  color:#7dd3fc;
  letter-spacing:.06em;
}
.support-message-body{
  color:#e5ecfb;
  word-break:break-word;
}
.support-empty{
  padding:18px;
  border-radius:16px;
  border:1px dashed rgba(148,163,184,.18);
  color:#94a3b8;
  background:rgba(15,23,42,.32);
  text-align:center;
}
.support-empty-chat{
  min-height:280px;
  display:grid;
  place-items:center;
  gap:10px;
}
.support-empty-chat-icon{
  width:64px;
  height:64px;
  border-radius:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(14,165,233,.12);
  border:1px solid rgba(125,211,252,.18);
  font-size:30px;
}
.support-empty-chat-title{
  color:#f8fafc;
  font-size:22px;
  font-weight:900;
}
.support-empty-chat-text{
  max-width:520px;
  color:#94a3b8;
  line-height:1.9;
}
body.light-theme .faq-hero{
  border-color:#dbe3f2;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(59,130,246,.08) 0%, rgba(59,130,246,0) 56%),
    linear-gradient(145deg,#ffffff 0%,#f2f7ff 100%);
}
body.light-theme .faq-hero h1,
body.light-theme .faq-preview-value,
body.light-theme .faq-panel-title{
  color:#0f172a;
}
body.light-theme .faq-hero p,
body.light-theme .faq-panel-sub,
body.light-theme .faq-preview-label{
  color:#475569;
}
body.light-theme .faq-panel,
body.light-theme .faq-preview-card,
body.light-theme .faq-list-item,
body.light-theme .faq-step{
  border-color:#dbe3f2;
  background:linear-gradient(145deg,#ffffff 0%,#f8fbff 100%);
  color:#0f172a;
}
body.light-theme .faq-table-wrap{
  border-color:#dbe3f2;
}
body.light-theme .faq-pager .page-info{
  color:#475569;
}
body.light-theme .faq-table thead th{
  background:#eef3ff;
  color:#0f172a;
}
body.light-theme .faq-table td{
  color:#0f172a;
}
body.light-theme .faq-empty{
  border-color:#dbe3f2;
  background:#f8fbff;
  color:#475569;
}
body.light-theme .support-hero{
  border-color:#dbe3f2;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(59,130,246,.08) 0%, rgba(59,130,246,0) 56%),
    linear-gradient(145deg,#ffffff 0%,#f2f7ff 100%);
}
body.light-theme .support-hero h1,
body.light-theme .support-panel-title,
body.light-theme .support-message-body{
  color:#0f172a;
}
body.light-theme .support-hero p,
body.light-theme .support-empty,
body.light-theme .support-chat-sub,
body.light-theme .support-empty-chat-text{
  color:#475569;
}
body.light-theme .support-chat-stage,
body.light-theme .support-composer,
body.light-theme .support-empty{
  border-color:#dbe3f2;
  background:linear-gradient(145deg,#ffffff 0%,#f8fbff 100%);
}
body.light-theme .support-question-input{
  background:linear-gradient(145deg,#ffffff 0%,#f8fbff 100%);
  border-color:#dbe3f2;
  color:#0f172a;
}
body.light-theme .support-question-input:focus{
  background:#ffffff;
  border-color:rgba(99,102,241,.38);
  box-shadow:0 0 0 3px rgba(99,102,241,.08);
  color:#0f172a;
}
body.light-theme .support-question-input::placeholder{
  color:#64748b;
}
body.light-theme .support-suggestion-chip{
  color:#1e3a8a;
  border-color:#bfdbfe;
  background:#eff6ff;
}
body.light-theme .support-message-avatar{
  color:#1e3a8a;
  border-color:#bfdbfe;
  background:#eff6ff;
}
body.light-theme .support-message-user .support-message-avatar{
  color:#4338ca;
  border-color:#c7d2fe;
  background:#eef2ff;
}
body.light-theme .support-message-assistant .support-message-bubble,
body.light-theme .support-message-user .support-message-bubble{
  border-color:#dbe3f2;
  background:linear-gradient(145deg,#ffffff 0%,#f8fbff 100%);
}
body.light-theme .support-empty-chat-title{
  color:#0f172a;
}
@media(max-width:760px){
  .support-hero{
    padding:22px;
    flex-direction:column;
  }
  .support-hero h1{
    font-size:28px;
  }
  .support-message-bubble{
    max-width:100%;
  }
  .support-chat-stage,
  .support-composer{
    padding:18px;
  }
}
@media(max-width:900px){
  .faq-grid,
  .faq-preview-grid{
    grid-template-columns:1fr;
  }
  .faq-preview-card-span{
    grid-column:auto;
  }
}
@media(max-width:760px){
  .faq-hero{
    padding:22px;
    flex-direction:column;
  }
  .faq-hero h1{
    font-size:28px;
  }
}

/* ═══════════════════════════════════════════════════════════
   #supportPage — Premium Chat UI Redesign
   ═══════════════════════════════════════════════════════════ */
#supportPage{
  padding:0!important;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
#supportPage .support-shell{
  gap:14px;
  padding:6px 2px;
}
/* ── Hero ──────────────────────────────────────────────── */
#supportPage .support-hero{
  padding:16px 22px;
  border-radius:18px;
  gap:14px;
  border-color:rgba(129,140,248,.16);
  background:
    radial-gradient(110% 110% at 100% 0%, rgba(99,102,241,.14) 0%, rgba(99,102,241,0) 50%),
    linear-gradient(145deg, rgba(17,24,39,.92) 0%, rgba(8,15,32,.97) 100%);
}
#supportPage .support-title-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:4px;
}
#supportPage .support-kicker{
  padding:4px 10px;
  font-size:11px;
  border-color:rgba(129,140,248,.22);
  background:rgba(99,102,241,.12);
  color:#a5b4fc;
}
#supportPage .support-hero h1{
  margin:0;
  font-size:20px;
  line-height:1.4;
}
#supportPage .support-hero p{
  margin:0;
  font-size:13px;
  line-height:1.8;
  color:#8a9bb8;
}
/* ── Stats ─────────────────────────────────────────────── */
#supportPage .support-stats{
  gap:8px;
}
#supportPage .support-stat-chip{
  padding:5px 10px;
  font-size:12px;
  border-color:rgba(129,140,248,.16);
  background:rgba(99,102,241,.08);
}
#supportPage .support-stat-chip strong{
  color:#a5b4fc;
}
/* ── Chat shell ────────────────────────────────────────── */
#supportPage .support-chat-shell{
  gap:0;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(99,102,241,.16);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(99,102,241,.06) 0%, rgba(99,102,241,0) 55%),
    linear-gradient(180deg, rgba(10,15,36,.98) 0%, rgba(6,10,24,.99) 100%);
  box-shadow:0 32px 64px rgba(2,4,18,.32);
}
/* ── Chat stage ────────────────────────────────────────── */
#supportPage .support-chat-stage{
  padding:20px 22px 0;
  border-radius:0;
  border:none;
  background:transparent;
}
#supportPage .support-chat-head{
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(99,102,241,.12);
}
#supportPage .support-panel-title{
  font-size:15px;
  font-weight:800;
  letter-spacing:.01em;
  color:#e0e7ff;
}
#supportPage .support-chat-sub{
  margin-top:3px;
  font-size:12px;
  line-height:1.6;
  color:#64748b;
}
#supportPage .support-messages{
  min-height:360px;
  max-height:520px;
  padding:8px 4px;
  gap:16px;
  scrollbar-width:thin;
  scrollbar-color:rgba(99,102,241,.2) transparent;
}
/* ── Message bubbles ───────────────────────────────────── */
#supportPage .support-message{
  gap:12px;
  line-height:1.8;
}
#supportPage .support-message-avatar{
  width:36px;
  height:36px;
  border-radius:12px;
  font-size:11px;
  background:rgba(99,102,241,.16);
  border-color:rgba(129,140,248,.2);
  color:#a5b4fc;
}
#supportPage .support-message-user .support-message-avatar{
  background:rgba(37,99,235,.18);
  border-color:rgba(96,165,250,.22);
  color:#93c5fd;
}
#supportPage .support-message-bubble{
  padding:12px 16px;
  border-radius:18px;
  border-color:rgba(99,102,241,.14);
  max-width:min(78%,700px);
}
#supportPage .support-message-assistant .support-message-bubble{
  border-radius:4px 18px 18px 18px;
  background:
    radial-gradient(110% 110% at 0% 0%, rgba(99,102,241,.14) 0%, rgba(99,102,241,0) 60%),
    linear-gradient(145deg, rgba(17,25,55,.9) 0%, rgba(10,15,36,.95) 100%);
}
#supportPage .support-message-user .support-message-bubble{
  border-radius:18px 18px 4px 18px;
  background:linear-gradient(145deg, rgba(37,99,235,.24) 0%, rgba(20,27,60,.92) 100%);
  border-color:rgba(96,165,250,.16);
}
#supportPage .support-message-role{
  margin-bottom:5px;
  font-size:11px;
  letter-spacing:.07em;
  color:#818cf8;
}
#supportPage .support-message-user .support-message-role{
  color:#60a5fa;
  text-align:left;
}
#supportPage .support-message-body{
  font-size:14px;
  line-height:1.85;
  color:#dde4f5;
}
/* ── Empty state ───────────────────────────────────────── */
#supportPage .support-empty-chat{
  min-height:320px;
}
#supportPage .support-empty-chat-icon{
  width:58px;
  height:58px;
  border-radius:20px;
  font-size:26px;
  background:rgba(99,102,241,.12);
  border-color:rgba(129,140,248,.18);
}
#supportPage .support-empty-chat-title{
  font-size:18px;
  font-weight:800;
  color:#e0e7ff;
}
#supportPage .support-empty-chat-text{
  font-size:13px;
  color:#64748b;
  line-height:1.8;
}
/* ── Composer ──────────────────────────────────────────── */
#supportPage .support-composer{
  padding:18px 22px 22px;
  border-radius:0;
  border:none;
  border-top:1px solid rgba(99,102,241,.1);
  background:rgba(8,12,30,.72);
}
#supportPage .support-suggestions{
  gap:8px;
  margin-bottom:12px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}
#supportPage .support-suggestions::-webkit-scrollbar{
  display:none;
}
#supportPage .support-suggestion-chip{
  padding:6px 12px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  flex-shrink:0;
  border-radius:8px;
  border-color:rgba(129,140,248,.18);
  background:rgba(99,102,241,.10);
  color:#c7d2fe;
  transition:background .16s,border-color .16s;
}
#supportPage .support-suggestion-chip:hover{
  border-color:rgba(129,140,248,.38);
  background:rgba(99,102,241,.22);
  transform:none;
}
#supportPage .support-question-input{
  min-height:76px;
  border-radius:14px;
  padding:13px 16px;
  font-size:14px;
  border-color:rgba(99,102,241,.22);
  background:rgba(13,18,48,.82);
  color:#e0e7ff;
  line-height:1.7;
}
#supportPage .support-question-input:focus{
  border-color:rgba(129,140,248,.5);
  box-shadow:0 0 0 3px rgba(99,102,241,.14);
}
#supportPage .support-question-input::placeholder{
  color:#475569;
  font-size:13px;
}
#supportPage .support-actions{
  margin-top:12px;
  gap:8px;
}
#supportPage #supportFaqClearBtn{
  padding:9px 18px!important;
  font-size:13px!important;
  font-weight:700!important;
  border-radius:10px!important;
  background:rgba(239,68,68,.10)!important;
  border:1px solid rgba(239,68,68,.22)!important;
  color:#fca5a5!important;
}
#supportPage #supportFaqClearBtn:hover{
  background:rgba(239,68,68,.20)!important;
  border-color:rgba(239,68,68,.4)!important;
}
#supportPage #supportFaqSendBtn{
  padding:9px 28px!important;
  font-size:13px!important;
  font-weight:800!important;
  border-radius:10px!important;
  background:linear-gradient(135deg, #6366f1, #4f46e5)!important;
  border:1px solid rgba(129,140,248,.3)!important;
  color:#ffffff!important;
  box-shadow:0 8px 20px rgba(99,102,241,.28)!important;
  letter-spacing:.02em!important;
}
#supportPage #supportFaqSendBtn:hover{
  filter:brightness(1.08)!important;
  box-shadow:0 12px 26px rgba(99,102,241,.38)!important;
}
/* ── Light theme ───────────────────────────────────────── */
body.light-theme #supportPage .support-hero{
  border-color:#e0e7ff;
  background:
    radial-gradient(110% 110% at 100% 0%, rgba(99,102,241,.08) 0%, rgba(99,102,241,0) 50%),
    linear-gradient(145deg, #ffffff 0%, #f5f7ff 100%);
}
body.light-theme #supportPage .support-hero h1{
  color:#0f172a;
}
body.light-theme #supportPage .support-hero p{
  color:#64748b;
}
body.light-theme #supportPage .support-kicker{
  border-color:#c7d2fe;
  background:#eef2ff;
  color:#4338ca;
}
body.light-theme #supportPage .support-stat-chip{
  border-color:#c7d2fe;
  background:#eef2ff;
  color:#1e293b;
}
body.light-theme #supportPage .support-stat-chip strong{
  color:#4338ca;
}
body.light-theme #supportPage .support-chat-shell{
  border-color:#e0e7ff;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(99,102,241,.04) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%);
  box-shadow:0 24px 48px rgba(15,23,42,.08);
}
body.light-theme #supportPage .support-chat-head{
  border-bottom-color:#e0e7ff;
}
body.light-theme #supportPage .support-panel-title{
  color:#0f172a;
}
body.light-theme #supportPage .support-chat-sub{
  color:#94a3b8;
}
body.light-theme #supportPage .support-message-avatar{
  background:#eef2ff;
  border-color:#c7d2fe;
  color:#4338ca;
}
body.light-theme #supportPage .support-message-user .support-message-avatar{
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#1d4ed8;
}
body.light-theme #supportPage .support-message-assistant .support-message-bubble{
  background:linear-gradient(145deg, #f5f7ff 0%, #eef2ff 100%);
  border-color:#e0e7ff;
}
body.light-theme #supportPage .support-message-user .support-message-bubble{
  background:linear-gradient(145deg, #eff6ff 0%, #dbeafe 100%);
  border-color:#bfdbfe;
}
body.light-theme #supportPage .support-message-role{
  color:#6366f1;
}
body.light-theme #supportPage .support-message-user .support-message-role{
  color:#2563eb;
}
body.light-theme #supportPage .support-message-body{
  color:#1e293b;
}
body.light-theme #supportPage .support-empty-chat-icon{
  background:#eef2ff;
  border-color:#c7d2fe;
}
body.light-theme #supportPage .support-empty-chat-title{
  color:#0f172a;
}
body.light-theme #supportPage .support-empty-chat-text{
  color:#64748b;
}
body.light-theme #supportPage .support-composer{
  border-top-color:#e0e7ff;
  background:rgba(248,249,255,.88);
}
body.light-theme #supportPage .support-suggestion-chip{
  border-color:#c7d2fe;
  background:#eef2ff;
  color:#3730a3;
}
body.light-theme #supportPage .support-suggestion-chip:hover{
  border-color:#a5b4fc;
  background:#e0e7ff;
}
body.light-theme #supportPage .support-question-input{
  background:#ffffff;
  border-color:#c7d2fe;
  color:#0f172a;
}
body.light-theme #supportPage .support-question-input:focus{
  border-color:#818cf8;
  box-shadow:0 0 0 3px rgba(99,102,241,.10);
}
body.light-theme #supportPage .support-question-input::placeholder{
  color:#94a3b8;
}
body.light-theme #supportPage #supportFaqClearBtn{
  background:rgba(239,68,68,.06)!important;
  border-color:rgba(239,68,68,.18)!important;
  color:#dc2626!important;
}

.training-modal-card{
  width:min(1100px,94vw)!important;
  max-height:88vh!important;
  padding:20px!important;
  border-radius:22px!important;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(59,130,246,.08) 0%, rgba(59,130,246,0) 52%),
    linear-gradient(145deg, rgba(15,23,42,.98) 0%, rgba(5,11,24,.98) 100%)!important;
  border:1px solid rgba(96,165,250,.16)!important;
}
#orderTrainingManagementDetailPage{
  padding:0!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}
.training-detail-shell{
  padding:20px;
  border-radius:22px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(59,130,246,.08) 0%, rgba(59,130,246,0) 52%),
    linear-gradient(145deg, rgba(15,23,42,.98) 0%, rgba(5,11,24,.98) 100%);
  border:1px solid rgba(96,165,250,.16);
}
.training-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.training-modal-title{
  font-size:32px;
  font-weight:900;
  color:#f8fafc;
}
.training-modal-sub{
  margin-top:8px;
  color:#94a3b8;
  line-height:1.9;
}
.training-modal-body{
  display:grid;
  gap:18px;
}
.training-modal-section{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.36);
}
.training-config-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.training-config-grid-plan{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:16px;
}
.training-config-card{
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.42);
}
.training-config-title{
  margin-bottom:12px;
  color:#f8fafc;
  font-size:16px;
  font-weight:900;
}
.training-toggle-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.training-toggle-pill,
.training-radio-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.14);
  background:rgba(15,23,42,.6);
  color:#cbd5e1;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
}
.training-toggle-pill input,
.training-radio-pill input{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}
.training-toggle-pill:has(input:checked),
.training-radio-pill:has(input:checked){
  border-color:rgba(56,189,248,.34);
  background:linear-gradient(135deg, rgba(99,102,241,.28), rgba(14,165,233,.22));
  color:#ffffff;
  box-shadow:0 10px 24px rgba(14,165,233,.12);
}
.training-inline-field{
  margin-top:14px;
}
.training-ready-toggle{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.training-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.training-summary-card{
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.42);
}
.training-summary-card-inline{
  padding:14px;
}
.training-summary-title{
  margin-bottom:10px;
  color:#e2e8f0;
  font-weight:900;
}
.training-summary-items{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.training-summary-chip{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(14,165,233,.1);
  border:1px solid rgba(125,211,252,.14);
  color:#7dd3fc;
  font-size:13px;
  font-weight:800;
}
.training-summary-chip-success{
  background:rgba(34,197,94,.14);
  border-color:rgba(74,222,128,.24);
  color:#86efac;
}
.training-summary-empty{
  color:#94a3b8;
  font-size:13px;
}
.training-modal-label{
  margin-bottom:12px;
  color:#cbd5e1;
  font-size:15px;
  font-weight:900;
}
.training-link-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.training-site-btn{
  text-decoration:none;
}
.training-link-empty{
  color:#94a3b8;
}
.training-plan-editors{
  display:grid;
  gap:16px;
}
.training-plan-editor{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:
    radial-gradient(120% 120% at 0% 100%, rgba(99,102,241,.09) 0%, rgba(99,102,241,0) 50%),
    linear-gradient(145deg, rgba(15,23,42,.58) 0%, rgba(7,13,27,.88) 100%);
}
.training-plan-editor-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.training-plan-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  flex-shrink:0;
}
.training-plan-editor-title{
  font-size:22px;
  font-weight:900;
  color:#f8fafc;
}
.training-plan-editor-price{
  margin-top:6px;
  font-size:18px;
  font-weight:900;
  color:#7dd3fc;
  direction:ltr;
}
.training-plan-editor-grid{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:16px;
  align-items:start;
}
.training-plan-editor-grid-readonly{
  grid-template-columns:1fr 280px;
}
.training-plan-settings-btn{
  white-space:nowrap;
}
.training-plan-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.training-plan-settings-wrap{
  margin-bottom:16px;
}
.training-readonly-box{
  min-height:110px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(15,23,42,.6);
  color:#dbe4f2;
  line-height:2;
  white-space:pre-wrap;
}
.training-readonly-box-code{
  min-height:56px;
  direction:ltr;
  text-align:left;
  font-weight:800;
}
.training-plan-settings-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:6px;
}
.training-plan-save-btn{
  border-radius:12px!important;
  font-weight:800!important;
}
.training-plan-save-btn-main{
  background:linear-gradient(135deg,#16a34a,#22c55e)!important;
  border:1px solid rgba(74,222,128,.28)!important;
  color:#ffffff!important;
  box-shadow:0 10px 24px rgba(34,197,94,.18);
}
.training-plan-save-btn-main:hover{
  filter:brightness(1.06);
}
.training-textarea{
  min-height:150px;
  resize:vertical;
}
.training-input,
.training-textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(15,23,42,.72);
  color:#e2e8f0;
  font-family:inherit;
}
.training-input:focus,
.training-textarea:focus{
  outline:none;
  border-color:rgba(56,189,248,.4);
  box-shadow:0 0 0 4px rgba(14,165,233,.08);
}
body.light-theme .portal-home-hero{
  border-color:#dbe3f2;
  background:
    radial-gradient(120% 120% at 0% 100%, rgba(99,102,241,.10) 0%, rgba(99,102,241,0) 55%),
    radial-gradient(120% 120% at 100% 0%, rgba(16,185,129,.08) 0%, rgba(16,185,129,0) 58%),
    linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%);
}
body.light-theme .portal-home-hero h1,
body.light-theme .portal-home-card h2,
body.light-theme .portal-placeholder h2,
body.light-theme .training-hero h1{
  color:#0f172a;
}
body.light-theme .portal-home-hero p,
body.light-theme .portal-home-card p,
body.light-theme .portal-placeholder p,
body.light-theme .training-hero p{
  color:#475569;
}
body.light-theme .portal-home-badge{
  color:#1d4ed8;
  border-color:#bfdbfe;
  background:linear-gradient(135deg, rgba(191,219,254,.72), rgba(224,242,254,.92));
}
body.light-theme .portal-home-card{
  border-color:#dbe3f2;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(56,189,248,.08) 0%, rgba(56,189,248,0) 52%),
    radial-gradient(120% 120% at 0% 100%, rgba(129,140,248,.08) 0%, rgba(129,140,248,0) 58%),
    linear-gradient(145deg, #ffffff 0%, #f7fbff 100%);
  box-shadow:0 18px 42px rgba(15,23,42,.08);
}
body.light-theme .portal-home-card.is-primary{
  border-color:rgba(99,102,241,.24);
  box-shadow:0 22px 46px rgba(99,102,241,.10);
}
body.light-theme .portal-home-icon{
  background:linear-gradient(135deg, rgba(99,102,241,.14), rgba(56,189,248,.18));
}
body.light-theme .portal-home-tag{
  color:#4338ca;
  border-color:#c7d2fe;
  background:#eef2ff;
}
body.light-theme .portal-placeholder{
  border-color:#dbe3f2;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(56,189,248,.08) 0%, rgba(56,189,248,0) 58%),
    linear-gradient(145deg, #ffffff 0%, #f7fbff 100%);
}
body.light-theme .training-hero{
  border-color:#dbe3f2;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(14,165,233,.10) 0%, rgba(14,165,233,0) 52%),
    linear-gradient(145deg, #ffffff 0%, #f7fbff 100%);
}
body.light-theme .training-kicker{
  border-color:#bae6fd;
  background:#ecfeff;
  color:#0f766e;
}
body.light-theme .training-panel{
  border-color:#dbe3f2;
  background:linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
}
body.light-theme .training-panel-title{
  color:#0f172a;
}
body.light-theme .training-list-item,
body.light-theme .training-step{
  border-color:#dbe3f2;
  background:#f8fbff;
  color:#334155;
}
body.light-theme .training-stat-chip{
  border-color:#bae6fd;
  background:#f0f9ff;
  color:#0f172a;
}
body.light-theme .training-search-box{
  border-color:#dbe3f2;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(14,165,233,.08) 0%, rgba(14,165,233,0) 60%),
    linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:0 14px 28px rgba(15,23,42,.06);
}
body.light-theme .training-search-box:focus-within{
  border-color:#7dd3fc;
  box-shadow:0 0 0 4px rgba(14,165,233,.08), 0 14px 28px rgba(15,23,42,.08);
}
body.light-theme .training-search-icon{
  background:#eff6ff;
  color:#0284c7;
}
body.light-theme .training-search-box input{
  color:#0f172a;
}
body.light-theme .training-search-box input::placeholder{
  color:#94a3b8;
}
body.light-theme .training-stat-chip strong{
  color:#0369a1;
}
body.light-theme .training-product-card{
  border-color:#dbe3f2;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(59,130,246,.07) 0%, rgba(59,130,246,0) 55%),
    linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
}
body.light-theme .training-list-row{
  border-color:#dbe3f2;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(59,130,246,.07) 0%, rgba(59,130,246,0) 55%),
    linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
}
body.light-theme .training-list-row-title{
  color:#0f172a;
}
body.light-theme .training-list-row-sub{
  color:#64748b;
}
body.light-theme .training-product-title{
  color:#0f172a;
}
body.light-theme .training-product-meta{
  color:#64748b;
}
body.light-theme .training-product-badge{
  background:#eef2ff;
  border-color:#c7d2fe;
  color:#4338ca;
}
body.light-theme .training-plan-row{
  border-color:#dbe3f2;
  background:#f8fbff;
}
body.light-theme .training-plan-name{
  color:#1e293b;
}
body.light-theme .training-plan-price{
  color:#0369a1;
}
body.light-theme .training-plan-empty,
body.light-theme .training-empty{
  border-color:#dbe3f2;
  color:#64748b;
  background:#f8fbff;
}
body.light-theme .training-modal-card{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(59,130,246,.07) 0%, rgba(59,130,246,0) 55%),
    linear-gradient(145deg, #ffffff 0%, #f8fbff 100%)!important;
  border-color:#dbe3f2!important;
}
body.light-theme .training-detail-shell{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(59,130,246,.07) 0%, rgba(59,130,246,0) 55%),
    linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
  border-color:#dbe3f2;
}
body.light-theme .training-modal-title{
  color:#0f172a;
}
body.light-theme .training-modal-sub,
body.light-theme .training-link-empty{
  color:#64748b;
}
body.light-theme .training-modal-section,
body.light-theme .training-plan-editor{
  border-color:#dbe3f2;
  background:#f8fbff;
}
body.light-theme .training-config-card,
body.light-theme .training-summary-card{
  border-color:#dbe3f2;
  background:#ffffff;
}
body.light-theme .training-config-title,
body.light-theme .training-summary-title{
  color:#0f172a;
}
body.light-theme .training-toggle-pill,
body.light-theme .training-radio-pill{
  border-color:#dbe3f2;
  background:#f8fbff;
  color:#334155;
}
body.light-theme .training-toggle-pill:has(input:checked),
body.light-theme .training-radio-pill:has(input:checked){
  border-color:#7dd3fc;
  background:linear-gradient(135deg, rgba(99,102,241,.12), rgba(14,165,233,.12));
  color:#0f172a;
  box-shadow:0 10px 22px rgba(14,165,233,.08);
}
body.light-theme .training-summary-chip{
  background:#eff6ff;
  border-color:#bae6fd;
  color:#0369a1;
}
body.light-theme .training-summary-chip-success{
  background:#ecfdf5;
  border-color:#bbf7d0;
  color:#15803d;
}
body.light-theme .training-summary-empty{
  color:#64748b;
}
body.light-theme .training-modal-label{
  color:#1e293b;
}
body.light-theme .training-site-btn{
  text-decoration:none;
}
body.light-theme .training-plan-editor-title{
  color:#0f172a;
}
body.light-theme .training-plan-editor-price{
  color:#0369a1;
}
body.light-theme .training-input,
body.light-theme .training-textarea{
  border-color:#dbe3f2;
  background:#ffffff;
  color:#0f172a;
}
body.light-theme .training-input:focus,
body.light-theme .training-textarea:focus{
  background:#ffffff;
  border-color:#7dd3fc;
  box-shadow:0 0 0 3px rgba(14,165,233,.08);
  color:#0f172a;
}
body.light-theme .training-readonly-box{
  border-color:#dbe3f2;
  background:#ffffff;
  color:#0f172a;
}
@media (max-width: 980px){
  .portal-home-grid{
    grid-template-columns:1fr;
  }
  .portal-home-hero{
    flex-direction:column;
  }
  .training-hero{
    flex-direction:column;
  }
  .training-grid{
    grid-template-columns:1fr;
  }
  .training-toolbar{
    width:100%;
    justify-content:stretch;
  }
  .training-search-box{
    width:100%;
    min-width:0;
  }
  .training-list-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .training-list-row-actions,
  .training-open-btn{
    width:100%;
  }
  .training-modal-head{
    flex-direction:column;
  }
  .training-config-grid,
  .training-summary-grid{
    grid-template-columns:1fr;
  }
  .training-config-grid-plan,
  .training-plan-summary{
    grid-template-columns:1fr;
  }
  .training-plan-editor-grid{
    grid-template-columns:1fr;
  }
  .training-plan-editor-grid-readonly{
    grid-template-columns:1fr;
  }
  .training-plan-head-actions{
    width:100%;
  }
}

/* ═══════════════════════════════════════════════════════════
   #orderTrainingManagementPage — Compact Premium Redesign
   ═══════════════════════════════════════════════════════════ */
#orderTrainingManagementPage{
  padding:0!important;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
#orderTrainingManagementPage .training-shell{
  gap:14px;
  padding:6px 2px;
}
/* ── Hero ──────────────────────────────────────────────── */
#orderTrainingManagementPage .training-hero{
  padding:16px 22px;
  border-radius:18px;
  gap:14px;
  background:
    radial-gradient(110% 110% at 0% 0%, rgba(14,165,233,.13) 0%, rgba(14,165,233,0) 50%),
    linear-gradient(145deg, rgba(17,24,39,.92) 0%, rgba(8,15,32,.97) 100%);
}
#orderTrainingManagementPage .training-kicker{
  margin-bottom:7px;
  padding:4px 10px;
  font-size:11px;
}
#orderTrainingManagementPage .training-hero h1{
  margin:0 0 6px;
  font-size:20px;
  line-height:1.4;
}
#orderTrainingManagementPage .training-hero p{
  font-size:13px;
  line-height:1.8;
  color:#8a9bb8;
}
/* ── Info panels ───────────────────────────────────────── */
#orderTrainingManagementPage .training-grid{
  gap:14px;
}
#orderTrainingManagementPage .training-panel{
  padding:16px 18px;
  border-radius:16px;
}
#orderTrainingManagementPage .training-panel-head{
  margin-bottom:12px;
}
#orderTrainingManagementPage .training-panel-title{
  font-size:15px;
  font-weight:800;
}
#orderTrainingManagementPage .training-list,
#orderTrainingManagementPage .training-steps{
  gap:8px;
}
#orderTrainingManagementPage .training-list-item,
#orderTrainingManagementPage .training-step{
  padding:10px 14px;
  border-radius:12px;
  font-size:13px;
  line-height:1.7;
}
/* ── Products panel ────────────────────────────────────── */
#orderTrainingManagementPage .training-stat-chip{
  padding:5px 10px;
  font-size:12px;
}
#orderTrainingManagementPage .training-list-row{
  flex-direction:row-reverse;
  padding:12px 16px;
  border-radius:14px;
  gap:14px;
}
#orderTrainingManagementPage .training-list-row-main{
  text-align:left;
}
#orderTrainingManagementPage .training-list-row-title{
  font-size:15px;
  font-weight:700;
}
#orderTrainingManagementPage .training-list-row-sub{
  margin-top:3px;
  font-size:12px;
}
#orderTrainingManagementPage .training-open-btn{
  min-width:0!important;
  padding:7px 16px!important;
  font-size:12px!important;
  font-weight:700!important;
  border-radius:10px!important;
  background:rgba(99,102,241,.14)!important;
  border:1px solid rgba(129,140,248,.28)!important;
  color:#c7d2fe!important;
  letter-spacing:.02em!important;
  transition:background .18s,border-color .18s,box-shadow .18s!important;
}
#orderTrainingManagementPage .training-open-btn:hover{
  background:rgba(99,102,241,.28)!important;
  border-color:rgba(129,140,248,.55)!important;
  box-shadow:0 0 0 3px rgba(99,102,241,.14)!important;
  color:#e0e7ff!important;
}
body.light-theme #orderTrainingManagementPage .training-open-btn{
  background:rgba(99,102,241,.08)!important;
  border-color:rgba(99,102,241,.22)!important;
  color:#4338ca!important;
}
body.light-theme #orderTrainingManagementPage .training-open-btn:hover{
  background:rgba(99,102,241,.16)!important;
  border-color:rgba(99,102,241,.42)!important;
  box-shadow:0 0 0 3px rgba(99,102,241,.10)!important;
  color:#3730a3!important;
}
/* ── Detail Page ───────────────────────────────────────── */
#orderTrainingManagementDetailPage .training-detail-shell{
  display:flex!important;
  flex-direction:column!important;
  min-height:calc(100vh - 120px);
  padding:0!important;
  border-radius:20px!important;
  overflow:hidden!important;
}
#orderTrainingManagementDetailPage .training-modal-head{
  flex-shrink:0;
  align-items:center;
  padding:16px 22px;
  margin-bottom:0;
  border-bottom:1px solid rgba(148,163,184,.12);
  background:rgba(8,15,32,.6);
}
#orderTrainingManagementDetailPage .training-modal-title{
  font-size:18px;
  font-weight:800;
}
#orderTrainingManagementDetailPage .training-modal-sub{
  margin-top:3px;
  font-size:12px;
  line-height:1.6;
  color:#8a9bb8;
}
#orderTrainingManagementDetailPage .training-modal-body{
  flex:1;
  overflow-y:visible;
  padding:18px;
  gap:14px;
}
#orderTrainingManagementDetailPage .training-modal-section{
  padding:14px 16px;
  border-radius:14px;
}
#orderTrainingManagementDetailPage .training-modal-label{
  margin-bottom:10px;
  font-size:13px;
}
#orderTrainingManagementDetailPage #orderTrainingManagementDetailBackBtn{
  padding:7px 16px!important;
  font-size:13px!important;
  border-radius:10px!important;
  background:rgba(239,68,68,.12)!important;
  border:1px solid rgba(239,68,68,.3)!important;
  color:#fca5a5!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
#orderTrainingManagementDetailPage #orderTrainingManagementDetailBackBtn:hover{
  background:rgba(239,68,68,.22)!important;
  border-color:rgba(239,68,68,.5)!important;
}
/* ── Plan editor (detail page) ─────────────────────────── */
#orderTrainingManagementDetailPage .training-plan-editor{
  padding:14px 16px;
  border-radius:14px;
  border-left:3px solid rgba(99,102,241,.4);
}
#orderTrainingManagementDetailPage .training-plan-editor-head{
  flex-direction:row-reverse;
  align-items:center;
  margin-bottom:12px;
}
#orderTrainingManagementDetailPage .training-plan-editor-title{
  font-size:16px;
  font-weight:900;
  letter-spacing:.01em;
  color:#f1f5f9;
}
#orderTrainingManagementDetailPage .training-plan-editor-price{
  display:inline-flex;
  align-items:center;
  margin-top:6px;
  padding:4px 10px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(14,165,233,.18), rgba(99,102,241,.14));
  border:1px solid rgba(56,189,248,.24);
  font-size:13px;
  font-weight:900;
  color:#7dd3fc;
  direction:ltr;
  text-shadow:0 0 12px rgba(56,189,248,.4);
  letter-spacing:.03em;
}
/* ── Settings toggle button ────────────────────────────── */
#orderTrainingManagementDetailPage .training-plan-settings-btn{
  padding:6px 14px!important;
  font-size:12px!important;
  font-weight:700!important;
  border-radius:8px!important;
  background:rgba(99,102,241,.1)!important;
  border:1px solid rgba(129,140,248,.22)!important;
  color:#a5b4fc!important;
  white-space:nowrap!important;
  transition:background .16s,border-color .16s!important;
}
#orderTrainingManagementDetailPage .training-plan-settings-btn:hover{
  background:rgba(99,102,241,.22)!important;
  border-color:rgba(129,140,248,.45)!important;
  color:#c7d2fe!important;
}
/* ── Summary strip ─────────────────────────────────────── */
#orderTrainingManagementDetailPage .training-plan-summary{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
#orderTrainingManagementDetailPage .training-summary-card{
  padding:10px 14px;
  border-radius:12px;
  background:rgba(15,23,42,.5);
  border-color:rgba(148,163,184,.1);
}
#orderTrainingManagementDetailPage .training-summary-title{
  margin-bottom:6px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#94a3b8;
}
#orderTrainingManagementDetailPage .training-summary-items{
  gap:5px;
}
#orderTrainingManagementDetailPage .training-summary-chip{
  padding:4px 8px;
  font-size:11px;
  border-radius:6px;
}
#orderTrainingManagementDetailPage .training-summary-empty{
  font-size:11px;
  color:#64748b;
}
/* ── Settings panel ────────────────────────────────────── */
#orderTrainingManagementDetailPage .training-plan-settings-wrap{
  margin-bottom:12px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(99,102,241,.16);
  background:
    radial-gradient(110% 110% at 0% 100%, rgba(99,102,241,.08) 0%, transparent 55%),
    rgba(10,16,36,.6);
}
#orderTrainingManagementDetailPage .training-config-grid-plan{
  gap:12px;
  margin-bottom:12px;
}
#orderTrainingManagementDetailPage .training-config-card{
  padding:12px 14px;
  border-radius:12px;
  background:rgba(15,23,42,.6);
  border-color:rgba(148,163,184,.12);
}
#orderTrainingManagementDetailPage .training-config-title{
  margin-bottom:10px;
  font-size:13px;
  font-weight:800;
  color:#cbd5e1;
  letter-spacing:.02em;
}
#orderTrainingManagementDetailPage .training-toggle-grid{
  gap:6px;
}
#orderTrainingManagementDetailPage .training-toggle-pill,
#orderTrainingManagementDetailPage .training-radio-pill{
  min-height:32px;
  padding:0 11px;
  font-size:12px;
  border-radius:8px;
  border-color:rgba(125,211,252,.1);
  background:rgba(15,23,42,.7);
}
#orderTrainingManagementDetailPage .training-toggle-pill:has(input:checked),
#orderTrainingManagementDetailPage .training-radio-pill:has(input:checked){
  border-color:rgba(56,189,248,.3);
  background:linear-gradient(135deg, rgba(99,102,241,.24), rgba(14,165,233,.18));
  box-shadow:0 4px 12px rgba(14,165,233,.08);
}
#orderTrainingManagementDetailPage .training-inline-field{
  margin-top:10px;
}
#orderTrainingManagementDetailPage .training-ready-toggle{
  gap:6px;
}
#orderTrainingManagementDetailPage .training-plan-settings-actions{
  justify-content:flex-start;
  margin-top:4px;
}
#orderTrainingManagementDetailPage .training-plan-save-btn{
  padding:7px 18px!important;
  font-size:12px!important;
  font-weight:800!important;
  border-radius:8px!important;
}
/* ── Editor grid ───────────────────────────────────────── */
#orderTrainingManagementDetailPage .training-plan-editor-grid{
  gap:12px;
}
#orderTrainingManagementDetailPage .training-textarea{
  min-height:110px;
  font-size:13px;
}
#orderTrainingManagementDetailPage .training-input{
  font-size:13px;
}
/* ── Light theme — detail page ─────────────────────────── */
body.light-theme #orderTrainingManagementDetailPage .training-plan-editor{
  border-left-color:rgba(99,102,241,.3);
}
body.light-theme #orderTrainingManagementDetailPage .training-plan-settings-btn{
  background:rgba(99,102,241,.07)!important;
  border-color:rgba(99,102,241,.18)!important;
  color:#4338ca!important;
}
body.light-theme #orderTrainingManagementDetailPage .training-plan-settings-btn:hover{
  background:rgba(99,102,241,.14)!important;
  border-color:rgba(99,102,241,.35)!important;
  color:#3730a3!important;
}
body.light-theme #orderTrainingManagementDetailPage .training-plan-settings-wrap{
  border-color:rgba(99,102,241,.14);
  background:
    radial-gradient(110% 110% at 0% 100%, rgba(99,102,241,.06) 0%, transparent 55%),
    rgba(248,251,255,.9);
}
body.light-theme #orderTrainingManagementDetailPage .training-config-card{
  background:#f8fbff;
  border-color:#dbe3f2;
}
body.light-theme #orderTrainingManagementDetailPage .training-config-title{
  color:#1e293b;
}
body.light-theme #orderTrainingManagementDetailPage .training-toggle-pill,
body.light-theme #orderTrainingManagementDetailPage .training-radio-pill{
  border-color:#dbe3f2;
  background:#f1f5f9;
  color:#334155;
}
body.light-theme #orderTrainingManagementDetailPage .training-toggle-pill:has(input:checked),
body.light-theme #orderTrainingManagementDetailPage .training-radio-pill:has(input:checked){
  border-color:#7dd3fc;
  background:linear-gradient(135deg, rgba(99,102,241,.10), rgba(14,165,233,.10));
  color:#0f172a;
  box-shadow:0 4px 12px rgba(14,165,233,.06);
}
body.light-theme #orderTrainingManagementDetailPage .training-summary-card{
  background:#f8fbff;
  border-color:#dbe3f2;
}
body.light-theme #orderTrainingManagementDetailPage .training-summary-title{
  color:#64748b;
}
body.light-theme #orderTrainingManagementDetailPage .training-summary-chip{
  background:#eff6ff;
  border-color:#bae6fd;
  color:#0369a1;
}
body.light-theme #orderTrainingManagementDetailPage .training-summary-empty{
  color:#94a3b8;
}
body.light-theme #orderTrainingManagementDetailPage .training-plan-editor-price{
  background:linear-gradient(135deg, rgba(14,165,233,.10), rgba(99,102,241,.08));
  border-color:rgba(14,165,233,.22);
  color:#0284c7;
  text-shadow:none;
}

/* ── Light theme ───────────────────────────────────────── */
body.light-theme #orderTrainingManagementPage .training-hero{
  border-color:#dbe3f2;
  background:
    radial-gradient(110% 110% at 0% 0%, rgba(14,165,233,.09) 0%, rgba(14,165,233,0) 50%),
    linear-gradient(145deg, #ffffff 0%, #f5f9ff 100%);
}
body.light-theme #orderTrainingManagementPage .training-hero h1{
  color:#0f172a;
}
body.light-theme #orderTrainingManagementPage .training-hero p{
  color:#64748b;
}
body.light-theme #orderTrainingManagementPage .training-kicker{
  border-color:#bae6fd;
  background:#ecfeff;
  color:#0e7490;
}
body.light-theme #orderTrainingManagementPage .training-panel{
  border-color:#dbe3f2;
  background:linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
}
body.light-theme #orderTrainingManagementPage .training-panel-title{
  color:#0f172a;
}
body.light-theme #orderTrainingManagementPage .training-list-item,
body.light-theme #orderTrainingManagementPage .training-step{
  border-color:#dbe3f2;
  background:#f8fbff;
  color:#334155;
}
body.light-theme #orderTrainingManagementPage .training-stat-chip{
  border-color:#bae6fd;
  background:#f0f9ff;
  color:#0f172a;
}
body.light-theme #orderTrainingManagementPage .training-stat-chip strong{
  color:#0369a1;
}
body.light-theme #orderTrainingManagementPage .training-list-row{
  border-color:#dbe3f2;
  background:linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
}
body.light-theme #orderTrainingManagementPage .training-list-row-title{
  color:#0f172a;
}
body.light-theme #orderTrainingManagementPage .training-list-row-sub{
  color:#64748b;
}
body.light-theme #orderTrainingManagementDetailPage .training-detail-shell{
  background:linear-gradient(145deg, #ffffff 0%, #f8fbff 100%)!important;
  border-color:#dbe3f2!important;
}
body.light-theme #orderTrainingManagementDetailPage .training-modal-head{
  border-bottom-color:#dbe3f2;
  background:rgba(248,251,255,.8);
}
body.light-theme #orderTrainingManagementDetailPage .training-modal-title{
  color:#0f172a;
}
body.light-theme #orderTrainingManagementDetailPage .training-modal-sub{
  color:#64748b;
}
body.light-theme #orderTrainingManagementDetailPage .training-modal-section,
body.light-theme #orderTrainingManagementDetailPage .training-plan-editor{
  border-color:#dbe3f2;
  background:#f8fbff;
}
body.light-theme #orderTrainingManagementDetailPage .training-modal-label{
  color:#1e293b;
}
body.light-theme #orderTrainingManagementDetailPage .training-plan-editor-title{
  color:#0f172a;
}
body.light-theme #orderTrainingManagementDetailPage .training-plan-editor-price{
  color:#0369a1;
}
body.light-theme #orderTrainingManagementDetailPage .training-input,
body.light-theme #orderTrainingManagementDetailPage .training-textarea{
  border-color:#dbe3f2;
  background:#ffffff;
  color:#0f172a;
}
body.light-theme #orderTrainingManagementDetailPage #orderTrainingManagementDetailBackBtn{
  background:rgba(239,68,68,.08)!important;
  border-color:rgba(239,68,68,.2)!important;
  color:#dc2626!important;
}
body.light-theme #orderTrainingManagementDetailPage #orderTrainingManagementDetailBackBtn:hover{
  background:rgba(239,68,68,.15)!important;
  border-color:rgba(239,68,68,.4)!important;
}

/* ═══════════════════════════════════════════════════════════
   #orderTrainingSalesPage — Search-Centric Premium Redesign
   ═══════════════════════════════════════════════════════════ */
#orderTrainingSalesPage{
  padding:0!important;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
#orderTrainingSalesPage .training-shell{
  gap:12px;
  padding:0 2px 2px;
}
/* ── Search panel ──────────────────────────────────────── */
#orderTrainingSalesPage .training-sales-search-panel{
  padding:24px;
  border-color:rgba(45,212,191,.14);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(20,184,166,.08) 0%, rgba(20,184,166,0) 60%),
    linear-gradient(145deg, rgba(15,23,42,.72) 0%, rgba(6,12,25,.92) 100%);
}
#orderTrainingSalesPage .training-sales-search-shell{
  min-height:170px;
  gap:14px;
}
#orderTrainingSalesPage .training-sales-search-copy{
  gap:6px;
}
#orderTrainingSalesPage .training-panel-title{
  font-size:16px;
  font-weight:800;
}
#orderTrainingSalesPage .training-sales-search-sub{
  font-size:13px;
  line-height:1.7;
  color:#8a9bb8;
}
#orderTrainingSalesPage .training-search-box{
  border-color:rgba(45,212,191,.2);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(20,184,166,.10) 0%, rgba(20,184,166,0) 60%),
    linear-gradient(145deg, rgba(15,23,42,.88) 0%, rgba(8,15,32,.96) 100%);
}
#orderTrainingSalesPage .training-search-box:focus-within{
  border-color:rgba(45,212,191,.4);
  box-shadow:0 0 0 4px rgba(20,184,166,.08), inset 0 1px 0 rgba(255,255,255,.04);
}
#orderTrainingSalesPage .training-search-icon{
  background:rgba(20,184,166,.14);
  color:#5eead4;
}
/* ── Results list ──────────────────────────────────────── */
#orderTrainingSalesPage .training-list-row{
  flex-direction:row-reverse;
  padding:12px 16px;
  border-radius:14px;
  gap:14px;
}
#orderTrainingSalesPage .training-list-row-main{
  text-align:left;
}
#orderTrainingSalesPage .training-list-row-title{
  font-size:15px;
  font-weight:700;
}
#orderTrainingSalesPage .training-list-row-sub{
  margin-top:3px;
  font-size:12px;
}
#orderTrainingSalesPage .training-open-btn{
  min-width:0!important;
  padding:7px 16px!important;
  font-size:12px!important;
  font-weight:700!important;
  border-radius:10px!important;
  background:rgba(20,184,166,.12)!important;
  border:1px solid rgba(45,212,191,.26)!important;
  color:#5eead4!important;
  transition:background .18s,border-color .18s,box-shadow .18s!important;
}
#orderTrainingSalesPage .training-open-btn:hover{
  background:rgba(20,184,166,.24)!important;
  border-color:rgba(45,212,191,.5)!important;
  box-shadow:0 0 0 3px rgba(20,184,166,.12)!important;
  color:#99f6e4!important;
}
/* ── Recent searches ───────────────────────────────────── */
#orderTrainingSalesPage .training-recent-searches{
  margin-top:10px;
}
#orderTrainingSalesPage .training-recent-searches-title{
  font-size:12px;
  color:#64748b;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}
#orderTrainingSalesPage .training-recent-search-chip{
  padding:7px 14px;
  font-size:13px;
  border-color:rgba(45,212,191,.14);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(20,184,166,.10) 0%, rgba(20,184,166,0) 60%),
    linear-gradient(145deg, rgba(15,23,42,.8) 0%, rgba(8,15,32,.95) 100%);
}
#orderTrainingSalesPage .training-recent-search-chip:hover{
  border-color:rgba(45,212,191,.32);
}
#orderTrainingSalesPage .training-recent-search-chip-icon{
  width:24px;
  height:24px;
  font-size:14px;
  background:rgba(20,184,166,.14);
  color:#5eead4;
}
/* ── Viewer panel ──────────────────────────────────────── */
#orderTrainingSalesViewer{
  border-color:rgba(45,212,191,.14);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(20,184,166,.07) 0%, rgba(20,184,166,0) 52%),
    linear-gradient(145deg, rgba(15,23,42,.88) 0%, rgba(5,11,24,.96) 100%);
}
#orderTrainingSalesViewer .training-panel-head{
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(148,163,184,.1);
}
#orderTrainingSalesViewer .training-panel-title{
  font-size:17px;
  font-weight:800;
}
#orderTrainingSalesViewer .training-modal-sub{
  margin-top:4px!important;
  font-size:12px!important;
  color:#8a9bb8!important;
  line-height:1.6!important;
}
#orderTrainingSalesViewer .training-modal-body{
  gap:14px;
}
#orderTrainingSalesViewer .training-modal-section{
  padding:14px 16px;
  border-radius:14px;
}
#orderTrainingSalesViewer .training-modal-label{
  margin-bottom:10px;
  font-size:13px;
}
#orderTrainingSalesViewer .training-plan-editor{
  padding:14px 16px;
  border-radius:14px;
  border-left:3px solid rgba(20,184,166,.35);
}
#orderTrainingSalesViewer .training-plan-editor-head{
  align-items:center;
  justify-content:flex-end;
  margin-bottom:12px;
}
#orderTrainingSalesViewer .training-plan-editor-head>div{
  text-align:left;
}
#orderTrainingSalesViewer .training-plan-editor-title{
  font-size:16px;
  font-weight:900;
  color:#f1f5f9;
}
#orderTrainingSalesViewer .training-plan-editor-price{
  display:inline-flex;
  align-items:center;
  margin-top:6px;
  padding:4px 10px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(20,184,166,.18), rgba(14,165,233,.12));
  border:1px solid rgba(45,212,191,.24);
  font-size:13px;
  font-weight:900;
  color:#5eead4;
  direction:ltr;
  text-shadow:0 0 12px rgba(20,184,166,.35);
  letter-spacing:.03em;
}
#orderTrainingSalesViewer .training-plan-summary{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
#orderTrainingSalesViewer .training-summary-card{
  padding:10px 14px;
  border-radius:12px;
  background:rgba(15,23,42,.5);
  border-color:rgba(148,163,184,.1);
}
#orderTrainingSalesViewer .training-summary-title{
  margin-bottom:6px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#94a3b8;
}
#orderTrainingSalesViewer .training-summary-items{
  gap:5px;
}
#orderTrainingSalesViewer .training-summary-chip{
  padding:4px 8px;
  font-size:11px;
  border-radius:6px;
}
#orderTrainingSalesViewer .training-summary-empty{
  font-size:11px;
  color:#64748b;
}
#orderTrainingSalesViewer .training-readonly-box{
  min-height:90px;
  padding:12px 14px;
  border-radius:12px;
  font-size:13px;
  line-height:1.8;
  border-color:rgba(45,212,191,.14);
}
#orderTrainingSalesViewer .training-readonly-box-code{
  min-height:44px;
}
#orderTrainingSalesViewer .training-plan-settings-actions{
  justify-content:flex-end;
  margin-top:10px;
}
#orderTrainingSalesViewer .training-review-request-btn{
  padding:8px 18px!important;
  font-size:13px!important;
  font-weight:800!important;
  border-radius:10px!important;
}
/* ── Light theme — sales page ──────────────────────────── */
body.light-theme #orderTrainingSalesPage .training-sales-search-panel{
  border-color:#ccfbf1;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(20,184,166,.06) 0%, rgba(20,184,166,0) 60%),
    linear-gradient(145deg, #ffffff 0%, #f0fdfb 100%);
}
body.light-theme #orderTrainingSalesPage .training-panel-title{
  color:#0f172a;
}
body.light-theme #orderTrainingSalesPage .training-sales-search-sub{
  color:#64748b;
}
body.light-theme #orderTrainingSalesPage .training-search-box{
  border-color:#99f6e4;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(20,184,166,.07) 0%, rgba(20,184,166,0) 60%),
    linear-gradient(145deg, #ffffff 0%, #f0fdfb 100%);
}
body.light-theme #orderTrainingSalesPage .training-search-box:focus-within{
  border-color:#2dd4bf;
  box-shadow:0 0 0 4px rgba(20,184,166,.08);
}
body.light-theme #orderTrainingSalesPage .training-search-icon{
  background:#f0fdfb;
  color:#0d9488;
}
body.light-theme #orderTrainingSalesPage .training-list-row{
  border-color:#ccfbf1;
  background:linear-gradient(145deg, #ffffff 0%, #f0fdfb 100%);
}
body.light-theme #orderTrainingSalesPage .training-list-row-title{
  color:#0f172a;
}
body.light-theme #orderTrainingSalesPage .training-list-row-sub{
  color:#64748b;
}
body.light-theme #orderTrainingSalesPage .training-open-btn{
  background:rgba(20,184,166,.08)!important;
  border-color:rgba(20,184,166,.22)!important;
  color:#0d9488!important;
}
body.light-theme #orderTrainingSalesPage .training-open-btn:hover{
  background:rgba(20,184,166,.16)!important;
  border-color:rgba(20,184,166,.4)!important;
  color:#0f766e!important;
}
body.light-theme #orderTrainingSalesPage .training-recent-search-chip{
  border-color:#ccfbf1;
  background:linear-gradient(145deg, #ffffff 0%, #f0fdfb 100%);
  color:#0f172a;
}
body.light-theme #orderTrainingSalesPage .training-recent-search-chip:hover{
  border-color:#99f6e4;
}
body.light-theme #orderTrainingSalesPage .training-recent-search-chip-icon{
  background:#f0fdfb;
  color:#0d9488;
}
body.light-theme #orderTrainingSalesViewer{
  border-color:#ccfbf1;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(20,184,166,.05) 0%, rgba(20,184,166,0) 52%),
    linear-gradient(145deg, #ffffff 0%, #f0fdfb 100%);
}
body.light-theme #orderTrainingSalesViewer .training-panel-head{
  border-bottom-color:#ccfbf1;
}
body.light-theme #orderTrainingSalesViewer .training-panel-title{
  color:#0f172a;
}
body.light-theme #orderTrainingSalesViewer .training-modal-sub{
  color:#64748b!important;
}
body.light-theme #orderTrainingSalesViewer .training-modal-section,
body.light-theme #orderTrainingSalesViewer .training-plan-editor{
  border-color:#ccfbf1;
  background:#f0fdfb;
}
body.light-theme #orderTrainingSalesViewer .training-plan-editor{
  border-left-color:rgba(20,184,166,.28);
}
body.light-theme #orderTrainingSalesViewer .training-modal-label{
  color:#1e293b;
}
body.light-theme #orderTrainingSalesViewer .training-plan-editor-title{
  color:#0f172a;
}
body.light-theme #orderTrainingSalesViewer .training-plan-editor-price{
  background:linear-gradient(135deg, rgba(20,184,166,.10), rgba(14,165,233,.06));
  border-color:rgba(20,184,166,.22);
  color:#0d9488;
  text-shadow:none;
}
body.light-theme #orderTrainingSalesViewer .training-summary-card{
  background:#f0fdfb;
  border-color:#ccfbf1;
}
body.light-theme #orderTrainingSalesViewer .training-summary-title{
  color:#64748b;
}
body.light-theme #orderTrainingSalesViewer .training-readonly-box{
  border-color:#ccfbf1;
  background:#ffffff;
  color:#0f172a;
}

.management-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.management-hero{
  margin-bottom:2px;
}
.management-stats,
.management-api-list,
.management-report-list{
  display:grid;
  gap:12px;
}
.management-stat-item,
.management-api-item,
.management-report-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.36);
}
.management-report-item{
  display:grid;
  justify-content:stretch;
}
.management-stat-item span,
.management-api-item span,
.management-report-meta{
  color:#9fb0cd;
}
.management-stat-item strong,
.management-api-item strong,
.management-report-title{
  color:#f8fafc;
  font-weight:800;
}
body.light-theme .management-stat-item,
body.light-theme .management-api-item,
body.light-theme .management-report-item{
  border-color:#dbe3f2;
  background:rgba(255,255,255,.82);
}
body.light-theme .management-stat-item span,
body.light-theme .management-api-item span,
body.light-theme .management-report-meta{
  color:#64748b;
}
body.light-theme .management-stat-item strong,
body.light-theme .management-api-item strong,
body.light-theme .management-report-title{
  color:#0f172a;
}
@media (max-width: 980px){
  .management-grid{
    grid-template-columns:1fr;
  }
}
.sidebar-empty-state{
  display:grid;
  gap:12px;
  margin-top:18px;
  padding:18px 16px;
  border-radius:18px;
  border:1px dashed rgba(148,163,184,.22);
  background:linear-gradient(145deg, rgba(15,23,42,.42) 0%, rgba(7,13,27,.70) 100%);
  text-align:right;
}
.sidebar-empty-icon{
  width:52px;
  height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  font-size:24px;
  background:linear-gradient(135deg, rgba(99,102,241,.22), rgba(56,189,248,.16));
}
.sidebar-empty-title{
  font-size:16px;
  font-weight:900;
  color:#f8fafc;
}
.sidebar-empty-text{
  color:#aebbd5;
  line-height:1.9;
  font-size:13px;
}
body.light-theme .sidebar-empty-state{
  border-color:#dbe3f2;
  background:linear-gradient(145deg, #ffffff 0%, #f7fbff 100%);
}
body.light-theme .sidebar-empty-title{
  color:#0f172a;
}
body.light-theme .sidebar-empty-text{
  color:#64748b;
}


/* ══════════════════════════════════════════════════════════
   #portalHomePage — Viewport-fit, No-scroll Layout v2
   ══════════════════════════════════════════════════════════ */

/* Make .main and .wrap not scroll-trap on portal home */
#portalHomePage{
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  margin-bottom:0 !important;
}
#portalHomePage:not(.hidden){
  display:flex !important;
  flex-direction:column;
  overflow:hidden;
}

/* Shell: flex column, fills all space */
.ph-shell{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  gap:14px;
}

/* ── Compact Header Bar ── */
.ph-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 28px;
  border-radius:20px;
  border:1px solid rgba(99,102,241,.2);
  background:
    radial-gradient(ellipse 100% 200% at 0% 100%, rgba(99,102,241,.2) 0%, transparent 60%),
    radial-gradient(ellipse 80% 200% at 100% 0%,  rgba(16,185,129,.14) 0%, transparent 55%),
    linear-gradient(135deg, rgba(8,14,30,.97) 0%, rgba(11,20,44,.99) 100%);
  position:relative;
  overflow:hidden;
}
.ph-header::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(ellipse 40% 120% at 50% -20%, rgba(99,102,241,.12) 0%, transparent 60%);
  pointer-events:none;
}
.ph-header-brand{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  position:relative;
}
.ph-header-title{
  font-size:22px;
  font-weight:900;
  color:#f8fafc;
  white-space:nowrap;
}
.ph-header-title span{
  background:linear-gradient(130deg,#818cf8 0%,#34d399 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.ph-header-pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.ph-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}
.ph-pill-green{background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.32);color:#6ee7b7;}
.ph-pill-blue{background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.28);color:#7dd3fc;}
.ph-pill-purple{background:rgba(99,102,241,.14);border:1px solid rgba(99,102,241,.3);color:#c7d2fe;}
.ph-pulse{
  display:inline-block;
  width:7px;height:7px;
  border-radius:50%;
  background:#34d399;
  animation:ph-pulse-anim 1.8s ease-out infinite;
}
@keyframes ph-pulse-anim{
  0%{box-shadow:0 0 0 0 rgba(52,211,153,.55);}
  70%{box-shadow:0 0 0 8px rgba(52,211,153,0);}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0);}
}
.ph-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px;
  flex-shrink:0;
  position:relative;
}

/* ── 4 Portal Cards ── */
.ph-portals{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.ph-portal-card{
  display:flex;
  flex-direction:column;
  padding:26px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.13);
  background:
    radial-gradient(ellipse 80% 80% at 100% 0%, rgba(56,189,248,.07) 0%, transparent 50%),
    radial-gradient(ellipse 80% 80% at 0% 100%, rgba(129,140,248,.06) 0%, transparent 50%),
    linear-gradient(145deg, rgba(15,21,38,.97) 0%, rgba(8,13,26,.99) 100%);
  transition:.2s;
  overflow:hidden;
  position:relative;
  isolation:isolate;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.ph-portal-card:hover{
  border-color:rgba(99,102,241,.28);
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(79,70,229,.15);
}
.ph-portal-card.ph-portal-primary{
  border-color:rgba(99,102,241,.3);
  background:
    radial-gradient(ellipse 90% 90% at 0% 100%, rgba(99,102,241,.22) 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 100% 0%, rgba(16,185,129,.14) 0%, transparent 50%),
    linear-gradient(145deg, rgba(12,18,36,.97) 0%, rgba(7,11,24,.99) 100%);
  box-shadow:0 20px 50px rgba(79,70,229,.18),inset 0 1px 0 rgba(99,102,241,.12);
}
.ph-portal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.ph-portal-icon{
  font-size:34px;
  line-height:1;
}
.ph-status-badge{
  padding:5px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}
.ph-status-active{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.36);color:#6ee7b7;}
.ph-status-new{background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.3);color:#7dd3fc;}
.ph-portal-card h2{
  margin:0 0 10px;
  font-size:18px;
  font-weight:900;
  color:#f1f5f9;
  line-height:1.35;
}
.ph-portal-card p{
  margin:0;
  flex:1;
  color:#6a88a8;
  font-size:13px;
  line-height:1.85;
}
.ph-portal-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:14px;
}
.ph-portal-tags span{
  padding:4px 11px;
  border-radius:8px;
  border:1px solid rgba(148,163,184,.13);
  background:rgba(148,163,184,.07);
  color:#7a98bb;
  font-size:12px;
  font-weight:700;
}
.ph-portal-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px;
  position:relative;
  z-index:2;
}
.ph-portal-access-note{
  width:100%;
  margin-bottom:2px;
  color:#fca5a5;
  font-size:12px;
  font-weight:800;
}
.ph-portal-actions .btn{
  flex:1;
  min-width:0;
  padding:10px 12px;
  font-size:13px;
  justify-content:center;
  text-align:center;
}
/* ── Modern Portal Entry Buttons ── */
.ph-enter-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:13px 20px;
  border-radius:14px;
  border:1px solid transparent;
  font-size:14px;
  font-weight:800;
  font-family:inherit;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1);
  position:relative;
  overflow:hidden;
  letter-spacing:.01em;
  z-index:3;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.ph-enter-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 55%);
  pointer-events:none;
}
.ph-enter-btn:hover{
  transform:translateY(-3px);
}
.ph-enter-btn:active{
  transform:translateY(0);
}
.ph-btn-arrow{
  transition:transform .2s ease;
  font-style:normal;
  opacity:.85;
}
.ph-enter-btn:hover .ph-btn-arrow{
  transform:translateX(-4px);
}
/* Content – indigo */
.ph-enter-content{
  background:linear-gradient(135deg,#6366f1,#4338ca);
  border-color:rgba(99,102,241,.45);
  color:#fff;
  box-shadow:0 4px 22px rgba(99,102,241,.42), inset 0 1px 0 rgba(255,255,255,.18);
}
.ph-enter-content:hover{
  box-shadow:0 10px 32px rgba(99,102,241,.58), inset 0 1px 0 rgba(255,255,255,.18);
}
/* Sales – blue */
.ph-enter-sales{
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  border-color:rgba(59,130,246,.45);
  color:#fff;
  box-shadow:0 4px 22px rgba(59,130,246,.38), inset 0 1px 0 rgba(255,255,255,.18);
}
.ph-enter-sales:hover{
  box-shadow:0 10px 32px rgba(59,130,246,.52), inset 0 1px 0 rgba(255,255,255,.18);
}
/* Support – cyan */
.ph-enter-support{
  background:linear-gradient(135deg,#06b6d4,#0e7490);
  border-color:rgba(6,182,212,.45);
  color:#fff;
  box-shadow:0 4px 22px rgba(6,182,212,.38), inset 0 1px 0 rgba(255,255,255,.18);
}
.ph-enter-support:hover{
  box-shadow:0 10px 32px rgba(6,182,212,.52), inset 0 1px 0 rgba(255,255,255,.18);
}
/* Management – emerald */
.ph-enter-management{
  background:linear-gradient(135deg,#10b981,#047857);
  border-color:rgba(16,185,129,.45);
  color:#fff;
  box-shadow:0 4px 22px rgba(16,185,129,.38), inset 0 1px 0 rgba(255,255,255,.18);
}
.ph-enter-management:hover{
  box-shadow:0 10px 32px rgba(16,185,129,.52), inset 0 1px 0 rgba(255,255,255,.18);
}
/* Light theme */
body.light-theme .ph-enter-btn::before{background:linear-gradient(135deg,rgba(255,255,255,.25) 0%,transparent 55%);}
body.light-theme .ph-enter-content{box-shadow:0 4px 18px rgba(99,102,241,.32),inset 0 1px 0 rgba(255,255,255,.25);}
body.light-theme .ph-enter-sales{box-shadow:0 4px 18px rgba(59,130,246,.28),inset 0 1px 0 rgba(255,255,255,.25);}
body.light-theme .ph-enter-support{box-shadow:0 4px 18px rgba(6,182,212,.28),inset 0 1px 0 rgba(255,255,255,.25);}
body.light-theme .ph-enter-management{box-shadow:0 4px 18px rgba(16,185,129,.28),inset 0 1px 0 rgba(255,255,255,.25);}
.ph-portal-card.ph-portal-restricted{
  position:relative;
}
.ph-portal-card.ph-portal-restricted::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(15,23,42,.1);
  backdrop-filter:blur(1.5px) saturate(.82);
  -webkit-backdrop-filter:blur(1.5px) saturate(.82);
  pointer-events:none;
}
.ph-portal-card.ph-portal-restricted > *{
  position:relative;
  z-index:1;
}
.ph-portal-card.ph-portal-restricted h2,
.ph-portal-card.ph-portal-restricted p,
.ph-portal-card.ph-portal-restricted .ph-portal-tags,
.ph-portal-card.ph-portal-restricted .ph-portal-top{
  opacity:.72;
}

/* ── Light Theme ── */
body.light-theme #portalHomePage{background:transparent !important;border:none !important;box-shadow:none !important;}
body.light-theme .ph-header{
  border-color:rgba(99,102,241,.18);
  background:
    radial-gradient(ellipse 100% 200% at 0% 100%, rgba(99,102,241,.1) 0%, transparent 60%),
    radial-gradient(ellipse 80% 200% at 100% 0%,  rgba(16,185,129,.08) 0%, transparent 55%),
    linear-gradient(135deg, #eef2ff 0%, #f0fdf4 100%);
}
body.light-theme .ph-header-title{color:#1e293b;}
body.light-theme .ph-header-title span{background:linear-gradient(130deg,#4f46e5,#059669);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.light-theme .ph-pill-green{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.28);color:#059669;}
body.light-theme .ph-pill-blue{background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.28);color:#0284c7;}
body.light-theme .ph-pill-purple{background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.25);color:#4f46e5;}
body.light-theme .ph-portal-card{background:linear-gradient(145deg,#ffffff,#f8fafc);border-color:rgba(226,232,240,.9);box-shadow:0 4px 16px rgba(0,0,0,.06);}
body.light-theme .ph-portal-card:hover{border-color:rgba(99,102,241,.28);box-shadow:0 8px 28px rgba(99,102,241,.12);}
body.light-theme .ph-portal-card.ph-portal-primary{background:linear-gradient(145deg,#ffffff,#f5f3ff);border-color:rgba(99,102,241,.25);box-shadow:0 8px 32px rgba(99,102,241,.14);}
body.light-theme .ph-portal-access-note{color:#dc2626;}
body.light-theme .ph-portal-card.ph-portal-restricted::after{background:rgba(255,255,255,.18);}
body.light-theme .ph-portal-card h2{color:#1e293b;}
body.light-theme .ph-portal-card p{color:#64748b;}
body.light-theme .ph-portal-tags span{background:rgba(99,102,241,.06);border-color:rgba(99,102,241,.14);color:#4f46e5;}
body.light-theme .ph-status-active{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:#059669;}
body.light-theme .ph-status-new{background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.3);color:#0284c7;}

/* ── Responsive ── */
@media(max-width:1100px){
  .ph-portals{grid-template-columns:repeat(2,1fr);}
  #portalHomePage:not(.hidden){height:auto;max-height:none;overflow:visible;}
}
@media(max-width:640px){
  .ph-portals{grid-template-columns:1fr;}
  .ph-header{flex-direction:column;align-items:flex-start;}
}

/* ── No-scroll when portal home is active ── */
body.portal-home-active{overflow:hidden;}
body.portal-home-active .side{display:none!important;}
body.portal-home-active .mobile-menu-btn{display:none!important;}
body.portal-home-active .sidebar-backdrop{display:none!important;}
body.portal-home-active .main{overflow:hidden;height:100vh;padding:20px 18px;flex:1 1 auto;max-width:100%;}
body.portal-home-active .wrap{height:100%;display:flex;flex-direction:column;max-width:100%;}
body.portal-home-active #portalHomePage:not(.hidden){flex:1;min-height:0;height:auto!important;max-height:none!important;}

@media(max-width:640px){
  body.portal-home-active{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  body.portal-home-active .main{
    overflow:visible;
    height:auto;
    min-height:100vh;
    padding:12px 10px 24px;
  }

  body.portal-home-active .wrap{
    height:auto;
    min-height:100%;
  }

  body.portal-home-active #portalHomePage:not(.hidden){
    min-height:auto;
    overflow:visible;
  }

  .ph-shell{
    gap:12px;
  }

  .ph-header{
    padding:14px;
    gap:12px;
  }

  .ph-header-title{
    font-size:18px;
    line-height:1.35;
    white-space:normal;
  }

  .ph-header-actions{
    width:100%;
  }

  .ph-portals{
    gap:10px;
  }

  .ph-portal-card{
    padding:18px 16px;
    border-radius:18px;
  }

  .ph-portal-card h2{
    font-size:16px;
  }

  .ph-portal-card p{
    font-size:12px;
    line-height:1.8;
  }

  .ph-portal-actions{
    margin-top:14px;
  }

  .ph-enter-btn{
    min-height:46px;
    font-size:14px;
  }
}

/* ═══════════════════════════════════════════════
   MANAGEMENT PAGE — COMMAND CENTER
   ═══════════════════════════════════════════════ */

/* Base page reset */
#managementPage{
  padding:0!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  margin-bottom:0!important;
}
#managementPage:not(.hidden){
  display:flex!important;
  flex-direction:column;
}

/* Shell */
.mgmt-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px;
  background:linear-gradient(135deg,#0d1117 0%,#161b27 60%,#0d1117 100%);
  border-radius:16px;
  border:1px solid rgba(99,179,237,.12);
  min-height:calc(100vh - 120px);
  position:relative;
  overflow:hidden;
}
/* ambient glow */
.mgmt-shell::before{
  content:'';
  position:absolute;
  top:-80px;right:-80px;
  width:320px;height:320px;
  background:radial-gradient(circle,rgba(56,189,248,.07) 0%,transparent 70%);
  pointer-events:none;
}
.mgmt-shell::after{
  content:'';
  position:absolute;
  bottom:-60px;left:-60px;
  width:260px;height:260px;
  background:radial-gradient(circle,rgba(139,92,246,.06) 0%,transparent 70%);
  pointer-events:none;
}

/* ── Top Bar ── */
.mgmt-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(99,179,237,.12);
  border-radius:10px;
  backdrop-filter:blur(6px);
  position:relative;
  z-index:2;
}
.mgmt-topbar-brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Courier New',monospace;
}
.mgmt-topbar-dot{
  width:9px;height:9px;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 8px #10b981;
  animation:mgmt-pulse 1.8s ease-in-out infinite;
}
@keyframes mgmt-pulse{
  0%,100%{opacity:1;box-shadow:0 0 8px #10b981;}
  50%{opacity:.5;box-shadow:0 0 18px #10b981;}
}
.mgmt-topbar-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  color:#38bdf8;
  text-transform:uppercase;
}
.mgmt-topbar-sep{
  color:rgba(255,255,255,.2);
  font-size:14px;
}
.mgmt-topbar-title{
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,.75);
  font-family:inherit;
}
.mgmt-topbar-clock{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:rgba(255,255,255,.45);
  font-family:'Courier New',monospace;
}
.mgmt-topbar-back{
  background:rgba(99,179,237,.1);
  border:1px solid rgba(99,179,237,.2);
  color:#38bdf8;
  font-size:12px;
  padding:5px 12px;
  border-radius:6px;
  cursor:pointer;
  transition:all .2s;
}
.mgmt-topbar-back:hover{
  background:rgba(99,179,237,.2);
  border-color:rgba(99,179,237,.4);
}

/* ── KPI Stats Row ── */
.mgmt-stats-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  position:relative;
  z-index:2;
}
.mgmt-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:14px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  transition:transform .2s,border-color .2s;
  position:relative;
  overflow:hidden;
}
.mgmt-stat::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  border-radius:2px 2px 0 0;
}
.mgmt-stat:hover{transform:translateY(-2px);}
.mgmt-stat-a::before{background:linear-gradient(90deg,#38bdf8,#818cf8);}
.mgmt-stat-b::before{background:linear-gradient(90deg,#a78bfa,#f472b6);}
.mgmt-stat-c::before{background:linear-gradient(90deg,#10b981,#38bdf8);}
.mgmt-stat-d::before{background:linear-gradient(90deg,#f59e0b,#f87171);}
.mgmt-stat-e::before{background:linear-gradient(90deg,#6366f1,#8b5cf6);}
.mgmt-stat-a:hover{border-color:rgba(56,189,248,.3);}
.mgmt-stat-b:hover{border-color:rgba(167,139,250,.3);}
.mgmt-stat-c:hover{border-color:rgba(16,185,129,.3);}
.mgmt-stat-d:hover{border-color:rgba(245,158,11,.3);}
.mgmt-stat-e:hover{border-color:rgba(99,102,241,.3);}
.mgmt-stat-ico{font-size:20px;line-height:1;}
.mgmt-stat-num{
  font-size:26px;
  font-weight:800;
  color:#f0f6fc;
  font-family:'Courier New',monospace;
  line-height:1;
}
.mgmt-stat-sm{font-size:13px!important;text-align:center;}
.mgmt-stat-lbl{
  font-size:10px;
  color:rgba(255,255,255,.4);
  text-align:center;
  letter-spacing:.3px;
}

/* ── Main Grid ── */
.mgmt-grid{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:12px;
  flex:1;
  min-height:0;
  position:relative;
  z-index:2;
}
.mgmt-left,.mgmt-right{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ── Panel ── */
.mgmt-panel{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mgmt-panel-api{
  background:rgba(56,189,248,.03);
  border-color:rgba(56,189,248,.12);
}
.mgmt-panel-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mgmt-panel-icon{font-size:15px;line-height:1;}
.mgmt-panel-title{
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,.8);
  flex:1;
}
.mgmt-panel-tag{
  font-size:9px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#38bdf8;
  background:rgba(56,189,248,.1);
  border:1px solid rgba(56,189,248,.2);
  border-radius:4px;
  padding:2px 6px;
}
.mgmt-tag-live{
  color:#10b981;
  background:rgba(16,185,129,.1);
  border-color:rgba(16,185,129,.25);
  animation:mgmt-tagblink 2.5s ease-in-out infinite;
}
@keyframes mgmt-tagblink{
  0%,100%{opacity:1;}
  50%{opacity:.6;}
}

/* Brief text */
.mgmt-brief-text{
  font-size:13px;
  line-height:1.75;
  color:rgba(255,255,255,.55);
  margin:0;
  flex:1;
}

/* Sections report inherits from existing .management-report-item,
   add extra polish */
#managementSectionsReport .management-report-item{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  padding:8px 12px;
  margin-bottom:6px;
  font-size:12px;
  color:rgba(255,255,255,.6);
}

/* ── API Rows ── */
.mgmt-api-rows{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.mgmt-api-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
}
.mgmt-api-label{color:rgba(255,255,255,.4);}
.mgmt-api-val{
  font-family:'Courier New',monospace;
  font-size:11px;
  color:rgba(255,255,255,.65);
}
.mgmt-api-connected{color:#10b981;font-weight:700;}

/* ── Activity Bars ── */
.mgmt-api-monitor{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:32px;
  padding-top:4px;
  border-top:1px solid rgba(255,255,255,.05);
}
.mgmt-api-bar{
  flex:1;
  background:linear-gradient(to top,#38bdf8,rgba(56,189,248,.2));
  border-radius:2px 2px 0 0;
  animation:mgmt-bar 1.2s ease-in-out infinite alternate;
  min-height:4px;
}
@keyframes mgmt-bar{
  0%{height:20%;}
  100%{height:100%;}
}

/* ── Portals List ── */
.mgmt-portals-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mgmt-portal-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:rgba(255,255,255,.65);
  padding:6px 8px;
  border-radius:6px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.04);
}
.mgmt-portal-dot{
  width:7px;height:7px;
  border-radius:50%;
  flex-shrink:0;
}
.mgmt-dot-green{background:#10b981;box-shadow:0 0 6px #10b981;}
.mgmt-dot-blue{background:#38bdf8;box-shadow:0 0 6px #38bdf8;}
.mgmt-dot-purple{background:#a78bfa;box-shadow:0 0 6px #a78bfa;}
.mgmt-portal-status{
  margin-right:auto;
  font-size:10px;
  font-weight:700;
  color:#10b981;
  letter-spacing:.5px;
}
.mgmt-status-pending{color:#f59e0b;}

/* ═══ Light Theme Overrides ══════════════════════ */
body.light-theme .mgmt-shell{
  background:linear-gradient(135deg,#f0f4f8 0%,#e2eaf4 60%,#f0f4f8 100%);
  border-color:rgba(56,189,248,.2);
}
body.light-theme .mgmt-shell::before{
  background:radial-gradient(circle,rgba(56,189,248,.06) 0%,transparent 70%);
}
body.light-theme .mgmt-shell::after{
  background:radial-gradient(circle,rgba(139,92,246,.05) 0%,transparent 70%);
}
body.light-theme .mgmt-topbar{
  background:rgba(255,255,255,.7);
  border-color:rgba(56,189,248,.2);
}
body.light-theme .mgmt-topbar-title{color:rgba(30,41,59,.75);}
body.light-theme .mgmt-topbar-clock{color:rgba(30,41,59,.45);}
body.light-theme .mgmt-stat{
  background:rgba(255,255,255,.8);
  border-color:rgba(0,0,0,.07);
}
body.light-theme .mgmt-stat-num{color:#1e293b;}
body.light-theme .mgmt-stat-lbl{color:rgba(30,41,59,.45);}
body.light-theme .mgmt-panel{
  background:rgba(255,255,255,.75);
  border-color:rgba(0,0,0,.07);
}
body.light-theme .mgmt-panel-api{
  background:rgba(56,189,248,.04);
  border-color:rgba(56,189,248,.2);
}
body.light-theme .mgmt-panel-title{color:rgba(30,41,59,.8);}
body.light-theme .mgmt-brief-text{color:rgba(30,41,59,.6);}
body.light-theme .mgmt-api-label{color:rgba(30,41,59,.45);}
body.light-theme .mgmt-api-val{color:rgba(30,41,59,.7);}
body.light-theme .mgmt-portal-row{
  background:rgba(255,255,255,.6);
  border-color:rgba(0,0,0,.06);
  color:rgba(30,41,59,.7);
}
body.light-theme #managementSectionsReport .management-report-item{
  background:rgba(255,255,255,.6);
  border-color:rgba(0,0,0,.06);
  color:rgba(30,41,59,.6);
}

/* ═══ Responsive ════════════════════════════════ */
@media(max-width:1100px){
  .mgmt-grid{grid-template-columns:1fr;}
  .mgmt-stats-row{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:640px){
  .mgmt-stats-row{grid-template-columns:repeat(2,1fr);}
}

/* ══════════════════════════════════════════════════════
   SITE ANALYZER — Production-Ready v6
   Scoped entirely to #newSiteAnalyzerPage
══════════════════════════════════════════════════════ */

/* Page scrolls naturally — no viewport-clip tricks */
body.site-analyzer-active{overflow:auto !important;}
body.site-analyzer-active .main{overflow:auto !important;height:auto !important;}

/* ── Page base ── */
#newSiteAnalyzerPage{
  padding:0 !important;background:transparent !important;
  border:none !important;box-shadow:none !important;margin-bottom:28px !important;
}
#newSiteAnalyzerPage:not(.hidden){display:block !important;}

/* ── Shell ── */
#newSiteAnalyzerPage .nsa-shell{
  display:flex !important;flex-direction:column !important;gap:20px !important;
  padding:24px !important;border-radius:28px !important;
  border:1px solid rgba(56,189,248,.14) !important;
  background:
    radial-gradient(100% 120% at 100% 0%,rgba(56,189,248,.10) 0%,transparent 58%),
    radial-gradient(100% 120% at 0% 100%,rgba(99,102,241,.12) 0%,transparent 62%),
    linear-gradient(145deg,rgba(7,13,27,.98) 0%,rgba(13,24,46,.98) 100%) !important;
  position:relative !important;overflow:visible !important;
  min-height:calc(100vh - 120px) !important;
}
/* Subtle grid pattern overlay — uses its own border-radius so overflow:visible is safe */
#newSiteAnalyzerPage .nsa-shell::before{
  content:'' !important;position:absolute !important;inset:0 !important;
  border-radius:28px !important;pointer-events:none !important;z-index:0 !important;
  background-image:
    linear-gradient(rgba(56,189,248,.013) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,189,248,.013) 1px,transparent 1px) !important;
  background-size:32px 32px !important;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,black 20%,transparent 100%) !important;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,black 20%,transparent 100%) !important;
}
/* All real content above the grid overlay */
#newSiteAnalyzerPage .nsa-bar,
#newSiteAnalyzerPage .nsa-main{position:relative !important;z-index:1 !important;}

/* ── Header / Command Bar ── */
#newSiteAnalyzerPage .nsa-bar{
  display:flex !important;align-items:flex-start !important;
  justify-content:space-between !important;gap:16px !important;flex-wrap:wrap !important;
  padding:20px 24px !important;border-radius:20px !important;
  border:1px solid rgba(56,189,248,.12) !important;
  background:rgba(255,255,255,.038) !important;flex-shrink:0 !important;
}
#newSiteAnalyzerPage .nsa-bar-brand{
  display:flex !important;align-items:flex-start !important;gap:14px !important;
}
#newSiteAnalyzerPage .nsa-bar-dot{
  width:10px !important;height:10px !important;border-radius:50% !important;flex-shrink:0 !important;
  background:#38bdf8 !important;margin-top:8px !important;
  box-shadow:0 0 0 3px rgba(56,189,248,.18),0 0 14px rgba(56,189,248,.6) !important;
  animation:nsa-v6-blink 2.4s ease-in-out infinite !important;
}
@keyframes nsa-v6-blink{
  0%,100%{box-shadow:0 0 0 3px rgba(56,189,248,.18),0 0 14px rgba(56,189,248,.6);}
  50%{box-shadow:0 0 0 6px rgba(56,189,248,.06),0 0 26px rgba(56,189,248,.18);}
}
#newSiteAnalyzerPage .nsa-bar-titles{
  display:flex !important;flex-direction:column !important;gap:5px !important;
}
#newSiteAnalyzerPage .nsa-bar-sup{
  font-size:9.5px !important;font-weight:800 !important;letter-spacing:2.5px !important;
  color:#38bdf8 !important;font-family:'Courier New',monospace !important;line-height:1 !important;
}
#newSiteAnalyzerPage .nsa-bar-name{
  font-size:24px !important;font-weight:900 !important;color:#f0f6ff !important;line-height:1.1 !important;
}
#newSiteAnalyzerPage .nsa-bar-caption{
  font-size:13px !important;color:rgba(255,255,255,.42) !important;line-height:1.65 !important;
  max-width:580px !important;
}
#newSiteAnalyzerPage .nsa-bar-code{
  align-self:flex-start !important;margin-top:4px !important;
  padding:3px 9px !important;border-radius:999px !important;font-size:10px !important;
  color:rgba(255,255,255,.2) !important;background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.07) !important;font-family:'Courier New',monospace !important;
}
#newSiteAnalyzerPage .nsa-bar-acts{
  display:flex !important;align-items:center !important;gap:8px !important;
  flex-wrap:wrap !important;align-self:center !important;
}

/* ── Buttons (scoped) ── */
#newSiteAnalyzerPage .nsa-btn{
  display:inline-flex !important;align-items:center !important;gap:6px !important;
  padding:9px 16px !important;border-radius:11px !important;
  font-size:13px !important;font-weight:700 !important;
  border:1px solid transparent !important;cursor:pointer !important;
  transition:all .18s !important;white-space:nowrap !important;min-height:40px !important;
}
#newSiteAnalyzerPage .nsa-btn-green{
  background:rgba(16,185,129,.13) !important;border-color:rgba(16,185,129,.3) !important;color:#10b981 !important;
}
#newSiteAnalyzerPage .nsa-btn-green:hover{
  background:rgba(16,185,129,.24) !important;border-color:rgba(16,185,129,.52) !important;
}
#newSiteAnalyzerPage .nsa-btn-cyan{
  background:rgba(56,189,248,.1) !important;border-color:rgba(56,189,248,.22) !important;color:#38bdf8 !important;
}
#newSiteAnalyzerPage .nsa-btn-cyan:hover{
  background:rgba(56,189,248,.2) !important;border-color:rgba(56,189,248,.42) !important;
}
#newSiteAnalyzerPage .nsa-btn-amber{
  background:rgba(245,158,11,.11) !important;border-color:rgba(245,158,11,.26) !important;color:#f59e0b !important;
}
#newSiteAnalyzerPage .nsa-btn-amber:hover{
  background:rgba(245,158,11,.22) !important;border-color:rgba(245,158,11,.44) !important;
}
#newSiteAnalyzerPage .nsa-btn-dim{
  background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.1) !important;
  color:rgba(255,255,255,.48) !important;
}
#newSiteAnalyzerPage .nsa-btn-dim:hover{
  background:rgba(255,255,255,.1) !important;color:rgba(255,255,255,.78) !important;
}
#newSiteAnalyzerPage .nsa-btn-ghost{
  background:transparent !important;border-color:rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.32) !important;
}
#newSiteAnalyzerPage .nsa-btn-ghost:hover{
  background:rgba(255,255,255,.06) !important;color:rgba(255,255,255,.62) !important;
}
#newSiteAnalyzerPage .nsa-btn-wide{
  width:100% !important;justify-content:center !important;
}

/* ── 2-column Main Layout ── */
/* RTL: column 1 is visually on the RIGHT (controls), column 2 on the LEFT (output) */
#newSiteAnalyzerPage .nsa-main{
  display:grid !important;
  grid-template-columns:minmax(330px,400px) minmax(0,1fr) !important;
  gap:18px !important;overflow:visible !important;align-items:start !important;
}

/* ── Panels ── */
#newSiteAnalyzerPage .nsa-panel-left,
#newSiteAnalyzerPage .nsa-panel-right{
  border-radius:22px !important;
  border:1px solid rgba(148,163,184,.11) !important;
  background:rgba(255,255,255,.032) !important;
  box-shadow:0 18px 48px rgba(2,6,23,.2) !important;
  min-width:0 !important;overflow:visible !important;
}
#newSiteAnalyzerPage .nsa-panel-left{
  display:flex !important;flex-direction:column !important;gap:14px !important;
  padding:18px !important;
}
#newSiteAnalyzerPage .nsa-left-scroll{
  display:flex !important;flex-direction:column !important;gap:14px !important;
  overflow:visible !important;
}

/* ── Sections ── */
#newSiteAnalyzerPage .nsa-section{
  padding:16px !important;border-radius:18px !important;
  border:1px solid rgba(255,255,255,.07) !important;
  background:rgba(8,16,34,.52) !important;
  position:relative !important;
}
/* Search section needs higher z-index so its dropdown overlays content below */
#newSiteAnalyzerPage .nsa-section-search{
  z-index:50 !important;
}
#newSiteAnalyzerPage .nsa-section-action{
  background:linear-gradient(145deg,rgba(245,158,11,.07) 0%,rgba(8,16,34,.5) 100%) !important;
  border-color:rgba(245,158,11,.14) !important;
}
#newSiteAnalyzerPage .nsa-sec-title{
  display:flex !important;align-items:center !important;gap:8px !important;
  justify-content:space-between !important;margin-bottom:14px !important;
  font-size:11px !important;font-weight:800 !important;
  color:rgba(255,255,255,.5) !important;letter-spacing:.3px !important;
}
#newSiteAnalyzerPage .nsa-fldot{
  width:6px !important;height:6px !important;border-radius:50% !important;flex-shrink:0 !important;
}
#newSiteAnalyzerPage .nsa-dot-cyan{
  background:#38bdf8 !important;box-shadow:0 0 6px rgba(56,189,248,.7) !important;
}
#newSiteAnalyzerPage .nsa-dot-amber{
  background:#f59e0b !important;box-shadow:0 0 6px rgba(245,158,11,.6) !important;
}
#newSiteAnalyzerPage .nsa-sec-tag{
  margin-right:auto !important;font-size:8.5px !important;font-weight:800 !important;
  letter-spacing:1.4px !important;padding:3px 8px !important;border-radius:999px !important;
  background:rgba(56,189,248,.08) !important;border:1px solid rgba(56,189,248,.18) !important;
  color:#7dd3fc !important;font-family:'Courier New',monospace !important;
}
#newSiteAnalyzerPage .nsa-search-grid{
  display:flex !important;flex-direction:column !important;gap:12px !important;
}
#newSiteAnalyzerPage .nsa-fg{
  display:flex !important;flex-direction:column !important;gap:7px !important;min-width:0 !important;
}
#newSiteAnalyzerPage .nsa-flabel{
  display:flex !important;align-items:center !important;gap:5px !important;
  font-size:11.5px !important;font-weight:700 !important;color:rgba(255,255,255,.44) !important;
}
#newSiteAnalyzerPage .nsa-flabel-sm{
  font-size:11px !important;color:rgba(255,255,255,.32) !important;
}

/* ── Inputs ── */
#newSiteAnalyzerPage .nsa-finput{
  width:100% !important;padding:11px 14px !important;border-radius:12px !important;
  border:1px solid rgba(255,255,255,.09) !important;background:rgba(0,0,0,.3) !important;
  color:rgba(255,255,255,.85) !important;font-size:13px !important;
  box-sizing:border-box !important;min-width:0 !important;
  transition:border-color .18s,background .18s !important;
}
#newSiteAnalyzerPage .nsa-finput:focus{
  outline:none !important;border-color:rgba(56,189,248,.44) !important;
  background:rgba(56,189,248,.06) !important;
}
#newSiteAnalyzerPage .nsa-finput[readonly]{color:rgba(255,255,255,.38) !important;cursor:default !important;}
#newSiteAnalyzerPage .nsa-finput::placeholder{color:rgba(255,255,255,.2) !important;}
#newSiteAnalyzerPage .nsa-finput-mono{font-family:'Courier New',monospace !important;font-size:12px !important;}

/* ── Dropdown / Smart-Select ── */
#newSiteAnalyzerPage .nsa-fg-select{
  position:relative !important;z-index:40 !important;min-width:0 !important;
}
#newSiteAnalyzerPage .nsa-ss{width:100% !important;min-width:0 !important;}
#newSiteAnalyzerPage .nsa-ss-toggle{
  width:100% !important;min-width:0 !important;
  padding:11px 40px 11px 14px !important;border-radius:12px !important;
  border:1px solid rgba(255,255,255,.09) !important;background:rgba(0,0,0,.3) !important;
  color:rgba(255,255,255,.85) !important;font-size:13px !important;font-weight:700 !important;
  box-sizing:border-box !important;display:flex !important;align-items:center !important;
  gap:8px !important;cursor:pointer !important;overflow:hidden !important;
  transition:border-color .18s,background .18s !important;min-height:0 !important;
  text-align:right !important;
}
#newSiteAnalyzerPage .nsa-ss.open .nsa-ss-toggle,
#newSiteAnalyzerPage .nsa-ss-toggle:hover{
  border-color:rgba(56,189,248,.42) !important;background:rgba(56,189,248,.06) !important;
}
#newSiteAnalyzerPage #newSiteAnalyzerSelected{
  flex:1 !important;min-width:0 !important;
  overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;
}
/* Dropdown menu: high z-index, clean radius, safely positioned */
#newSiteAnalyzerPage .nsa-fg-select .smart-select-menu{
  top:calc(100% + 8px) !important;z-index:9999 !important;
  max-height:320px !important;border-radius:18px !important;
  left:0 !important;right:0 !important;box-sizing:border-box !important;
}

/* ── Meta card ── */
#newSiteAnalyzerPage .nsa-meta{
  padding:14px !important;border-radius:14px !important;
  border:1px solid rgba(56,189,248,.12) !important;background:rgba(56,189,248,.04) !important;
}
#newSiteAnalyzerPage .nsa-meta .smart-tool-meta-pill{
  font-size:12px !important;padding:5px 10px !important;border-radius:8px !important;
}

/* ── Pricing section fields ── */
#newSiteAnalyzerPage .nsa-two-col{
  display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important;
  margin-bottom:14px !important;
}
#newSiteAnalyzerPage .nsa-pgrid{
  display:grid !important;grid-template-columns:1fr !important;gap:8px !important;
}
#newSiteAnalyzerPage .nsa-pgrid .smart-tool-pricing-card{
  padding:13px 15px !important;border-radius:14px !important;
}

/* ── Action section ── */
#newSiteAnalyzerPage .nsa-action-text{
  margin:0 0 14px !important;font-size:13px !important;line-height:1.75 !important;
  color:rgba(255,255,255,.42) !important;
}

/* ── Right Panel: AI Output ── */
#newSiteAnalyzerPage .nsa-panel-right{
  display:flex !important;flex-direction:column !important;
  overflow:hidden !important;min-height:600px !important;
  background:rgba(0,0,0,.16) !important;border-color:rgba(16,185,129,.11) !important;
}
#newSiteAnalyzerPage .nsa-ai-head{
  flex-shrink:0 !important;display:flex !important;align-items:center !important;
  justify-content:space-between !important;flex-wrap:wrap !important;gap:10px !important;
  padding:16px 20px !important;
  border-bottom:1px solid rgba(16,185,129,.11) !important;
  background:rgba(16,185,129,.04) !important;
  border-radius:22px 22px 0 0 !important;
}
#newSiteAnalyzerPage .nsa-ai-info{
  display:flex !important;align-items:center !important;gap:10px !important;
}
#newSiteAnalyzerPage .nsa-ai-dot{
  width:8px !important;height:8px !important;border-radius:50% !important;flex-shrink:0 !important;
  background:#10b981 !important;
  box-shadow:0 0 8px rgba(16,185,129,.75) !important;
  animation:nsa-v6-ai-pulse 2.8s ease-in-out infinite !important;
}
@keyframes nsa-v6-ai-pulse{
  0%,100%{box-shadow:0 0 8px rgba(16,185,129,.75);}
  50%{box-shadow:0 0 22px rgba(16,185,129,.2);}
}
#newSiteAnalyzerPage .nsa-ai-sup{
  font-size:9px !important;font-weight:800 !important;letter-spacing:2px !important;
  color:#10b981 !important;font-family:'Courier New',monospace !important;
}
#newSiteAnalyzerPage .nsa-ai-title{
  font-size:14px !important;font-weight:700 !important;color:rgba(255,255,255,.72) !important;
}
#newSiteAnalyzerPage .nsa-ai-acts{
  display:flex !important;align-items:center !important;gap:8px !important;
}
/* Output area fills remaining height via flex */
#newSiteAnalyzerPage .nsa-output-wrap{
  flex:1 !important;min-height:0 !important;
  display:flex !important;flex-direction:column !important;
}
#newSiteAnalyzerPage .nsa-output{
  flex:1 !important;min-height:0 !important;
  width:100% !important;resize:none !important;border:none !important;outline:none !important;
  background:transparent !important;color:rgba(255,255,255,.82) !important;
  font-size:14px !important;line-height:1.9 !important;
  padding:20px 22px !important;box-sizing:border-box !important;font-family:inherit !important;
}
#newSiteAnalyzerPage .nsa-output::placeholder{color:rgba(255,255,255,.17) !important;}
#newSiteAnalyzerPage .nsa-output::-webkit-scrollbar{width:4px;}
#newSiteAnalyzerPage .nsa-output::-webkit-scrollbar-track{background:transparent;}
#newSiteAnalyzerPage .nsa-output::-webkit-scrollbar-thumb{background:rgba(16,185,129,.28);border-radius:2px;}

/* ══════════════ LIGHT THEME ══════════════ */
body.light-theme #newSiteAnalyzerPage .nsa-shell{
  background:
    radial-gradient(100% 120% at 100% 0%,rgba(56,189,248,.07) 0%,transparent 58%),
    radial-gradient(100% 120% at 0% 100%,rgba(99,102,241,.06) 0%,transparent 62%),
    linear-gradient(145deg,#f4f8ff 0%,#eaf2ff 100%) !important;
  border-color:rgba(56,189,248,.2) !important;
}
body.light-theme #newSiteAnalyzerPage .nsa-shell::before{
  background-image:
    linear-gradient(rgba(56,189,248,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,189,248,.028) 1px,transparent 1px) !important;
}
body.light-theme #newSiteAnalyzerPage .nsa-bar{
  background:rgba(255,255,255,.9) !important;border-color:rgba(56,189,248,.18) !important;
}
body.light-theme #newSiteAnalyzerPage .nsa-bar-name{color:#0f172a !important;}
body.light-theme #newSiteAnalyzerPage .nsa-bar-caption{color:#64748b !important;}
body.light-theme #newSiteAnalyzerPage .nsa-bar-code{
  color:rgba(15,23,42,.28) !important;background:rgba(0,0,0,.04) !important;border-color:rgba(0,0,0,.07) !important;
}
body.light-theme #newSiteAnalyzerPage .nsa-panel-left,
body.light-theme #newSiteAnalyzerPage .nsa-panel-right{
  background:rgba(255,255,255,.88) !important;border-color:rgba(0,0,0,.08) !important;
  box-shadow:0 10px 32px rgba(0,0,0,.08) !important;
}
body.light-theme #newSiteAnalyzerPage .nsa-section{
  background:rgba(248,251,255,.88) !important;border-color:rgba(0,0,0,.06) !important;
}
body.light-theme #newSiteAnalyzerPage .nsa-section-action{
  background:linear-gradient(145deg,rgba(245,158,11,.06) 0%,rgba(248,251,255,.88) 100%) !important;
  border-color:rgba(245,158,11,.18) !important;
}
body.light-theme #newSiteAnalyzerPage .nsa-sec-title{color:rgba(15,23,42,.52) !important;}
body.light-theme #newSiteAnalyzerPage .nsa-flabel{color:rgba(15,23,42,.5) !important;}
body.light-theme #newSiteAnalyzerPage .nsa-flabel-sm{color:rgba(15,23,42,.36) !important;}
body.light-theme #newSiteAnalyzerPage .nsa-finput{
  background:rgba(255,255,255,.94) !important;border-color:rgba(0,0,0,.1) !important;color:rgba(15,23,42,.85) !important;
}
body.light-theme #newSiteAnalyzerPage .nsa-finput:focus{
  border-color:rgba(56,189,248,.44) !important;background:rgba(56,189,248,.05) !important;
}
body.light-theme #newSiteAnalyzerPage .nsa-finput::placeholder{color:rgba(15,23,42,.22) !important;}
body.light-theme #newSiteAnalyzerPage .nsa-finput[readonly]{color:rgba(15,23,42,.42) !important;}
body.light-theme #newSiteAnalyzerPage .nsa-ss-toggle{
  background:rgba(255,255,255,.94) !important;border-color:rgba(0,0,0,.1) !important;color:rgba(15,23,42,.85) !important;
}
body.light-theme #newSiteAnalyzerPage .nsa-ss.open .nsa-ss-toggle,
body.light-theme #newSiteAnalyzerPage .nsa-ss-toggle:hover{
  border-color:rgba(56,189,248,.42) !important;background:rgba(56,189,248,.05) !important;
}
body.light-theme #newSiteAnalyzerPage .nsa-meta{
  background:rgba(56,189,248,.05) !important;border-color:rgba(56,189,248,.15) !important;
}
body.light-theme #newSiteAnalyzerPage .nsa-panel-right{
  background:rgba(255,255,255,.82) !important;border-color:rgba(16,185,129,.15) !important;
}
body.light-theme #newSiteAnalyzerPage .nsa-ai-head{
  background:rgba(16,185,129,.04) !important;border-bottom-color:rgba(16,185,129,.12) !important;
}
body.light-theme #newSiteAnalyzerPage .nsa-ai-title{color:rgba(15,23,42,.7) !important;}
body.light-theme #newSiteAnalyzerPage .nsa-output{color:rgba(15,23,42,.84) !important;}
body.light-theme #newSiteAnalyzerPage .nsa-output::placeholder{color:rgba(15,23,42,.2) !important;}
body.light-theme #newSiteAnalyzerPage .nsa-output::-webkit-scrollbar-thumb{background:rgba(16,185,129,.2);}
body.light-theme #newSiteAnalyzerPage .nsa-action-text{color:rgba(15,23,42,.48) !important;}
body.light-theme #newSiteAnalyzerPage .nsa-btn-dim{color:rgba(15,23,42,.5) !important;}
body.light-theme #newSiteAnalyzerPage .nsa-btn-ghost{color:rgba(15,23,42,.35) !important;}

/* ══════════════ RESPONSIVE ══════════════ */
@media(max-width:1200px){
  #newSiteAnalyzerPage .nsa-main{
    grid-template-columns:minmax(310px,370px) minmax(0,1fr) !important;
  }
}
@media(max-width:900px){
  #newSiteAnalyzerPage .nsa-main{
    grid-template-columns:1fr !important;
  }
  #newSiteAnalyzerPage .nsa-panel-right{min-height:500px !important;}
}
@media(max-width:700px){
  #newSiteAnalyzerPage .nsa-shell{
    padding:16px !important;border-radius:22px !important;gap:16px !important;
  }
  #newSiteAnalyzerPage .nsa-bar{padding:16px !important;}
  #newSiteAnalyzerPage .nsa-bar-name{font-size:20px !important;}
  #newSiteAnalyzerPage .nsa-two-col{grid-template-columns:1fr !important;}
  #newSiteAnalyzerPage .nsa-shell{min-height:auto !important;}
}

/* ══════════════════════════════════════════════════════
   SMART TOOL CONFIG MODAL — newSiteAnalyzer Premium Theme
   Scoped entirely to #smartToolConfigModal.
   Does NOT affect any other modal in the app.
══════════════════════════════════════════════════════ */

/* Overlay: deeper, blurred */
#smartToolConfigModal .modal-overlay{
  background:rgba(2,6,20,.78)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
}

/* Card: dark navy shell matching newSiteAnalyzer aesthetic */
#smartToolConfigModal .modal-card{
  width:min(1040px,95vw)!important;
  max-height:88vh!important;
  overflow-y:auto!important;
  background:
    radial-gradient(100% 100% at 100% 0%,rgba(56,189,248,.10) 0%,transparent 55%),
    radial-gradient(100% 100% at 0% 100%,rgba(99,102,241,.10) 0%,transparent 55%),
    linear-gradient(145deg,rgba(7,13,27,.99) 0%,rgba(11,20,42,.99) 100%)!important;
  border:1px solid rgba(56,189,248,.15)!important;
  border-radius:28px!important;
  padding:24px!important;
  box-shadow:0 40px 90px rgba(2,6,23,.65),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
#smartToolConfigModal .modal-card::-webkit-scrollbar{width:4px;}
#smartToolConfigModal .modal-card::-webkit-scrollbar-track{background:transparent;}
#smartToolConfigModal .modal-card::-webkit-scrollbar-thumb{background:rgba(56,189,248,.22);border-radius:2px;}

/* ── Header row ── */
#smartToolConfigModal .headRow{
  display:flex!important;align-items:center!important;
  justify-content:space-between!important;gap:14px!important;
  margin-bottom:20px!important;padding-bottom:16px!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
}
#smartToolConfigModal #smartToolConfigTitle{
  font-size:17px!important;font-weight:900!important;
  color:#f0f6ff!important;
  border-bottom:none!important;padding-bottom:0!important;margin-bottom:0!important;
}
#smartToolConfigModal .actions{
  display:flex!important;gap:8px!important;
  align-items:center!important;flex-wrap:wrap!important;
}

/* ── Buttons ── */
#smartToolConfigModal .btn{
  display:inline-flex!important;align-items:center!important;gap:5px!important;
  min-height:36px!important;padding:7px 15px!important;border-radius:10px!important;
  font-size:13px!important;font-weight:700!important;cursor:pointer!important;
  transition:all .18s!important;white-space:nowrap!important;
  border:1px solid transparent!important;background:none!important;
}
#smartToolConfigModal .btn.warn{
  background:rgba(245,158,11,.11)!important;border-color:rgba(245,158,11,.28)!important;color:#f59e0b!important;
}
#smartToolConfigModal .btn.warn:hover{
  background:rgba(245,158,11,.22)!important;border-color:rgba(245,158,11,.45)!important;
}
#smartToolConfigModal .btn.ok{
  background:rgba(16,185,129,.12)!important;border-color:rgba(16,185,129,.28)!important;color:#10b981!important;
}
#smartToolConfigModal .btn.ok:hover{
  background:rgba(16,185,129,.24)!important;border-color:rgba(16,185,129,.48)!important;
}
#smartToolConfigModal .btn.danger{
  background:rgba(239,68,68,.1)!important;border-color:rgba(239,68,68,.24)!important;color:#f87171!important;
}
#smartToolConfigModal .btn.danger:hover{background:rgba(239,68,68,.2)!important;}
#smartToolConfigModal .btn.pri{
  background:rgba(99,102,241,.12)!important;border-color:rgba(99,102,241,.28)!important;color:#a5b4fc!important;
}
#smartToolConfigModal .btn.pri:hover{background:rgba(99,102,241,.22)!important;}

/* ── 2-column grid: logic (narrow) | model+prompt (wide) ── */
/* In RTL: col-1 is on RIGHT (logic), col-2 is on LEFT (prompt) */
#smartToolConfigModal .smart-tool-config-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)!important;
  gap:16px!important;margin-top:0!important;align-items:start!important;
}

/* ── Config boxes ── */
#smartToolConfigModal .smart-tool-config-box{
  padding:18px!important;border-radius:20px!important;
  border:1px solid rgba(148,163,184,.1)!important;
  background:rgba(8,18,40,.55)!important;
}
#smartToolConfigModal .gtitle{
  font-size:10.5px!important;font-weight:800!important;letter-spacing:.5px!important;
  color:rgba(255,255,255,.42)!important;margin-bottom:12px!important;
  padding-bottom:8px!important;border-bottom:1px solid rgba(255,255,255,.06)!important;
}

/* ── Logic text (no internal scroll — flows naturally) ── */
#smartToolConfigModal .smart-tool-config-text{
  font-size:13px!important;line-height:1.82!important;
  color:rgba(255,255,255,.56)!important;
  white-space:pre-wrap!important;overflow-wrap:break-word!important;
  min-height:0!important;max-height:none!important;overflow:visible!important;
}

/* ── Model input ── */
#smartToolConfigModal .field label{
  font-size:11px!important;font-weight:700!important;
  color:rgba(255,255,255,.38)!important;display:block!important;margin-bottom:7px!important;
}
#smartToolConfigModal #smartToolConfigModel{
  width:100%!important;padding:10px 14px!important;border-radius:11px!important;
  border:1px solid rgba(255,255,255,.09)!important;background:rgba(0,0,0,.32)!important;
  color:rgba(255,255,255,.82)!important;font-size:13px!important;
  box-sizing:border-box!important;min-height:0!important;
}

/* ── Model select row ── */
#smartToolConfigModal .smart-tool-model-row{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px!important;margin-top:8px!important;
}
#smartToolConfigModal .smart-tool-model-row select{
  min-height:40px!important;padding:9px 14px!important;border-radius:11px!important;
  border:1px solid rgba(255,255,255,.09)!important;background:rgba(0,0,0,.32)!important;
  color:rgba(255,255,255,.82)!important;font-size:13px!important;
  width:100%!important;box-sizing:border-box!important;
}
#smartToolConfigModal .smart-tool-model-row select:focus{
  outline:none!important;border-color:rgba(56,189,248,.42)!important;
  box-shadow:0 0 0 3px rgba(56,189,248,.12)!important;
}

/* ── Prompt / Extra textarea ── */
#smartToolConfigModal .smart-tool-config-prompt{
  min-height:200px!important;max-height:44vh!important;
  border-radius:12px!important;border:1px solid rgba(255,255,255,.09)!important;
  background:rgba(0,0,0,.28)!important;
  color:rgba(56,189,248,.86)!important;
  font-size:12px!important;font-family:Consolas,'Courier New',monospace!important;
  line-height:1.75!important;padding:14px 16px!important;
  width:100%!important;box-sizing:border-box!important;
  resize:vertical!important;overflow-y:auto!important;
}
#smartToolConfigModal .smart-tool-config-prompt:focus{
  outline:none!important;border-color:rgba(56,189,248,.38)!important;
  background:rgba(56,189,248,.04)!important;
}
#smartToolConfigModal .smart-tool-config-prompt[readonly]{
  opacity:1!important;cursor:default!important;color:rgba(56,189,248,.7)!important;
}
#smartToolConfigModal .smart-tool-config-prompt::-webkit-scrollbar{width:3px;}
#smartToolConfigModal .smart-tool-config-prompt::-webkit-scrollbar-track{background:transparent;}
#smartToolConfigModal .smart-tool-config-prompt::-webkit-scrollbar-thumb{background:rgba(56,189,248,.26);border-radius:2px;}

/* ══════════════ LIGHT THEME ══════════════ */
body.light-theme #smartToolConfigModal .modal-overlay{
  background:rgba(15,23,42,.55)!important;
}
body.light-theme #smartToolConfigModal .modal-card{
  background:
    radial-gradient(100% 100% at 100% 0%,rgba(56,189,248,.07) 0%,transparent 55%),
    radial-gradient(100% 100% at 0% 100%,rgba(99,102,241,.06) 0%,transparent 55%),
    linear-gradient(145deg,#f4f8ff 0%,#eaf2ff 100%)!important;
  border-color:rgba(56,189,248,.2)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.15)!important;
}
body.light-theme #smartToolConfigModal .headRow{border-bottom-color:rgba(0,0,0,.07)!important;}
body.light-theme #smartToolConfigModal #smartToolConfigTitle{color:#0f172a!important;}
body.light-theme #smartToolConfigModal .smart-tool-config-box{
  background:rgba(255,255,255,.9)!important;border-color:rgba(0,0,0,.07)!important;
}
body.light-theme #smartToolConfigModal .gtitle{
  color:rgba(15,23,42,.46)!important;border-bottom-color:rgba(0,0,0,.06)!important;
}
body.light-theme #smartToolConfigModal .smart-tool-config-text{color:rgba(15,23,42,.68)!important;}
body.light-theme #smartToolConfigModal .field label{color:rgba(15,23,42,.48)!important;}
body.light-theme #smartToolConfigModal #smartToolConfigModel,
body.light-theme #smartToolConfigModal .smart-tool-model-row select{
  background:rgba(255,255,255,.95)!important;border-color:rgba(0,0,0,.1)!important;color:rgba(15,23,42,.85)!important;
}
body.light-theme #smartToolConfigModal #smartToolConfigModel:focus,
body.light-theme #smartToolConfigModal .smart-tool-model-row select:focus{
  background:#ffffff!important;
  border-color:rgba(59,130,246,.35)!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.08)!important;
  color:#0f172a!important;
}
body.light-theme #smartToolConfigModal .smart-tool-config-prompt,
body.light-theme #smartToolConfigModal textarea.smart-tool-config-prompt,
body.light-theme #smartToolConfigModal textarea.smart-tool-config-prompt:focus,
body.light-theme #smartToolConfigModal textarea.smart-tool-config-prompt:active{
  background:#eef5ff!important;background-color:#eef5ff!important;background-image:none!important;
  border-color:rgba(0,0,0,.1)!important;
  color:#1e40af!important;-webkit-text-fill-color:#1e40af!important;caret-color:#1e40af!important;
}
body.light-theme #smartToolConfigModal .smart-tool-config-prompt[readonly]{
  color:#1e40af!important;-webkit-text-fill-color:#1e40af!important;
  background:#eef5ff!important;background-color:#eef5ff!important;background-image:none!important;opacity:1!important;
}
body.light-theme #smartToolConfigModal .smart-tool-config-prompt::placeholder{
  color:#64748b!important;-webkit-text-fill-color:#64748b!important;
}

/* ── Responsive: stack on narrow screens ── */
@media(max-width:820px){
  #smartToolConfigModal .smart-tool-config-grid{
    grid-template-columns:1fr!important;
  }
}

/* ---- INVENTORY VAULT ---- */
#inventoryVaultPage .iv-shell{
  display:grid;
  gap:18px;
}
#inventoryVaultPage .iv-topbar,
#inventoryVaultPage .iv-hero,
#inventoryVaultPage .iv-panel{
  background:linear-gradient(135deg,rgba(16,24,48,.88),rgba(12,28,60,.72));
  border:1px solid rgba(128,160,255,.18);
  border-radius:28px;
  box-shadow:0 14px 40px rgba(6,12,28,.18);
}
#inventoryVaultPage .iv-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 26px;
}
#inventoryVaultPage .iv-title-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}
#inventoryVaultPage .iv-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:28px 30px;
}
#inventoryVaultPage .iv-hero h1{
  margin:0 0 10px;
  font-size:2.2rem;
}
#inventoryVaultPage .iv-hero p{
  margin:0;
  color:var(--muted);
  line-height:1.9;
}
#inventoryVaultPage .iv-hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
#inventoryVaultPage .iv-badge{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(114,135,255,.28);
  background:rgba(38,54,96,.42);
  color:var(--text);
  font-weight:700;
}
#inventoryVaultPage .iv-mode-bar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  flex-wrap:wrap;
}
#inventoryVaultPage .iv-mode-tabs,
#inventoryVaultPage .iv-actor-box,
#inventoryVaultPage .iv-import-grid,
#inventoryVaultPage .iv-request-grid,
#inventoryVaultPage .iv-filter-grid,
#inventoryVaultPage .iv-stats,
#inventoryVaultPage .iv-grid{
  display:grid;
  gap:14px;
}
#inventoryVaultPage .iv-mode-tabs{
  grid-auto-flow:column;
}
#inventoryVaultPage .iv-actor-box{
  grid-template-columns:repeat(3,minmax(160px,1fr));
  align-items:end;
  flex:1 1 520px;
}
#inventoryVaultPage .iv-stats{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
#inventoryVaultPage .iv-alert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}
#inventoryVaultPage .iv-alert-card{
  padding:18px 20px;
  border-radius:22px;
  border:1px solid rgba(126,154,255,.14);
  background:linear-gradient(145deg,rgba(18,28,52,.94),rgba(20,36,70,.78));
}
#inventoryVaultPage .iv-alert-card-ok{
  border-color:rgba(52,211,153,.24);
  background:linear-gradient(145deg,rgba(13,34,42,.92),rgba(18,52,56,.74));
}
#inventoryVaultPage .iv-alert-card-warn{
  border-color:rgba(255,186,92,.24);
  background:linear-gradient(145deg,rgba(44,28,18,.92),rgba(58,40,18,.72));
}
#inventoryVaultPage .iv-alert-title{
  font-size:1rem;
  font-weight:800;
  margin-bottom:8px;
}
#inventoryVaultPage .iv-alert-body{
  color:var(--muted);
  line-height:1.9;
}
#inventoryVaultPage .iv-stat-card{
  padding:18px 20px;
  border-radius:22px;
  background:linear-gradient(145deg,rgba(22,34,62,.94),rgba(24,46,88,.74));
  border:1px solid rgba(126,154,255,.12);
}
#inventoryVaultPage .iv-stat-label{
  color:var(--muted);
  font-size:.95rem;
}
#inventoryVaultPage .iv-stat-value{
  margin-top:8px;
  font-size:2rem;
  font-weight:800;
}
#inventoryVaultPage .iv-stat-sub{
  margin-top:6px;
  color:var(--muted);
  font-size:.88rem;
}
#inventoryVaultPage .iv-grid{
  grid-template-columns:1.15fr .85fr;
  align-items:start;
}
#inventoryVaultPage .iv-grid-bottom{
  grid-template-columns:1.1fr .9fr;
}
#inventoryVaultPage .iv-panel{
  padding:22px 24px;
}
#inventoryVaultPage .iv-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
#inventoryVaultPage .iv-panel-title{
  font-size:1.15rem;
  font-weight:800;
}
#inventoryVaultPage .iv-import-grid,
#inventoryVaultPage .iv-request-grid,
#inventoryVaultPage .iv-filter-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
#inventoryVaultPage .iv-preview-summary{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:14px;
  padding:15px 18px;
  border-radius:18px;
  background:rgba(22,32,58,.72);
  border:1px solid rgba(126,154,255,.14);
}
#inventoryVaultPage .iv-preview-summary.empty{
  color:var(--muted);
}
#inventoryVaultPage .iv-import-help{
  margin-top:14px;
  padding:14px 18px;
  border-radius:18px;
  border:1px dashed rgba(126,154,255,.2);
  color:var(--muted);
  line-height:1.9;
}
#inventoryVaultPage .iv-preview-stage{
  display:grid;
  gap:16px;
  padding:22px 24px;
  border-radius:28px;
  border:1px solid rgba(128,160,255,.18);
  background:linear-gradient(135deg,rgba(14,22,42,.96),rgba(12,28,60,.82));
  box-shadow:0 18px 42px rgba(8,14,28,.22);
}
#inventoryVaultPage .iv-preview-stage-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
#inventoryVaultPage .iv-preview-stage-title{
  font-size:1.35rem;
  font-weight:900;
}
#inventoryVaultPage .iv-preview-stage-sub{
  color:var(--muted);
  margin-top:6px;
  line-height:1.8;
}
#inventoryVaultPage .iv-detected-fields{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,220px));
  gap:10px;
  width:fit-content;
  max-width:100%;
}
#inventoryVaultPage .iv-detected-card{
  padding:11px 14px;
  border-radius:12px;
  border:1px solid rgba(99,102,241,.2);
  background:linear-gradient(145deg,rgba(22,34,62,.94),rgba(24,46,88,.74));
  text-align:center;
}
#inventoryVaultPage .iv-detected-label{
  color:rgba(148,163,184,.6);
  font-size:10px;
  font-weight:700;
  letter-spacing:.25px;
  text-transform:uppercase;
}
#inventoryVaultPage .iv-detected-value{
  margin-top:5px;
  font-weight:800;
  font-size:.95rem;
  color:#a5b4fc;
}
#inventoryVaultPage .iv-mapping-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:10px;
  align-items:start;
}
#inventoryVaultPage .iv-mapping-item{
  display:flex;
  flex-direction:column;
  gap:5px;
}
#inventoryVaultPage .iv-mapping-item > span{
  font-size:10.5px!important;
  font-weight:700!important;
  letter-spacing:.25px!important;
  color:rgba(148,163,184,.65)!important;
  text-transform:uppercase!important;
}
#inventoryVaultPage .iv-mapping-grid select{
  padding:10px 12px!important;
  padding-left:30px!important;
  font-size:13px!important;
  border-radius:10px!important;
  border:1px solid rgba(99,102,241,.18)!important;
  background:rgba(10,16,42,.65)!important;
  color:var(--text)!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236366f1' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:left 11px center!important;
  cursor:pointer!important;
  transition:border-color .18s ease,box-shadow .18s ease!important;
  width:100%!important;
}
#inventoryVaultPage .iv-mapping-grid select:focus{
  border-color:rgba(99,102,241,.52)!important;
  box-shadow:0 0 0 3px rgba(99,102,241,.13)!important;
  outline:none!important;
}
#inventoryVaultPage .iv-mapping-grid .iv-import-help{
  margin-top:0!important;
  font-size:.82rem!important;
  color:rgba(148,163,184,.6)!important;
  line-height:1.65!important;
  padding:10px 12px!important;
  border-radius:9px!important;
  background:rgba(99,102,241,.04)!important;
  border:1px solid rgba(99,102,241,.1)!important;
}
#inventoryVaultPage .iv-mapping-item{
  display:grid;
  gap:8px;
  font-weight:700;
}
#inventoryVaultPage .iv-table-wrap{
  margin-top:16px;
  overflow:auto;
  border-radius:22px;
  border:1px solid rgba(126,154,255,.12);
}
#inventoryVaultPage .iv-table-wrap-stage{
  max-height:70vh;
  width:fit-content;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
#inventoryVaultPage .iv-table-wrap-stage .iv-table{
  width:max-content;
}
#inventoryVaultPage .iv-table-wrap-tight{
  margin-top:14px;
}
#inventoryVaultPage .iv-table{
  width:100%;
  border-collapse:collapse;
}
#inventoryVaultPage .iv-preview-sheet{
  direction:ltr;
}
#inventoryVaultPage .iv-preview-sheet th,
#inventoryVaultPage .iv-preview-sheet td{
  text-align:left !important;
}
#inventoryVaultPage .iv-excel-table-wrap{
  direction:ltr;
  text-align:left;
  overflow-x:auto;
  overflow-y:auto;
  max-height:68vh;
  border:1px solid rgba(126,154,255,.12);
  border-radius:18px;
}
#inventoryVaultPage .iv-preview-sheet-strict{
  direction:ltr;
  width:max-content !important;
  min-width:max-content !important;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}
#inventoryVaultPage .iv-preview-col-head{
  font-weight:800;
  white-space:nowrap;
  vertical-align:top;
}
#inventoryVaultPage .iv-preview-cell{
  white-space:nowrap;
  vertical-align:top;
  overflow:hidden;
  box-sizing:border-box;
}
#inventoryVaultPage .iv-preview-text{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  direction:ltr;
  text-align:left;
  unicode-bidi:plaintext;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#inventoryVaultPage .iv-preview-sticky-col{
  position:sticky;
  left:0;
  z-index:2;
  background:rgba(20,26,56,.98);
  box-shadow:12px 0 18px rgba(5,10,28,.22);
}
#inventoryVaultPage .iv-preview-sheet thead .iv-preview-sticky-col{
  z-index:4;
  background:rgba(18,28,52,.98);
}
#inventoryVaultPage .iv-token-col{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#inventoryVaultPage .iv-preview-row-ok{
  background:rgba(16,185,129,.03);
}
#inventoryVaultPage .iv-preview-row-error{
  background:rgba(239,68,68,.06);
}
#inventoryVaultPage .iv-table th,
#inventoryVaultPage .iv-table td{
  padding:14px 16px;
  border-bottom:1px solid rgba(126,154,255,.1);
  text-align:right;
  vertical-align:top;
}
#inventoryVaultPage .iv-table thead th{
  background:rgba(18,28,52,.88);
  position:sticky;
  top:0;
  z-index:1;
}
body.light-theme #inventoryVaultPage .iv-preview-sticky-col{
  background:#f8faff;
  box-shadow:10px 0 18px rgba(148,163,184,.18);
}
body.light-theme #inventoryVaultPage .iv-preview-sheet thead .iv-preview-sticky-col{
  background:#eef3ff;
}

/* Sidebar width stabilizer */
.app > .side{
  width:280px;
  min-width:280px;
  max-width:280px;
  flex:0 0 280px;
}

.app > .main{
  min-width:0;
}
#inventoryVaultPage .iv-row-status{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:.86rem;
  font-weight:700;
}
#inventoryVaultPage .iv-row-status-ok{
  background:rgba(16,185,129,.12);
  color:#78f0b9;
}
#inventoryVaultPage .iv-row-status-error{
  background:rgba(239,68,68,.12);
  color:#ffb0b0;
}
#inventoryVaultPage .iv-product-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
#inventoryVaultPage .iv-product-card{
  position:relative;
  overflow:hidden;
  padding:18px 18px 16px;
  border-radius:24px;
  background:
    radial-gradient(circle at top left,rgba(56,189,248,.16),transparent 34%),
    radial-gradient(circle at bottom right,rgba(129,140,248,.18),transparent 38%),
    linear-gradient(145deg,rgba(17,24,39,.95),rgba(15,23,42,.86) 52%,rgba(10,18,36,.9));
  border:1px solid rgba(148,163,184,.14);
  box-shadow:
    0 18px 40px rgba(2,6,23,.26),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
#inventoryVaultPage .iv-product-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 24%,transparent 72%,rgba(255,255,255,.05));
  opacity:.7;
  pointer-events:none;
}
#inventoryVaultPage .iv-product-card.is-low{
  border-color:rgba(251,191,36,.34);
  box-shadow:
    0 18px 44px rgba(15,23,42,.28),
    0 0 0 1px rgba(251,191,36,.15) inset,
    inset 0 1px 0 rgba(255,255,255,.05);
}
#inventoryVaultPage .iv-product-card-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-direction:row-reverse;
}
#inventoryVaultPage .iv-product-card-head > div{
  text-align:left;
  direction:ltr;
  unicode-bidi:plaintext;
  margin-right:auto;
  margin-left:0;
}
#inventoryVaultPage .iv-product-name{
  font-size:1.18rem;
  font-weight:800;
  color:#f8fafc;
  letter-spacing:-.02em;
  text-align:left;
  direction:ltr;
  unicode-bidi:plaintext;
}
#inventoryVaultPage .iv-product-code{
  margin-top:4px;
  color:rgba(191,219,254,.7);
  font-size:1rem;
  text-align:left;
  direction:ltr;
}
#inventoryVaultPage .iv-product-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
  color:rgba(226,232,240,.9);
  font-size:.92rem;
  justify-content:flex-end;
}
#inventoryVaultPage .iv-product-metrics span{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(148,163,184,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#inventoryVaultPage .iv-product-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
  margin-top:14px;
}
#inventoryVaultPage .iv-product-actions .btn{
  box-shadow:none!important;
}
#inventoryVaultPage .iv-product-actions .btn.danger{
  padding:9px 14px!important;
  font-size:.82rem!important;
  border-radius:16px!important;
  min-height:0!important;
  line-height:1.2!important;
  box-shadow:0 10px 24px rgba(239,68,68,.18)!important;
}
#inventoryVaultPage .iv-low-stock{
  padding:6px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(249,115,22,.14));
  color:#fdba74;
  border:1px solid rgba(251,191,36,.24);
  font-weight:800;
  font-size:.92rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#inventoryVaultPage .iv-status{
  display:inline-flex;
  padding:6px 12px;
  border-radius:999px;
  font-size:.86rem;
  font-weight:800;
}
#inventoryVaultPage .iv-status-ok{background:rgba(16,185,129,.18);color:#7df3c3}
#inventoryVaultPage .iv-status-warn{background:rgba(245,158,11,.16);color:#ffd37b}
#inventoryVaultPage .iv-status-pri{background:rgba(99,102,241,.16);color:#b7bfff}
#inventoryVaultPage .iv-status-danger{background:rgba(239,68,68,.18);color:#ffb1b1}
#inventoryVaultPage .iv-status-muted{background:rgba(148,163,184,.12);color:#c8d1e0}
#inventoryVaultPage .iv-empty{
  padding:16px 18px;
  border-radius:18px;
  color:var(--muted);
  background:rgba(18,28,52,.45);
}
#inventoryVaultPage .xs-btn{
  min-height:36px;
  padding:8px 12px;
  font-size:.88rem;
}

body.light-theme #inventoryVaultPage .iv-topbar,
body.light-theme #inventoryVaultPage .iv-hero,
body.light-theme #inventoryVaultPage .iv-panel,
body.light-theme #inventoryVaultPage .iv-stat-card,
body.light-theme #inventoryVaultPage .iv-product-card,
body.light-theme #inventoryVaultPage .iv-preview-stage,
body.light-theme #inventoryVaultPage .iv-detected-card,
body.light-theme #inventoryVaultPage .iv-alert-card{
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(241,246,255,.96));
  border-color:rgba(119,144,194,.18);
  box-shadow:0 12px 28px rgba(60,80,120,.08);
}
body.light-theme #inventoryVaultPage .iv-alert-card-ok{
  background:linear-gradient(145deg,rgba(236,253,245,.98),rgba(220,252,231,.92));
}
body.light-theme #inventoryVaultPage .iv-alert-card-warn{
  background:linear-gradient(145deg,rgba(255,251,235,.98),rgba(254,243,199,.92));
}
body.light-theme #inventoryVaultPage .iv-preview-summary{
  background:rgba(245,248,255,.96);
  border-color:rgba(119,144,194,.16);
}
body.light-theme #inventoryVaultPage .iv-import-help{
  background:rgba(245,248,255,.86);
  border-color:rgba(119,144,194,.2);
  color:#64748b!important;
}
body.light-theme #inventoryVaultPage .iv-restock-context{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(56,189,248,.08) 0%, rgba(56,189,248,0) 58%),
    linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(241,245,255,.98) 100%)!important;
  border-color:rgba(59,130,246,.16)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
}
body.light-theme #inventoryVaultPage .iv-restock-context-title{
  color:#1d4ed8!important;
}
body.light-theme #inventoryVaultPage .iv-restock-context-body{
  color:#334155!important;
}
body.light-theme #inventoryVaultPage .iv-status-ok{
  background:rgba(16,185,129,.14)!important;
  color:#047857!important;
  box-shadow:inset 0 0 0 1px rgba(16,185,129,.18)!important;
}
body.light-theme #inventoryVaultPage .iv-status-warn{
  background:rgba(245,158,11,.14)!important;
  color:#b45309!important;
  box-shadow:inset 0 0 0 1px rgba(245,158,11,.18)!important;
}
body.light-theme #inventoryVaultPage .iv-status-pri{
  background:rgba(99,102,241,.12)!important;
  color:#4338ca!important;
  box-shadow:inset 0 0 0 1px rgba(99,102,241,.16)!important;
}
body.light-theme #inventoryVaultPage .iv-status-danger{
  background:rgba(239,68,68,.12)!important;
  color:#b91c1c!important;
  box-shadow:inset 0 0 0 1px rgba(239,68,68,.16)!important;
}
body.light-theme #inventoryVaultPage .iv-status-muted{
  background:rgba(148,163,184,.14)!important;
  color:#475569!important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.16)!important;
}
body.light-theme #inventoryVaultPage .iv-low-stock{
  background:rgba(245,158,11,.16)!important;
  color:#b45309!important;
  box-shadow:inset 0 0 0 1px rgba(245,158,11,.2)!important;
}
body.light-theme #inventoryVaultPage .iv-table thead th{
  background:#eef3ff;
}
body.light-theme #inventoryVaultPage .iv-alert-body{
  color:#5f6b80;
}
body.light-theme #inventoryVaultPage .iv-row-status-ok{
  background:rgba(16,185,129,.12);
  color:#0f8a62;
}
body.light-theme #inventoryVaultPage .iv-row-status-error{
  background:rgba(239,68,68,.1);
  color:#b42318;
}

@media (max-width: 1100px){
  #inventoryVaultPage .iv-product-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #inventoryVaultPage .iv-grid,
  #inventoryVaultPage .iv-grid-bottom,
  #inventoryVaultPage .iv-mode-bar{
    grid-template-columns:1fr;
  }
  #inventoryVaultPage .iv-import-grid,
    #inventoryVaultPage .iv-request-grid,
    #inventoryVaultPage .iv-filter-grid,
    #inventoryVaultPage .iv-mapping-grid,
    #inventoryVaultPage .iv-actor-box,
    #inventoryVaultPage .iv-preview-stage-head{
      grid-template-columns:1fr;
    }
  }

@media (max-width: 760px){
  #inventoryVaultPage .iv-product-cards{
    grid-template-columns:minmax(0,1fr);
  }
}

/* ══════════════════════════════════════════════════════
   inventoryVault — Pagination & Table Enhancements
   Scoped to #inventoryVaultPage
══════════════════════════════════════════════════════ */

/* Tighter row padding for items table only (10 per page → no need for very tall rows) */
#inventoryVaultItemsTable .iv-table th,
#inventoryVaultItemsTable .iv-table td{
  padding:10px 14px;
}

/* Hover row highlight */
#inventoryVaultPage .iv-table tbody tr{
  transition:background .12s;
}
#inventoryVaultPage .iv-table tbody tr:hover{
  background:rgba(99,120,220,.07);
}

/* Empty cell inside paginated table */
#inventoryVaultPage .iv-empty-cell{
  padding:20px 16px;
  color:var(--muted);
  text-align:center;
}

/* ── Pagination container ── */
#inventoryVaultPage .iv-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  padding:12px 16px;
  border-top:1px solid rgba(126,154,255,.1);
}
#inventoryVaultPage .iv-pager-info{
  font-size:.86rem;
  font-weight:600;
  color:var(--muted);
}
#inventoryVaultPage .iv-pager-btns{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
}
#inventoryVaultPage .iv-pager-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:32px;
  padding:0 8px;
  border-radius:8px;
  border:1px solid rgba(126,154,255,.16);
  background:rgba(18,28,52,.55);
  color:rgba(255,255,255,.68);
  font-size:.84rem;
  font-weight:700;
  cursor:pointer;
  transition:all .15s;
  line-height:1;
}
#inventoryVaultPage .iv-pager-btn:hover:not(:disabled){
  background:rgba(99,102,241,.22);
  border-color:rgba(99,102,241,.4);
  color:#c7d0ff;
}
#inventoryVaultPage .iv-pager-btn.is-active{
  background:rgba(99,102,241,.28);
  border-color:rgba(99,102,241,.48);
  color:#fff;
  cursor:default;
}
#inventoryVaultPage .iv-pager-btn:disabled{
  opacity:.32;
  cursor:default;
}
#inventoryVaultPage .iv-pager-ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:32px;
  color:rgba(255,255,255,.28);
  font-size:.84rem;
}

/* ── Light theme pagination ── */
body.light-theme #inventoryVaultPage .iv-pagination{
  border-top-color:rgba(119,144,194,.15);
}
body.light-theme #inventoryVaultPage .iv-pager-btn{
  background:rgba(255,255,255,.88);
  border-color:rgba(119,144,194,.22);
  color:rgba(30,41,59,.68);
}
body.light-theme #inventoryVaultPage .iv-pager-btn:hover:not(:disabled){
  background:rgba(99,102,241,.1);
  border-color:rgba(99,102,241,.3);
  color:#4f46e5;
}
body.light-theme #inventoryVaultPage .iv-pager-btn.is-active{
  background:rgba(99,102,241,.16);
  border-color:rgba(99,102,241,.36);
  color:#4f46e5;
}
body.light-theme #inventoryVaultPage .iv-pager-ellipsis{
  color:rgba(30,41,59,.3);
}
body.light-theme #inventoryVaultPage .iv-table tbody tr:hover{
  background:rgba(99,102,241,.05);
}

.btn.ghost{
  background:linear-gradient(135deg,rgba(34,50,88,.58),rgba(24,38,70,.5));
  color:var(--text);
  border:1px solid rgba(126,154,255,.18);
  box-shadow:none;
}
body.light-theme .btn.ghost{
  background:linear-gradient(135deg,#f3f7ff,#e8f0ff);
  color:#173057;
  border-color:rgba(90,120,180,.18);
}

/* ══════════════════════════════════════════════════════
   inventoryVault — PREMIUM REDESIGN
   Overrides original iv-* styles. Scoped to #inventoryVaultPage.
   Matches the Management Portal (mgmt-*) design language.
══════════════════════════════════════════════════════ */

/* Shell: adopt Command Center aesthetic */
#inventoryVaultPage{
  padding:0!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  margin-bottom:0!important;
}
#inventoryVaultPage .iv-shell{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  padding:18px!important;
  background:linear-gradient(135deg,#0d1117 0%,#161b27 60%,#0d1117 100%)!important;
  border-radius:16px!important;
  border:1px solid rgba(99,179,237,.12)!important;
  box-shadow:none!important;
  position:relative!important;
  overflow:visible!important;
}

/* ── Top Bar ── */
#inventoryVaultPage .iv-topbar{
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(99,179,237,.12)!important;
  border-radius:10px!important;
  padding:10px 16px!important;
  box-shadow:none!important;
}
#inventoryVaultPage .iv-title-wrap .label{
  font-size:15px!important;
  font-weight:900!important;
  color:rgba(255,255,255,.88)!important;
  border-bottom:none!important;
  padding-bottom:0!important;
  margin-bottom:0!important;
}
#inventoryVaultPage .iv-title-wrap .smart-tool-codename{
  font-family:'Courier New',monospace!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:1.8px!important;
  color:rgba(56,189,248,.75)!important;
  background:rgba(56,189,248,.08)!important;
  border:1px solid rgba(56,189,248,.15)!important;
  border-radius:5px!important;
  padding:3px 8px!important;
}
#inventoryVaultPage #inventoryVaultBackBtn{
  background:rgba(99,179,237,.1)!important;
  border:1px solid rgba(99,179,237,.2)!important;
  color:#38bdf8!important;
  font-size:12px!important;
  font-weight:700!important;
  padding:6px 14px!important;
  border-radius:8px!important;
  box-shadow:none!important;
}
#inventoryVaultPage #inventoryVaultBackBtn:hover{
  background:rgba(99,179,237,.2)!important;
  border-color:rgba(99,179,237,.38)!important;
}

/* ── Hero — compact ── */
#inventoryVaultPage .iv-hero{
  padding:16px 20px!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.02)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  box-shadow:none!important;
  align-items:center!important;
  gap:14px!important;
}
#inventoryVaultPage .iv-hero h1{
  font-size:1.45rem!important;
  margin:0 0 5px!important;
}
#inventoryVaultPage .iv-hero p{
  font-size:.9rem!important;
  line-height:1.65!important;
}
#inventoryVaultPage .iv-badge{
  padding:5px 10px!important;
  font-size:.8rem!important;
  border-radius:6px!important;
  font-weight:700!important;
  border-color:rgba(56,189,248,.2)!important;
  background:rgba(56,189,248,.07)!important;
  color:rgba(255,255,255,.7)!important;
}

/* ── Mode Bar (Actor Box) — integrated card ── */
#inventoryVaultPage .iv-mode-bar{
  background:rgba(255,255,255,.02)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:10px!important;
  padding:12px 16px!important;
}
#inventoryVaultPage #inventoryVaultRefreshBtn{
  background:rgba(16,185,129,.12)!important;
  border:1px solid rgba(16,185,129,.28)!important;
  color:#10b981!important;
  font-size:12px!important;
  font-weight:700!important;
  box-shadow:none!important;
}
#inventoryVaultPage #inventoryVaultRefreshBtn:hover{
  background:rgba(16,185,129,.22)!important;
  border-color:rgba(16,185,129,.48)!important;
}

/* ── Stats Cards — colored accent top border ── */
#inventoryVaultPage .iv-stat-card{
  padding:13px 16px!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.03)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:none!important;
  position:relative!important;
  overflow:hidden!important;
  transition:transform .2s,border-color .2s!important;
}
#inventoryVaultPage .iv-stat-card:hover{
  transform:translateY(-2px)!important;
}
#inventoryVaultPage .iv-stat-card::before{
  content:''!important;
  position:absolute!important;
  top:0!important;left:0!important;right:0!important;
  height:2px!important;
  border-radius:2px 2px 0 0!important;
}
#inventoryVaultPage .iv-stat-card:nth-child(1)::before{background:linear-gradient(90deg,#38bdf8,#818cf8)!important;}
#inventoryVaultPage .iv-stat-card:nth-child(2)::before{background:linear-gradient(90deg,#10b981,#38bdf8)!important;}
#inventoryVaultPage .iv-stat-card:nth-child(3)::before{background:linear-gradient(90deg,#a78bfa,#f472b6)!important;}
#inventoryVaultPage .iv-stat-card:nth-child(4)::before{background:linear-gradient(90deg,#f59e0b,#f87171)!important;}
#inventoryVaultPage .iv-stat-card:nth-child(5)::before{background:linear-gradient(90deg,#6366f1,#8b5cf6)!important;}
#inventoryVaultPage .iv-stat-card:nth-child(6)::before{background:linear-gradient(90deg,#ec4899,#f43f5e)!important;}
#inventoryVaultPage .iv-stat-label{
  font-size:.84rem!important;
  letter-spacing:.2px!important;
}
#inventoryVaultPage .iv-stat-value{
  font-size:1.75rem!important;
  font-family:'Courier New',monospace!important;
  margin-top:6px!important;
}
#inventoryVaultPage .iv-stat-sub{
  font-size:.8rem!important;
  margin-top:4px!important;
}

/* ── Alert Cards ── */
#inventoryVaultPage .iv-alert-card{
  border-radius:12px!important;
  padding:13px 16px!important;
}
#inventoryVaultPage .iv-alert-title{
  font-size:.93rem!important;
  margin-bottom:5px!important;
}
#inventoryVaultPage .iv-alert-body{
  font-size:.88rem!important;
  line-height:1.7!important;
}

/* ── Panels ── */
#inventoryVaultPage .iv-panel{
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:12px!important;
  padding:16px 18px!important;
  box-shadow:none!important;
}
#inventoryVaultPage .iv-panel-head{
  padding-bottom:10px!important;
  margin-bottom:12px!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
}
#inventoryVaultPage .iv-panel-title{
  font-size:.96rem!important;
  font-weight:800!important;
  color:rgba(255,255,255,.78)!important;
  letter-spacing:.2px!important;
}

/* ── Import section ── */
#inventoryVaultPage .iv-import-grid{
  gap:8px!important;
}
#inventoryVaultPage .iv-filter-grid .field label,
#inventoryVaultPage .iv-import-grid .field label{
  font-size:10.5px!important;
  font-weight:700!important;
  letter-spacing:.25px!important;
  color:rgba(148,163,184,.65)!important;
  margin-bottom:4px!important;
  display:block!important;
  text-transform:uppercase!important;
}
#inventoryVaultPage .iv-import-grid input:not([type="file"]),
#inventoryVaultPage .iv-import-grid select,
#inventoryVaultPage .iv-filter-grid input,
#inventoryVaultPage .iv-filter-grid select{
  padding:10px 12px!important;
  font-size:13px!important;
  border-radius:10px!important;
  border:1px solid rgba(99,102,241,.18)!important;
  background:rgba(10,16,42,.65)!important;
  color:var(--text)!important;
  transition:border-color .18s ease,box-shadow .18s ease!important;
  height:auto!important;
  box-sizing:border-box!important;
}
#inventoryVaultPage .iv-import-grid input:not([type="file"]):focus,
#inventoryVaultPage .iv-import-grid select:focus,
#inventoryVaultPage .iv-filter-grid input:focus,
#inventoryVaultPage .iv-filter-grid select:focus{
  border-color:rgba(99,102,241,.52)!important;
  box-shadow:0 0 0 3px rgba(99,102,241,.13)!important;
  outline:none!important;
}
/* access mode + qty inline */
#inventoryVaultPage .iv-access-inline{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
}
#inventoryVaultPage .iv-access-inline select{
  flex:1!important;
  min-width:0!important;
}
#inventoryVaultPage .iv-shared-qty-wrap{
  display:flex!important;
  align-items:center!important;
}
#inventoryVaultPage .iv-shared-qty-wrap.hidden{
  display:none!important;
}
#inventoryVaultPage .iv-shared-qty-wrap input{
  width:62px!important;
  text-align:center!important;
  padding:8px 6px!important;
  flex-shrink:0!important;
  border-radius:10px!important;
  border:1px solid rgba(99,102,241,.18)!important;
  background:rgba(10,16,42,.65)!important;
  color:var(--text)!important;
  font-size:13px!important;
  font-weight:700!important;
}
/* custom select — hide native arrow, add indigo chevron */
#inventoryVaultPage .iv-import-grid select,
#inventoryVaultPage .iv-filter-grid select{
  appearance:none!important;
  -webkit-appearance:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236366f1' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:left 11px center!important;
  padding-left:30px!important;
  cursor:pointer!important;
}
/* file input */
#inventoryVaultPage #inventoryVaultFile{
  padding:8px 12px!important;
  font-size:12px!important;
  border-radius:10px!important;
  border:1px dashed rgba(99,102,241,.32)!important;
  background:rgba(99,102,241,.05)!important;
  color:rgba(165,180,252,.85)!important;
  cursor:pointer!important;
  width:100%!important;
  box-sizing:border-box!important;
  transition:border-color .18s ease!important;
}
#inventoryVaultPage #inventoryVaultFile:hover{
  border-color:rgba(99,102,241,.55)!important;
  background:rgba(99,102,241,.09)!important;
}
/* actions row — pull it tight */
#inventoryVaultPage .iv-panel > .actions{
  margin-top:10px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
#inventoryVaultPage .iv-import-help{
  font-size:.82rem!important;
  padding:8px 12px!important;
  border-radius:9px!important;
  margin-top:8px!important;
  line-height:1.6!important;
  color:rgba(148,163,184,.6)!important;
}
#inventoryVaultPage .iv-restock-context{
  margin:0 0 10px!important;
  padding:12px 14px!important;
  border-radius:12px!important;
  border:1px solid rgba(59,130,246,.18)!important;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(56,189,248,.12) 0%, rgba(56,189,248,0) 58%),
    linear-gradient(145deg, rgba(17,24,39,.88) 0%, rgba(11,18,32,.92) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
#inventoryVaultPage .iv-restock-context-title{
  color:#93c5fd!important;
  font-size:.77rem!important;
  font-weight:900!important;
  margin-bottom:6px!important;
}
#inventoryVaultPage .iv-restock-context-body{
  color:#dbe7fb!important;
  font-size:.83rem!important;
  line-height:1.85!important;
  font-weight:700!important;
}
#inventoryVaultPage #inventoryVaultPreviewBtn{
  font-size:13px!important;
  font-weight:800!important;
  padding:10px 20px!important;
  border-radius:10px!important;
}

/* ── Product cards ── */
#inventoryVaultPage .iv-product-card{
  padding:13px 15px!important;
  border-radius:12px!important;
}
#inventoryVaultPage .iv-product-name{
  font-size:.97rem!important;
}

/* ── Table container ── */
#inventoryVaultPage .iv-table-wrap{
  border-radius:12px!important;
  border-color:rgba(99,179,237,.12)!important;
  margin-top:12px!important;
}
#inventoryVaultPage .iv-table thead th{
  background:rgba(10,18,38,.92)!important;
  font-size:.82rem!important;
  letter-spacing:.3px!important;
  font-weight:700!important;
  color:rgba(255,255,255,.55)!important;
}
#inventoryVaultPage .iv-table td{
  font-size:.88rem!important;
}
/* ── Full Info Modal – v3 ── */

/* Overlay */
#inventoryVaultFullInfoModal .iv-fullinfo-overlay{
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
  background:rgba(6,12,28,.74)!important;
}

/* Modal card */
#inventoryVaultFullInfoModal .iv-fullinfo-modal-card{
  width:min(660px,96vw)!important;
  max-height:86vh!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  padding:0!important;
  border-radius:18px!important;
  box-shadow:0 28px 60px rgba(0,0,0,.58),0 0 0 1px rgba(99,179,237,.14)!important;
}

/* Header */
#inventoryVaultFullInfoModal .iv-fullinfo-modal-card .iv-panel-head{
  padding:10px 14px!important;
  margin-bottom:0!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  background:linear-gradient(135deg,rgba(16,26,48,.99),rgba(10,18,36,.99))!important;
  border-radius:18px 18px 0 0!important;
  flex-shrink:0!important;
  backdrop-filter:none!important;
  gap:10px!important;
}

/* Title */
#inventoryVaultFullInfoModal .iv-fullinfo-modal-card .iv-panel-title{
  font-size:.88rem!important;
  font-weight:800!important;
  color:rgba(255,255,255,.88)!important;
  letter-spacing:.2px!important;
  white-space:nowrap!important;
}

/* Header action buttons wrapper */
#inventoryVaultFullInfoModal .iv-fullinfo-header-actions{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex-shrink:0!important;
}

/* Copy / Delete buttons – compact sizing */
#inventoryVaultFullInfoModal .iv-fullinfo-action-btn{
  padding:0 12px!important;
  font-size:11.5px!important;
  font-weight:700!important;
  border-radius:8px!important;
  height:28px!important;
  min-width:auto!important;
  white-space:nowrap!important;
  margin:0!important;
  line-height:1!important;
  box-shadow:none!important;
}

/* Close ✕ button */
#inventoryVaultFullInfoCloseBtn{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  padding:0!important;
  border-radius:8px!important;
  font-size:16px!important;
  font-weight:300!important;
  line-height:1!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:rgba(255,255,255,.45)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  transition:background .15s,color .15s,border-color .15s!important;
}
#inventoryVaultFullInfoCloseBtn:hover{
  background:rgba(239,68,68,.2)!important;
  color:#ff9999!important;
  border-color:rgba(239,68,68,.3)!important;
}

/* Body – flex column, scrolls only when necessary */
#inventoryVaultFullInfoModal .iv-fullinfo-body{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  margin-top:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:10px 12px 12px!important;
  flex:1!important;
}

/* Section separator */
#inventoryVaultFullInfoModal .iv-fullinfo-section-title{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  font-size:10px!important;
  font-weight:800!important;
  color:rgba(99,179,237,.72)!important;
  letter-spacing:1px!important;
  text-transform:uppercase!important;
  margin:0!important;
  padding:0!important;
  flex-shrink:0!important;
}
#inventoryVaultFullInfoModal .iv-fullinfo-section-title::after{
  content:''!important;
  flex:1!important;
  height:1px!important;
  background:rgba(99,179,237,.18)!important;
  display:block!important;
}

/* ── 2-column field grid ──
   third  = span 1 → 2 per row (50%)
   half   = span 1 → 2 per row (50%)
   full   = span 2 → 1 per row (100%)  */
#inventoryVaultFullInfoModal .iv-fullinfo-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
  background:rgba(11,19,38,.55)!important;
  border:1px solid rgba(99,179,237,.1)!important;
  border-radius:13px!important;
  padding:7px!important;
  overflow:visible!important;
  margin:0!important;
}

/* ── Meta grid: 6-col layout ── */
#inventoryVaultFullInfoModal .iv-fullinfo-grid.iv-fullinfo-grid-meta{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
/* نام محصول + وضعیت → 50% each (2 per row) */
#inventoryVaultFullInfoModal .iv-fullinfo-grid-meta .iv-fullinfo-row:nth-child(1),
#inventoryVaultFullInfoModal .iv-fullinfo-grid-meta .iv-fullinfo-row:nth-child(2){
  grid-column:span 3!important;
}
/* ایمیل → full width */
#inventoryVaultFullInfoModal .iv-fullinfo-grid-meta .iv-fullinfo-row:nth-child(3){
  grid-column:span 6!important;
}
/* سفارش + ادمین + آخرین بروزرسانی → 33% each (3 per row) */
#inventoryVaultFullInfoModal .iv-fullinfo-grid-meta .iv-fullinfo-row:nth-child(4),
#inventoryVaultFullInfoModal .iv-fullinfo-grid-meta .iv-fullinfo-row:nth-child(5),
#inventoryVaultFullInfoModal .iv-fullinfo-grid-meta .iv-fullinfo-row:nth-child(6){
  grid-column:span 2!important;
}

/* Base field card */
#inventoryVaultFullInfoModal .iv-fullinfo-row{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:stretch!important;
  gap:2px!important;
  padding:5px 10px!important;
  background:rgba(18,30,54,.72)!important;
  border:1px solid rgba(99,179,237,.09)!important;
  border-radius:9px!important;
  margin:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  min-width:0!important;
  grid-column:span 1!important;
  min-height:36px!important;
  transition:background .12s,border-color .12s!important;
}
#inventoryVaultFullInfoModal .iv-fullinfo-row:hover{
  background:rgba(26,44,78,.8)!important;
  border-color:rgba(99,179,237,.2)!important;
}

/* Size variants */
#inventoryVaultFullInfoModal .iv-fullinfo-row-third{
  grid-column:span 1!important;
}
#inventoryVaultFullInfoModal .iv-fullinfo-row-half{
  grid-column:span 1!important;
}
#inventoryVaultFullInfoModal .iv-fullinfo-row-full{
  grid-column:span 2!important;
}

/* Label – small muted text at top of card */
#inventoryVaultFullInfoModal .iv-fullinfo-label{
  font-size:10px!important;
  font-weight:600!important;
  color:rgba(148,163,184,.6)!important;
  line-height:1.2!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  padding:0!important;
  margin:0!important;
}

/* Value – prominent text below label */
#inventoryVaultFullInfoModal .iv-fullinfo-value{
  font-size:13px!important;
  font-weight:700!important;
  color:#d4e8fc!important;
  word-break:break-word!important;
  overflow-wrap:anywhere!important;
  line-height:1.3!important;
  text-align:center!important;
  padding:0!important;
  margin:0!important;
}
#inventoryVaultFullInfoModal .iv-fullinfo-value.iv-status-tone-active{
  color:#74f0ac!important;
  text-shadow:0 0 14px rgba(16,185,129,.18)!important;
}
#inventoryVaultFullInfoModal .iv-fullinfo-value.iv-status-tone-assigned{
  color:#8eb7ff!important;
  text-shadow:0 0 14px rgba(59,130,246,.18)!important;
}
#inventoryVaultFullInfoModal .iv-fullinfo-value.iv-status-tone-broken{
  color:#ff9f9f!important;
  text-shadow:0 0 14px rgba(239,68,68,.18)!important;
}
#inventoryVaultFullInfoModal .iv-fullinfo-value.iv-status-tone-inactive{
  color:#b7c2d6!important;
  text-shadow:none!important;
}
#inventoryVaultFullInfoModal .iv-fullinfo-value.iv-status-tone-neutral{
  color:#f5d07f!important;
  text-shadow:0 0 14px rgba(245,158,11,.14)!important;
}
/* LTR values (emails, keys, tokens) also centered */
#inventoryVaultFullInfoModal .iv-fullinfo-value.ltr-inline{
  text-align:center!important;
  direction:ltr!important;
}

/* ── Light theme ── */
body.light-theme #inventoryVaultFullInfoModal .iv-fullinfo-modal-card .iv-panel-head{
  background:linear-gradient(135deg,#eef2fb,#e8edfb)!important;
  border-bottom-color:rgba(148,163,184,.18)!important;
}
body.light-theme #inventoryVaultFullInfoModal .iv-fullinfo-modal-card .iv-panel-title{
  color:#1e293b!important;
}
body.light-theme #inventoryVaultFullInfoModal .iv-fullinfo-value.iv-status-tone-active{
  color:#047857!important;
}
body.light-theme #inventoryVaultFullInfoModal .iv-fullinfo-value.iv-status-tone-assigned{
  color:#1d4ed8!important;
}
body.light-theme #inventoryVaultFullInfoModal .iv-fullinfo-value.iv-status-tone-broken{
  color:#b91c1c!important;
}
body.light-theme #inventoryVaultFullInfoModal .iv-fullinfo-value.iv-status-tone-inactive{
  color:#64748b!important;
}
body.light-theme #inventoryVaultFullInfoModal .iv-fullinfo-value.iv-status-tone-neutral{
  color:#b45309!important;
}

/* ══════════════════════════════════════════
   Suppliers Registry – v2
   Scope: #suppliersPage + #supplierDetailModal
   ══════════════════════════════════════════ */

/* ── Page container ── */
#suppliersPage{
  padding:16px 20px!important;
}

/* ── Shell (vertical stack) ── */
#suppliersPage .sup-shell{
  display:grid;
  gap:10px;
}

/* ── Hero → compact info banner ── */
#suppliersPage .sup-hero{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:10px 16px;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid rgba(99,179,237,.14);
  background:linear-gradient(135deg,rgba(13,22,42,.9),rgba(17,33,62,.75));
}
#suppliersPage .sup-hero h1{
  margin:0;
  font-size:.95rem;
  font-weight:800;
  color:#e5eefc;
  white-space:nowrap;
  flex-shrink:0;
}
#suppliersPage .sup-hero p{
  margin:0;
  font-size:.76rem;
  color:rgba(203,213,225,.72);
  line-height:1.6;
  flex:1;
  min-width:180px;
}

/* ── Two-column grid ── */
#suppliersPage .sup-grid{
  display:grid;
  grid-template-columns:minmax(250px,320px) minmax(0,1fr);
  gap:10px;
  align-items:start;
}

/* ── Panel cards ── */
#suppliersPage .sup-panel{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(99,179,237,.12);
  background:linear-gradient(145deg,rgba(14,24,46,.9),rgba(18,31,58,.8));
}
/* Panel cards inside the detail modal share the same class */
#supplierDetailModal .sup-panel{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(99,179,237,.12);
  background:linear-gradient(145deg,rgba(14,24,46,.9),rgba(18,31,58,.8));
}

/* ── Panel header ── */
#suppliersPage .sup-panel-head,
#supplierDetailModal .sup-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  padding-bottom:7px;
  border-bottom:1px solid rgba(99,179,237,.1);
}

/* ── Panel title ── */
#suppliersPage .sup-panel-title,
#supplierDetailModal .sup-panel-title{
  font-size:.83rem;
  font-weight:800;
  color:#e5eefc;
  letter-spacing:.15px;
}

/* ── Create-supplier form ── */
#suppliersPage .sup-form{
  display:grid;
  gap:10px;
}

/* ── Stats bar (main page + modal) ── */
#suppliersPage .sup-stats,
#supplierDetailModal .sup-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-bottom:10px;
}
/* Detail modal shows 4 stat cards */
#supplierDetailModal .sup-stats{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

/* ── Stat card ── */
#suppliersPage .sup-stat-card,
#supplierDetailModal .sup-stat-card{
  padding:8px 10px;
  border-radius:11px;
  border:1px solid rgba(99,179,237,.11);
  background:rgba(11,23,45,.72);
}

/* ── Stat label ── */
#suppliersPage .sup-stat-label,
#supplierDetailModal .sup-stat-label{
  font-size:10px;
  font-weight:600;
  color:rgba(148,163,184,.78);
  margin-bottom:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ── Stat value ── */
#suppliersPage .sup-stat-value,
#supplierDetailModal .sup-stat-value{
  font-size:1.25rem;
  font-weight:900;
  color:#f8fbff;
  line-height:1.1;
}

/* ── Suppliers table ── */
#suppliersPage .sup-table,
#supplierDetailModal .sup-table{
  width:100%;
  border-collapse:collapse;
}
#suppliersPage .sup-table th,
#suppliersPage .sup-table td,
#supplierDetailModal .sup-table th,
#supplierDetailModal .sup-table td{
  padding:7px 8px;
  border-bottom:1px solid rgba(99,179,237,.08);
  text-align:right;
  vertical-align:middle;
}
#suppliersPage .sup-table th,
#supplierDetailModal .sup-table th{
  font-size:11px;
  font-weight:700;
  color:rgba(148,163,184,.72);
  background:rgba(11,19,38,.45);
  white-space:nowrap;
}
#suppliersPage .sup-table tbody tr:hover,
#supplierDetailModal .sup-table tbody tr:hover{
  background:rgba(99,179,237,.05);
}
#suppliersPage .sup-table tbody tr:last-child td,
#supplierDetailModal .sup-table tbody tr:last-child td{
  border-bottom:none;
}

/* ── Name cell (in suppliers list) ── */
#suppliersPage .sup-name-cell{
  display:flex;
  flex-direction:column;
  gap:3px;
}
#suppliersPage .sup-name-main{
  font-size:.875rem;
  font-weight:700;
}
#suppliersPage .sup-name-meta{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  font-size:10.5px;
  color:rgba(148,163,184,.78);
}
/* Trust/Broken inline values */
#suppliersPage .sup-name-meta span:not(:last-child){
  color:rgba(148,163,184,.65);
}
/* Risk label → chip badge (last span in the meta) */
#suppliersPage .sup-name-meta span:last-child{
  padding:1px 8px;
  border-radius:20px;
  font-size:10px;
  font-weight:700;
  line-height:1.7;
  display:inline-block;
}

/* ── Risk: name colour ── */
#suppliersPage .sup-risk-critical  .sup-name-main{ color:#f87171; }
#suppliersPage .sup-risk-warning   .sup-name-main{ color:#fbbf24; }
#suppliersPage .sup-risk-attention .sup-name-main{ color:#fb923c; }
#suppliersPage .sup-risk-healthy   .sup-name-main{ color:#34d399; }
#suppliersPage .sup-risk-neutral   .sup-name-main{ color:#e2e8f0; }

/* ── Risk: badge chip ── */
#suppliersPage .sup-risk-critical  .sup-name-meta span:last-child{ background:rgba(248,113,113,.13); color:#f87171; border:1px solid rgba(248,113,113,.28); }
#suppliersPage .sup-risk-warning   .sup-name-meta span:last-child{ background:rgba(251,191,36,.13);  color:#fbbf24; border:1px solid rgba(251,191,36,.28); }
#suppliersPage .sup-risk-attention .sup-name-meta span:last-child{ background:rgba(251,146,60,.13);  color:#fb923c; border:1px solid rgba(251,146,60,.28); }
#suppliersPage .sup-risk-healthy   .sup-name-meta span:last-child{ background:rgba(52,211,153,.13);  color:#34d399; border:1px solid rgba(52,211,153,.28); }
#suppliersPage .sup-risk-neutral   .sup-name-meta span:last-child{ background:rgba(226,232,240,.07); color:#94a3b8; border:1px solid rgba(226,232,240,.14); }

/* ── Empty state ── */
#suppliersPage .sup-empty,
#supplierDetailModal .sup-empty{
  text-align:center;
  color:rgba(148,163,184,.7);
  padding:18px 12px!important;
  font-size:.8rem;
}

/* ══════════════════════════════════════════
   Detail Modal (#supplierDetailModal)
   ══════════════════════════════════════════ */

/* Modal card sizing */
#supplierDetailModal .sup-detail-modal-card,
.sup-detail-modal-card{
  width:min(1080px,94vw)!important;
  max-height:90vh!important;
  overflow:auto!important;
  padding:14px 16px!important;
}

/* Two-column layout inside modal */
#supplierDetailModal .sup-detail-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:10px;
  margin-top:10px;
}

/* Summary lines */
#supplierDetailModal .sup-detail-summary{
  display:grid;
  gap:5px;
}
#supplierDetailModal .sup-detail-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:7px 11px;
  border-radius:10px;
  border:1px solid rgba(99,179,237,.11);
  background:rgba(11,23,45,.44);
  font-size:.8rem;
}

/* Delete section hint text */
#supplierDetailModal .sup-detail-delete-hint{
  font-size:11.5px;
  line-height:1.7;
  color:rgba(148,163,184,.85);
}

/* Textarea + select inside modal */
#supplierDetailDescription,
#supplierDetailReplacementSelect{
  width:100%;
  padding:8px 11px;
  border:1px solid rgba(99,179,237,.18);
  border-radius:10px;
  background:rgba(11,23,45,.72);
  color:#e5eefc;
  font-family:inherit;
  font-size:.85rem;
  box-sizing:border-box;
}
#supplierDetailDescription{
  min-height:130px;
  resize:vertical;
  line-height:1.8;
}
#supplierDetailReplacementSelect option{
  background:#0f172a;
  color:#e5eefc;
}

/* ══════════════════════════════════════════
   Light theme – suppliersRegistry
   ══════════════════════════════════════════ */
body.light-theme #suppliersPage .sup-hero{
  background:linear-gradient(135deg,#eef4ff,#f0f5ff);
  border-color:rgba(99,144,210,.18);
}
body.light-theme #suppliersPage .sup-hero h1{ color:#0f172a; }
body.light-theme #suppliersPage .sup-hero p{ color:#475569; }

body.light-theme #suppliersPage .sup-panel,
body.light-theme #supplierDetailModal .sup-panel{
  background:linear-gradient(145deg,#f8fbff,#eef4ff);
  border-color:rgba(99,144,210,.16);
}
body.light-theme #suppliersPage .sup-panel-title,
body.light-theme #supplierDetailModal .sup-panel-title{ color:#0f172a; }
body.light-theme #suppliersPage .sup-panel-head,
body.light-theme #supplierDetailModal .sup-panel-head{
  border-bottom-color:rgba(99,144,210,.14);
}

body.light-theme #suppliersPage .sup-stat-card,
body.light-theme #supplierDetailModal .sup-stat-card{
  background:rgba(255,255,255,.88);
  border-color:rgba(99,144,210,.16);
}
body.light-theme #suppliersPage .sup-stat-label,
body.light-theme #supplierDetailModal .sup-stat-label{ color:#64748b; }
body.light-theme #suppliersPage .sup-stat-value,
body.light-theme #supplierDetailModal .sup-stat-value{ color:#0f172a; }

body.light-theme #suppliersPage .sup-table th,
body.light-theme #supplierDetailModal .sup-table th{
  background:rgba(99,144,210,.07);
  color:#64748b;
}
body.light-theme #suppliersPage .sup-table td,
body.light-theme #supplierDetailModal .sup-table td{ color:#0f172a; }
body.light-theme #suppliersPage .sup-table tbody tr:hover,
body.light-theme #supplierDetailModal .sup-table tbody tr:hover{ background:rgba(99,144,210,.06); }
body.light-theme #suppliersPage .sup-table th,
body.light-theme #suppliersPage .sup-table td,
body.light-theme #supplierDetailModal .sup-table th,
body.light-theme #supplierDetailModal .sup-table td{
  border-bottom-color:rgba(99,144,210,.12);
}

body.light-theme #suppliersPage .sup-name-meta{ color:#64748b; }
body.light-theme #suppliersPage .sup-empty,
body.light-theme #supplierDetailModal .sup-empty{ color:#64748b; }

/* Light risk: name */
body.light-theme #suppliersPage .sup-risk-critical  .sup-name-main{ color:#dc2626; }
body.light-theme #suppliersPage .sup-risk-warning   .sup-name-main{ color:#b45309; }
body.light-theme #suppliersPage .sup-risk-attention .sup-name-main{ color:#ea580c; }
body.light-theme #suppliersPage .sup-risk-healthy   .sup-name-main{ color:#059669; }
body.light-theme #suppliersPage .sup-risk-neutral   .sup-name-main{ color:#0f172a; }
/* Light risk: badge */
body.light-theme #suppliersPage .sup-risk-critical  .sup-name-meta span:last-child{ background:rgba(220,38,38,.08);  color:#dc2626; border-color:rgba(220,38,38,.22); }
body.light-theme #suppliersPage .sup-risk-warning   .sup-name-meta span:last-child{ background:rgba(180,83,9,.08);   color:#b45309; border-color:rgba(180,83,9,.22); }
body.light-theme #suppliersPage .sup-risk-attention .sup-name-meta span:last-child{ background:rgba(234,88,12,.08);  color:#ea580c; border-color:rgba(234,88,12,.22); }
body.light-theme #suppliersPage .sup-risk-healthy   .sup-name-meta span:last-child{ background:rgba(5,150,105,.08);  color:#059669; border-color:rgba(5,150,105,.22); }
body.light-theme #suppliersPage .sup-risk-neutral   .sup-name-meta span:last-child{ background:rgba(100,116,139,.07);color:#64748b; border-color:rgba(100,116,139,.16); }

body.light-theme #supplierDetailModal .sup-detail-line{
  background:rgba(255,255,255,.78);
  border-color:rgba(99,144,210,.14);
  color:#0f172a;
}
body.light-theme #supplierDetailDescription,
body.light-theme #supplierDetailReplacementSelect{
  background:rgba(255,255,255,.94);
  color:#0f172a;
  border-color:rgba(99,144,210,.2);
}
body.light-theme #supplierDetailReplacementSelect option{
  background:#ffffff;
  color:#0f172a;
}
body.light-theme #supplierDetailModal .sup-detail-delete-hint{ color:#64748b; }

/* ══════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════ */
@media (max-width:980px){
  #suppliersPage .sup-grid{ grid-template-columns:1fr; }
  #supplierDetailModal .sup-detail-grid{ grid-template-columns:1fr; }
  #supplierDetailModal .sup-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  #suppliersPage .sup-stats{ grid-template-columns:1fr 1fr; }
  #supplierDetailModal .sup-stats{ grid-template-columns:1fr 1fr; }
  #suppliersPage .sup-hero{ flex-direction:column; }
}

/* ══════════════════════════════════════════
   Notifications Hub – v2
   Scope: #notificationsPage  (shared rules also cover #salesNotificationsSection)
   ══════════════════════════════════════════ */

/* ── Page ── */
#notificationsPage{
  padding:16px 20px;
}
#reviewRequestsContentPage,
#reviewRequestsManagementPage{
  padding:16px 20px;
}

/* ── Vertical shell ── */
#notificationsPage .noti-shell{
  display:grid;
  gap:10px;
}
#reviewRequestsContentPage .noti-shell,
#reviewRequestsManagementPage .noti-shell{
  display:grid;
  gap:10px;
}

/* ── Hero → compact info banner ── */
#notificationsPage .noti-hero{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 16px;
  padding:10px 16px;
  border-radius:13px;
  border:1px solid rgba(99,144,210,.16);
  background:linear-gradient(135deg,rgba(8,20,44,.92),rgba(18,35,76,.82));
}
#reviewRequestsContentPage .noti-hero,
#reviewRequestsManagementPage .noti-hero{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 16px;
  padding:10px 16px;
  border-radius:13px;
  border:1px solid rgba(99,144,210,.16);
  background:linear-gradient(135deg,rgba(8,20,44,.92),rgba(18,35,76,.82));
}
#notificationsPage .noti-hero h1{
  margin:0;
  font-size:.95rem;
  font-weight:800;
  color:#f8fafc;
  white-space:nowrap;
  flex-shrink:0;
}
#reviewRequestsContentPage .noti-hero h1,
#reviewRequestsManagementPage .noti-hero h1{
  margin:0;
  font-size:.95rem;
  font-weight:800;
  color:#f8fafc;
  white-space:nowrap;
  flex-shrink:0;
}
#notificationsPage .noti-hero p{
  margin:0;
  font-size:.76rem;
  line-height:1.6;
  color:rgba(184,197,221,.82);
  flex:1;
  min-width:180px;
}
#reviewRequestsContentPage .noti-hero p,
#reviewRequestsManagementPage .noti-hero p{
  margin:0;
  font-size:.76rem;
  line-height:1.6;
  color:rgba(184,197,221,.82);
  flex:1;
  min-width:180px;
}

/* ── Two-panel grid ── */
#notificationsPage .noti-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:10px;
  align-items:start;
}
#reviewRequestsContentPage .noti-grid,
#reviewRequestsManagementPage .noti-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  align-items:start;
}

/* ── Panel card ── */
#notificationsPage .noti-panel{
  border-radius:15px;
  border:1px solid rgba(99,144,210,.14);
  background:linear-gradient(160deg,rgba(7,18,42,.92),rgba(10,24,57,.86));
  padding:13px 15px;
}
#reviewRequestsContentPage .noti-panel,
#reviewRequestsManagementPage .noti-panel{
  border-radius:15px;
  border:1px solid rgba(99,144,210,.14);
  background:linear-gradient(160deg,rgba(7,18,42,.92),rgba(10,24,57,.86));
  padding:13px 15px;
}

/* ── Panel header ── */
#notificationsPage .noti-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:8px;
  margin-bottom:10px;
  border-bottom:1px solid rgba(99,144,210,.12);
}
#reviewRequestsContentPage .noti-panel-head,
#reviewRequestsManagementPage .noti-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:8px;
  margin-bottom:10px;
  border-bottom:1px solid rgba(99,144,210,.12);
}

/* ── Panel title ── */
#notificationsPage .noti-panel-title{
  color:#f8fafc;
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.12px;
}
#notificationsArchivePage .noti-panel-title{
  color:#f8fafc;
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.12px;
}
#reviewRequestsContentPage .noti-panel-title,
#reviewRequestsManagementPage .noti-panel-title{
  color:#f8fafc;
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.12px;
}

/* ── Compose form: 2-column grid ── */
#notificationsPage .noti-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
#notificationsPage .noti-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
#notificationsPage .noti-panel{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
#notificationsPage .noti-panel-archive-preview{
  overflow:hidden;
}
#notificationsPage .noti-panel-archive-preview #notificationsArchiveList{
  flex:1;
  align-content:start;
}
#notificationsPage .noti-kind-chip,
#salesNotificationsSection .noti-kind-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:20px;
  border:1px solid rgba(99,144,210,.16);
  color:#99b4d4;
  background:rgba(8,18,41,.4);
  font-size:10.5px;
  font-weight:600;
  line-height:1.6;
}
#navSalesNotificationsBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
}
#notificationsPage .noti-kind-info,
#salesNotificationsSection .noti-kind-info{
  color:#4ade80;
  border-color:rgba(74,222,128,.26);
  background:rgba(34,197,94,.12);
}
#notificationsPage .noti-kind-important,
#salesNotificationsSection .noti-kind-important{
  color:#f87171;
  border-color:rgba(248,113,113,.28);
  background:rgba(239,68,68,.12);
}
#notificationsPage .noti-kind-task,
#salesNotificationsSection .noti-kind-task{
  color:#fbbf24;
  border-color:rgba(251,191,36,.26);
  background:rgba(245,158,11,.12);
}
#notificationsPage .noti-type-picker{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
#notificationsPage .noti-type-btn{
  min-height:36px;
  border-radius:10px;
  border:1px solid rgba(99,144,210,.16);
  background:rgba(15,28,63,.48);
  color:#d9e4f7;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition:.18s ease;
}
#notificationsPage .noti-type-btn:hover{
  border-color:rgba(125,211,252,.3);
  transform:translateY(-1px);
}
#notificationsPage .noti-type-btn.is-active{
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}
#notificationsPage .noti-type-btn[data-notification-kind="task"].is-active{
  color:#fbbf24;
  border-color:rgba(251,191,36,.28);
  background:rgba(245,158,11,.14);
}
#notificationsPage .noti-type-btn[data-notification-kind="important"].is-active{
  color:#f87171;
  border-color:rgba(248,113,113,.28);
  background:rgba(239,68,68,.14);
}
#notificationsPage .noti-type-btn[data-notification-kind="info"].is-active{
  color:#4ade80;
  border-color:rgba(74,222,128,.28);
  background:rgba(34,197,94,.14);
}
/* عنوان → full width */
#notificationsPage .noti-form .field:nth-child(1){ grid-column:span 2; }
/* نوع اعلان (type picker) → full width */
#notificationsPage .noti-form .field:nth-child(2){ grid-column:span 2; }
/* گیرنده (3rd) + شناسه (4th) → side by side at 50% each (no span rule needed) */
/* متن اعلان → full width */
#notificationsPage .noti-form .field:nth-child(5){ grid-column:span 2; }
/* actions row → full width */
#notificationsPage .noti-form .actions{
  grid-column:span 2;
  margin-top:2px;
  display:flex;
  gap:8px;
  justify-content:flex-end;
}
/* Constrain textarea height so form stays compact */
#notificationsPage #notificationBodyInput{
  min-height:88px!important;
  height:88px!important;
  max-height:220px!important;
  resize:vertical!important;
}
/* Disabled recipients input styling */
#notificationsPage #notificationRecipientsInput:disabled{
  opacity:.38;
  cursor:not-allowed;
}

/* ── Stats bar ── */
#notificationsPage .noti-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-bottom:10px;
}

/* ── Stat card (shared with salesNotificationsSection) ── */
#notificationsPage .noti-stat-card,
#salesNotificationsSection .noti-stat-card,
#reviewRequestsContentPage .noti-stat-card,
#reviewRequestsManagementPage .noti-stat-card{
  padding:8px 10px;
  border-radius:11px;
  border:1px solid rgba(99,144,210,.13);
  background:rgba(15,28,63,.5);
}
#notificationsPage .noti-stat-label,
#salesNotificationsSection .noti-stat-label,
#reviewRequestsContentPage .noti-stat-label,
#reviewRequestsManagementPage .noti-stat-label{
  color:#8ea2c5;
  font-size:10px;
  font-weight:600;
  margin-bottom:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#notificationsPage .noti-stat-value,
#salesNotificationsSection .noti-stat-value,
#reviewRequestsContentPage .noti-stat-value,
#reviewRequestsManagementPage .noti-stat-value{
  color:#f8fafc;
  font-size:1.2rem;
  font-weight:900;
  line-height:1.1;
}

/* ── Archive list ── */
#notificationsPage .noti-archive-list,
#salesNotificationsSection .noti-archive-list,
#reviewRequestsContentPage .noti-archive-list,
#reviewRequestsManagementPage .noti-archive-list{
  display:grid;
  gap:7px;
}
#notificationsArchivePage .noti-archive-list{
  display:grid;
  gap:10px;
}

/* ── Archive card ── */
#notificationsPage .noti-archive-card,
#salesNotificationsSection .noti-archive-card,
#reviewRequestsContentPage .noti-archive-card,
#reviewRequestsManagementPage .noti-archive-card{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(99,144,210,.13);
  background:rgba(15,28,63,.48);
  color:#c8d8f0;
  line-height:1.6;
}
#notificationsArchivePage .noti-archive-card{
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(148,185,255,.11);
  background:linear-gradient(135deg,rgba(15,30,70,.52) 0%,rgba(8,18,45,.46) 100%);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  color:#dce8f8;
  line-height:1.7;
  box-shadow:0 4px 20px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.04) inset;
  transition:transform .18s ease,box-shadow .18s ease;
}
#notificationsArchivePage .noti-archive-card:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 28px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.06) inset;
}

/* ── Card top row ── */
#notificationsPage .noti-archive-top,
#salesNotificationsSection .noti-archive-top,
#reviewRequestsContentPage .noti-archive-top,
#reviewRequestsManagementPage .noti-archive-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
#notificationsPage .noti-archive-top h3,
#salesNotificationsSection .noti-archive-top h3,
#reviewRequestsContentPage .noti-archive-top h3,
#reviewRequestsManagementPage .noti-archive-top h3{
  margin:0 0 5px;
  font-size:.875rem;
  font-weight:700;
  color:#f1f6ff;
}
#notificationsArchivePage .noti-archive-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
#notificationsArchivePage .noti-archive-top h3{
  margin:0 0 5px;
  font-size:.95rem;
  font-weight:800;
  color:#eef4ff;
  letter-spacing:-.01em;
}

/* ── Meta badge row ── */
#notificationsPage .noti-archive-meta,
#salesNotificationsSection .noti-archive-meta,
#reviewRequestsContentPage .noti-archive-meta,
#reviewRequestsManagementPage .noti-archive-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
}
#notificationsPage .noti-archive-meta span,
#salesNotificationsSection .noti-archive-meta span,
#reviewRequestsContentPage .noti-archive-meta span,
#reviewRequestsManagementPage .noti-archive-meta span{
  padding:2px 8px;
  border-radius:20px;
  border:1px solid rgba(99,144,210,.16);
  color:#99b4d4;
  background:rgba(8,18,41,.4);
  font-size:10.5px;
  font-weight:600;
  line-height:1.6;
  display:inline-block;
}
#notificationsArchivePage .noti-archive-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
}
#notificationsArchivePage .noti-archive-meta span{
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(99,144,210,.18);
  color:#9ab4d2;
  background:rgba(8,18,41,.28);
  backdrop-filter:blur(8px);
  font-size:10px;
  font-weight:700;
  line-height:1.6;
  display:inline-block;
}

/* Card type accents + body border coloring */
#notificationsPage .noti-archive-important,
#salesNotificationsSection .noti-archive-important,
#reviewRequestsContentPage .noti-archive-important,
#reviewRequestsManagementPage .noti-archive-important{
  border-color:rgba(248,113,113,.28);
  background:linear-gradient(160deg,rgba(60,14,22,.5),rgba(28,14,32,.55));
}
#notificationsPage .noti-archive-task,
#salesNotificationsSection .noti-archive-task,
#reviewRequestsContentPage .noti-archive-task,
#reviewRequestsManagementPage .noti-archive-task{
  border-color:rgba(251,191,36,.22);
  background:linear-gradient(160deg,rgba(40,30,8,.5),rgba(24,20,10,.55));
}
#notificationsPage .noti-archive-info,
#salesNotificationsSection .noti-archive-info,
#reviewRequestsContentPage .noti-archive-info,
#reviewRequestsManagementPage .noti-archive-info{
  border-color:rgba(74,222,128,.24);
  background:linear-gradient(160deg,rgba(10,42,24,.52),rgba(9,28,20,.58));
}
#notificationsArchivePage .noti-archive-important{
  border-color:rgba(248,113,113,.2);
  background:linear-gradient(135deg,rgba(72,12,22,.52) 0%,rgba(36,10,20,.46) 100%);
  box-shadow:0 4px 20px rgba(239,68,68,.08),0 1px 0 rgba(255,255,255,.03) inset;
}
#notificationsArchivePage .noti-archive-important:hover{
  box-shadow:0 8px 28px rgba(239,68,68,.14),0 1px 0 rgba(255,255,255,.05) inset;
}
#notificationsArchivePage .noti-archive-task{
  border-color:rgba(251,191,36,.18);
  background:linear-gradient(135deg,rgba(56,36,6,.52) 0%,rgba(28,22,8,.46) 100%);
  box-shadow:0 4px 20px rgba(245,158,11,.07),0 1px 0 rgba(255,255,255,.03) inset;
}
#notificationsArchivePage .noti-archive-task:hover{
  box-shadow:0 8px 28px rgba(245,158,11,.12),0 1px 0 rgba(255,255,255,.05) inset;
}
#notificationsArchivePage .noti-archive-info{
  border-color:rgba(74,222,128,.18);
  background:linear-gradient(135deg,rgba(9,44,22,.52) 0%,rgba(7,26,16,.46) 100%);
  box-shadow:0 4px 20px rgba(34,197,94,.07),0 1px 0 rgba(255,255,255,.03) inset;
}
#notificationsArchivePage .noti-archive-info:hover{
  box-shadow:0 8px 28px rgba(34,197,94,.12),0 1px 0 rgba(255,255,255,.05) inset;
}
#notificationsArchivePage .noti-archive-important .noti-archive-body{ border-right-color:rgba(248,113,113,.38); }
#notificationsArchivePage .noti-archive-task .noti-archive-body{ border-right-color:rgba(251,191,36,.38); }
#notificationsArchivePage .noti-archive-info .noti-archive-body{ border-right-color:rgba(74,222,128,.38); }
/* Body quote border matches card type */
#notificationsPage .noti-archive-important .noti-archive-body,
#salesNotificationsSection .noti-archive-important .noti-archive-body{ border-right-color:rgba(248,113,113,.38); }
#notificationsPage .noti-archive-task .noti-archive-body,
#salesNotificationsSection .noti-archive-task .noti-archive-body{ border-right-color:rgba(251,191,36,.38); }
#notificationsPage .noti-archive-info .noti-archive-body,
#salesNotificationsSection .noti-archive-info .noti-archive-body{ border-right-color:rgba(74,222,128,.38); }

/* ── Timestamp ── */
#notificationsPage .noti-archive-time,
#salesNotificationsSection .noti-archive-time,
#reviewRequestsContentPage .noti-archive-time,
#reviewRequestsManagementPage .noti-archive-time{
  color:#7a94b8;
  font-size:11px;
  white-space:nowrap;
  flex-shrink:0;
}
#notificationsArchivePage .noti-archive-time{
  color:#6e8aaa;
  font-size:11px;
  white-space:nowrap;
  flex-shrink:0;
}

/* ── Message body ── */
#notificationsPage .noti-archive-body,
#salesNotificationsSection .noti-archive-body,
#reviewRequestsContentPage .noti-archive-body,
#reviewRequestsManagementPage .noti-archive-body{
  white-space:pre-wrap;
  color:#dce8f8;
  font-size:.8rem;
  line-height:1.7;
  margin-bottom:7px;
  padding:7px 10px;
  background:rgba(8,18,44,.35);
  border-radius:8px;
  border-right:2px solid rgba(99,144,210,.22);
}
#notificationsArchivePage .noti-archive-body{
  width:100%;
  white-space:pre-wrap;
  color:#cde0f5;
  font-size:.85rem;
  line-height:1.85;
  margin-bottom:8px;
  padding:10px 13px;
  background:rgba(6,14,36,.28);
  backdrop-filter:blur(8px);
  border-radius:10px;
  border:1px solid rgba(99,144,210,.1);
  border-right:3px solid rgba(99,144,210,.28);
  word-break:break-word;
}

/* ── Footer (creator / id) ── */
#notificationsPage .noti-archive-footer,
#salesNotificationsSection .noti-archive-footer,
#reviewRequestsContentPage .noti-archive-footer,
#reviewRequestsManagementPage .noti-archive-footer{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  color:#6a85aa;
  font-size:10.5px;
  align-items:center;
}
#notificationsArchivePage .noti-archive-footer{
  display:flex;
  flex-wrap:wrap;
  gap:5px 12px;
  color:#5e7a99;
  font-size:11px;
  align-items:center;
  justify-content:space-between;
  padding-top:7px;
  border-top:1px solid rgba(99,144,210,.09);
}
#notificationsPage .noti-archive-preview-footer{
  display:flex;
  justify-content:flex-start;
  margin-top:auto;
  padding-top:10px;
}
#notificationsArchivePage .noti-shell-archive-page{
  display:flex;
  flex-direction:column;
  gap:12px;
}
#notificationsArchivePage .noti-hero-archive-page{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(18,40,90,.58) 0%,rgba(10,22,55,.5) 100%);
  backdrop-filter:blur(22px) saturate(165%);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  border:1px solid rgba(148,185,255,.1);
  box-shadow:0 4px 18px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.05) inset;
}
#notificationsArchivePage .noti-hero-archive-page h1{
  margin:0 0 5px;
  font-size:1.15rem;
  font-weight:900;
  color:#eef4ff;
  letter-spacing:-.02em;
}
#notificationsArchivePage .noti-hero-archive-page p{
  margin:0;
  color:#7a96b8;
  font-size:.8rem;
  line-height:1.55;
  max-width:440px;
}
#notificationsArchivePage .noti-archive-page-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
#notificationsArchivePage .noti-archive-page-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:32px;
  padding:0 13px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(18,38,85,.55) 0%,rgba(10,22,54,.48) 100%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(148,185,255,.13);
  color:#c0d5f0;
  font-size:11px;
  font-weight:800;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
}
#notificationsPage .noti-archive-footer{
  justify-content:space-between;
}
#notificationsPage .noti-archive-footer .noti-report-btn{
  margin-inline-start:auto;
}
#notificationsPage .noti-report-btn{
  padding:6px 12px!important;
  min-height:34px!important;
  font-size:12px!important;
  line-height:1.2!important;
  border-radius:12px!important;
}
#salesNotificationsSection .noti-read-btn,
#reviewRequestsContentPage .noti-read-btn{
  padding:7px 14px!important;
  min-height:36px!important;
  font-size:12px!important;
  font-weight:800!important;
  border-radius:12px!important;
}
#salesNotificationsSection .noti-read-btn.btn.ok,
#reviewRequestsContentPage .noti-read-btn.btn.ok{
  background:linear-gradient(135deg,#16a34a,#22c55e)!important;
  border-color:rgba(34,197,94,.42)!important;
  color:#f0fdf4!important;
  box-shadow:0 10px 22px rgba(34,197,94,.18)!important;
}
#salesNotificationsSection .noti-read-btn.btn.ghost,
#reviewRequestsContentPage .noti-read-btn.btn.ghost{
  opacity:.72;
}

/* ── Empty state ── */
#notificationsPage .noti-empty,
#salesNotificationsSection .noti-empty,
#reviewRequestsContentPage .noti-empty,
#reviewRequestsManagementPage .noti-empty{
  padding:16px 12px;
  border-radius:12px;
  border:1px dashed rgba(99,144,210,.16);
  color:#7a94b8;
  text-align:center;
  font-size:.8rem;
}
/* ══════════════════════════════════════════
   Report Modal – notificationsHub.reportModal
   ══════════════════════════════════════════ */

/* ── Card shell ── */
#notificationReportModal .noti-report-modal-card{
  width:min(780px,94vw);
  max-height:88vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-radius:18px;
  border:1px solid rgba(99,144,210,.18);
  background:linear-gradient(160deg,rgba(7,18,42,.97),rgba(10,24,57,.93));
  box-shadow:0 28px 60px rgba(0,0,0,.55),0 0 0 1px rgba(99,179,237,.1);
  padding:0;
}

/* ── Header ── */
#notificationReportModal .headRow{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:10px 16px!important;
  margin:0!important;
  border-bottom:1px solid rgba(99,144,210,.12)!important;
  flex-shrink:0!important;
  background:linear-gradient(135deg,rgba(10,24,52,.99),rgba(8,18,44,.99))!important;
  border-radius:18px 18px 0 0!important;
}

/* ── Modal title ── */
#notificationReportModal #notificationReportTitle{
  font-size:.9rem!important;
  font-weight:800!important;
  color:#e8f2ff!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* ── Close button → compact ghost ── */
#notificationReportModal #notificationReportCloseBtn{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  padding:0!important;
  border-radius:8px!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  color:rgba(255,255,255,.45)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  transition:background .15s,color .15s,border-color .15s!important;
  flex-shrink:0!important;
}
#notificationReportModal #notificationReportCloseBtn:hover{
  background:rgba(239,68,68,.18)!important;
  color:#ff9999!important;
  border-color:rgba(239,68,68,.3)!important;
}

/* ── Scrollable content area ── */
#notificationReportModal .noti-report-meta,
#notificationReportModal .noti-report-body{
  overflow-y:auto;
  overflow-x:hidden;
}
#notificationReportModal .noti-report-body{
  flex:1;
  padding:12px 16px 16px;
}

/* ── Meta badge strip ── */
#notificationReportModal .noti-report-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-bottom:1px solid rgba(99,144,210,.08);
  background:rgba(8,18,44,.28);
  flex-shrink:0;
}

/* ── Message block ── */
#notificationReportModal .noti-report-message{
  display:grid;
  gap:6px;
  margin-bottom:14px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(99,144,210,.12);
  background:rgba(8,18,44,.32);
}
#notificationReportModal .noti-report-message-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:rgba(99,144,210,.75);
}
#notificationReportModal .noti-report-message-box{
  padding:10px 12px;
  border-radius:9px;
  border:1px solid rgba(99,144,210,.12);
  border-right:3px solid rgba(99,144,210,.4);
  background:rgba(10,22,50,.45);
  color:#dce8f8;
  white-space:pre-wrap;
  font-size:.85rem;
  line-height:1.8;
}

/* ── Readers table (uses sup-table class) ── */
#notificationReportModal .sup-table{
  width:100%;
  border-collapse:collapse;
}
#notificationReportModal .sup-table th,
#notificationReportModal .sup-table td{
  padding:7px 9px;
  border-bottom:1px solid rgba(99,144,210,.08);
  text-align:right;
  vertical-align:middle;
  font-size:.82rem;
}
#notificationReportModal .sup-table th{
  font-size:10.5px;
  font-weight:700;
  color:rgba(148,163,184,.7);
  background:rgba(10,20,50,.45);
  white-space:nowrap;
}
#notificationReportModal .sup-table tbody tr:hover{
  background:rgba(99,144,210,.06);
}
#notificationReportModal .sup-table tbody tr:last-child td{
  border-bottom:none;
}

/* ── Light theme ── */
body.light-theme #notificationReportModal .noti-report-modal-card{
  background:linear-gradient(160deg,#f9fbff,#eef4ff);
  border-color:rgba(99,144,210,.16);
}
body.light-theme #notificationReportModal .headRow{
  background:linear-gradient(135deg,#eef4ff,#e8edfb)!important;
  border-bottom-color:rgba(99,144,210,.14)!important;
}
body.light-theme #notificationReportModal #notificationReportTitle{
  color:#0f172a!important;
}
body.light-theme #notificationReportModal #notificationReportCloseBtn{
  background:rgba(0,0,0,.05)!important;
  border-color:rgba(0,0,0,.1)!important;
  color:rgba(0,0,0,.4)!important;
}
body.light-theme #notificationReportModal #notificationReportCloseBtn:hover{
  background:rgba(239,68,68,.1)!important;
  color:#dc2626!important;
  border-color:rgba(239,68,68,.22)!important;
}
body.light-theme #notificationReportModal .noti-report-meta{
  background:rgba(99,144,210,.05);
  border-bottom-color:rgba(99,144,210,.12);
}
body.light-theme #notificationReportModal .noti-report-message{
  background:rgba(255,255,255,.75);
  border-color:rgba(99,144,210,.14);
}
body.light-theme #notificationReportModal .noti-report-message-label{
  color:rgba(99,144,210,.8);
}
body.light-theme #notificationReportModal .noti-report-message-box{
  background:rgba(255,255,255,.92);
  border-color:rgba(99,144,210,.14);
  border-right-color:rgba(99,144,210,.45);
  color:#334155;
}
body.light-theme #notificationReportModal .sup-table th{
  background:rgba(99,144,210,.07);
  color:#64748b;
}
body.light-theme #notificationReportModal .sup-table td{
  color:#0f172a;
}
body.light-theme #notificationReportModal .sup-table th,
body.light-theme #notificationReportModal .sup-table td{
  border-bottom-color:rgba(99,144,210,.12);
}
#notificationSettingsModal .noti-settings-modal-card{
  width:min(760px,92vw);
  max-height:86vh;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(99,144,210,.16);
  background:linear-gradient(160deg,rgba(7,18,42,.96),rgba(10,24,57,.9));
}
#notificationSettingsModal .noti-settings-modal-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
#notificationSettingsModal .noti-settings-hint{
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(99,144,210,.14);
  background:rgba(15,28,63,.48);
  color:#99b4d4;
  font-size:.78rem;
  line-height:1.8;
}

/* ══════════════════════════════════════════
   Light theme – notificationsHub
   ══════════════════════════════════════════ */
body.light-theme #notificationsPage .noti-hero{
  background:linear-gradient(135deg,#eef4ff,#f0f5ff);
  border-color:rgba(99,144,210,.18);
}
body.light-theme #notificationsPage .noti-hero h1{ color:#0f172a; }
body.light-theme #notificationsPage .noti-hero p{ color:#475569; }

body.light-theme #notificationsPage .noti-panel{
  background:linear-gradient(160deg,#f9fbff,#eef4ff);
  border-color:rgba(99,144,210,.16);
}
body.light-theme #notificationsArchivePage .noti-hero-archive-page{
  background:linear-gradient(135deg,rgba(230,242,255,.82),rgba(240,248,255,.78));
  backdrop-filter:blur(22px) saturate(150%);
  border-color:rgba(99,144,210,.16);
  box-shadow:0 4px 18px rgba(99,144,210,.1),0 1px 0 rgba(255,255,255,.7) inset;
}
body.light-theme #notificationsArchivePage .noti-hero-archive-page h1{ color:#0f172a; }
body.light-theme #notificationsArchivePage .noti-hero-archive-page p{ color:#475569; }
body.light-theme #notificationsPage .noti-panel-title{ color:#0f172a; }
body.light-theme #notificationsPage .noti-panel-head{ border-bottom-color:rgba(99,144,210,.14); }

body.light-theme #notificationsPage .noti-stat-card,
body.light-theme #salesNotificationsSection .noti-stat-card{
  background:rgba(255,255,255,.9);
  border-color:rgba(99,144,210,.14);
}
body.light-theme #notificationsPage .noti-stat-label,
body.light-theme #salesNotificationsSection .noti-stat-label{ color:#64748b; }
body.light-theme #notificationsPage .noti-stat-value,
body.light-theme #salesNotificationsSection .noti-stat-value{ color:#0f172a; }

body.light-theme #notificationsPage .noti-archive-card,
body.light-theme #salesNotificationsSection .noti-archive-card{
  background:rgba(255,255,255,.92);
  border-color:rgba(99,144,210,.14);
  color:#334155;
}
body.light-theme #notificationsArchivePage .noti-archive-card{
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(240,248,255,.68));
  backdrop-filter:blur(18px) saturate(150%);
  border-color:rgba(99,144,210,.14);
  color:#334155;
  box-shadow:0 4px 18px rgba(15,23,42,.06),0 1px 0 rgba(255,255,255,.9) inset;
}
body.light-theme #notificationsArchivePage .noti-archive-card:hover{
  box-shadow:0 8px 26px rgba(15,23,42,.1),0 1px 0 rgba(255,255,255,.9) inset;
}
body.light-theme #notificationsPage .noti-archive-top h3,
body.light-theme #salesNotificationsSection .noti-archive-top h3{ color:#0f172a; }
body.light-theme #notificationsArchivePage .noti-archive-top h3{ color:#0f172a; }

body.light-theme #notificationsPage .noti-archive-body,
body.light-theme #salesNotificationsSection .noti-archive-body{
  color:#334155;
  background:rgba(99,144,210,.05);
  border-right-color:rgba(99,144,210,.3);
}
body.light-theme #notificationsArchivePage .noti-archive-body{
  color:#334155;
  background:rgba(99,144,210,.05);
  backdrop-filter:none;
  border-color:rgba(99,144,210,.1);
  border-right-color:rgba(99,144,210,.3);
}
body.light-theme #notificationsPage .noti-archive-meta span,
body.light-theme #salesNotificationsSection .noti-archive-meta span{
  background:rgba(99,144,210,.07);
  border-color:rgba(99,144,210,.18);
  color:#475569;
}
body.light-theme #notificationsArchivePage .noti-archive-meta span{
  background:rgba(99,144,210,.07);
  border-color:rgba(99,144,210,.18);
  color:#475569;
}
body.light-theme #notificationsPage .noti-archive-time,
body.light-theme #salesNotificationsSection .noti-archive-time{ color:#64748b; }
body.light-theme #notificationsArchivePage .noti-archive-time{ color:#64748b; }
body.light-theme #notificationsPage .noti-archive-footer,
body.light-theme #salesNotificationsSection .noti-archive-footer{ color:#64748b; }
body.light-theme #notificationsArchivePage .noti-archive-footer{
  color:#64748b;
  border-top-color:rgba(99,144,210,.1);
}
body.light-theme #notificationsPage .noti-kind-chip,
body.light-theme #salesNotificationsSection .noti-kind-chip{
  background:rgba(99,144,210,.07);
  border-color:rgba(99,144,210,.18);
  color:#475569;
}
body.light-theme #notificationsPage .noti-type-btn{
  background:rgba(255,255,255,.92);
  border-color:rgba(99,144,210,.14);
  color:#334155;
}
body.light-theme #salesNotificationsSection .noti-read-btn.btn.ok{
  color:#ffffff!important;
  box-shadow:none!important;
}
body.light-theme #notificationsPage .noti-type-btn[data-notification-kind="task"].is-active{
  color:#b45309;
  border-color:rgba(180,83,9,.28);
  background:rgba(180,83,9,.07);
}
body.light-theme #notificationsPage .noti-type-btn[data-notification-kind="important"].is-active{
  color:#dc2626;
  border-color:rgba(220,38,38,.28);
  background:rgba(220,38,38,.07);
}
body.light-theme #notificationsPage .noti-type-btn[data-notification-kind="info"].is-active{
  color:#15803d;
  border-color:rgba(21,128,61,.28);
  background:rgba(21,128,61,.07);
}

body.light-theme #notificationsPage .noti-archive-important,
body.light-theme #salesNotificationsSection .noti-archive-important{
  background:rgba(254,242,242,.92);
  border-color:rgba(248,113,113,.22);
}
body.light-theme #notificationsArchivePage .noti-archive-important{
  background:linear-gradient(135deg,rgba(255,235,235,.76),rgba(255,242,242,.72));
  border-color:rgba(248,113,113,.2);
  box-shadow:0 4px 18px rgba(239,68,68,.06),0 1px 0 rgba(255,255,255,.9) inset;
}
body.light-theme #notificationsPage .noti-archive-task,
body.light-theme #salesNotificationsSection .noti-archive-task{
  background:rgba(255,251,235,.85);
  border-color:rgba(251,191,36,.22);
}
body.light-theme #notificationsArchivePage .noti-archive-task{
  background:linear-gradient(135deg,rgba(255,251,228,.76),rgba(255,253,235,.72));
  border-color:rgba(251,191,36,.2);
  box-shadow:0 4px 18px rgba(245,158,11,.05),0 1px 0 rgba(255,255,255,.9) inset;
}
body.light-theme #notificationsPage .noti-archive-info,
body.light-theme #salesNotificationsSection .noti-archive-info{
  background:rgba(240,253,244,.92);
  border-color:rgba(74,222,128,.22);
}
body.light-theme #notificationsArchivePage .noti-archive-info{
  background:linear-gradient(135deg,rgba(236,253,245,.76),rgba(240,253,244,.72));
  border-color:rgba(74,222,128,.2);
  box-shadow:0 4px 18px rgba(34,197,94,.05),0 1px 0 rgba(255,255,255,.9) inset;
}
body.light-theme #notificationsPage .noti-empty,
body.light-theme #salesNotificationsSection .noti-empty{
  color:#64748b;
  border-color:rgba(99,144,210,.2);
}
body.light-theme #notificationsArchivePage .noti-archive-page-chip{
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(240,248,255,.78));
  backdrop-filter:blur(14px);
  border-color:rgba(99,144,210,.16);
  color:#334155;
  box-shadow:0 2px 8px rgba(99,144,210,.07);
}
body.light-theme #notificationSettingsModal .noti-settings-modal-card{
  background:linear-gradient(160deg,#f9fbff,#eef4ff);
  border-color:rgba(99,144,210,.16);
}

/* ══════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════ */
@media(max-width:980px){
  #notificationsPage .noti-grid{
    grid-template-columns:1fr;
  }
  #notificationsArchivePage .noti-hero-archive-page{
    flex-direction:column;
  }
  #notificationSettingsModal .noti-settings-modal-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:640px){
  #notificationsPage{
    padding:12px 14px;
  }
  #notificationsPage .noti-form{
    grid-template-columns:1fr;
  }
  #notificationsPage .noti-form .field:nth-child(1),
  #notificationsPage .noti-form .field:nth-child(2),
  #notificationsPage .noti-form .field:nth-child(5),
  #notificationsPage .noti-form .actions{
    grid-column:span 1;
  }
  #notificationsPage .noti-type-picker{
    grid-template-columns:1fr;
  }
  #notificationsPage .noti-stats{
    grid-template-columns:1fr 1fr;
  }
  #notificationsPage .noti-archive-top,
  #salesNotificationsSection .noti-archive-top,
  #notificationsArchivePage .noti-archive-top{
    flex-direction:column;
    gap:6px;
  }
  #notificationsArchivePage .noti-archive-card{
    padding:12px 13px;
  }
  #notificationsArchivePage .noti-hero-archive-page{
    padding:14px 16px;
  }
  #notificationsArchivePage .noti-archive-page-meta{
    gap:6px;
  }
  #notificationsArchivePage .noti-archive-page-chip{
    flex:1 1 calc(50% - 4px);
    justify-content:center;
  }
}
body.light-theme #inventoryVaultFullInfoModal .iv-fullinfo-action-btn{
  box-shadow:none!important;
}
body.light-theme #inventoryVaultFullInfoCloseBtn{
  background:rgba(0,0,0,.05)!important;
  border-color:rgba(0,0,0,.12)!important;
  color:rgba(0,0,0,.42)!important;
}
body.light-theme #inventoryVaultFullInfoCloseBtn:hover{
  background:rgba(239,68,68,.1)!important;
  color:#dc2626!important;
  border-color:rgba(239,68,68,.22)!important;
}
body.light-theme #inventoryVaultFullInfoModal .iv-fullinfo-grid{
  background:rgba(238,243,252,.7)!important;
  border-color:rgba(148,163,184,.22)!important;
}
body.light-theme #inventoryVaultFullInfoModal .iv-fullinfo-row{
  background:rgba(255,255,255,.96)!important;
  border-color:rgba(148,163,184,.2)!important;
}
body.light-theme #inventoryVaultFullInfoModal .iv-fullinfo-row:hover{
  background:rgba(79,70,229,.05)!important;
  border-color:rgba(99,102,241,.22)!important;
}
body.light-theme #inventoryVaultFullInfoModal .iv-fullinfo-section-title{
  color:rgba(79,70,229,.75)!important;
}
body.light-theme #inventoryVaultFullInfoModal .iv-fullinfo-section-title::after{
  background:rgba(79,70,229,.18)!important;
}
body.light-theme #inventoryVaultFullInfoModal .iv-fullinfo-label{
  color:rgba(100,116,139,.75)!important;
}
body.light-theme #inventoryVaultFullInfoModal .iv-fullinfo-value{
  color:#1e293b!important;
}

/* Responsive: single column on mobile */
@media(max-width:640px){
  #inventoryVaultFullInfoModal .iv-fullinfo-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #inventoryVaultFullInfoModal .iv-fullinfo-row-third,
  #inventoryVaultFullInfoModal .iv-fullinfo-row-half,
  #inventoryVaultFullInfoModal .iv-fullinfo-row-full{
    grid-column:span 1!important;
  }
}
#inventoryVaultPage .iv-status{
  font-size:.78rem!important;
  padding:4px 10px!important;
}

/* ── Subsection ── */
#inventoryVaultPage .iv-subsection{
  margin-top:14px!important;
  padding-top:14px!important;
  border-top:1px solid rgba(255,255,255,.06)!important;
}

/* ── Preview stage ── */
#inventoryVaultPage .iv-preview-stage{
  background:rgba(10,18,36,.96)!important;
  border-color:rgba(99,179,237,.14)!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
#inventoryVaultPage .iv-preview-stage-title{
  font-size:1.1rem!important;
}

/* ══════ LIGHT THEME OVERRIDES ══════ */
body.light-theme #inventoryVaultPage .iv-shell{
  background:linear-gradient(135deg,#f4f7ff 0%,#eaf2ff 60%,#f4f7ff 100%)!important;
  border-color:rgba(99,144,210,.15)!important;
}
body.light-theme #inventoryVaultPage .iv-topbar{
  background:rgba(255,255,255,.85)!important;
  border-color:rgba(99,144,210,.18)!important;
}
body.light-theme #inventoryVaultPage .iv-title-wrap .label{
  color:rgba(15,23,42,.85)!important;
}
body.light-theme #inventoryVaultPage .iv-title-wrap .smart-tool-codename{
  color:rgba(14,116,144,.85)!important;
  background:rgba(14,116,144,.08)!important;
  border-color:rgba(14,116,144,.18)!important;
}
body.light-theme #inventoryVaultPage #inventoryVaultBackBtn{
  background:rgba(14,116,144,.08)!important;
  border-color:rgba(14,116,144,.2)!important;
  color:#0e7490!important;
}
body.light-theme #inventoryVaultPage .iv-hero{
  background:rgba(255,255,255,.82)!important;
  border-color:rgba(99,144,210,.12)!important;
}
body.light-theme #inventoryVaultPage .iv-badge{
  background:rgba(219,234,254,.58)!important;
  border-color:rgba(96,165,250,.28)!important;
  color:#1d4ed8!important;
  box-shadow:0 1px 2px rgba(37,99,235,.06)!important;
}
body.light-theme #inventoryVaultPage .iv-mode-bar{
  background:rgba(255,255,255,.75)!important;
  border-color:rgba(99,144,210,.12)!important;
}
body.light-theme #inventoryVaultPage .iv-stat-card{
  background:rgba(255,255,255,.92)!important;
  border-color:rgba(99,144,210,.14)!important;
}
body.light-theme #inventoryVaultPage .iv-panel{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(99,144,210,.14)!important;
}
body.light-theme #inventoryVaultPage .iv-product-card{
  background:
    radial-gradient(circle at top left,rgba(56,189,248,.14),transparent 34%),
    radial-gradient(circle at bottom right,rgba(99,102,241,.12),transparent 40%),
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(247,250,255,.9) 56%,rgba(238,244,255,.94))!important;
  border-color:rgba(148,163,184,.18)!important;
  box-shadow:
    0 18px 38px rgba(148,163,184,.16),
    inset 0 1px 0 rgba(255,255,255,.85)!important;
}
body.light-theme #inventoryVaultPage .iv-product-card::before{
  background:linear-gradient(125deg,rgba(255,255,255,.72),transparent 26%,transparent 72%,rgba(191,219,254,.24))!important;
}
body.light-theme #inventoryVaultPage .iv-product-card.is-low{
  border-color:rgba(251,191,36,.34)!important;
  box-shadow:
    0 18px 38px rgba(148,163,184,.16),
    0 0 0 1px rgba(251,191,36,.14) inset,
    inset 0 1px 0 rgba(255,255,255,.86)!important;
}
body.light-theme #inventoryVaultPage .iv-product-name{
  color:#1e293b!important;
}
body.light-theme #inventoryVaultPage .iv-product-code{
  color:#7c93b3!important;
}
body.light-theme #inventoryVaultPage .iv-product-metrics{
  color:#64748b!important;
}
body.light-theme #inventoryVaultPage .iv-product-metrics span{
  background:rgba(255,255,255,.66)!important;
  border-color:rgba(191,219,254,.7)!important;
  color:#64748b!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
}
body.light-theme #inventoryVaultPage .iv-product-actions .btn.danger{
  box-shadow:0 12px 24px rgba(239,68,68,.14)!important;
}
body.light-theme #inventoryVaultPage .iv-panel-head{
  border-bottom-color:rgba(99,144,210,.1)!important;
}
body.light-theme #inventoryVaultPage .iv-panel-title{
  color:rgba(15,23,42,.78)!important;
}
body.light-theme #inventoryVaultPage .iv-filter-grid .field label,
body.light-theme #inventoryVaultPage .iv-import-grid .field label{
  color:rgba(71,85,105,.72)!important;
}
body.light-theme #inventoryVaultPage .iv-import-grid input:not([type="file"]),
body.light-theme #inventoryVaultPage .iv-import-grid select,
body.light-theme #inventoryVaultPage .iv-filter-grid input,
body.light-theme #inventoryVaultPage .iv-filter-grid select,
body.light-theme #inventoryVaultPage .iv-shared-qty-wrap input{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,245,255,.96))!important;
  border-color:rgba(99,144,210,.22)!important;
  color:#1e293b!important;
  box-shadow:0 1px 2px rgba(15,23,42,.04)!important;
}
body.light-theme #inventoryVaultPage .iv-import-grid input:not([type="file"])::placeholder,
body.light-theme #inventoryVaultPage .iv-filter-grid input::placeholder,
body.light-theme #inventoryVaultPage .iv-shared-qty-wrap input::placeholder{
  color:rgba(100,116,139,.72)!important;
}
body.light-theme #inventoryVaultPage #inventoryVaultFilterSearch{
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(241,245,255,.97))!important;
  border-color:rgba(99,144,210,.24)!important;
  color:#1e293b!important;
  -webkit-text-fill-color:#1e293b!important;
  caret-color:#1e293b!important;
}
body.light-theme #inventoryVaultPage #inventoryVaultFilterSearch::placeholder{
  color:rgba(100,116,139,.78)!important;
  -webkit-text-fill-color:rgba(100,116,139,.78)!important;
}
body.light-theme #inventoryVaultPage #inventoryVaultFilterSearch::-webkit-search-cancel-button{
  filter:none!important;
  opacity:.55!important;
}
body.light-theme #inventoryVaultPage .iv-import-grid select{
  color:#334155!important;
}
body.light-theme #inventoryVaultPage .iv-import-grid input:not([type="file"]):focus,
body.light-theme #inventoryVaultPage .iv-import-grid select:focus,
body.light-theme #inventoryVaultPage .iv-filter-grid input:focus,
body.light-theme #inventoryVaultPage .iv-filter-grid select:focus,
body.light-theme #inventoryVaultPage .iv-shared-qty-wrap input:focus{
  border-color:rgba(37,99,235,.34)!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.14)!important;
}
body.light-theme #inventoryVaultPage #inventoryVaultFile{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(243,247,255,.96))!important;
  border-color:rgba(99,144,210,.26)!important;
  color:#64748b!important;
}
body.light-theme #inventoryVaultPage #inventoryVaultFile:hover{
  background:linear-gradient(180deg,rgba(255,255,255,1),rgba(237,244,255,.98))!important;
  border-color:rgba(37,99,235,.32)!important;
}
body.light-theme #inventoryVaultPage #inventoryVaultFile::file-selector-button{
  border:none!important;
  border-radius:10px!important;
  background:rgba(37,99,235,.1)!important;
  color:#1d4ed8!important;
  padding:8px 14px!important;
  margin-inline-start:10px!important;
  cursor:pointer!important;
  font-weight:700!important;
}
body.light-theme #inventoryVaultPage #inventoryVaultFile::-webkit-file-upload-button{
  border:none!important;
  border-radius:10px!important;
  background:rgba(37,99,235,.1)!important;
  color:#1d4ed8!important;
  padding:8px 14px!important;
  margin-inline-start:10px!important;
  cursor:pointer!important;
  font-weight:700!important;
}
body.light-theme #inventoryVaultPage .iv-table-wrap{
  border-color:rgba(99,144,210,.18)!important;
}
body.light-theme #inventoryVaultPage .iv-table thead th{
  background:#eef3ff!important;
  color:rgba(15,23,42,.52)!important;
}
body.light-theme #inventoryVaultPage .iv-preview-stage{
  background:rgba(248,251,255,.98)!important;
  border-color:rgba(99,144,210,.16)!important;
}
body.light-theme #inventoryVaultPage .iv-subsection{
  border-top-color:rgba(99,144,210,.1)!important;
}

/* ── inventoryVault 100% zoom fit ────────────────────────────────────── */
body.inventory-vault-active .main{
  padding:10px 14px!important;
}
#inventoryVaultPage .iv-shell{
  gap:8px!important;
  padding:12px!important;
}
#inventoryVaultPage .iv-filter-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
/* management panel: single-column (only one child exists) */
#inventoryVaultPage .iv-grid{
  grid-template-columns:1fr!important;
}
/* hero: more compact */
#inventoryVaultPage .iv-hero{
  padding:10px 16px!important;
}
#inventoryVaultPage .iv-hero-title{
  font-size:1.1rem!important;
}
/* stat cards row: tighter */
#inventoryVaultPage .iv-stats-grid{
  gap:8px!important;
}
#inventoryVaultPage .iv-stat-card{
  padding:10px 14px!important;
}
#inventoryVaultPage .iv-stat-val{
  font-size:1.4rem!important;
}
/* section headings: smaller */
#inventoryVaultPage .iv-section-title{
  font-size:.8rem!important;
  margin-bottom:6px!important;
}
/* mode-bar: tighter */
#inventoryVaultPage .iv-mode-bar{
  padding:6px!important;
  gap:6px!important;
}
/* alerts: smaller */
#inventoryVaultPage .iv-alerts{
  gap:6px!important;
}
#inventoryVaultPage .iv-alert{
  padding:6px 10px!important;
  font-size:.78rem!important;
}

/* ══════════════════════════════════════════════════════════════
   SALES PORTAL — Premium Admin Redesign  (sp-*)
   ══════════════════════════════════════════════════════════════ */

body.sales-portal-active .main{
  padding:10px 14px!important;
}

/* root card reset */
#salesPortalPage{
  padding:0!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  border-radius:0!important;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}

body.sales-portal-active #salesPortalPage .sp-header{
  margin-top:0 !important;
}

@media(max-width:900px){
  .sales-portal-header{
    padding:16px 18px;
    border-radius:24px;
    flex-direction:column-reverse;
    align-items:stretch;
  }
  .sales-portal-header-actions{
    justify-content:flex-start;
  }
  .management-portal-header{
    padding:16px 18px;
    border-radius:24px;
    flex-direction:column-reverse;
    align-items:stretch;
  }
  .management-portal-header-actions{
    justify-content:flex-start;
  }
  .management-portal-header-page-actions{
    justify-content:flex-start;
  }
}

/* ── Shell ────────────────────────────────────────────────── */
.sp-shell{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  background:linear-gradient(135deg,#0b0f1a 0%,#111827 60%,#0b0f1a 100%);
  border-radius:14px;
}

/* ── Header ───────────────────────────────────────────────── */
.sp-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(56,189,248,.1);
  border-radius:12px;
  padding:12px 16px;
  flex-shrink:0;
}
.sp-header-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.sp-header-icon{
  font-size:1.4rem;
  line-height:1;
  background:rgba(56,189,248,.1);
  border-radius:10px;
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(56,189,248,.18);
  flex-shrink:0;
}
.sp-header-title{
  font-size:.95rem;
  font-weight:700;
  color:#e2e8f0;
  letter-spacing:.01em;
}
.sp-header-sub{
  font-size:.71rem;
  color:rgba(148,163,184,.85);
  margin-top:2px;
}
.sp-actor-bar{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-shrink:0;
}
.sp-actor-field{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.sp-actor-field label{
  font-size:.65rem;
  font-weight:600;
  color:rgba(148,163,184,.82);
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
}
.sp-actor-field input{
  background:rgba(15,23,42,.8);
  border:1px solid rgba(56,189,248,.14);
  border-radius:7px;
  color:#cbd5e1;
  font-size:.8rem;
  padding:6px 10px;
  width:68px;
  outline:none;
  transition:border-color .15s;
  font-family:inherit;
}
.sp-actor-field input[readonly]{
  cursor:default;
  user-select:none;
  pointer-events:none;
}
.sp-actor-field-wide input{
  width:130px;
}
.sp-actor-field input:focus{
  border-color:rgba(56,189,248,.4);
  background:rgba(15,23,42,.95);
}

/* ── Buttons ──────────────────────────────────────────────── */
.sp-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:none;
  border-radius:8px;
  padding:7px 14px;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:all .15s;
  font-family:inherit;
  line-height:1.2;
}
.sp-btn-refresh{
  background:rgba(56,189,248,.12);
  color:#38bdf8;
  border:1px solid rgba(56,189,248,.22);
}
.sp-btn-refresh:hover{ background:rgba(56,189,248,.22); }
.sp-btn-back{
  background:rgba(148,163,184,.07);
  color:rgba(148,163,184,.75);
  border:1px solid rgba(148,163,184,.13);
}
.sp-btn-back:hover{ background:rgba(148,163,184,.14);color:#e2e8f0; }
.sp-btn-icon{
  min-width:40px;
  justify-content:center;
  padding:7px 11px;
}
.sp-btn-profile{
  font-size:.74rem;
}
.sp-btn-assign{
  background:linear-gradient(135deg,#0ea5e9,#6366f1);
  color:#fff;
  border:none;
  padding:8px 18px;
  font-size:.82rem;
  box-shadow:0 2px 12px rgba(14,165,233,.28);
}
.sp-btn-assign:hover{ filter:brightness(1.1); }
.sp-btn-danger{
  background:linear-gradient(135deg,#dc2626,#b91c1c);
  color:#fff;
  border:none;
  padding:8px 18px;
  font-size:.82rem;
  box-shadow:0 2px 10px rgba(220,38,38,.22);
}
.sp-btn-danger:hover{ filter:brightness(1.1); }

/* ── Stats Row ────────────────────────────────────────────── */
.sp-stats-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  flex-shrink:0;
}
#salesPortalPage .iv-stat-card{
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(56,189,248,.07)!important;
  border-radius:10px!important;
  padding:12px 14px!important;
  position:relative;
  overflow:hidden;
  transition:border-color .2s!important;
}
#salesPortalPage .iv-stat-card:hover{
  border-color:rgba(56,189,248,.18)!important;
}
#salesPortalPage .iv-stat-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
}
#salesPortalPage .iv-stat-card:nth-child(1)::before{ background:linear-gradient(90deg,#38bdf8,#818cf8); }
#salesPortalPage .iv-stat-card:nth-child(2)::before{ background:linear-gradient(90deg,#34d399,#38bdf8); }
#salesPortalPage .iv-stat-card:nth-child(3)::before{ background:linear-gradient(90deg,#f87171,#fbbf24); }
#salesPortalPage .iv-stat-card:nth-child(4)::before{ background:linear-gradient(90deg,#818cf8,#c084fc); }
#salesPortalPage .iv-stat-label{
  font-size:.68rem!important;
  font-weight:600!important;
  color:rgba(148,163,184,.82)!important;
  text-transform:uppercase!important;
  letter-spacing:.05em!important;
  margin-bottom:5px!important;
}
#salesPortalPage .iv-stat-value,
#salesPortalPage .iv-stat-val{
  font-size:1.7rem!important;
  font-weight:800!important;
  color:#e2e8f0!important;
  line-height:1!important;
  font-variant-numeric:tabular-nums!important;
  font-family:monospace!important;
}
#salesPortalPage .iv-stat-sub{
  font-size:.67rem!important;
  color:rgba(148,163,184,.72)!important;
  margin-top:4px!important;
}

/* ── Alerts Row ───────────────────────────────────────────── */
.sp-alerts-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  flex-shrink:0;
}
#salesPortalPage .iv-alert-card{
  flex:1;
  min-width:200px;
  border-radius:8px!important;
  padding:9px 14px!important;
  border:1px solid transparent!important;
}
#salesPortalPage .iv-alert-card-ok{
  background:rgba(52,211,153,.06)!important;
  border-color:rgba(52,211,153,.18)!important;
}
#salesPortalPage .iv-alert-card-warn{
  background:rgba(251,191,36,.06)!important;
  border-color:rgba(251,191,36,.18)!important;
}
#salesPortalPage .iv-alert-title{
  font-size:.73rem!important;
  font-weight:700!important;
  color:#e2e8f0!important;
  margin-bottom:2px!important;
}
#salesPortalPage .iv-alert-body{
  font-size:.7rem!important;
  color:rgba(148,163,184,.75)!important;
}

/* ── 2-Column Grid ────────────────────────────────────────── */
.sp-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
}
.sp-grid.sp-grid-priority{
  grid-template-columns:minmax(0,1.45fr) minmax(340px,.9fr);
  align-items:stretch;
}
.sp-grid.sp-grid-stack{
  grid-template-columns:minmax(0,1fr);
}
.sp-grid.sp-grid-sales-flow{
  gap:14px;
}

/* ── Panel ────────────────────────────────────────────────── */
.sp-panel{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(56,189,248,.07);
  border-radius:12px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  overflow:hidden;
}
.sp-panel-assign{
  background:
    radial-gradient(circle at top left,rgba(56,189,248,.2),transparent 30%),
    radial-gradient(circle at 78% 18%,rgba(96,165,250,.2),transparent 28%),
    radial-gradient(circle at bottom right,rgba(129,140,248,.18),transparent 34%),
    linear-gradient(135deg,rgba(7,12,34,.96),rgba(15,23,42,.94) 42%,rgba(21,29,58,.96));
  border-color:rgba(96,165,250,.18);
  box-shadow:
    0 24px 64px rgba(2,6,23,.34),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.sp-panel-inventory{
  background:
    radial-gradient(circle at top right,rgba(45,212,191,.14),transparent 28%),
    linear-gradient(160deg,rgba(15,23,42,.88),rgba(15,23,42,.76));
}
.sp-panel::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
}
.sp-panel-assign::before{ background:linear-gradient(90deg,#0ea5e9,#6366f1); }
.sp-panel-inventory::before{ background:linear-gradient(90deg,#34d399,#0ea5e9); }
.sp-panel-broken::before{ background:linear-gradient(90deg,#f87171,#fbbf24); }
.sp-panel-table::before{ background:linear-gradient(90deg,#818cf8,#c084fc); }
.sp-panel-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.055);
  flex-shrink:0;
}
.sp-panel-head-table{
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.sp-panel-head-copy{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.sp-panel-icon{ font-size:.9rem; }
.sp-panel-icon-lg{ font-size:1.12rem; }
.sp-panel-title{
  font-size:.72rem;
  font-weight:700;
  color:#94a3b8;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.sp-panel-actions{ flex-shrink:0; }
.sp-panel-head-hero{
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-bottom:12px;
}
.sp-panel-head-side{
  align-items:flex-start;
}
.sp-hero-copy{
  display:flex;
  align-items:flex-start;
  gap:14px;
  max-width:760px;
}
.sp-panel-title-hero{
  display:block;
  color:rgba(191,219,254,.78);
}
.sp-hero-title{
  margin-top:5px;
  font-size:1.15rem;
  line-height:1.3;
  font-weight:800;
  color:#f8fbff;
  letter-spacing:-.02em;
}
.sp-hero-sub{
  margin-top:5px;
  font-size:.84rem;
  line-height:1.7;
  color:rgba(226,232,240,.72);
  max-width:700px;
}
.sp-hero-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.sp-hero-badge{
  padding:5px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(148,163,184,.16);
  color:#bfdbfe;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.04em;
}
.sp-assign-hero-body{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(260px,.72fr);
  gap:18px;
  align-items:stretch;
}
.sp-assign-form-stage,
.sp-assign-result-stage{
  position:relative;
  border-radius:24px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(255,255,255,.05);
  padding:18px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.sp-assign-form-stage{
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04)),
    linear-gradient(135deg,rgba(14,165,233,.12),rgba(99,102,241,.12));
}
.sp-assign-result-stage{
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.035)),
    linear-gradient(135deg,rgba(59,130,246,.12),rgba(14,165,233,.08));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.sp-assign-stage-copy{
  margin-bottom:16px;
}
.sp-assign-stage-kicker,
.sp-assign-result-kicker{
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  color:rgba(191,219,254,.74);
}
.sp-assign-stage-title,
.sp-assign-result-title{
  margin-top:8px;
  font-size:1.1rem;
  font-weight:900;
  color:#f8fafc;
}
.sp-assign-stage-sub{
  margin-top:8px;
  color:rgba(226,232,240,.72);
  line-height:1.8;
  font-size:.9rem;
}
.sp-assign-result-head{
  margin-bottom:16px;
}
.sp-side-sub{
  margin-top:8px;
  font-size:.84rem;
  line-height:1.8;
  color:rgba(148,163,184,.74);
}

/* ── Form Grid ────────────────────────────────────────────── */
.sp-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.sp-form-grid.sp-form-grid-hero{
  gap:14px;
}
.sp-form-grid.sp-form-grid-broken{
  grid-template-columns:minmax(0,1.15fr) minmax(240px,.45fr) minmax(280px,.8fr);
  gap:14px;
}
.sp-field{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.sp-field-full{ grid-column:1 / -1; }

/* ── Searchable dropdown ───────────────────────────────────── */
.sp-searchable-wrap{
  position:relative;
}
.sp-searchable-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:15px 16px;
  border-radius:16px;
  border:1px solid rgba(99,102,241,.3);
  background:rgba(9,14,36,.78);
  color:var(--text,#e0e7ff);
  font-size:1.05rem;
  font-weight:800;
  font-family:inherit;
  cursor:pointer;
  text-align:right;
  transition:border-color .18s ease,box-shadow .18s ease;
  gap:8px;
}
.sp-searchable-trigger:hover,
.sp-searchable-trigger[aria-expanded="true"]{
  border-color:rgba(99,102,241,.52);
  box-shadow:0 0 0 3px rgba(99,102,241,.12);
}
.sp-searchable-chevron{
  font-size:10px;
  opacity:.55;
  transition:transform .18s ease;
  flex-shrink:0;
  display:inline-block;
  transform:rotate(90deg);
}
.sp-searchable-trigger[aria-expanded="true"] .sp-searchable-chevron{
  transform:rotate(-90deg);
}
.sp-searchable-panel{
  position:absolute;
  top:calc(100% + 5px);
  right:0;
  left:0;
  z-index:900;
  border-radius:12px;
  border:1px solid rgba(99,102,241,.28);
  background:rgba(12,18,46,.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 16px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;
  overflow:hidden;
}
.sp-searchable-search-wrap{
  padding:8px 8px 6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sp-searchable-search{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px!important;
  border-radius:12px!important;
  border:1px solid rgba(99,102,241,.22)!important;
  background:rgba(99,102,241,.07)!important;
  color:var(--text,#e0e7ff)!important;
  font-size:13px!important;
  font-family:inherit!important;
  outline:none!important;
  transition:border-color .15s ease!important;
}
.sp-searchable-search:focus{
  border-color:rgba(99,102,241,.52)!important;
  background:rgba(99,102,241,.11)!important;
}
.sp-searchable-list{
  max-height:220px;
  overflow-y:auto;
  padding:4px;
}
.sp-searchable-list::-webkit-scrollbar{ width:4px; }
.sp-searchable-list::-webkit-scrollbar-track{ background:transparent; }
.sp-searchable-list::-webkit-scrollbar-thumb{ background:rgba(99,102,241,.3); border-radius:4px; }
.sp-searchable-option{
  padding:9px 12px;
  border-radius:8px;
  font-size:13px;
  cursor:pointer;
  transition:background .12s ease;
  color:rgba(224,231,255,.85);
}
.sp-searchable-option:hover{
  background:rgba(99,102,241,.18);
  color:#fff;
}
.sp-searchable-option.is-selected{
  background:rgba(99,102,241,.28);
  color:#a5b4fc;
  font-weight:700;
}
.sp-searchable-empty{
  padding:12px;
  text-align:center;
  color:rgba(148,163,184,.5);
  font-size:12px;
}
.sp-field label{
  font-size:.72rem;
  font-weight:800;
  color:rgba(148,163,184,.82);
  letter-spacing:.05em;
  text-transform:uppercase;
}
.sp-field input,
.sp-field select{
  background:rgba(15,23,42,.76);
  border:1px solid rgba(96,165,250,.16);
  border-radius:16px;
  color:#cbd5e1;
  font-size:1.02rem;
  padding:14px 16px;
  outline:none;
  transition:border-color .15s,background .15s;
  font-family:inherit;
  width:100%;
  box-sizing:border-box;
}
.sp-field input:focus,
.sp-field select:focus{
  border-color:rgba(56,189,248,.38);
  background:rgba(15,23,42,.95);
}
.sp-field select option{
  background:#0f172a;
  color:#cbd5e1;
}

/* ── Assigned notice (iv-preview-summary override) ────────── */
#salesPortalPage .iv-preview-summary{
  background:
    linear-gradient(135deg,rgba(14,165,233,.14),rgba(99,102,241,.12))!important;
  border:1px solid rgba(96,165,250,.26)!important;
  border-radius:20px!important;
  padding:18px 20px!important;
  font-size:1.02rem!important;
  color:#dbeafe!important;
  display:flex!important;
  gap:14px!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  flex-shrink:0;
  min-height:120px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#salesPortalPage .iv-preview-summary.empty{
  background:rgba(255,255,255,.035)!important;
  border-style:dashed!important;
  color:rgba(191,219,254,.52)!important;
  justify-content:center!important;
  font-size:.92rem!important;
}
#salesPortalPage .sp-panel-fullinfo{
  margin-top:16px;
  padding:16px 18px 18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008)),
    rgba(15,23,42,.52);
}
#salesPortalPage .sp-fullinfo-panel-head{
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid rgba(56,189,248,.08);
}
#salesPortalPage .sp-fullinfo-head-sub{
  margin-top:4px;
  font-size:.68rem;
  line-height:1.7;
  color:rgba(125,211,252,.58);
}
#salesPortalPage .sp-fullinfo-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
#salesPortalPage .sp-fullinfo-toolbar .btn{
  min-height:40px;
  padding:0 16px;
  font-size:.82rem;
  border-radius:10px;
}
#salesPortalPage #salesInventoryFullInfoCloseBtn{
  background:rgba(255,255,255,.92);
  color:#0f172a;
}
#salesPortalPage .sp-fullinfo-panel{
  display:block!important;
  padding:0!important;
  background:transparent!important;
  border:none!important;
}
#salesPortalPage .sp-fullinfo-rows{
  display:flex;
  flex-direction:column;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(56,189,248,.1);
}
#salesPortalPage .sp-fullinfo-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:7px 12px;
  border-bottom:1px solid rgba(56,189,248,.07);
}
#salesPortalPage .sp-fullinfo-row:last-child{
  border-bottom:none;
}
#salesPortalPage .sp-fullinfo-row:nth-child(even){
  background:rgba(56,189,248,.035);
}
#salesPortalPage .sp-fullinfo-row-label{
  font-size:.7rem;
  font-weight:600;
  color:rgba(125,211,252,.72);
  white-space:nowrap;
  flex-shrink:0;
}
#salesPortalPage .sp-fullinfo-row-value{
  font-size:.78rem;
  font-weight:700;
  color:#e2e8f0;
  word-break:break-all;
  text-align:left;
  direction:ltr;
}
#salesPortalPage .sp-fullinfo-row-value:not(.ltr-inline){
  direction:rtl;
  text-align:right;
}
#salesPortalPage .sp-fullinfo-row-value.ltr-inline{
  direction:ltr;
  text-align:left;
  font-family:monospace;
  font-size:.75rem;
}

/* ── Product Cards ────────────────────────────────────────── */
.sp-product-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  overflow-y:auto;
  min-height:0;
}
#salesPortalPage .iv-product-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03))!important;
  border:1px solid rgba(96,165,250,.12)!important;
  border-radius:18px!important;
  padding:14px 16px!important;
  transition:border-color .15s,transform .18s,box-shadow .18s!important;
}
#salesPortalPage .iv-product-card:hover{
  border-color:rgba(56,189,248,.18)!important;
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(2,6,23,.18);
}
#salesPortalPage .iv-product-card.is-low{
  border-color:rgba(251,191,36,.2)!important;
  background:rgba(251,191,36,.04)!important;
}
#salesPortalPage .iv-product-card.iv-product-card-sales{
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
#salesPortalPage .iv-product-card.iv-product-card-sales::after{
  content:"";
  position:absolute;
  inset:auto -40px -50px auto;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(59,130,246,.16),transparent 70%);
  pointer-events:none;
}
#salesPortalPage .iv-product-card.iv-product-card-sales.is-selected{
  border-color:rgba(34,197,94,.38)!important;
  box-shadow:
    0 22px 44px rgba(15,23,42,.22),
    0 0 0 1px rgba(34,197,94,.18) inset;
  background:
    linear-gradient(180deg,rgba(34,197,94,.12),rgba(14,165,233,.06))!important;
}
#salesPortalPage .iv-product-card-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin-bottom:8px!important;
}
#salesPortalPage .iv-product-name{
  font-size:1rem!important;
  font-weight:900!important;
  color:#e2e8f0!important;
}
#salesPortalPage .iv-product-code{
  font-size:.78rem!important;
  color:rgba(148,163,184,.65)!important;
  font-family:monospace!important;
}
#salesPortalPage .iv-product-metrics{
  display:flex!important;
  gap:10px!important;
  font-size:.76rem!important;
  color:rgba(148,163,184,.65)!important;
  font-family:monospace!important;
  flex-wrap:wrap!important;
}
.sp-product-card-focus{
  margin:12px 0 10px;
  padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(99,102,241,.09));
  border:1px solid rgba(96,165,250,.15);
}
.sp-product-card-value{
  font-size:1.7rem;
  font-weight:900;
  line-height:1;
  color:#f8fbff;
}
.sp-product-card-copy{
  margin-top:8px;
  font-size:.82rem;
  color:rgba(191,219,254,.74);
}
.sp-product-card-actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.sp-product-card-btn{
  min-height:42px;
  padding:0 16px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#dbeafe;
  font-family:inherit;
  font-size:.84rem;
  font-weight:800;
  cursor:pointer;
  border:1px solid rgba(148,163,184,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.sp-product-card-btn:hover{
  background:rgba(255,255,255,.12);
}
.sp-product-card-btn-secondary{
  background:transparent;
}
#salesPortalPage .iv-product-card.iv-product-card-sales.is-selected .sp-product-card-btn{
  background:linear-gradient(135deg,#22c55e,#14b8a6);
  color:#f8fffc;
  border-color:transparent;
}
#salesPortalPage .iv-status-stock{
  flex-shrink:0;
}
.sp-panel-actions-hero{
  margin-top:16px;
}
#salesPortalPage .sp-btn-assign{
  min-height:62px;
  padding:0 28px;
  border:none;
  border-radius:18px;
  background:
    linear-gradient(135deg,#22c1ff,#3b82f6 52%,#6366f1);
  color:#fff;
  font-size:1.2rem;
  font-weight:900;
  letter-spacing:-.02em;
  box-shadow:
    0 18px 38px rgba(37,99,235,.28),
    inset 0 1px 0 rgba(255,255,255,.22);
}
#salesPortalPage .sp-btn-assign:hover{
  transform:translateY(-1px);
  box-shadow:
    0 24px 44px rgba(37,99,235,.32),
    inset 0 1px 0 rgba(255,255,255,.22);
}

/* ── Assigned search input in panel header ─────────────────── */
.sp-assigned-search{
  margin-right:auto;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  color:#94a3b8;
  font-size:.7rem;
  padding:3px 28px 3px 8px;
  outline:none;
  font-family:inherit;
  width:220px;
  transition:border-color .18s,background .18s,color .18s;
  direction:rtl;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  background-size:12px 12px;
}
.sp-assigned-search::placeholder{ color:rgba(100,116,139,.55); font-size:.68rem; }
.sp-assigned-search:focus{
  border-color:rgba(129,140,248,.35);
  background:rgba(129,140,248,.07);
  color:#cbd5e1;
}
.sp-assigned-search::-webkit-search-cancel-button{ opacity:.4; cursor:pointer; }

/* ── Assigned table pagination ─────────────────────────────── */
.sp-assigned-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  padding:8px 10px;
  border-top:1px solid rgba(255,255,255,.055);
}
.sp-assigned-pagination .iv-pager-info{
  font-size:.72rem;
  font-weight:600;
  color:var(--muted,#64748b);
}
.sp-assigned-pagination .iv-pager-btns{
  display:flex;
  align-items:center;
  gap:3px;
  flex-wrap:wrap;
}
.sp-assigned-pagination .iv-pager-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 5px;
  border-radius:5px;
  border:1px solid rgba(129,140,248,.2);
  background:rgba(129,140,248,.06);
  color:#94a3b8;
  font-size:.7rem;
  cursor:pointer;
  transition:all .15s;
  line-height:1;
}
.sp-assigned-pagination .iv-pager-btn:hover:not(:disabled){
  background:rgba(99,102,241,.22);
  border-color:rgba(99,102,241,.4);
  color:#c7d0ff;
}
.sp-assigned-pagination .iv-pager-btn.is-active{
  background:rgba(99,102,241,.28);
  border-color:rgba(99,102,241,.48);
  color:#fff;
  cursor:default;
}
.sp-assigned-pagination .iv-pager-btn:disabled{
  opacity:.3;
  cursor:default;
}
.sp-assigned-pagination .iv-pager-ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  color:rgba(148,163,184,.4);
  font-size:.72rem;
}
body.light-theme .sp-assigned-search{
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(241,245,255,.97));
  border-color:rgba(99,144,210,.24);
  color:#1e293b!important;
  -webkit-text-fill-color:#1e293b!important;
  caret-color:#1e293b!important;
}
body.light-theme .sp-assigned-search:focus{
  border-color:rgba(59,130,246,.34);
  background:linear-gradient(180deg,rgba(255,255,255,1),rgba(239,244,255,.98));
  color:#0f172a!important;
  -webkit-text-fill-color:#0f172a!important;
}
body.light-theme .sp-assigned-search::placeholder{
  color:rgba(100,116,139,.78)!important;
  -webkit-text-fill-color:rgba(100,116,139,.78)!important;
}
body.light-theme .sp-assigned-search::-webkit-search-cancel-button{
  opacity:.55!important;
}
body.light-theme #salesPortalPage #salesAssignedSearch,
body.light-theme #salesPortalPage #salesAssignedSearch:focus{
  background:#ffffff!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 8px center!important;
  background-size:12px 12px!important;
  border-color:rgba(99,144,210,.24)!important;
  color:#0f172a!important;
  -webkit-text-fill-color:#0f172a!important;
  caret-color:#0f172a!important;
  box-shadow:0 0 0 2px rgba(255,255,255,1) inset!important;
}
body.light-theme #salesPortalPage #salesAssignedSearch::placeholder{
  color:#94a3b8!important;
  -webkit-text-fill-color:#94a3b8!important;
}
body.light-theme #salesPortalPage #salesAssignedSearch:-webkit-autofill,
body.light-theme #salesPortalPage #salesAssignedSearch:-webkit-autofill:hover,
body.light-theme #salesPortalPage #salesAssignedSearch:-webkit-autofill:focus{
  -webkit-text-fill-color:#0f172a!important;
  box-shadow:0 0 0 1000px #ffffff inset!important,0 0 0 2px rgba(255,255,255,1) inset!important;
  caret-color:#0f172a!important;
}
body.light-theme .sp-assigned-pagination{ border-top-color:rgba(99,144,210,.12); }
body.light-theme .sp-assigned-pagination .iv-pager-info{ color:#64748b; }
body.light-theme .sp-assigned-pagination .iv-pager-btn{
  background:rgba(255,255,255,.88);
  border-color:rgba(119,144,194,.22);
  color:rgba(30,41,59,.68);
}
body.light-theme .sp-assigned-pagination .iv-pager-btn:hover:not(:disabled){
  background:rgba(99,102,241,.1);
  border-color:rgba(99,102,241,.3);
  color:#4f46e5;
}
body.light-theme .sp-assigned-pagination .iv-pager-btn.is-active{
  background:rgba(99,102,241,.16);
  border-color:rgba(99,102,241,.36);
  color:#4f46e5;
}

/* ── Table wrap ───────────────────────────────────────────── */
.sp-table-wrap{
  flex:1;
  overflow-y:auto;
  min-height:0;
}
.sp-table-wrap.sp-table-wrap-wide{
  width:100%;
  overflow-x:auto;
}
#salesPortalPage .sp-panel-table-wide,
#salesPortalPage .sp-panel-broken-wide{
  width:100%;
}
#salesPortalPage .sp-panel-table-wide{
  min-width:0;
}
#salesPortalPage .sp-panel-broken-wide{
  gap:14px;
}
#salesPortalPage .sp-panel-actions-broken{
  display:flex;
  justify-content:flex-end;
}
#salesPortalPage .iv-table{
  width:100%!important;
  min-width:980px;
  border-collapse:collapse!important;
  font-size:.74rem!important;
  color:#94a3b8!important;
}
#salesPortalPage .iv-table thead tr{
  border-bottom:1px solid rgba(56,189,248,.1)!important;
}
#salesPortalPage .iv-table th{
  padding:7px 10px!important;
  font-weight:700!important;
  font-size:.65rem!important;
  color:rgba(56,189,248,.65)!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
  text-align:right!important;
  white-space:nowrap!important;
}
#salesPortalPage .iv-table td{
  padding:7px 10px!important;
  border-bottom:1px solid rgba(255,255,255,.035)!important;
  color:#94a3b8!important;
}
#salesPortalPage .iv-table tbody tr:hover td{
  background:rgba(56,189,248,.035)!important;
}

/* ── Status badges ────────────────────────────────────────── */
#salesPortalPage .iv-status{
  display:inline-flex!important;
  align-items:center!important;
  border-radius:5px!important;
  padding:2px 7px!important;
  font-size:.63rem!important;
  font-weight:700!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
#salesPortalPage .iv-status-ok{ background:rgba(52,211,153,.13)!important;color:#34d399!important; }
#salesPortalPage .iv-status-warn{ background:rgba(251,191,36,.13)!important;color:#fbbf24!important; }
#salesPortalPage .iv-status-pri{ background:rgba(99,102,241,.13)!important;color:#818cf8!important; }
#salesPortalPage .iv-status-danger{ background:rgba(248,113,113,.13)!important;color:#f87171!important; }
#salesPortalPage .iv-status-muted{ background:rgba(148,163,184,.09)!important;color:rgba(148,163,184,.5)!important; }

/* ── Empty state ──────────────────────────────────────────── */
#salesPortalPage .iv-empty{
  padding:18px!important;
  text-align:center!important;
  color:rgba(148,163,184,.38)!important;
  font-size:.76rem!important;
}

/* ── xs-btn (quick-fill broken from table row) ────────────── */
#salesPortalPage .xs-btn{
  padding:3px 8px!important;
  font-size:.63rem!important;
  border-radius:5px!important;
  background:rgba(248,113,113,.1)!important;
  color:#f87171!important;
  border:1px solid rgba(248,113,113,.18)!important;
  cursor:pointer!important;
  font-family:inherit!important;
  font-weight:600!important;
  transition:background .15s!important;
}
#salesPortalPage .xs-btn:hover{
  background:rgba(248,113,113,.2)!important;
}

/* ── Full-info button (green) ─────────────────────────────── */
#salesPortalPage [data-sales-full-info]{
  background:rgba(34,197,94,.13)!important;
  color:#4ade80!important;
  border-color:rgba(34,197,94,.22)!important;
}
#salesPortalPage [data-sales-full-info]:hover{
  background:rgba(34,197,94,.24)!important;
}
body.light-theme #salesPortalPage [data-sales-full-info]{
  background:rgba(22,163,74,.1)!important;
  color:#15803d!important;
  border-color:rgba(22,163,74,.22)!important;
}
body.light-theme #salesPortalPage [data-sales-full-info]:hover{
  background:rgba(22,163,74,.2)!important;
}

/* ── Sales Full Info Modal ────────────────────────────────── */
#salesFullInfoModal .sp-fi-modal-card{
  width:min(640px,94vw);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
#salesFullInfoModal .sp-fi-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 16px;
  background:rgba(15,23,42,.6);
  border-bottom:1px solid rgba(56,189,248,.1);
  flex-shrink:0;
}
#salesFullInfoModal .sp-fi-modal-title{
  font-size:.88rem;
  font-weight:700;
  color:#7dd3fc;
}
#salesFullInfoModal .sp-fi-modal-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
#salesFullInfoModal .sp-fi-modal-btn{
  font-size:.75rem!important;
  padding:0 12px!important;
  min-height:32px!important;
  border-radius:7px!important;
}
#salesFullInfoModal .sp-fi-modal-close{
  min-height:32px!important;
  padding:0 12px!important;
  font-size:.8rem!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.9)!important;
  color:#0f172a!important;
}
#salesFullInfoModal .sp-fi-modal-body{
  padding:14px;
  overflow-y:auto;
  max-height:80vh;
}
#salesFullInfoModal .sp-fullinfo-rows{
  display:flex;
  flex-direction:column;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(56,189,248,.1);
}
#salesFullInfoModal .sp-fullinfo-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:8px 14px;
  border-bottom:1px solid rgba(56,189,248,.07);
}
#salesFullInfoModal .sp-fullinfo-row:last-child{
  border-bottom:none;
}
#salesFullInfoModal .sp-fullinfo-row:nth-child(even){
  background:rgba(56,189,248,.035);
}
#salesFullInfoModal .sp-fullinfo-row-label{
  font-size:.72rem;
  font-weight:600;
  color:rgba(125,211,252,.72);
  white-space:nowrap;
  flex-shrink:0;
}
#salesFullInfoModal .sp-fullinfo-row-value{
  font-size:.8rem;
  font-weight:700;
  color:#e2e8f0;
  word-break:break-all;
  text-align:left;
  direction:ltr;
}
#salesFullInfoModal .sp-fullinfo-row-value:not(.ltr-inline){
  direction:rtl;
  text-align:right;
}
#salesFullInfoModal .sp-fullinfo-row-value.ltr-inline{
  direction:ltr;
  text-align:left;
  font-family:monospace;
  font-size:.76rem;
}
body.light-theme #salesFullInfoModal .sp-fullinfo-rows{
  border-color:rgba(99,144,210,.15);
}
body.light-theme #salesFullInfoModal .sp-fullinfo-row{
  border-bottom-color:rgba(99,144,210,.1);
}
body.light-theme #salesFullInfoModal .sp-fullinfo-row:nth-child(even){
  background:rgba(14,165,233,.04);
}
body.light-theme #salesFullInfoModal .sp-fullinfo-row-label{
  color:rgba(3,105,161,.72);
}
body.light-theme #salesFullInfoModal .sp-fullinfo-row-value{
  color:#1e293b;
}
body.light-theme #salesFullInfoModal .sp-fi-modal-head{
  background:rgba(248,251,255,.95);
  border-bottom-color:rgba(99,144,210,.15);
}
body.light-theme #salesFullInfoModal .sp-fi-modal-title{
  color:#0369a1;
}
body.light-theme #salesFullInfoModal .sp-fi-modal-close{
  background:#e2e8f0!important;
}

/* ═══════════════════════════════════════════════════════════
   SP SALES PORTAL — Semantic Color System
   Variable definitions are page-scoped so this refactor only
   affects the account receive page for now.
   ═══════════════════════════════════════════════════════════ */

#salesPortalPage{
  --bg-main:linear-gradient(135deg,#08101f 0%,#0d1730 46%,#13264b 100%);
  --bg-surface:rgba(10,18,38,.76);
  --bg-input:rgba(14,23,45,.92);
  --text-primary:#f8fbff;
  --text-secondary:#c8d6ea;
  --text-muted:#9fb0c8;
  --border-color:rgba(133,166,214,.20);
  --accent-primary:#5bbcff;
  --table-header-bg:rgba(91,188,255,.08);
  --table-row-even:rgba(255,255,255,.02);
  --table-row-hover:rgba(91,188,255,.07);
  --status-success-bg:rgba(52,211,153,.14);
  --status-success-text:#89ffd0;
  --status-warning-bg:rgba(251,191,36,.15);
  --status-warning-text:#ffe08a;
  --status-error-bg:rgba(248,113,113,.16);
  --status-error-text:#ffc0c0;
  --status-info-bg:rgba(99,102,241,.16);
  --status-info-text:#c8caff;
  --status-muted-bg:rgba(148,163,184,.12);
  --status-muted-text:#ccd7e6;
  --shadow-soft:0 18px 42px rgba(2,6,23,.30);
  --shadow-elevated:0 26px 58px rgba(2,6,23,.42);
  --shadow-glow:0 0 0 1px rgba(255,255,255,.05) inset;
  --hero-panel-bg:
    radial-gradient(circle at 12% 14%,rgba(91,188,255,.22),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(124,92,255,.20),transparent 30%),
    radial-gradient(circle at 86% 86%,rgba(34,197,94,.14),transparent 30%),
    linear-gradient(140deg,rgba(8,15,34,.98) 0%,rgba(12,21,44,.96) 50%,rgba(14,28,58,.98) 100%);
  --hero-accent-bar:linear-gradient(90deg,#5bbcff 0%,#7287ff 48%,#37d39a 100%);
  --hero-glow:radial-gradient(ellipse at center,rgba(114,135,255,.14),transparent 72%);
  --surface-glass:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  --surface-highlight:rgba(255,255,255,.08);
  --surface-outline:rgba(255,255,255,.07);
  --surface-strong:rgba(255,255,255,.10);
  --accent-secondary:#8b5cf6;
  --accent-success:#34d399;
  --accent-danger:#f87171;
  --accent-warning:#fbbf24;
  --hero-kicker:var(--accent-primary);
  --hero-output-kicker:#67f0b2;
  --badge-primary-bg:rgba(91,188,255,.10);
  --badge-primary-border:rgba(91,188,255,.24);
  --badge-primary-text:#8bd3ff;
  --badge-secondary-bg:rgba(139,92,246,.10);
  --badge-secondary-border:rgba(139,92,246,.24);
  --badge-secondary-text:#d6b6ff;
  --badge-success-bg:rgba(52,211,153,.10);
  --badge-success-border:rgba(52,211,153,.22);
  --badge-success-text:#a4f5cd;
  --input-focus-border:rgba(91,188,255,.54);
  --input-focus-ring:rgba(91,188,255,.16);
  --search-panel-bg:rgba(8,16,35,.98);
  --result-bg:linear-gradient(135deg,rgba(14,165,233,.12),rgba(59,130,246,.10));
  --result-border:rgba(91,188,255,.20);
  --result-sep:rgba(91,188,255,.18);
  --result-text:#dff2ff;
  --result-empty:var(--text-muted);
  --button-bg:linear-gradient(135deg,#2d8cff 0%,#5569ff 55%,#7b4dff 100%);
  --button-bg-hover:linear-gradient(135deg,#1f7df4 0%,#465cf8 55%,#6b40ef 100%);
  --button-text:#ffffff;
  --button-shadow:0 16px 34px rgba(59,130,246,.28);
  --button-shadow-hover:0 22px 42px rgba(59,130,246,.34);
  --inventory-strip-bg:linear-gradient(160deg,rgba(7,14,31,.86),rgba(11,21,43,.90));
  --inventory-card-a:linear-gradient(135deg,rgba(91,188,255,.16),rgba(114,135,255,.10));
  --inventory-card-b:linear-gradient(135deg,rgba(139,92,246,.16),rgba(236,72,153,.08));
  --inventory-card-c:linear-gradient(135deg,rgba(52,211,153,.14),rgba(14,165,233,.08));
  --inventory-card-d:linear-gradient(135deg,rgba(251,191,36,.12),rgba(248,113,113,.08));
  --inventory-card-a-border:rgba(91,188,255,.22);
  --inventory-card-b-border:rgba(139,92,246,.22);
  --inventory-card-c-border:rgba(52,211,153,.22);
  --inventory-card-d-border:rgba(251,191,36,.20);
  --inventory-selected-bg:linear-gradient(180deg,rgba(34,197,94,.14),rgba(14,165,233,.10));
  --inventory-selected-border:rgba(52,211,153,.34);
  --inventory-selected-button:linear-gradient(135deg,#34d399,#14b8a6);
  --inventory-focus-bg:linear-gradient(135deg,rgba(91,188,255,.12),rgba(114,135,255,.08));
  --inventory-focus-border:rgba(91,188,255,.18);
  --surface-success:rgba(12,30,25,.76);
  --surface-warning:rgba(36,25,4,.74);
  --surface-danger:rgba(40,15,18,.74);
  --surface-info:rgba(22,22,48,.76);
}

body.light-theme #salesPortalPage{
  --bg-main:linear-gradient(135deg,#f7fbff 0%,#eef4ff 48%,#f4f8ff 100%);
  --bg-surface:rgba(255,255,255,.90);
  --bg-input:#ffffff;
  --text-primary:#0f172a;
  --text-secondary:#334155;
  --text-muted:#64748b;
  --border-color:rgba(148,163,184,.28);
  --accent-primary:#2563eb;
  --table-header-bg:rgba(37,99,235,.06);
  --table-row-even:rgba(241,245,255,.78);
  --table-row-hover:rgba(37,99,235,.06);
  --status-success-bg:rgba(22,163,74,.11);
  --status-success-text:#166534;
  --status-warning-bg:rgba(245,158,11,.14);
  --status-warning-text:#92400e;
  --status-error-bg:rgba(220,38,38,.11);
  --status-error-text:#b91c1c;
  --status-info-bg:rgba(79,70,229,.10);
  --status-info-text:#4338ca;
  --status-muted-bg:rgba(148,163,184,.14);
  --status-muted-text:#475569;
  --shadow-soft:0 14px 32px rgba(148,163,184,.18);
  --shadow-elevated:0 20px 46px rgba(148,163,184,.22);
  --shadow-glow:0 0 0 1px rgba(255,255,255,.78) inset;
  --hero-panel-bg:
    radial-gradient(circle at 10% 16%,rgba(59,130,246,.14),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(99,102,241,.12),transparent 28%),
    radial-gradient(circle at 86% 86%,rgba(34,197,94,.10),transparent 28%),
    linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(243,247,255,.98) 50%,rgba(235,242,255,.98) 100%);
  --hero-accent-bar:linear-gradient(90deg,#2563eb 0%,#4f46e5 50%,#16a34a 100%);
  --hero-glow:radial-gradient(ellipse at center,rgba(79,70,229,.08),transparent 72%);
  --surface-glass:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,251,255,.94));
  --surface-highlight:rgba(255,255,255,.92);
  --surface-outline:rgba(148,163,184,.14);
  --surface-strong:rgba(226,232,240,.66);
  --accent-secondary:#6d28d9;
  --accent-success:#16a34a;
  --accent-danger:#dc2626;
  --accent-warning:#d97706;
  --hero-kicker:#2563eb;
  --hero-output-kicker:#15803d;
  --badge-primary-bg:rgba(37,99,235,.08);
  --badge-primary-border:rgba(37,99,235,.18);
  --badge-primary-text:#1d4ed8;
  --badge-secondary-bg:rgba(109,40,217,.08);
  --badge-secondary-border:rgba(109,40,217,.16);
  --badge-secondary-text:#6d28d9;
  --badge-success-bg:rgba(22,163,74,.08);
  --badge-success-border:rgba(22,163,74,.16);
  --badge-success-text:#15803d;
  --input-focus-border:rgba(37,99,235,.42);
  --input-focus-ring:rgba(37,99,235,.10);
  --search-panel-bg:rgba(255,255,255,.99);
  --result-bg:linear-gradient(135deg,rgba(37,99,235,.08),rgba(14,165,233,.06));
  --result-border:rgba(37,99,235,.18);
  --result-sep:rgba(37,99,235,.16);
  --result-text:#075985;
  --result-empty:#64748b;
  --button-bg:linear-gradient(135deg,#2563eb 0%,#4f46e5 55%,#7c3aed 100%);
  --button-bg-hover:linear-gradient(135deg,#1d4ed8 0%,#4338ca 55%,#6d28d9 100%);
  --button-text:#ffffff;
  --button-shadow:0 14px 28px rgba(59,130,246,.22);
  --button-shadow-hover:0 18px 34px rgba(59,130,246,.28);
  --inventory-strip-bg:linear-gradient(160deg,rgba(255,255,255,.96),rgba(246,250,255,.94));
  --inventory-card-a:linear-gradient(135deg,rgba(37,99,235,.09),rgba(79,70,229,.06));
  --inventory-card-b:linear-gradient(135deg,rgba(109,40,217,.08),rgba(236,72,153,.05));
  --inventory-card-c:linear-gradient(135deg,rgba(22,163,74,.08),rgba(14,165,233,.05));
  --inventory-card-d:linear-gradient(135deg,rgba(217,119,6,.08),rgba(220,38,38,.05));
  --inventory-card-a-border:rgba(37,99,235,.16);
  --inventory-card-b-border:rgba(109,40,217,.16);
  --inventory-card-c-border:rgba(22,163,74,.16);
  --inventory-card-d-border:rgba(217,119,6,.16);
  --inventory-selected-bg:linear-gradient(180deg,rgba(236,253,245,.96),rgba(239,246,255,.96));
  --inventory-selected-border:rgba(22,163,74,.26);
  --inventory-selected-button:linear-gradient(135deg,#16a34a,#0f766e);
  --inventory-focus-bg:linear-gradient(135deg,rgba(37,99,235,.08),rgba(79,70,229,.06));
  --inventory-focus-border:rgba(148,163,184,.20);
  --surface-success:rgba(240,253,244,.96);
  --surface-warning:rgba(255,251,235,.96);
  --surface-danger:rgba(254,242,242,.96);
  --surface-info:rgba(238,242,255,.96);
}

#salesPortalPage{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

#salesPortalPage .sp-shell{ background:var(--bg-main)!important; }
#salesPortalPage .sp-header{
  background:var(--bg-surface)!important;
  border-color:var(--border-color)!important;
  box-shadow:var(--shadow-soft)!important;
}
#salesPortalPage .sp-header-title{ color:var(--text-primary)!important; }
#salesPortalPage .sp-header-sub{ color:var(--text-secondary)!important; }
#salesPortalPage .sp-header-icon{
  background:var(--table-header-bg)!important;
  border-color:var(--border-color)!important;
  color:var(--accent-primary)!important;
}
#salesPortalPage .sp-actor-field label,
#salesPortalPage .sp-panel-title,
#salesPortalPage .iv-stat-label,
#salesPortalPage .sp-field label{
  color:var(--text-muted)!important;
}
#salesPortalPage .sp-actor-field input,
#salesPortalPage .sp-btn-back,
#salesPortalPage .sp-btn-refresh{
  background:var(--bg-input)!important;
  border-color:var(--border-color)!important;
  color:var(--text-secondary)!important;
}
#salesPortalPage .sp-actor-field input:focus,
#salesPortalPage .sp-btn-back:hover,
#salesPortalPage .sp-btn-refresh:hover{
  border-color:var(--input-focus-border)!important;
  box-shadow:0 0 0 3px var(--input-focus-ring)!important;
  color:var(--text-primary)!important;
}
#salesPortalPage .sp-panel{
  background:var(--bg-surface)!important;
  border-color:var(--border-color)!important;
  box-shadow:var(--shadow-soft),var(--shadow-glow)!important;
}
#salesPortalPage .sp-panel-head{ border-bottom-color:var(--border-color)!important; }
#salesPortalPage .sp-panel-assign{
  background:var(--hero-panel-bg)!important;
  border-color:var(--border-color)!important;
  border-radius:24px!important;
  padding:20px 26px!important;
  box-shadow:var(--shadow-elevated),var(--shadow-glow)!important;
}
#salesPortalPage .sp-panel-assign::before{
  background:var(--hero-accent-bar)!important;
  height:3px!important;
}
#salesPortalPage .sp-panel-assign::after{
  content:'';
  position:absolute;
  top:-60px;
  left:50%;
  transform:translateX(-50%);
  width:70%;
  height:200px;
  background:var(--hero-glow);
  pointer-events:none;
  z-index:0;
}
#salesPortalPage .sp-panel-assign>*{ position:relative;z-index:1; }
#salesPortalPage .sp-panel-assign .sp-panel-head-hero{
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  gap:10px!important;
}
#salesPortalPage .sp-panel-assign .sp-hero-copy{
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  gap:6px!important;
  max-width:680px!important;
  margin:0 auto!important;
  background:transparent!important;
  border:none!important;
  padding:6px 0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#salesPortalPage .sp-panel-assign .sp-panel-icon-lg{ display:block;margin-bottom:4px; }
#salesPortalPage .sp-panel-assign .sp-hero-sub{
  text-align:center!important;
  max-width:560px!important;
  margin:0 auto!important;
}
#salesPortalPage .sp-panel-assign .sp-hero-badges{ justify-content:center!important; }
#salesPortalPage .sp-panel-title-hero,
#salesPortalPage .sp-assign-stage-kicker{ color:var(--hero-kicker)!important; }
#salesPortalPage .sp-assign-result-kicker{ color:var(--hero-output-kicker)!important; }
#salesPortalPage .sp-hero-title,
#salesPortalPage .sp-assign-stage-title,
#salesPortalPage .sp-assign-result-title,
#salesPortalPage .iv-alert-title,
#salesPortalPage .iv-product-name,
#salesPortalPage .sp-product-card-value,
#salesPortalPage .sp-fi-modal-title{
  color:var(--text-primary)!important;
}
#salesPortalPage .sp-hero-sub,
#salesPortalPage .sp-assign-stage-sub,
#salesPortalPage .sp-side-sub,
#salesPortalPage .iv-alert-body,
#salesPortalPage .iv-product-metrics,
#salesPortalPage .iv-product-code,
#salesPortalPage .sp-product-card-copy,
#salesPortalPage .iv-stat-sub,
#salesPortalPage .sp-fullinfo-head-sub,
#salesPortalPage .iv-empty{
  color:var(--text-secondary)!important;
}
#salesPortalPage .sp-hero-badge:nth-child(1){
  background:var(--badge-primary-bg)!important;
  border-color:var(--badge-primary-border)!important;
  color:var(--badge-primary-text)!important;
}
#salesPortalPage .sp-hero-badge:nth-child(2){
  background:var(--badge-secondary-bg)!important;
  border-color:var(--badge-secondary-border)!important;
  color:var(--badge-secondary-text)!important;
}
#salesPortalPage .sp-hero-badge:nth-child(3){
  background:var(--badge-success-bg)!important;
  border-color:var(--badge-success-border)!important;
  color:var(--badge-success-text)!important;
}
#salesPortalPage .sp-assign-hero-body{
  grid-template-columns:minmax(0,1fr)!important;
  gap:14px!important;
  margin-top:12px!important;
}
#salesPortalPage .sp-assign-form-stage,
#salesPortalPage .sp-assign-result-stage,
#salesPortalPage .sp-panel-fullinfo{
  background:var(--surface-glass)!important;
  border-color:var(--surface-outline)!important;
  box-shadow:var(--shadow-soft),var(--shadow-glow)!important;
}
#salesPortalPage .sp-assign-form-stage{
  position:relative;
  border-radius:16px!important;
}
#salesPortalPage .sp-assign-form-stage::before{
  content:'';
  position:absolute;
  top:16px;
  left:16px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent-success);
  box-shadow:0 0 10px var(--accent-success);
  z-index:2;
}
#salesPortalPage .sp-field input,
#salesPortalPage .sp-field select,
#salesPortalPage .sp-searchable-trigger,
#salesPortalPage .sp-searchable-search{
  background:var(--bg-input)!important;
  border-color:var(--border-color)!important;
  color:var(--text-primary)!important;
}
#salesPortalPage .sp-field input::placeholder,
#salesPortalPage .sp-searchable-search::placeholder,
#salesPortalPage .sp-assigned-search::placeholder{
  color:var(--text-muted)!important;
  opacity:1!important;
}
#salesPortalPage .sp-field input:focus,
#salesPortalPage .sp-field select:focus,
#salesPortalPage .sp-searchable-trigger:hover,
#salesPortalPage .sp-searchable-trigger[aria-expanded="true"],
#salesPortalPage .sp-searchable-search:focus,
#salesPortalPage .sp-assigned-search:focus{
  border-color:var(--input-focus-border)!important;
  box-shadow:0 0 0 3px var(--input-focus-ring)!important;
  background:var(--bg-input)!important;
}
#salesPortalPage .sp-field input,
#salesPortalPage .sp-field select,
#salesPortalPage .sp-searchable-trigger{
  border-radius:12px!important;
}
#salesPortalPage .sp-searchable-panel{
  background:var(--search-panel-bg)!important;
  border-color:var(--border-color)!important;
  box-shadow:var(--shadow-elevated),var(--shadow-glow)!important;
}
#salesPortalPage .sp-searchable-search-wrap{ border-bottom-color:var(--border-color)!important; }
#salesPortalPage .sp-searchable-option{
  color:var(--text-secondary)!important;
}
#salesPortalPage .sp-searchable-option:hover{
  background:var(--table-row-hover)!important;
  color:var(--text-primary)!important;
}
#salesPortalPage .sp-searchable-option.is-selected{
  background:var(--table-header-bg)!important;
  color:var(--accent-primary)!important;
}
#salesPortalPage .sp-searchable-empty{ color:var(--text-muted)!important; }
#salesPortalPage .sp-assigned-search{
  background:var(--bg-input)!important;
  border-color:var(--border-color)!important;
  color:var(--text-secondary)!important;
}
#salesPortalPage .sp-assign-result-stage{
  background:var(--result-bg)!important;
  border-color:var(--result-border)!important;
  border-radius:16px!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:16px!important;
  padding:14px 18px!important;
}
#salesPortalPage .sp-assign-result-head{
  margin-bottom:0!important;
  flex-shrink:0;
  min-width:120px;
  border-right:1px solid var(--result-sep);
  padding-right:16px;
}
#salesPortalPage .sp-assign-result-stage .iv-preview-summary{
  flex:1!important;
  min-height:60px!important;
}
#salesPortalPage .iv-preview-summary{
  background:var(--result-bg)!important;
  border:1px solid var(--result-border)!important;
  color:var(--result-text)!important;
}
#salesPortalPage .sp-assign-result-stage .iv-preview-summary.empty,
#salesPortalPage .iv-preview-summary.empty{
  background:transparent!important;
  color:var(--result-empty)!important;
}
#salesPortalPage .sp-panel-actions-hero{
  margin-top:16px;
  display:flex;
  justify-content:flex-end;
}
#salesPortalPage .sp-btn-assign{
  width:auto!important;
  min-height:56px!important;
  padding:0 36px!important;
  font-size:1rem!important;
  border-radius:14px!important;
  background:var(--button-bg)!important;
  box-shadow:var(--button-shadow)!important;
  color:var(--button-text)!important;
  letter-spacing:-.01em!important;
}
#salesPortalPage .sp-btn-assign:hover{
  background:var(--button-bg-hover)!important;
  box-shadow:var(--button-shadow-hover)!important;
  transform:translateY(-2px)!important;
}
#salesPortalPage .sp-panel-inventory-strip{
  padding:14px 18px!important;
  gap:12px!important;
  background:var(--inventory-strip-bg)!important;
}
#salesPortalPage .sp-panel-inventory-strip .sp-product-grid{ min-height:auto!important; }
#salesPortalPage .sp-product-grid-h{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  overflow-y:visible!important;
  min-height:auto!important;
}
#salesPortalPage .sp-panel-inventory-strip .iv-product-card{
  flex:1 1 155px!important;
  min-width:148px!important;
  max-width:230px!important;
  padding:12px 14px!important;
  border-radius:16px!important;
}
#salesPortalPage .sp-panel-inventory-strip .iv-product-card:nth-child(4n+1){
  background:var(--inventory-card-a)!important;
  border-color:var(--inventory-card-a-border)!important;
}
#salesPortalPage .sp-panel-inventory-strip .iv-product-card:nth-child(4n+2){
  background:var(--inventory-card-b)!important;
  border-color:var(--inventory-card-b-border)!important;
}
#salesPortalPage .sp-panel-inventory-strip .iv-product-card:nth-child(4n+3){
  background:var(--inventory-card-c)!important;
  border-color:var(--inventory-card-c-border)!important;
}
#salesPortalPage .sp-panel-inventory-strip .iv-product-card:nth-child(4n+4){
  background:var(--inventory-card-d)!important;
  border-color:var(--inventory-card-d-border)!important;
}
#salesPortalPage .sp-panel-inventory-strip .iv-product-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:var(--shadow-soft)!important;
}
#salesPortalPage .iv-product-card.iv-product-card-sales.is-selected{
  background:var(--inventory-selected-bg)!important;
  border-color:var(--inventory-selected-border)!important;
  box-shadow:var(--shadow-elevated),var(--shadow-glow)!important;
}
#salesPortalPage .sp-product-card-focus{
  background:var(--inventory-focus-bg)!important;
  border-color:var(--inventory-focus-border)!important;
}
#salesPortalPage .sp-product-card-btn{
  background:var(--bg-input)!important;
  color:var(--accent-primary)!important;
  border-color:var(--border-color)!important;
  box-shadow:var(--shadow-soft)!important;
}
#salesPortalPage .sp-product-card-btn:hover{
  background:var(--surface-highlight)!important;
}
#salesPortalPage .sp-product-card-btn-secondary{
  background:transparent!important;
  color:var(--text-secondary)!important;
  box-shadow:none!important;
}
#salesPortalPage .sp-product-card-btn-secondary:hover{
  background:var(--surface-highlight)!important;
  color:var(--text-primary)!important;
}
#salesPortalPage .iv-product-card.iv-product-card-sales.is-selected .sp-product-card-btn{
  background:var(--inventory-selected-button)!important;
  color:var(--button-text)!important;
  border-color:transparent!important;
}
#salesPortalPage .iv-product-card.iv-product-card-sales.is-selected .sp-product-card-btn-secondary{
  background:transparent!important;
  color:var(--text-secondary)!important;
  border-color:var(--border-color)!important;
}
#salesPortalPage .iv-stat-card{
  background:var(--bg-surface)!important;
  border-color:var(--border-color)!important;
  box-shadow:var(--shadow-soft)!important;
}
#salesPortalPage .iv-stat-value,
#salesPortalPage .iv-stat-val,
#salesPortalPage .iv-table td,
#salesPortalPage .sp-fullinfo-row-value,
#salesPortalPage .sp-fi-modal-close{
  color:var(--text-primary)!important;
}
#salesPortalPage .iv-alert-card-ok{
  background:var(--surface-success)!important;
  border-color:var(--status-success-bg)!important;
}
#salesPortalPage .iv-alert-card-warn{
  background:var(--surface-warning)!important;
  border-color:var(--status-warning-bg)!important;
}
#salesPortalPage .sp-table-wrap,
#salesPortalPage .sp-fullinfo-rows,
#salesFullInfoModal .sp-fullinfo-rows{
  border-color:var(--border-color)!important;
}
#salesPortalPage .iv-table{
  color:var(--text-secondary)!important;
}
#salesPortalPage .iv-table thead tr{
  background:var(--table-header-bg)!important;
  border-bottom:1px solid var(--border-color)!important;
}
#salesPortalPage .iv-table th{
  color:var(--accent-primary)!important;
}
#salesPortalPage .iv-table td{
  border-bottom-color:var(--border-color)!important;
}
#salesPortalPage .iv-table tbody tr:nth-child(even) td{
  background:var(--table-row-even)!important;
}
#salesPortalPage .iv-table tbody tr:hover td{
  background:var(--table-row-hover)!important;
}
#salesPortalPage .iv-table.iv-table-assigned{
  table-layout:fixed!important;
  border-collapse:collapse!important;
  width:100%!important;
  min-width:0!important;
}
#salesPortalPage .iv-table.iv-table-assigned col.sp-col-product{ width:10%; }
#salesPortalPage .iv-table.iv-table-assigned col.sp-col-email{ width:28%; }
#salesPortalPage .iv-table.iv-table-assigned col.sp-col-order{ width:8%; }
#salesPortalPage .iv-table.iv-table-assigned col.sp-col-status{ width:9%; }
#salesPortalPage .iv-table.iv-table-assigned col.sp-col-time{ width:15%; }
#salesPortalPage .iv-table.iv-table-assigned col.sp-col-info{ width:8%; }
#salesPortalPage .iv-table.iv-table-assigned col.sp-col-actions{ width:8%; }
#salesPortalPage .iv-table.iv-table-assigned thead th{
  height:50px!important;
  vertical-align:middle!important;
}
#salesPortalPage .iv-table.iv-table-assigned tbody tr{
  height:58px!important;
}
#salesPortalPage .iv-table.iv-table-assigned tbody td{
  height:58px!important;
  padding:8px 10px!important;
  vertical-align:middle!important;
  line-height:1.25!important;
  border-bottom:1px solid var(--border-color)!important;
  background-clip:padding-box!important;
}
#salesPortalPage .iv-table.iv-table-assigned tbody tr:last-child td{
  border-bottom:1px solid var(--border-color)!important;
}
#salesPortalPage .iv-table.iv-table-assigned tbody tr:hover td{
  background:var(--table-row-hover)!important;
}
#salesPortalPage .iv-table.iv-table-assigned .sp-assigned-cell-text{
  display:flex;
  align-items:center;
  width:100%;
  min-height:40px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#salesPortalPage .iv-table.iv-table-assigned .sp-assigned-cell-text-ltr{
  direction:ltr;
  text-align:left;
}
#salesPortalPage .iv-table.iv-table-assigned .sp-assigned-product-cell,
#salesPortalPage .iv-table.iv-table-assigned .sp-assigned-email-cell,
#salesPortalPage .iv-table.iv-table-assigned .sp-assigned-order-cell,
#salesPortalPage .iv-table.iv-table-assigned .sp-assigned-time-cell{
  vertical-align:middle!important;
}
#salesPortalPage .iv-table.iv-table-assigned .sp-assigned-email-cell,
#salesPortalPage .iv-table.iv-table-assigned .sp-assigned-order-cell,
#salesPortalPage .iv-table.iv-table-assigned .sp-assigned-time-cell{
  font-variant-numeric:tabular-nums;
}
#salesPortalPage .iv-table.iv-table-assigned .sp-assigned-status-cell,
#salesPortalPage .iv-table.iv-table-assigned .sp-assigned-action-cell{
  text-align:center!important;
}
#salesPortalPage .iv-table.iv-table-assigned .sp-assigned-action-cell .xs-btn{
  min-width:92px!important;
  max-width:100%!important;
  min-height:36px!important;
  padding:0 10px!important;
  font-size:.67rem!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}
#salesPortalPage .iv-table.iv-table-assigned .sp-assigned-empty-cell{
  text-align:center!important;
  padding:20px 14px!important;
}
#salesPortalPage .iv-status-ok{
  background:var(--status-success-bg)!important;
  color:var(--status-success-text)!important;
}
#salesPortalPage .iv-status-warn{
  background:var(--status-warning-bg)!important;
  color:var(--status-warning-text)!important;
}
#salesPortalPage .iv-status-pri{
  background:var(--status-info-bg)!important;
  color:var(--status-info-text)!important;
}
#salesPortalPage .iv-status-danger,
#salesPortalPage .xs-btn{
  background:var(--status-error-bg)!important;
  color:var(--status-error-text)!important;
  border-color:var(--status-error-bg)!important;
}
#salesPortalPage .iv-status-muted{
  background:var(--status-muted-bg)!important;
  color:var(--status-muted-text)!important;
}
#salesPortalPage [data-sales-full-info]{
  background:var(--status-success-bg)!important;
  color:var(--status-success-text)!important;
  border-color:var(--status-success-bg)!important;
}
#salesPortalPage [data-sales-full-info]:hover{
  background:var(--badge-success-bg)!important;
}
#salesPortalPage .sp-fullinfo-row,
#salesFullInfoModal .sp-fullinfo-row{
  border-bottom-color:var(--border-color)!important;
}
#salesPortalPage .sp-fullinfo-row:nth-child(even),
#salesFullInfoModal .sp-fullinfo-row:nth-child(even){
  background:var(--table-row-even)!important;
}
#salesPortalPage .sp-fullinfo-row-label,
#salesFullInfoModal .sp-fullinfo-row-label{
  color:var(--accent-primary)!important;
}
#salesPortalPage #salesInventoryFullInfoCloseBtn,
#salesFullInfoModal .sp-fi-modal-close{
  background:var(--surface-highlight)!important;
  border-color:var(--border-color)!important;
}
#salesFullInfoModal .sp-fi-modal-head{
  background:var(--bg-surface)!important;
  border-bottom-color:var(--border-color)!important;
}
#salesFullInfoModal .sp-fullinfo-row-value{
  color:var(--text-primary)!important;
}
@media (max-width: 1180px){
  .sp-grid.sp-grid-priority{
    grid-template-columns:minmax(0,1fr);
  }
  .sp-assign-hero-body{
    grid-template-columns:minmax(0,1fr);
  }
}
@media (max-width: 760px){
  .sp-panel-head-hero{
    flex-direction:column;
  }
  .sp-hero-badges{
    justify-content:flex-start;
  }
  .sp-hero-title{
    font-size:1.28rem;
  }
  .sp-form-grid.sp-form-grid-hero{
    grid-template-columns:minmax(0,1fr);
  }
  .sp-form-grid.sp-form-grid-broken{
    grid-template-columns:minmax(0,1fr);
  }
  .sp-searchable-trigger,
  .sp-field input,
  .sp-field select{
    font-size:.95rem;
  }
  #salesPortalPage .sp-btn-assign{
    width:100%;
    min-height:58px;
    font-size:1.08rem;
  }
  #salesPortalPage .iv-preview-summary{
    min-height:96px;
    padding:16px!important;
  }
}
@media(max-width:640px){
  #salesPortalPage .sp-fullinfo-panel-head{
    flex-direction:column;
    align-items:stretch;
  }
  #salesPortalPage .sp-fullinfo-toolbar{
    width:100%;
  }
  #salesPortalPage .sp-fullinfo-toolbar .btn{
    flex:1 1 0;
  }
}
@media(max-width:480px){
  #salesPortalPage .sp-panel-fullinfo{
    padding:14px;
  }
}

/* ── Sales Portal — Responsive ────────────────────────────── */
@media(max-width:980px){
  .sp-shell{ padding:10px; gap:8px; }
  .sp-header{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .sp-actor-bar{
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  .sp-actor-field-wide input{ width:100%; }
  .sp-stats-row{ grid-template-columns:repeat(2,1fr); }
  .sp-grid{ grid-template-columns:minmax(0,1fr); }
  .sp-form-grid{ grid-template-columns:1fr; }
  .sp-panel-head-table{
    align-items:stretch;
  }
  .sp-assigned-search{
    width:100%;
    margin-right:0;
  }
}
@media(max-width:600px){
  .sp-actor-field input{ width:100%; }
  .sp-actor-bar{ gap:6px; }
  .sp-alerts-row{ flex-direction:column; }
  #salesPortalPage .iv-alert-card{ min-width:0; }
}

.pageid-badge{
  position:fixed;
  top:6px;
  inset-inline-start:10px;
  z-index:2147483647;
  padding:3px 7px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:999px;
  background:rgba(15,23,42,.48);
  color:rgba(255,255,255,.72);
  font-size:10px;
  line-height:1;
  font-weight:700;
  opacity:.58;
  cursor:pointer;
  pointer-events:auto;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(15,23,42,.16);
}
.pageid-badge:hover{
  opacity:.88;
}
body.light-theme .pageid-badge{
  background:rgba(255,255,255,.8);
  color:rgba(15,23,42,.72);
  border-color:rgba(148,163,184,.28);
}
/* ═══════════════════════════════════════════
   Admins Page — Redesign v2
   Row-based layout: compact form + full-width list
═══════════════════════════════════════════ */

/* ── Page wrapper ── */
.adm-page{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* ── Page Header ── */
.adm-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(30,41,59,.7) 0%,rgba(15,23,42,.85) 100%);
  border:1px solid rgba(59,130,246,.13);
  box-shadow:0 4px 20px rgba(0,0,0,.28);
}
.adm-header-info{
  display:flex;
  align-items:center;
  gap:14px;
}
.adm-header-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(129,140,248,.15));
  border:1px solid rgba(96,165,250,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:23px;
  flex-shrink:0;
  box-shadow:0 0 18px rgba(59,130,246,.12);
}
.adm-header-title{
  margin:0 0 3px;
  font-size:20px;
  font-weight:900;
  color:#f1f5f9;
  letter-spacing:-.3px;
}
.adm-header-sub{
  margin:0;
  font-size:12.5px;
  color:#64748b;
}
.adm-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.adm-refresh-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 15px;
  border-radius:10px;
  background:rgba(148,163,184,.08);
  border:1px solid rgba(148,163,184,.13);
  color:#94a3b8;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s,color .15s;
}
.adm-refresh-btn:hover{
  background:rgba(96,165,250,.12);
  color:#93c5fd;
  border-color:rgba(96,165,250,.25);
}

/* ══════════════════════════════════════
   Compact Form Bar (single-row design)
══════════════════════════════════════ */
.adm-form-bar{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.1);
  background:linear-gradient(160deg,#1e293b,#18243a);
  box-shadow:0 4px 24px rgba(0,0,0,.25);
  overflow:hidden;
}

/* Row 1: meta + fields + buttons */
.adm-bar-row1{
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding:14px 18px 12px;
  border-bottom:1px solid rgba(148,163,184,.07);
}
.adm-bar-meta{
  display:flex;
  flex-direction:column;
  gap:5px;
  flex-shrink:0;
}
.adm-bar-section-label{
  font-size:11px;
  font-weight:700;
  color:#475569;
  letter-spacing:.5px;
  text-transform:uppercase;
  white-space:nowrap;
}
.adm-mode-tag{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(59,130,246,.12);
  border:1px solid rgba(96,165,250,.2);
  color:#93c5fd;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.adm-bar-fields{
  display:flex;
  gap:10px;
  flex:1;
  min-width:0;
}
.adm-bar-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
  min-width:0;
}
.adm-bar-field--sm{
  flex:0 0 140px;
}
.adm-bar-flabel{
  font-size:11px;
  font-weight:700;
  color:#475569;
  letter-spacing:.3px;
  white-space:nowrap;
}
.adm-bar-input{
  width:100%;
  padding:9px 11px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.55);
  color:#f1f5f9;
  font-size:13px;
  font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
  box-sizing:border-box;
}
.adm-bar-input:focus{
  outline:none;
  border-color:rgba(96,165,250,.45);
  background:rgba(15,23,42,.8);
  box-shadow:0 0 0 3px rgba(59,130,246,.1);
}
.adm-bar-input::placeholder{
  color:#334155;
}
select.adm-bar-input{
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:10px center;
}
.adm-bar-btns{
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-shrink:0;
}
.adm-save-btn{
  padding:9px 20px!important;
  white-space:nowrap;
}
.adm-cancel-btn{
  padding:9px 14px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(148,163,184,.06);
  color:#94a3b8;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s;
  white-space:nowrap;
}
.adm-cancel-btn:hover{
  background:rgba(248,113,113,.1);
  border-color:rgba(248,113,113,.22);
  color:#fca5a5;
}

/* Row 2: portal toggles */
.adm-bar-row2{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 18px 12px;
}
.adm-portals-label-inline{
  font-size:11.5px;
  font-weight:700;
  color:#475569;
  white-space:nowrap;
  flex-shrink:0;
}
.adm-portals-inline{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.adm-portal-pill{
  cursor:pointer;
}
.adm-portal-pill input{
  display:none;
}
.adm-portal-pill > span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 13px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.4);
  color:#475569;
  font-size:12.5px;
  font-weight:700;
  transition:all .15s ease;
  user-select:none;
}
.adm-portal-pill > span:hover{
  border-color:rgba(96,165,250,.25);
  background:rgba(59,130,246,.06);
  color:#94a3b8;
}
.adm-portal-pill input:checked + span{
  border-color:rgba(96,165,250,.4);
  background:linear-gradient(135deg,rgba(59,130,246,.16),rgba(129,140,248,.08));
  color:#bfdbfe;
  box-shadow:0 0 10px rgba(59,130,246,.12);
}

/* ══════════════════════════════════════
   Admin List Card — full width
══════════════════════════════════════ */
.adm-list-card{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.1);
  background:linear-gradient(160deg,#1e293b,#18243a);
  box-shadow:0 4px 24px rgba(0,0,0,.25);
  overflow:hidden;
}
.adm-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 20px;
  border-bottom:1px solid rgba(148,163,184,.07);
  background:rgba(255,255,255,.02);
}
.adm-card-title{
  font-size:14.5px;
  font-weight:800;
  color:#f1f5f9;
}

/* Stats row */
.admins-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  padding:14px 20px 10px;
}
.admins-stat-card{
  padding:13px 16px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.07);
  background:rgba(15,23,42,.3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.admins-stat-label{
  font-size:12px;
  font-weight:600;
  color:#64748b;
}
.admins-stat-value{
  font-size:24px;
  font-weight:900;
  color:#f1f5f9;
  line-height:1;
}

/* Table */
.adm-table-wrap{
  overflow-x:auto;
  overflow-y:auto;
  max-height:420px;
  padding:0 20px 16px;
}
.adm-table{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
}
.adm-table thead{
  position:sticky;
  top:0;
  z-index:2;
}
.adm-table thead th{
  padding:10px 12px;
  text-align:right;
  font-size:10.5px;
  font-weight:700;
  color:#64748b;
  letter-spacing:.5px;
  text-transform:uppercase;
  border-bottom:1px solid rgba(148,163,184,.1);
  white-space:nowrap;
  background:#18243a;
}
.adm-table tbody tr{
  border-bottom:1px solid rgba(148,163,184,.05);
  transition:background .12s;
}
.adm-table tbody tr:last-child{ border-bottom:none; }
.adm-table tbody tr:hover{ background:rgba(59,130,246,.05); }
.adm-table tbody td{
  padding:11px 12px;
  font-size:13px;
  color:#e2e8f0;
  vertical-align:middle;
}
.adm-empty-row{
  text-align:center;
  color:#475569!important;
  padding:36px!important;
  font-size:14px!important;
}

/* Email cell */
.admins-email-main{
  font-weight:700;
  color:#f1f5f9;
  font-size:13px;
}
.admins-email-sub{
  margin-top:3px;
  color:#64748b;
  font-size:11.5px;
}

/* Chips */
.admins-chip-list,
.admins-actions{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.admins-chip{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(59,130,246,.1);
  border:1px solid rgba(96,165,250,.16);
  color:#93c5fd;
  font-size:11px;
  font-weight:700;
}
.admins-chip-empty{
  background:rgba(148,163,184,.07);
  border-color:rgba(148,163,184,.1);
  color:#475569;
}

/* Status badges */
.admins-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
}
.admins-status.is-active{
  background:rgba(52,211,153,.1);
  border:1px solid rgba(52,211,153,.2);
  color:#6ee7b7;
}
.admins-status.is-inactive{
  background:rgba(248,113,113,.1);
  border:1px solid rgba(248,113,113,.2);
  color:#fca5a5;
}
.admins-status.is-verified{
  background:rgba(52,211,153,.1);
  border:1px solid rgba(52,211,153,.2);
  color:#6ee7b7;
}
.admins-status.is-unverified{
  background:rgba(251,191,36,.1);
  border:1px solid rgba(251,191,36,.2);
  color:#fcd34d;
}
.admins-actions .btn{
  padding:5px 11px!important;
  font-size:11.5px!important;
  border-radius:8px!important;
}

/* ── Light Theme ── */
body.light-theme .adm-header{
  background:linear-gradient(135deg,#fff,#f1f5ff);
  border-color:rgba(59,130,246,.1);
  box-shadow:0 4px 18px rgba(59,130,246,.06);
}
body.light-theme .adm-header-icon{
  background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(129,140,248,.07));
  border-color:rgba(96,165,250,.18);
}
body.light-theme .adm-header-title{ color:#0f172a; }
body.light-theme .adm-header-sub{ color:#64748b; }
body.light-theme .adm-refresh-btn{ background:#f1f5f9; border-color:#e2e8f0; color:#64748b; }
body.light-theme .adm-form-bar,
body.light-theme .adm-list-card{
  background:linear-gradient(160deg,#fff,#f8faff);
  border-color:rgba(148,163,184,.18);
}
body.light-theme .adm-bar-row1{ border-bottom-color:rgba(148,163,184,.1); }
body.light-theme .adm-card-head{
  background:rgba(248,250,255,.9);
  border-bottom-color:rgba(148,163,184,.1);
}
body.light-theme .adm-card-title{ color:#0f172a; }
body.light-theme .adm-mode-tag{ background:rgba(59,130,246,.07); border-color:rgba(59,130,246,.15); color:#3b82f6; }
body.light-theme .adm-bar-section-label,
body.light-theme .adm-bar-flabel,
body.light-theme .adm-portals-label-inline{ color:#64748b; }
body.light-theme .adm-bar-input{
  background:#f8faff;
  border-color:#dde5f2;
  color:#0f172a;
}
body.light-theme .adm-bar-input::placeholder{ color:#94a3b8; }
body.light-theme .adm-bar-input:focus{ background:#fff; border-color:rgba(59,130,246,.45); box-shadow:0 0 0 3px rgba(59,130,246,.08); }
body.light-theme .adm-portal-pill > span{ background:#f1f5f9; border-color:#dde5f2; color:#64748b; }
body.light-theme .adm-portal-pill input:checked + span{
  background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(129,140,248,.06));
  border-color:rgba(96,165,250,.3);
  color:#3b82f6;
}
body.light-theme .adm-cancel-btn{ background:#f1f5f9; border-color:#e2e8f0; color:#64748b; }
body.light-theme .admins-stat-card{ background:#f8faff; border-color:#e2e8f0; }
body.light-theme .admins-stat-label{ color:#64748b; }
body.light-theme .admins-stat-value{ color:#0f172a; }
body.light-theme .adm-table thead th{ background:#f8faff; color:#64748b; border-bottom-color:#e2e8f0; }
body.light-theme .adm-table-wrap{ scrollbar-color:#cbd5e1 transparent; }
body.light-theme .adm-table tbody tr{ border-bottom-color:#f1f5f9; }
body.light-theme .adm-table tbody tr:hover{ background:rgba(59,130,246,.04); }
body.light-theme .adm-table tbody td{ color:#1e293b; }
body.light-theme .admins-email-main{ color:#0f172a; }
body.light-theme .admins-email-sub{ color:#94a3b8; }
body.light-theme .admins-chip{ background:rgba(59,130,246,.07); border-color:rgba(59,130,246,.14); color:#3b82f6; }
body.light-theme .admins-chip-empty{ background:#f1f5f9; border-color:#e2e8f0; color:#94a3b8; }

/* ── Responsive ── */
@media(max-width:900px){
  .adm-bar-row1{ flex-wrap:wrap; }
  .adm-bar-fields{ flex-wrap:wrap; }
  .adm-bar-field{ flex:1 1 45%; }
  .adm-header{ flex-direction:column; align-items:flex-start; }
  .adm-header-actions{ width:100%; justify-content:flex-end; }
  .admins-stats{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:580px){
  .adm-bar-field{ flex:1 1 100%; }
  .adm-bar-field--sm{ flex:1 1 100%; }
}
.auth-modal-card{
  width:min(480px,92vw);
}
/* ─── Profile Page v2 ─── */
.profile-shell{
  display:grid;
  gap:0;
  overflow:hidden;
  border-radius:inherit;
}
/* ── Profile Header ── */
.profile-hd-shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  background:
    radial-gradient(ellipse at 70% 50%,rgba(129,140,248,.18) 0%,transparent 55%),
    radial-gradient(ellipse at 20% 50%,rgba(56,189,248,.14) 0%,transparent 55%),
    linear-gradient(140deg,#080b1d 0%,#151a3a 50%,#0d1730 100%);
  border:1px solid rgba(99,102,241,.12);
  border-radius:18px;
  box-shadow:0 4px 16px rgba(2,6,23,.2), inset 0 1px 0 rgba(255,255,255,.05);
}
/* ── Identity group (avatar + info) ── */
.profile-hd-identity{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
/* ── Buttons group ── */
.profile-hd-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.profile-hd-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:0 16px;
  border-radius:10px;
  border:1px solid rgba(191,219,254,.18);
  background:rgba(255,255,255,.07);
  color:#cbd5e1;
  font:inherit;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,transform .12s;
  white-space:nowrap;
  letter-spacing:.01em;
}
.profile-hd-btn:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(191,219,254,.32);
  color:#e2e8f0;
  transform:translateY(-1px);
}
.profile-hd-btn:active{transform:none;}
.profile-hd-btn.is-danger{
  border-color:rgba(248,113,113,.24);
  color:#fca5a5;
  background:rgba(127,29,29,.1);
}
.profile-hd-btn.is-danger:hover{
  background:rgba(239,68,68,.15);
  border-color:rgba(248,113,113,.4);
  color:#fecaca;
}
/* ── removed/unused elements ── */
.profile-hd-mesh,.profile-hd-shell::after,.profile-hd-main,
.profile-hd-copy,.profile-hd-kicker,.profile-hd-pagetitle,
.profile-hd-nav,.profile-hd-nav-side{
  display:none;
}
/* ── Old cover kept for light-theme compat ── */
.profile-identity-card{
  display:flex;
  align-items:flex-end;
  gap:18px;
  padding:0 22px 22px;
  margin-top:-46px;
  position:relative;
  z-index:3;
}
.profile-avatar-wrap{
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
}
.profile-avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#7c3aed 100%);
  color:#fff;
  font-size:22px;
  font-weight:800;
  border:2px solid rgba(255,255,255,.18);
  box-shadow:0 4px 14px rgba(99,102,241,.45);
  position:relative;
  z-index:2;
  flex-shrink:0;
}
.profile-avatar-glow{
  position:absolute;
  inset:-8px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.5),rgba(14,165,233,.3) 55%,transparent 72%);
  opacity:.4;
  filter:blur(10px);
  z-index:1;
  animation:profileAvatarPulse 3.5s ease-in-out infinite;
}
@keyframes profileAvatarPulse{
  0%,100%{opacity:.35;transform:scale(1);}
  50%{opacity:.58;transform:scale(1.06);}
}
.profile-identity-body{
  display:flex;
  flex-direction:column;
  gap:5px;
  text-align:right;
  min-width:0;
}
.profile-name-meta-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  direction:rtl;
}
.profile-username{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:#f1f5f9;
  line-height:1;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.profile-hd-meta{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  flex-wrap:wrap;
}
.profile-email-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.profile-email-row::before{
  display:none;
  content:'';
  flex-basis:100%;
  height:1px;
  background:linear-gradient(90deg,rgba(191,219,254,.22),transparent 72%);
  margin-bottom:4px;
}
.profile-role-pill{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 10px;
  border-radius:6px;
  background:rgba(99,102,241,.22);
  border:1px solid rgba(139,92,246,.32);
  color:#c7d2fe;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}
.profile-email{
  color:rgba(148,163,184,.9);
  font-size:13px;
  font-weight:500;
  margin:0;
  direction:ltr;
}
.profile-email-verified-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  height:24px;
  padding:0 10px;
  border-radius:6px;
  background:rgba(16,185,129,.16);
  color:#6ee7b7;
  border:1px solid rgba(16,185,129,.26);
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
}
.profile-email-verify-link{
  border:1px solid rgba(129,140,248,.2);
  background:rgba(99,102,241,.08);
  color:#c7d2fe;
  padding:0 12px;
  min-height:32px;
  border-radius:999px;
  font:inherit;
  font-size:11.5px;
  font-weight:800;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.profile-email-verify-link:hover{
  color:#eef2ff;
  background:rgba(99,102,241,.16);
  border-color:rgba(129,140,248,.3);
}
/* ── Stats Strip ── */
.profile-stats-strip{
  display:flex;
  align-items:stretch;
  gap:0;
  margin:0 16px 14px;
  border-radius:14px;
  border:1px solid rgba(99,102,241,.16);
  background:linear-gradient(135deg,rgba(14,10,42,.6) 0%,rgba(9,7,28,.55) 100%);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  overflow:hidden;
  box-shadow:0 2px 16px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.04) inset;
}
.pstat-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:12px 10px;
  transition:background .18s;
  position:relative;
}
.pstat-item:hover{
  background:rgba(99,102,241,.07);
}
.pstat-divider{
  width:1px;
  background:rgba(99,102,241,.13);
  align-self:stretch;
}
.pstat-val{
  font-size:14px;
  font-weight:900;
  color:#e2e8f0;
  line-height:1;
  letter-spacing:-.01em;
}
.pstat-lbl{
  font-size:10.5px;
  color:rgba(148,163,184,.55);
  font-weight:600;
  white-space:nowrap;
}
.pstat-status.is-ok .pstat-val{color:#6ee7b7;}
.pstat-status.is-warn .pstat-val{color:#fbbf24;}
/* ── Panels ── */
.profile-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:0 16px 20px;
}
.profile-panel-wide{
  grid-column:1 / -1;
}
.profile-panel-messages{
  grid-column:1 / -1;
}
.profile-panel{
  border-radius:16px;
  border:1px solid rgba(99,102,241,.14);
  background:linear-gradient(145deg,rgba(14,10,42,.58) 0%,rgba(9,7,28,.52) 100%);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.04) inset;
  transition:box-shadow .2s;
}
.profile-panel:hover{
  box-shadow:0 6px 26px rgba(0,0,0,.24),0 1px 0 rgba(255,255,255,.05) inset;
}
.profile-panel-hd{
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 16px 11px;
  border-bottom:1px solid rgba(99,102,241,.09);
  background:linear-gradient(135deg,rgba(99,102,241,.07) 0%,transparent 100%);
}
.profile-panel-ico{font-size:15px;line-height:1;opacity:.9;}
.profile-panel-title{
  font-size:13px;
  font-weight:800;
  color:#c4d0e8;
  letter-spacing:.015em;
}
/* ── Portal Cards ── */
.profile-access-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:12px;
}
.profile-access-card{
  padding:13px 12px 10px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.1);
  background:rgba(22,18,60,.45);
  backdrop-filter:blur(10px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  transition:transform .18s,box-shadow .18s,border-color .18s;
  cursor:default;
}
.profile-access-card:hover{
  transform:translateY(-2px);
}
.pac-icon{
  font-size:20px;
  line-height:1;
  margin-bottom:3px;
}
.profile-access-card strong{
  font-size:12.5px;
  font-weight:800;
  color:rgba(226,232,240,.78);
}
.pac-status{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.01em;
}
.profile-access-card.is-open{
  border-color:rgba(16,185,129,.26);
  background:linear-gradient(135deg,rgba(16,185,129,.1) 0%,rgba(10,150,100,.06) 100%);
  box-shadow:0 4px 16px rgba(16,185,129,.12);
}
.profile-access-card.is-open:hover{
  box-shadow:0 6px 22px rgba(16,185,129,.18);
}
.profile-access-card.is-open strong{color:#d1fae5;}
.profile-access-card.is-open .pac-status{color:#6ee7b7;}
.profile-access-card.is-closed{
  border-color:rgba(239,68,68,.12);
  background:rgba(20,14,42,.38);
  opacity:.72;
}
.profile-access-card.is-closed strong{color:rgba(226,232,240,.36);}
.profile-access-card.is-closed .pac-status{color:rgba(252,165,165,.6);}
/* ── Summary ── */
.profile-summary-list{
  display:grid;
  gap:0;
  padding:2px 0;
}
.profile-summary-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 16px;
  border-bottom:1px solid rgba(99,102,241,.07);
  transition:background .15s;
}
.profile-summary-item:last-child{border-bottom:none;}
.profile-summary-item:hover{background:rgba(99,102,241,.05);}
.profile-summary-item span{
  color:rgba(148,163,184,.58);
  font-size:12.5px;
}
.profile-summary-item strong{
  color:#dce8f8;
  font-weight:700;
  font-size:12.5px;
}
.profile-summary-item-action{
  align-items:center;
}
.profile-inline-action{
  border:1px solid rgba(99,102,241,.22);
  background:rgba(99,102,241,.1);
  color:#c7d2fe;
  padding:6px 12px;
  border-radius:999px;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:all .18s;
}
.profile-inline-action:hover{
  background:rgba(99,102,241,.18);
  border-color:rgba(99,102,241,.35);
}
.profile-devices-list{
  display:grid;
  gap:0;
  padding:2px 0;
  max-height:220px;
  overflow-y:auto;
}
.profile-devices-empty{
  padding:14px 16px;
  color:rgba(148,163,184,.55);
  font-size:12.5px;
  text-align:center;
}
.profile-device-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 16px;
  border-bottom:1px solid rgba(99,102,241,.07);
  transition:background .15s;
}
.profile-device-item:last-child{border-bottom:none;}
.profile-device-item:hover{background:rgba(99,102,241,.05);}
.profile-device-item.is-current{
  background:rgba(16,185,129,.05);
  border-right:2px solid rgba(16,185,129,.3);
}
.profile-device-name-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.profile-device-main{
  display:grid;
  gap:2px;
}
.profile-device-main strong{
  color:#dce8f8;
  font-weight:700;
  font-size:12.5px;
}
.profile-device-main>span{
  color:rgba(148,163,184,.58);
  font-size:11px;
}
.profile-device-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  flex-shrink:0;
}
.profile-device-meta span:last-child{
  color:rgba(148,163,184,.58);
  font-size:10.5px;
}
.profile-device-ip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.15);
  color:#bbf7d0;
  font-size:10.5px;
  font-weight:700;
}
.profile-device-current-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.2);
  color:#86efac;
  font-size:10px;
  font-weight:800;
}
.txt-ok{color:#6ee7b7 !important;}
.txt-warn{color:#fbbf24 !important;}
/* ── Verification Modal styles ── */
.profile-verification-status{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(30,41,59,.52);
  color:#e2e8f0;
  line-height:1.8;
}
.profile-verification-status.is-verified{
  background:rgba(16,185,129,.12);
  color:#86efac;
}
.profile-verification-status.is-pending{
  background:rgba(251,191,36,.12);
  color:#fde68a;
}
.profile-verification-status.is-locked{
  background:rgba(239,68,68,.14);
  color:#fca5a5;
}
.profile-verification-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.profile-verification-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:end;
  margin-top:14px;
}
/* ── Light Theme ── */
.profile-role{color:#93c5fd;font-weight:700;}
body.light-theme .profile-hd-shell{
  background:linear-gradient(140deg,#ffffff 0%,#f5f7ff 52%,#eef3ff 100%);
  border-color:rgba(199,210,254,.6);
  box-shadow:0 2px 12px rgba(99,102,241,.08), 0 1px 3px rgba(0,0,0,.04);
}
body.light-theme .profile-avatar{
  border-color:rgba(255,255,255,.45);
  box-shadow:0 14px 32px rgba(99,102,241,.22),0 0 0 1px rgba(139,92,246,.14);
}
body.light-theme .profile-hd-copy{
  background:none;
  border-color:transparent;
  box-shadow:none;
}
body.light-theme .profile-hd-kicker{
  display:none;
}
body.light-theme .profile-hd-pagetitle{
  color:#64748b;
}
body.light-theme .profile-hd-btn{
  background:#ffffff;
  border-color:rgba(148,163,184,.28);
  color:#475569;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
body.light-theme .profile-hd-btn:hover{
  background:#f8fafc;
  border-color:rgba(99,102,241,.28);
  color:#1e293b;
}
body.light-theme .profile-hd-btn.is-danger{
  background:rgba(254,242,242,.9);
  border-color:rgba(248,113,113,.28);
  color:#dc2626;
}
body.light-theme .profile-hd-btn.is-danger:hover{
  background:#fff1f2;
  border-color:rgba(248,113,113,.4);
}
body.light-theme .profile-avatar-wrap{
  background:none;
  border:none;
  box-shadow:none;
}
body.light-theme .profile-username{color:#0f172a;}
body.light-theme .profile-role-pill{
  background:rgba(99,102,241,.1);
  border-color:rgba(99,102,241,.2);
  color:#4338ca;
}
body.light-theme .profile-email{color:#475569;}
body.light-theme .profile-email-row::before{
  display:none;
}
body.light-theme .profile-email-verify-link{
  color:#4f46e5;
  background:rgba(99,102,241,.06);
  border-color:rgba(99,102,241,.14);
}
body.light-theme .profile-email-verify-link:hover{
  color:#4338ca;
  background:rgba(99,102,241,.12);
  border-color:rgba(99,102,241,.22);
}
body.light-theme .profile-email-verified-badge{
  background:rgba(16,185,129,.1);
  color:#059669;
  border-color:rgba(16,185,129,.22);
}
body.light-theme .profile-stats-strip{
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(240,245,255,.78));
  backdrop-filter:blur(18px) saturate(150%);
  border-color:rgba(99,102,241,.12);
  box-shadow:0 2px 14px rgba(99,102,241,.07),0 1px 0 rgba(255,255,255,.9) inset;
}
body.light-theme .pstat-val{color:#1e293b;}
body.light-theme .pstat-status.is-ok .pstat-val{color:#1d4ed8;}
body.light-theme .pstat-lbl{color:rgba(100,116,139,.62);}
body.light-theme .pstat-divider{background:rgba(99,102,241,.09);}
body.light-theme .pstat-item:hover{background:rgba(99,102,241,.04);}
body.light-theme .profile-panel{
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(242,246,255,.74));
  backdrop-filter:blur(18px) saturate(150%);
  border-color:rgba(99,102,241,.1);
  box-shadow:0 4px 18px rgba(15,23,42,.06),0 1px 0 rgba(255,255,255,.9) inset;
}
body.light-theme .profile-panel:hover{
  box-shadow:0 6px 24px rgba(15,23,42,.09),0 1px 0 rgba(255,255,255,.9) inset;
}
body.light-theme .profile-panel-hd{
  border-color:rgba(99,102,241,.07);
  background:linear-gradient(135deg,rgba(99,102,241,.05) 0%,transparent 100%);
}
body.light-theme .profile-panel-title{color:#334155;}
body.light-theme .profile-access-card{
  background:rgba(241,245,249,.72);
  border-color:rgba(148,163,184,.16);
}
body.light-theme .profile-access-card.is-open{
  background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(79,70,229,.05));
  border-color:rgba(37,99,235,.16);
  box-shadow:0 4px 14px rgba(37,99,235,.08);
}
body.light-theme .profile-access-card.is-open:hover{
  box-shadow:0 6px 20px rgba(37,99,235,.12);
}
body.light-theme .profile-access-card.is-open strong{color:#1e3a8a;}
body.light-theme .profile-access-card.is-open .pac-status{color:#2563eb;}
body.light-theme .profile-access-card.is-closed strong{color:rgba(15,23,42,.35);}
body.light-theme .profile-access-card.is-closed .pac-status{color:#dc2626;}
body.light-theme .profile-summary-item{border-color:rgba(99,102,241,.06);}
body.light-theme .profile-summary-item:hover{background:rgba(99,102,241,.03);}
body.light-theme .profile-summary-item span{color:rgba(100,116,139,.62);}
body.light-theme .profile-summary-item strong{color:#1e293b;}
body.light-theme .profile-inline-action{
  background:rgba(99,102,241,.08);
  border-color:rgba(99,102,241,.18);
  color:#4338ca;
}
body.light-theme .profile-inline-action:hover{
  background:rgba(99,102,241,.14);
}
body.light-theme .profile-devices-empty{color:#64748b;}
body.light-theme .profile-device-item{border-color:rgba(99,102,241,.07);}
body.light-theme .profile-device-item:hover{background:rgba(99,102,241,.03);}
body.light-theme .profile-device-item.is-current{
  background:rgba(37,99,235,.05);
  border-right-color:rgba(37,99,235,.22);
}
body.light-theme .profile-device-main strong{color:#1e293b;}
body.light-theme .profile-device-main>span,
body.light-theme .profile-device-meta span:last-child{color:#64748b;}
body.light-theme .profile-device-ip{
  background:rgba(37,99,235,.08);
  border-color:rgba(37,99,235,.14);
  color:#1d4ed8;
}
body.light-theme .profile-device-current-badge{
  background:rgba(99,102,241,.08);
  border-color:rgba(99,102,241,.14);
  color:#4338ca;
}
body.light-theme .profile-verification-status{
  background:rgba(241,245,249,.8);
  color:#334155;
}
body.light-theme .profile-verification-status.is-verified{
  background:rgba(37,99,235,.08);
  color:#1d4ed8;
}
body.light-theme .profile-shell .txt-ok{
  color:#2563eb !important;
}
body.light-theme .profile-verification-status.is-pending{
  background:rgba(251,191,36,.09);
  color:#92400e;
}

@media(max-width:900px){
  .profile-hd-nav{
    margin-bottom:18px;
  }
  .profile-grid{
    grid-template-columns:1fr;
    padding:0 12px 16px;
  }
  .profile-panel-wide,
  .profile-panel-messages{
    grid-column:auto;
  }
  .profile-stats-strip{
    margin:0 12px 12px;
    flex-wrap:wrap;
  }
  .pstat-item{
    min-width:calc(50% - 1px);
    flex:1 1 calc(50% - 1px);
  }
  .pstat-divider{
    display:none;
  }
}
@media(max-width:560px){
  .profile-hd-shell{
    padding:12px 14px;
    flex-wrap:wrap;
    gap:12px;
  }
  .profile-hd-identity{
    gap:10px;
    flex:1;
    min-width:0;
  }
  .profile-hd-actions{
    width:100%;
    justify-content:flex-end;
  }
  .profile-name-meta-row{
    gap:5px;
  }
  .profile-avatar{
    width:44px;
    height:44px;
    font-size:18px;
    border-radius:50%;
  }
  .profile-avatar-wrap{
    width:44px;
    height:44px;
    min-height:auto;
  }
  .profile-username{font-size:17px;}
  .profile-access-grid{
    grid-template-columns:1fr 1fr;
    gap:7px;
    padding:10px;
  }
}

@media (max-width: 640px){
  #profilePage{
    padding:0;
    overflow:hidden;
  }

  #profilePage .profile-shell{
    border-radius:14px;
  }

  .profile-cover{
    height:auto;
    min-height:132px;
    padding:14px 14px 56px;
  }

  .profile-cover-top{
    flex-direction:column-reverse;
    align-items:stretch;
    gap:12px;
  }

  .profile-cover-label{
    align-items:flex-start;
  }

  .profile-cover-btns{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    width:100%;
  }

  .profile-cover-btn{
    width:100%;
    justify-content:center;
    min-height:40px;
  }

  .profile-identity-card{
    margin-top:-34px;
    padding:0 14px 16px;
    gap:12px;
    align-items:flex-start;
    flex-direction:column;
  }

  .profile-avatar{
    width:72px;
    height:72px;
    border-radius:22px;
    font-size:28px;
  }

  .profile-avatar-glow{
    inset:-6px;
    border-radius:26px;
  }

  .profile-identity-body{
    width:100%;
    min-width:0;
    padding-bottom:0;
  }

  .profile-username{
    font-size:16px;
    line-height:1.2;
  }

  .profile-role-pill{
    margin-bottom:8px;
  }

  .profile-email-row{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }

  .profile-email{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .profile-stats-strip{
    margin:0 10px 12px;
    border-radius:14px;
  }

  .pstat-item{
    min-width:100%;
    flex-basis:100%;
    padding:12px 10px;
  }

  .profile-grid{
    gap:10px;
    padding:0 10px 14px;
  }

  .profile-panel{
    border-radius:14px;
  }

  .profile-panel-hd{
    padding:13px 14px 11px;
  }

  .profile-access-grid{
    grid-template-columns:1fr;
    gap:8px;
    padding:12px;
  }

  .profile-summary-item{
    padding:12px 14px;
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }

  .profile-summary-item strong,
  .profile-summary-item span{
    max-width:100%;
    overflow-wrap:anywhere;
  }

  .profile-summary-item-action{
    width:100%;
  }

  .profile-inline-action{
    width:100%;
    text-align:center;
  }

  .profile-device-item{
    padding:12px 14px;
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }

  .profile-device-name-row{
    width:100%;
    align-items:flex-start;
  }

  .profile-device-main{
    min-width:0;
  }

  .profile-device-main strong,
  .profile-device-main > span{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .profile-device-meta{
    width:100%;
    align-items:flex-start;
  }

  .profile-device-ip,
  .profile-device-current-badge{
    max-width:100%;
    overflow-wrap:anywhere;
  }

  .profile-verification-actions{
    flex-direction:column;
  }

  .profile-verification-actions .btn{
    width:100%;
  }

  .profile-verification-form{
    grid-template-columns:1fr;
  }
}
/* ── Responsive ── */
@media (min-width:641px) and (max-width:720px){
  .profile-cover{height:145px;padding:16px 18px;}
  .profile-cover-top{flex-direction:column-reverse;gap:10px;}
  .profile-cover-label{align-items:flex-start;}
  .profile-identity-card{
    flex-direction:row;
    align-items:flex-end;
    padding:0 18px 22px;
    margin-top:-44px;
    gap:14px;
  }
  .profile-avatar{width:44px;height:44px;font-size:18px;border-radius:13px;}
  .profile-avatar-glow{inset:-4px;border-radius:16px;}
  .profile-username{font-size:16px;}
  .profile-stats-strip{margin:0 12px 12px;flex-wrap:wrap;}
  .pstat-item{flex:1 1 45%;padding:12px 8px;}
  .pstat-divider:nth-child(4){display:none;}
  .profile-grid{grid-template-columns:1fr;padding:0 12px 16px;}
  .profile-access-grid{grid-template-columns:1fr 1fr;}
  .profile-device-meta{align-items:flex-start;}
  .profile-verification-form{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════════
   Admin Login Modal  (#loginModal)
   ══════════════════════════════════════════ */

/* ── Overlay ── */
#loginModal .alm-overlay{
  background:rgba(2,4,18,.82)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}

/* ── Card shell ── */
.alm-card{
  position:relative;
  z-index:1;
  width:min(380px,92vw);
  background:#0d0c1e;
  border:1px solid rgba(99,102,241,.28);
  border-radius:20px;
  padding:28px 26px 24px;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.06),
    0 24px 60px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
}

/* ── Close X ── */
.alm-close{
  position:absolute;
  top:12px;left:12px;
  width:28px;height:28px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  border-radius:50%;
  color:rgba(148,163,184,.55);
  font-size:11px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,color .15s;
}
.alm-close:hover{
  background:rgba(239,68,68,.12);
  border-color:rgba(239,68,68,.3);
  color:#fca5a5;
}

/* ── Title ── */
.alm-title{
  font-size:15px;
  font-weight:800;
  color:#c4b5fd;
  text-align:center;
  margin-bottom:20px;
  letter-spacing:.02em;
}

/* ── Fields ── */
.alm-fields{
  display:flex;flex-direction:column;
  gap:10px;
  margin-bottom:4px;
}
.alm-field-group{
  display:flex;flex-direction:column;
  gap:5px;
}
.alm-label{
  font-size:11px;
  font-weight:700;
  color:rgba(148,163,184,.6);
  letter-spacing:.03em;
  padding-right:2px;
}
.alm-input{
  width:100%;
  box-sizing:border-box;
  background:#161428;
  border:1.5px solid rgba(99,102,241,.2);
  border-radius:11px;
  padding:10px 12px;
  font:inherit;
  font-size:14px;
  color:#e2e8f0;
  direction:ltr;
  text-align:left;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.alm-input:focus{
  border-color:rgba(99,102,241,.6);
  box-shadow:0 0 0 3px rgba(99,102,241,.1);
}
.alm-input::placeholder{
  color:rgba(148,163,184,.3);
}

/* autofill fix — dark theme */
.alm-input:-webkit-autofill,
.alm-input:-webkit-autofill:hover,
.alm-input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #161428 inset!important;
  -webkit-text-fill-color:#e2e8f0!important;
  caret-color:#e2e8f0;
  border-color:rgba(99,102,241,.35)!important;
  transition:background-color 9999s ease-in-out 0s;
}

/* ── OTP section ── */
.alm-otp-wrap{
  margin-top:10px;
  margin-bottom:0;
  background:rgba(99,102,241,.07);
  border:1.5px solid rgba(99,102,241,.22);
  border-radius:14px;
  padding:14px 14px 12px;
  display:flex;flex-direction:column;
  gap:8px;
}
.alm-otp-header{
  display:flex;align-items:center;gap:7px;
}
.alm-otp-icon{font-size:14px;line-height:1;}
.alm-otp-title{
  font-size:12px;font-weight:800;
  color:#c4b5fd;
  letter-spacing:.02em;
}
.alm-otp-desc{
  margin:0;
  font-size:11px;
  color:rgba(148,163,184,.55);
  line-height:1.5;
}
.alm-otp-input{
  width:100%;
  box-sizing:border-box;
  background:#0a0916;
  border:1.5px solid rgba(99,102,241,.28);
  border-radius:11px;
  padding:11px 14px;
  font-family:'Courier New',Courier,monospace;
  font-size:24px;
  font-weight:900;
  color:#a5b4fc;
  text-align:center;
  letter-spacing:10px;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.alm-otp-input:focus{
  border-color:rgba(99,102,241,.6);
  box-shadow:0 0 0 3px rgba(99,102,241,.12);
}
.alm-otp-input::placeholder{
  color:rgba(99,102,241,.2);
  letter-spacing:8px;
  font-size:18px;
}

/* ── Status text ── */
.alm-status{
  font-size:11px;
  color:rgba(148,163,184,.5);
  text-align:center;
  line-height:1.6;
  margin:10px 0 10px;
  min-height:14px;
  padding:0 4px;
}

/* ── Buttons ── */
.alm-actions{display:flex;flex-direction:column;gap:7px;}

.alm-secondary-action{
  display:flex;
  justify-content:center;
  margin:2px 0 14px;
}

.alm-link-btn{
  border:none;
  background:transparent;
  padding:4px 8px;
  color:#8b93c9;
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:color .15s, opacity .15s;
}
.alm-link-btn:hover{
  color:#c4b5fd;
}

.alm-btn-primary{
  width:100%;
  padding:12px 20px;
  background:linear-gradient(135deg,#4f46e5 0%,#6d28d9 100%);
  border:none;
  border-radius:12px;
  color:#fff;
  font:inherit;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  letter-spacing:.03em;
  box-shadow:0 4px 16px rgba(99,102,241,.38);
  transition:filter .15s,transform .1s,box-shadow .15s;
}
.alm-btn-primary:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(99,102,241,.48);
}
.alm-btn-primary:active{transform:translateY(0);filter:brightness(.96);}

.alm-btn-ghost{
  width:100%;
  padding:9px 20px;
  background:transparent;
  border:1.5px solid rgba(99,102,241,.2);
  border-radius:12px;
  color:rgba(148,163,184,.6);
  font:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.alm-btn-ghost:hover{
  border-color:rgba(99,102,241,.45);
  color:#a5b4fc;
  background:rgba(99,102,241,.07);
}

/* ══════════════════════════════════════════
   Light theme overrides
   ══════════════════════════════════════════ */
body.light-theme #loginModal .alm-overlay{
  background:rgba(15,23,42,.5)!important;
}
body.light-theme .alm-card{
  background:#ffffff;
  border-color:rgba(99,102,241,.18);
  box-shadow:0 24px 60px rgba(15,23,42,.12),0 0 0 1px rgba(99,102,241,.06);
}
body.light-theme .alm-close{
  background:rgba(0,0,0,.04);
  border-color:rgba(0,0,0,.08);
  color:#94a3b8;
}
body.light-theme .alm-close:hover{
  background:rgba(239,68,68,.07);
  border-color:rgba(239,68,68,.2);
  color:#ef4444;
}
body.light-theme .alm-title{color:#4f46e5;}
body.light-theme .alm-label{color:rgba(71,85,105,.75);}

body.light-theme .alm-input{
  background:#f8faff;
  border-color:rgba(99,102,241,.2);
  color:#1e293b;
}
body.light-theme .alm-input:focus{
  background:#ffffff!important;
  border-color:rgba(99,102,241,.55);
  box-shadow:0 0 0 3px rgba(99,102,241,.08);
  color:#1e293b!important;
  -webkit-text-fill-color:#1e293b!important;
  caret-color:#1e293b!important;
}
body.light-theme .alm-input::placeholder{color:rgba(100,116,139,.35);}

/* autofill fix — light theme */
body.light-theme .alm-input:-webkit-autofill,
body.light-theme .alm-input:-webkit-autofill:hover,
body.light-theme .alm-input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #f8faff inset!important;
  -webkit-text-fill-color:#1e293b!important;
  caret-color:#1e293b;
  border-color:rgba(99,102,241,.35)!important;
  transition:background-color 9999s ease-in-out 0s;
}

body.light-theme .alm-otp-wrap{
  background:rgba(99,102,241,.05);
  border-color:rgba(99,102,241,.16);
}
body.light-theme .alm-otp-title{color:#4f46e5;}
body.light-theme .alm-otp-desc{color:#64748b;}
body.light-theme .alm-otp-input{
  background:#fff;
  border-color:rgba(99,102,241,.25);
  color:#4338ca;
}
body.light-theme .alm-otp-input:focus{
  background:#ffffff!important;
  border-color:rgba(99,102,241,.45)!important;
  box-shadow:0 0 0 3px rgba(99,102,241,.08)!important;
  color:#4338ca!important;
  -webkit-text-fill-color:#4338ca!important;
  caret-color:#4338ca!important;
}
body.light-theme .alm-otp-input::placeholder{color:rgba(99,102,241,.18);}
body.light-theme .alm-otp-input:-webkit-autofill,
body.light-theme .alm-otp-input:-webkit-autofill:hover,
body.light-theme .alm-otp-input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #ffffff inset!important;
  -webkit-text-fill-color:#4338ca!important;
  caret-color:#4338ca!important;
  border-color:rgba(99,102,241,.35)!important;
  transition:background-color 9999s ease-in-out 0s;
}
body.light-theme .alm-status{color:#64748b;}
body.light-theme .alm-link-btn{color:#6366f1;}
body.light-theme .alm-link-btn:hover{color:#4338ca;}
body.light-theme .alm-btn-ghost{
  border-color:rgba(99,102,241,.2);
  color:#64748b;
}
body.light-theme .alm-btn-ghost:hover{
  border-color:rgba(99,102,241,.4);
  color:#4f46e5;
  background:rgba(99,102,241,.05);
}

@media(max-width:480px){
  .alm-card{padding:24px 16px 20px;border-radius:18px;}
  .alm-otp-input{font-size:20px;letter-spacing:7px;}
}

/* ─────────────────────────────────────────
   Collapsible Sidebar
───────────────────────────────────────── */

/* ── Mobile arrow trigger (همون دکمه فلش، خارج از sidebar) ── */
.mobile-menu-btn{
  display:none;
  position:fixed;
  top:14px;
  left:14px;
  z-index:1100;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(99,102,241,.22);
  background:rgba(15,23,42,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 20px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  padding:0;
  color:#93c5fd;
  font-size:20px;
  line-height:1;
  font-weight:400;
  transition:background .18s,box-shadow .18s,color .18s,transform .22s cubic-bezier(.4,0,.2,1);
}
.mobile-menu-btn:hover{
  background:rgba(99,102,241,.22);
  color:#fff;
  box-shadow:0 6px 24px rgba(99,102,241,.22);
}
/* وقتی sidebar باز است: فلش برمی‌گردد */
.mobile-menu-btn.is-open{
  transform:scaleX(-1);
}
body.light-theme .mobile-menu-btn{
  background:rgba(255,255,255,.97);
  border-color:rgba(79,70,229,.24);
  color:#4f46e5;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
}
body.light-theme .mobile-menu-btn:hover{
  background:rgba(79,70,229,.1);
  color:#3730a3;
}
@media(max-width:980px){
  body.light-theme .sidebar-header .brand{
    color:#1e3a8a;
  }
  body.light-theme .nav button{
    color:#1e293b!important;
  }
  body.light-theme .mini-title{
    color:rgba(51,65,85,.65)!important;
  }
}

/* ── Sidebar backdrop ── */
.sidebar-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.72);
  z-index:1000;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
.sidebar-backdrop.visible{
  opacity:1;
  pointer-events:auto;
}
body.sidebar-drawer-open{
  overflow:hidden;
}

/* Smooth width transition on the sidebar */
.side{
  transition:
    width .28s cubic-bezier(.4,0,.2,1),
    min-width .28s cubic-bezier(.4,0,.2,1),
    max-width .28s cubic-bezier(.4,0,.2,1),
    padding .28s cubic-bezier(.4,0,.2,1);
}

/* Header row: brand + toggle button */
.sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.sidebar-header .brand{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:opacity .2s;
}

/* Toggle button */
.sidebar-toggle-btn{
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.75);
  cursor:pointer;
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .2s, color .2s, border-color .2s, transform .28s cubic-bezier(.4,0,.2,1);
}
.sidebar-toggle-btn:hover{
  background:rgba(99,102,241,.28);
  color:#fff;
  border-color:rgba(129,140,248,.4);
}

/* Nav button inner layout */
.nav button{
  position:relative;
}
.nav button .nav-icon{
  font-size:19px;
  flex-shrink:0;
  line-height:1;
  width:26px;
  text-align:center;
}
.nav button .nav-text{
  flex:1;
  text-align:right;
}
.nav button .nav-badge{
  font-size:11px;
  color:rgba(199,210,254,.65);
  font-weight:600;
  white-space:nowrap;
  flex-shrink:0;
}

/* ─── Collapsed State ─── */
.app > .side.collapsed{
  width:68px!important;
  min-width:68px!important;
  max-width:68px!important;
  flex:0 0 68px!important;
  padding:14px 8px;
  overflow:visible;
  z-index:200;
  position:sticky;
}

/* Flip the arrow when collapsed */
.side.collapsed .sidebar-toggle-btn{
  transform:scaleX(-1);
}
.side.collapsed .sidebar-header{
  justify-content:center;
}

/* Hide text elements in collapsed mode */
.side.collapsed .brand,
.side.collapsed .sub,
.side.collapsed .mini-title,
.side.collapsed .sidebar-empty-state{
  display:none!important;
}

/* Icon-only buttons */
.side.collapsed .nav button{
  justify-content:center;
  padding:13px 6px;
}
.side.collapsed .nav button .nav-text,
.side.collapsed .nav button .nav-badge{
  display:none;
}

/* Tooltip handled by JS (#sideNavTooltip) — position:fixed, always on top */

/* Light theme adjustments */
body.light-theme .sidebar-toggle-btn{
  background:rgba(79,70,229,.09);
  border-color:rgba(79,70,229,.2);
  color:#4f46e5;
}
body.light-theme .sidebar-toggle-btn:hover{
  background:rgba(79,70,229,.18);
  border-color:rgba(79,70,229,.35);
  color:#3730a3;
}
body.light-theme .side.collapsed .nav button[data-tip]::after{
  background:rgba(15,23,42,.92);
  color:#f1f5f9;
}
body.light-theme .nav button .nav-badge{
  color:rgba(79,70,229,.7);
}

/* ── Mobile: sidebar as fixed drawer ── */
@media(max-width:980px){
  /* نمایش دکمه فلش بیرونی */
  .mobile-menu-btn{
    display:flex;
  }
  /* مخفی کردن دکمه toggle داخل sidebar */
  .sidebar-toggle-btn{
    display:none!important;
  }
  /* نمایش backdrop */
  .sidebar-backdrop{
    display:block;
  }
  /* header سایدبار روی موبایل */
  .sidebar-header{
    padding:22px 16px 14px;
  }
  .sidebar-header .brand{
    font-size:15px;
    color:#dbeafe;
  }
  /* دکمه‌های nav روی موبایل کمی بزرگ‌تر */
  .nav button{
    padding:11px 12px!important;
    font-size:14px!important;
  }
  .nav button .nav-icon{
    font-size:18px;
  }
  /* badge خوانا‌تر */
  .nav button .nav-badge{
    font-size:11px;
  }

  /* Sidebar: fixed drawer from right (RTL) */
  .app > .side{
    position:fixed!important;
    top:0!important;
    right:0!important;
    height:100dvh!important;
    width:min(300px,calc(100vw - 60px))!important;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
    z-index:1050!important;
    transform:translateX(110%)!important;
    transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease!important;
    border-radius:0 0 0 28px!important;
    box-shadow:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  /* Drawer open */
  .app > .side.mobile-open{
    transform:translateX(0)!important;
    box-shadow:-8px 0 60px rgba(0,0,0,.65),-2px 0 20px rgba(59,130,246,.1)!important;
  }
  /* collapsed behaves same as normal on mobile */
  .app > .side.collapsed{
    width:min(300px,calc(100vw - 60px))!important;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
    padding:0!important;
    transform:translateX(110%)!important;
  }
  .app > .side.collapsed.mobile-open{
    transform:translateX(0)!important;
  }
  .side.collapsed .brand,
  .side.collapsed .sub,
  .side.collapsed .mini-title{
    display:block!important;
  }
  .side.collapsed .nav button{
    justify-content:flex-start!important;
    padding:9px 10px!important;
  }
  .side.collapsed .nav button .nav-text,
  .side.collapsed .nav button .nav-badge{
    display:block!important;
  }
  .side.collapsed .sidebar-header{
    justify-content:space-between!important;
  }
  /* Main content takes full width */
  .app > .main{
    width:100%!important;
    flex:1 1 100%!important;
  }
}
@media(max-width:640px){
  .app > .side{
    width:min(280px,calc(100vw - 48px))!important;
    border-radius:0 0 0 22px!important;
  }
}
/* Tooltip: JS-managed, no CSS override needed */

/* ═══════════════════════════════════════════
   SIDEBAR VISUAL REDESIGN
═══════════════════════════════════════════ */

/* ── Base sidebar shell ── */
.app > .side{
  background:
    linear-gradient(180deg, #0c1628 0%, #0f172a 60%, #0d1a2e 100%);
  border-left:1px solid rgba(59,130,246,.12);
  box-shadow:-2px 0 32px rgba(0,0,0,.5), inset -1px 0 0 rgba(255,255,255,.02);
  padding:0;
  display:flex;
  flex-direction:column;
  overflow:hidden auto;
  gap:0;
}

/* ── Sidebar header ── */
.sidebar-header{
  padding:18px 14px 14px;
  border-bottom:1px solid rgba(148,163,184,.07);
  flex-shrink:0;
  background:linear-gradient(180deg,rgba(59,130,246,.06) 0%,transparent 100%);
}
.sidebar-header .brand{
  font-size:14.5px;
  font-weight:800;
  color:#bfdbfe;
  letter-spacing:-.1px;
  text-shadow:0 0 24px rgba(59,130,246,.3);
  line-height:1.3;
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ── Section wrappers ── */
#sidebarCoreNav,
#sidebarSalesSection .nav,
#sidebarAiSection .nav,
#sidebarPopularSection .nav{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px 8px;
}

#sidebarCoreNav{
  padding-top:8px;
}

/* ── Section titles ── */
.mini-title{
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.9px!important;
  color:rgba(148,163,184,.62)!important;
  text-transform:uppercase;
  padding:14px 16px 5px!important;
  margin:0!important;
}
.popular-agents-title{
  text-align:right!important;
  direction:rtl!important;
}

/* ── Nav buttons — FULL REDESIGN ── */
.nav button{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  border-radius:9px!important;
  padding:9px 10px!important;
  color:#b8cce4!important;
  font-weight:600!important;
  font-size:13px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease!important;
  width:100%;
  text-align:right;
  position:relative;
}

.nav button:hover{
  background:rgba(59,130,246,.1)!important;
  color:#e2e8f0!important;
  box-shadow:none!important;
}

.nav button.active{
  background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(129,140,248,.1))!important;
  color:#93c5fd!important;
  box-shadow:inset 3px 0 0 #60a5fa!important;
}

/* ── Icon ── */
.nav button .nav-icon{
  font-size:17px;
  width:24px;
  text-align:center;
  flex-shrink:0;
  line-height:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));
}

/* ── Text ── */
.nav button .nav-text{
  flex:1;
  font-weight:600;
  letter-spacing:-.1px;
}

/* ── Badge ── */
.nav button .nav-badge{
  font-size:10.5px;
  color:rgba(163,191,227,.7);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  padding:2px 8px;
  border-radius:999px;
  font-weight:600;
  flex-shrink:0;
  transition:background .15s, color .15s;
}
.nav button.active .nav-badge{
  background:rgba(59,130,246,.2);
  color:#93c5fd;
  border-color:rgba(96,165,250,.32);
}
.nav button:hover .nav-badge{
  background:rgba(59,130,246,.1);
  color:#b8cce4;
}

/* ── Thin section divider ── */
#sidebarSalesSection,
#sidebarAiSection,
#sidebarPopularSection{
  border-top:1px solid rgba(255,255,255,.05);
  padding-top:2px;
}

/* ── Scrollbar ── */
.side::-webkit-scrollbar{width:3px;}
.side::-webkit-scrollbar-track{background:transparent;}
.side::-webkit-scrollbar-thumb{background:rgba(59,130,246,.2);border-radius:999px;}
.side::-webkit-scrollbar-thumb:hover{background:rgba(59,130,246,.4);}

/* ── Toggle button redesign ── */
.sidebar-toggle-btn{
  width:30px;
  height:30px;
  border-radius:8px;
  background:rgba(59,130,246,.08);
  border:1px solid rgba(59,130,246,.18)!important;
  color:rgba(147,197,253,.7);
  cursor:pointer;
  font-size:17px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .2s, color .2s, transform .28s cubic-bezier(.4,0,.2,1);
}
.sidebar-toggle-btn:hover{
  background:rgba(59,130,246,.18);
  color:#93c5fd;
}

/* ── Empty state ── */
.sidebar-empty-state{
  margin:16px 10px;
  padding:16px;
  border-radius:12px;
  background:rgba(99,102,241,.05);
  border:1px solid rgba(99,102,241,.1);
}

/* ── Light theme ── */
body.light-theme .app > .side{
  background:linear-gradient(180deg,#f8faff,#eef3ff)!important;
  border-left:1px solid rgba(99,102,241,.15)!important;
  box-shadow:-2px 0 24px rgba(79,70,229,.08)!important;
}
body.light-theme .sidebar-header{
  background:linear-gradient(180deg,rgba(99,102,241,.06),transparent);
  border-bottom-color:rgba(99,102,241,.1);
}
body.light-theme .sidebar-header .brand{
  color:#3730a3;
  text-shadow:none;
}
body.light-theme .mini-title{
  color:rgba(71,85,105,.65)!important;
}
body.light-theme .nav button{
  color:#334155!important;
}
body.light-theme .nav button:hover{
  background:rgba(99,102,241,.1)!important;
  color:#3730a3!important;
}
body.light-theme .nav button.active{
  background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(79,70,229,.08))!important;
  color:#3730a3!important;
  box-shadow:inset 3px 0 0 #6366f1!important;
}
body.light-theme .nav button .nav-badge{
  color:rgba(71,85,105,.75);
  background:rgba(99,102,241,.08);
  border-color:rgba(99,102,241,.15);
}
body.light-theme .nav button.active .nav-badge{
  color:#4338ca;
  background:rgba(99,102,241,.14);
  border-color:rgba(99,102,241,.25);
}
body.light-theme .sidebar-toggle-btn{
  background:rgba(99,102,241,.08);
  border-color:rgba(99,102,241,.2)!important;
  color:#6366f1;
}
body.light-theme #sidebarSalesSection,
body.light-theme #sidebarAiSection,
body.light-theme #sidebarPopularSection{
  border-top-color:rgba(99,102,241,.1);
}
body.light-theme .sidebar-empty-state{
  background:rgba(99,102,241,.05);
  border-color:rgba(99,102,241,.12);
}
body.light-theme .side::-webkit-scrollbar-thumb{
  background:rgba(99,102,241,.2);
}

body.content-portal-active #navManagement,
body.content-portal-active #navSuppliers,
body.content-portal-active #navAdmins,
body.content-portal-active #navNotifications,
body.content-portal-active #navOrderTrainingManagement,
body.content-portal-active #navFaqManagement,
body.content-portal-active #navReviewRequestsManagement,
body.support-portal-active #navManagement,
body.support-portal-active #navSuppliers,
body.support-portal-active #navAdmins,
body.support-portal-active #navNotifications,
body.support-portal-active #navOrderTrainingManagement,
body.support-portal-active #navFaqManagement,
body.support-portal-active #navReviewRequestsManagement{
  display:none !important;
}

.nav button.hidden,
#sidebarCoreNav button.hidden,
#sidebarSalesSection .nav button.hidden,
#sidebarAiSection .nav button.hidden,
#sidebarPopularSection .nav button.hidden{
  display:none !important;
}

#portalSidebar .hidden,
#portalSidebar.hidden,
#portalSidebar .nav.hidden,
#portalSidebar .sub.hidden{
  display:none !important;
}

/* ── Collapsed adjustments for new design ── */
.app > .side.collapsed{
  padding:0 4px;
}
.side.collapsed .sidebar-header{
  padding:14px 8px;
  justify-content:center;
}
.side.collapsed > .sub:not(.mini-title){
  display:none!important;
}
.side.collapsed #sidebarCoreNav,
.side.collapsed #sidebarSalesSection .nav,
.side.collapsed #sidebarAiSection .nav,
.side.collapsed #sidebarPopularSection .nav{
  padding:6px 4px;
  gap:2px;
}
.side.collapsed .nav button{
  padding:11px 6px!important;
  justify-content:center;
  gap:0!important;
}
.side.collapsed .nav button.active{
  box-shadow:0 0 0 1px rgba(59,130,246,.35), inset 0 -2px 0 #60a5fa!important;
}
.side.collapsed #sidebarSalesSection,
.side.collapsed #sidebarAiSection,
.side.collapsed #sidebarPopularSection{
  border-top:1px solid rgba(255,255,255,.05);
  padding-top:4px;
}
.side.collapsed .nav button .nav-icon{
  font-size:20px;
  width:auto;
}

/* Tooltip handled by JS */

/* ── Mobile resets ── */
@media(max-width:980px){
  .app > .side{
    padding:0;
    flex-direction:column;
  }
  .app > .side.collapsed{
    padding:0!important;
  }
}

/* ═══════════════════════════════════════════
   Deep Navy Slate — Final Color Corrections
   Overrides any remaining hardcoded values
═══════════════════════════════════════════ */

/* body text & bg */
body:not(.light-theme){
  background:#0f172a;
  color:#f1f5f9;
}

/* Muted text consistency */
body:not(.light-theme) .pMeta,
body:not(.light-theme) .miniDate,
body:not(.light-theme) .hint,
body:not(.light-theme) .sub:not(.mini-title),
body:not(.light-theme) .field label{
  color:#94a3b8!important;
}

/* Row menu */
body:not(.light-theme) .rowMenu summary{
  background:#1e293b!important;
  border-color:rgba(148,163,184,.1);
}
body:not(.light-theme) .rowMenuPanel{
  background:#1e293b!important;
  border-color:rgba(148,163,184,.1)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.5)!important;
}

/* Modal */
body:not(.light-theme) .modal-card{
  background:#1e293b!important;
  border-color:rgba(148,163,184,.1)!important;
}
body:not(.light-theme) .modal-overlay{
  background:rgba(2,6,23,.6)!important;
}

/* Tables */
body:not(.light-theme) .var-table th{
  background:rgba(255,255,255,.02)!important;
  color:#94a3b8!important;
}
body:not(.light-theme) .var-table td{
  color:#e2e8f0!important;
  border-bottom-color:rgba(148,163,184,.08)!important;
}

/* Placeholders */
body:not(.light-theme) input::placeholder,
body:not(.light-theme) textarea::placeholder{
  color:#64748b!important;
  opacity:1!important;
}

/* Status badges */
body:not(.light-theme) .status-ok{
  background:rgba(16,185,129,.15)!important;
  color:#34d399!important;
}
body:not(.light-theme) .status-pending{
  background:rgba(251,191,36,.1)!important;
  color:#fbbf24!important;
}

/* mini-title section labels */
body:not(.light-theme) .mini-title{
  color:rgba(148,163,184,.4)!important;
}

/* empty state */
body:not(.light-theme) .empty{
  border-color:rgba(148,163,184,.12)!important;
  background:rgba(30,41,59,.4)!important;
  color:#64748b!important;
}

/* sidebar section dividers */
body:not(.light-theme) #sidebarSalesSection,
body:not(.light-theme) #sidebarAiSection,
body:not(.light-theme) #sidebarPopularSection{
  border-top-color:rgba(148,163,184,.07)!important;
}

/* Warn button → sky blue */
body:not(.light-theme) .warn{
  background:linear-gradient(135deg,#0ea5e9,#38bdf8)!important;
}

/* Search input */
body:not(.light-theme) .search input{
  color:#f1f5f9!important;
}
body:not(.light-theme) .search input::placeholder{
  color:#64748b!important;
}

#aiTrainingPage .ai-training-page{
  max-width:1420px;
  margin:0 auto;
}
#aiTrainingPage .ai-training-hero{
  margin-bottom:18px;
}
#aiTrainingPage .ai-training-mode-switch{
  display:flex;
  gap:10px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
#aiTrainingPage .ai-training-mode-btn{
  border:none;
  border-radius:999px;
  padding:11px 18px;
  font-family:Vazirmatn,Vazir,sans-serif;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  color:#c7d2fe;
  background:rgba(15,23,42,.72);
  border:1px solid rgba(129,140,248,.22);
  transition:all .2s ease;
}
#aiTrainingPage .ai-training-mode-btn.active{
  color:#ffffff;
  border-color:rgba(56,189,248,.34);
  background:linear-gradient(135deg,rgba(59,130,246,.92),rgba(99,102,241,.92));
  box-shadow:0 10px 26px rgba(37,99,235,.26);
}
#aiTrainingPage .ai-training-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(320px,.95fr);
  gap:18px;
  align-items:start;
}
#aiTrainingPage .ai-training-chat-shell{
  margin:0;
}
#aiTrainingPage .ai-training-knowledge-panel{
  border:1px solid rgba(148,163,184,.16);
  border-radius:24px;
  padding:18px;
  background:
    radial-gradient(130% 140% at 100% 0%, rgba(34,197,94,.12) 0%, rgba(34,197,94,0) 48%),
    linear-gradient(145deg, rgba(15,23,42,.94) 0%, rgba(15,23,42,.82) 100%);
  box-shadow:0 22px 40px rgba(2,6,23,.24);
}
#aiTrainingPage .ai-training-knowledge-head{
  margin-bottom:14px;
}
#aiTrainingPage .ai-training-knowledge-list{
  display:grid;
  gap:12px;
  max-height:720px;
  overflow:auto;
  padding-left:4px;
}
#aiTrainingPage .ai-training-knowledge-card{
  border:1px solid rgba(148,163,184,.16);
  border-radius:18px;
  padding:14px;
  background:rgba(15,23,42,.44);
}
#aiTrainingPage .ai-training-knowledge-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
#aiTrainingPage .ai-training-knowledge-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:28px;
  border-radius:999px;
  color:#bfdbfe;
  background:rgba(37,99,235,.18);
  border:1px solid rgba(59,130,246,.24);
  font-size:12px;
  font-weight:800;
}
#aiTrainingPage .ai-training-knowledge-time{
  font-size:11px;
  color:#94a3b8;
}
#aiTrainingPage .ai-training-knowledge-title{
  font-size:14px;
  font-weight:800;
  color:#f8fafc;
  line-height:1.9;
  margin-bottom:6px;
}
#aiTrainingPage .ai-training-knowledge-text,
#aiTrainingPage .ai-training-knowledge-empty{
  font-size:13px;
  color:#cbd5e1;
  line-height:2;
}
#aiTrainingPage .ai-training-knowledge-summary{
  margin-top:10px;
  font-size:12px;
  line-height:1.9;
  color:#bfdbfe;
}
#aiTrainingPage .ai-training-knowledge-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
#aiTrainingPage .ai-training-knowledge-chip{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  color:#c7d2fe;
  background:rgba(99,102,241,.16);
  border:1px solid rgba(129,140,248,.22);
}
#aiTrainingPage .ai-training-knowledge-actions{
  display:flex;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}
#aiTrainingPage .ai-training-knowledge-btn{
  border:none;
  border-radius:10px;
  padding:8px 12px;
  font-family:Vazirmatn,Vazir,sans-serif;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  color:#dbeafe;
  background:rgba(37,99,235,.18);
  border:1px solid rgba(59,130,246,.26);
}
#aiTrainingPage .ai-training-knowledge-btn.danger{
  color:#ffe4e6;
  background:rgba(190,24,93,.16);
  border-color:rgba(244,63,94,.24);
}
body.light-theme #aiTrainingPage .ai-training-mode-btn{
  color:#334155;
  background:#ffffff;
  border-color:#dbe3f2;
}
body.light-theme #aiTrainingPage .ai-training-mode-btn.active{
  color:#ffffff;
  border-color:transparent;
  background:linear-gradient(135deg,#2563eb,#4f46e5);
  box-shadow:0 12px 24px rgba(37,99,235,.18);
}
body.light-theme #aiTrainingPage .ai-training-knowledge-panel{
  background:
    radial-gradient(130% 140% at 100% 0%, rgba(34,197,94,.08) 0%, rgba(34,197,94,0) 48%),
    linear-gradient(145deg,#ffffff 0%,#f6f9ff 100%);
  border-color:#dbe3f2;
  box-shadow:0 20px 40px rgba(15,23,42,.08);
}
body.light-theme #aiTrainingPage .ai-training-knowledge-card{
  background:#f8fbff;
  border-color:#dbe3f2;
}
body.light-theme #aiTrainingPage .ai-training-knowledge-title{
  color:#0f172a;
}
body.light-theme #aiTrainingPage .ai-training-knowledge-summary{
  color:#1d4ed8;
}
body.light-theme #aiTrainingPage .ai-training-knowledge-chip{
  color:#4338ca;
  background:#eef2ff;
  border-color:#c7d2fe;
}
body.light-theme #aiTrainingPage .ai-training-knowledge-btn{
  color:#1d4ed8;
  background:#eff6ff;
  border-color:#bfdbfe;
}
body.light-theme #aiTrainingPage .ai-training-knowledge-btn.danger{
  color:#be123c;
  background:#fff1f2;
  border-color:#fecdd3;
}
body.light-theme #aiTrainingPage .ai-training-knowledge-text,
body.light-theme #aiTrainingPage .ai-training-knowledge-empty,
body.light-theme #aiTrainingPage .ai-training-knowledge-time{
  color:#64748b;
}
@media(max-width:1120px){
  #aiTrainingPage .ai-training-grid{
    grid-template-columns:1fr;
  }
}
/* studentAccountsPage */
#studentAccountsPage{
  padding:0;
  background:
    radial-gradient(ellipse at 0% 0%,rgba(124,58,237,.2),transparent 40%),
    radial-gradient(ellipse at 100% 0%,rgba(14,165,233,.22),transparent 40%),
    radial-gradient(ellipse at 50% 100%,rgba(16,185,129,.1),transparent 50%),
    linear-gradient(160deg,#060e1e 0%,#080f20 50%,#060c1a 100%);
}
#studentAccountsPage .sa-shell{
  display:grid;
  gap:20px;
  padding:22px;
}
/* topbar */
#studentAccountsPage .sa-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:20px;
  padding:14px 20px;
  background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(10,18,35,.96));
  border:1px solid rgba(148,163,184,.14);
  box-shadow:0 4px 24px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(20px);
}
#studentAccountsPage .sa-title-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
/* hero */
#studentAccountsPage .sa-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  border-radius:28px;
  padding:30px 34px;
  background:linear-gradient(135deg,rgba(124,58,237,.18) 0%,rgba(14,165,233,.14) 55%,rgba(16,185,129,.1) 100%);
  border:1px solid rgba(139,92,246,.26);
  box-shadow:0 8px 40px rgba(124,58,237,.14),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(20px);
  position:relative;
  overflow:hidden;
}
#studentAccountsPage .sa-hero::before{
  content:'';
  position:absolute;
  top:-80px;right:-80px;
  width:260px;height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,233,.16),transparent 70%);
  pointer-events:none;
}
#studentAccountsPage .sa-hero::after{
  content:'';
  position:absolute;
  bottom:-60px;left:10%;
  width:180px;height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.12),transparent 70%);
  pointer-events:none;
}
#studentAccountsPage .sa-hero h1{
  margin:0 0 10px;
  font-size:28px;
  font-weight:800;
  background:linear-gradient(135deg,#e0f2fe 0%,#c4b5fd 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
#studentAccountsPage .sa-hero p{
  margin:0;
  max-width:900px;
  color:#b8c6dc;
  line-height:1.9;
  position:relative;
  z-index:1;
}
#studentAccountsPage .sa-hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  flex-shrink:0;
  position:relative;
  z-index:1;
}
#studentAccountsPage .sa-badge{
  padding:7px 15px;
  border-radius:999px;
  border:1px solid rgba(139,92,246,.32);
  color:#ddd6fe;
  background:linear-gradient(135deg,rgba(124,58,237,.24),rgba(99,102,241,.18));
  font-size:12px;
  font-weight:700;
  backdrop-filter:blur(8px);
}
/* mode bar */
#studentAccountsPage .sa-mode-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
#studentAccountsPage .sa-mode-note{
  flex:1 1 420px;
  border-radius:18px;
  border:1px solid rgba(251,191,36,.26);
  background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(245,158,11,.07));
  color:#fde68a;
  padding:14px 18px;
  line-height:1.9;
  box-shadow:0 4px 20px rgba(245,158,11,.1);
}
/* ── stat cards: افقی در یک ردیف ── */
#studentAccountsPage .sa-stats{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}
#studentAccountsPage .sa-stat-card{
  border-radius:24px;
  padding:22px 20px;
  border:1px solid transparent;
  position:relative;
  overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease;
  backdrop-filter:blur(16px);
}
#studentAccountsPage .sa-stat-card:hover{
  transform:translateY(-4px);
}
#studentAccountsPage .sa-stat-card::after{
  content:'';
  position:absolute;
  bottom:-24px;right:-24px;
  width:100px;height:100px;
  border-radius:50%;
  opacity:.18;
  pointer-events:none;
}
#studentAccountsPage .sa-stat-products{
  background:linear-gradient(145deg,rgba(139,92,246,.24),rgba(109,40,217,.14));
  border-color:rgba(139,92,246,.3);
  box-shadow:0 8px 32px rgba(124,58,237,.18);
}
#studentAccountsPage .sa-stat-products::after{
  background:radial-gradient(circle,#8b5cf6,transparent 70%);
}
#studentAccountsPage .sa-stat-total{
  background:linear-gradient(145deg,rgba(14,165,233,.24),rgba(2,132,199,.14));
  border-color:rgba(56,189,248,.3);
  box-shadow:0 8px 32px rgba(14,165,233,.18);
}
#studentAccountsPage .sa-stat-total::after{
  background:radial-gradient(circle,#38bdf8,transparent 70%);
}
#studentAccountsPage .sa-stat-active{
  background:linear-gradient(145deg,rgba(16,185,129,.24),rgba(4,120,87,.14));
  border-color:rgba(52,211,153,.3);
  box-shadow:0 8px 32px rgba(16,185,129,.18);
}
#studentAccountsPage .sa-stat-active::after{
  background:radial-gradient(circle,#34d399,transparent 70%);
}
#studentAccountsPage .sa-stat-expiring{
  background:linear-gradient(145deg,rgba(245,158,11,.24),rgba(180,83,9,.14));
  border-color:rgba(251,191,36,.3);
  box-shadow:0 8px 32px rgba(245,158,11,.16);
}
#studentAccountsPage .sa-stat-expiring::after{
  background:radial-gradient(circle,#fbbf24,transparent 70%);
}
#studentAccountsPage .sa-stat-expired{
  background:linear-gradient(145deg,rgba(239,68,68,.24),rgba(185,28,28,.14));
  border-color:rgba(248,113,113,.3);
  box-shadow:0 8px 32px rgba(239,68,68,.16);
}
#studentAccountsPage .sa-stat-expired::after{
  background:radial-gradient(circle,#f87171,transparent 70%);
}
#studentAccountsPage .sa-stat-label{
  color:#9fb1cb;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  position:relative;
  z-index:1;
}
#studentAccountsPage .sa-stat-value{
  margin-top:14px;
  color:#fff;
  font-size:38px;
  font-weight:900;
  line-height:1;
  position:relative;
  z-index:1;
}
#studentAccountsPage .sa-stat-sub{
  margin-top:8px;
  color:#7f93af;
  font-size:11px;
  position:relative;
  z-index:1;
}
/* alert grid */
#studentAccountsPage .sa-alert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}
#studentAccountsPage .sa-alert-card{
  border-radius:20px;
  padding:18px;
  border:1px solid transparent;
  backdrop-filter:blur(16px);
  box-shadow:0 6px 24px rgba(0,0,0,.14);
}
#studentAccountsPage .sa-alert-card-ok{
  background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(4,120,87,.1));
  border-color:rgba(52,211,153,.22);
}
#studentAccountsPage .sa-alert-card-warn{
  background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(180,83,9,.1));
  border-color:rgba(251,191,36,.26);
}
#studentAccountsPage .sa-alert-title{
  color:#f8fafc;
  font-weight:800;
  font-size:14px;
}
#studentAccountsPage .sa-alert-body{
  margin-top:8px;
  color:#c4d1e3;
  line-height:1.8;
  font-size:13px;
}
/* action cards */
#studentAccountsPage .sa-action-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
#studentAccountsPage .sa-action-card{
  border-radius:28px;
  padding:24px;
  border:1px solid rgba(148,163,184,.14);
  background:linear-gradient(145deg,rgba(13,20,40,.94),rgba(8,14,27,.98));
  box-shadow:0 14px 40px rgba(2,6,23,.24);
  position:relative;
  overflow:hidden;
}
#studentAccountsPage .sa-action-card::before{
  content:'';
  position:absolute;
  left:-10px;
  bottom:-50px;
  width:170px;
  height:170px;
  border-radius:50%;
  opacity:.22;
  pointer-events:none;
}
#studentAccountsPage .sa-action-card-product::before{
  background:radial-gradient(circle,rgba(124,58,237,.9),transparent 70%);
}
#studentAccountsPage .sa-action-card-sale::before{
  background:radial-gradient(circle,rgba(16,185,129,.9),transparent 70%);
}
#studentAccountsPage .sa-action-eyebrow{
  color:#93c5fd;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#studentAccountsPage .sa-action-card h2{
  margin:10px 0 10px;
  color:#f8fafc;
  font-size:24px;
  line-height:1.4;
}
#studentAccountsPage .sa-action-card p{
  margin:0;
  color:#aebdd2;
  line-height:1.95;
}
#studentAccountsPage .sa-action-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
#studentAccountsPage .sa-action-points span{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(15,23,42,.58);
  color:#d7e4f5;
  font-size:12px;
  font-weight:700;
}
#studentAccountsPage .sa-action-card .actions{
  margin-top:20px;
}
/* panels */
#studentAccountsPage .sa-panel{
  border-radius:28px;
  padding:24px;
  background:linear-gradient(145deg,rgba(13,20,40,.92),rgba(9,15,30,.96));
  border:1px solid rgba(148,163,184,.13);
  box-shadow:0 12px 48px rgba(2,6,23,.26),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(20px);
  position:relative;
  overflow:hidden;
}
#studentAccountsPage .sa-panel::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,#7c3aed,#0ea5e9,#10b981);
  border-radius:28px 28px 0 0;
}
#studentAccountsPage .sa-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  padding-top:4px;
}
#studentAccountsPage .sa-panel-title{
  font-size:17px;
  font-weight:800;
  background:linear-gradient(135deg,#e0f2fe,#a5b4fc);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
/* form grids */
#studentAccountsPage .sa-form-grid,
#studentAccountsPage .sa-mapping-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
/* compact product form: 3 cols */
#studentAccountsPage .sa-product-form{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}
/* compact sale form: 3 cols */
#studentAccountsPage .sa-sale-form{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}
#studentAccountsPage .sa-span-full{
  grid-column:1 / -1;
}
/* shared inputs */
#studentAccountsPage .sa-form-grid textarea,
#studentAccountsPage .sa-form-grid input:not([type="file"]),
#studentAccountsPage .sa-mapping-grid select,
#studentAccountsPage .sa-import-grid select{
  width:100%;
  border:1px solid rgba(148,163,184,.12);
  outline:none;
  border-radius:12px;
  background:rgba(10,18,36,.88);
  color:#f8fafc;
  padding:10px 12px;
  box-sizing:border-box;
  font-size:13px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
#studentAccountsPage .sa-form-grid textarea:focus,
#studentAccountsPage .sa-form-grid input:not([type="file"]):focus,
#studentAccountsPage .sa-mapping-grid select:focus{
  border-color:rgba(139,92,246,.54);
  box-shadow:0 0 0 3px rgba(139,92,246,.13);
}
#studentAccountsPage .sa-form-grid label,
#studentAccountsPage .sa-mapping-grid label{
  font-size:11px;
  font-weight:700;
  color:#8fa2be;
  margin-bottom:5px;
  display:block;
}
#studentAccountsPage .sa-form-grid textarea{
  min-height:72px;
  resize:vertical;
}
#studentAccountsPage #studentAccountsProductList{
  min-height:72px;
}
#studentAccountsPage .sa-duration-inline{
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px;
  gap:8px;
}
#studentAccountsPage .sa-duration-inline input,
#studentAccountsPage .sa-duration-inline select{
  margin:0;
}
#studentAccountsPage #studentAccountsFile{
  width:100%;
  border-radius:16px;
  border:2px dashed rgba(139,92,246,.34);
  background:rgba(124,58,237,.07);
  color:#d9e5f5;
  padding:16px;
  box-sizing:border-box;
  transition:border-color .18s,background .18s;
}
#studentAccountsPage #studentAccountsFile:hover{
  border-color:rgba(139,92,246,.62);
  background:rgba(124,58,237,.12);
}
#studentAccountsPage .sa-panel > .actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
#studentAccountsPage .sa-sale-mode-panel{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(148,163,184,.1);
}
#studentAccountsProductModal .modal-overlay,
#studentAccountsSaleModal .modal-overlay,
#studentAccountsDetailModal .modal-overlay{
  background:rgba(3,7,18,.7);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
#studentAccountsProductModal .sa-modal-card,
#studentAccountsSaleModal .sa-modal-card,
#studentAccountsDetailModal .sa-modal-card{
  width:min(920px,94vw);
  max-height:88vh;
  padding:24px;
  border-radius:26px;
  background:linear-gradient(160deg,rgba(6,11,22,.98),rgba(10,17,33,.98));
  border:1px solid rgba(148,163,184,.16);
  box-shadow:0 30px 90px rgba(2,6,23,.48);
  color:#e5eefb;
}
#studentAccountsSaleModal .sa-modal-card-wide{
  width:min(1120px,96vw);
}
#studentAccountsDetailModal .sa-modal-card{
  width:min(980px,94vw);
  display:flex;
  flex-direction:column;
}
#studentAccountsDetailModal.sa-detail-view-mode .sa-modal-card{
  max-height:88vh;
  overflow:auto;
  padding:16px 16px 14px;
}
#studentAccountsDetailModal.sa-detail-edit-mode .sa-modal-card{
  overflow:auto;
}
#studentAccountsProductModal .sa-modal-head,
#studentAccountsSaleModal .sa-modal-head,
#studentAccountsDetailModal .sa-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(148,163,184,.12);
}
#studentAccountsProductModal .sa-modal-title,
#studentAccountsSaleModal .sa-modal-title,
#studentAccountsDetailModal .sa-modal-title{
  color:#f8fafc;
  font-size:22px;
  font-weight:900;
}
#studentAccountsDetailModal .sa-modal-head{
  margin-bottom:12px;
  padding-bottom:10px;
}
#studentAccountsDetailModal .sa-modal-title{
  font-size:17px;
  font-weight:800;
}
#studentAccountsProductModal .sa-modal-sub,
#studentAccountsSaleModal .sa-modal-sub,
#studentAccountsDetailModal .sa-modal-sub{
  margin-top:8px;
  color:#96a9c6;
  line-height:1.85;
}
#studentAccountsDetailModal .sa-modal-sub{
  margin-top:4px;
  font-size:12px;
  line-height:1.7;
}
#studentAccountsProductModal .sa-modal-close,
#studentAccountsSaleModal .sa-modal-close,
#studentAccountsDetailModal .sa-modal-close{
  width:42px;
  height:42px;
  border:none;
  border-radius:14px;
  background:rgba(15,23,42,.92);
  color:#e2e8f0;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:transform .16s ease,background .16s ease;
}
#studentAccountsProductModal .sa-modal-close:hover,
#studentAccountsSaleModal .sa-modal-close:hover,
#studentAccountsDetailModal .sa-modal-close:hover{
  transform:translateY(-1px);
  background:rgba(99,102,241,.24);
}
#studentAccountsProductModal .sa-form-grid,
#studentAccountsProductModal .sa-mapping-grid,
#studentAccountsSaleModal .sa-form-grid,
#studentAccountsSaleModal .sa-mapping-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
#studentAccountsProductModal .sa-product-form,
#studentAccountsSaleModal .sa-sale-form{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}
#studentAccountsProductModal .sa-span-full,
#studentAccountsSaleModal .sa-span-full{
  grid-column:1 / -1;
}
#studentAccountsProductModal .sa-form-grid textarea,
#studentAccountsProductModal .sa-form-grid input:not([type="file"]),
#studentAccountsProductModal .sa-mapping-grid select,
#studentAccountsProductModal .sa-import-grid select,
#studentAccountsSaleModal .sa-form-grid textarea,
#studentAccountsSaleModal .sa-form-grid input:not([type="file"]),
#studentAccountsSaleModal .sa-mapping-grid select,
#studentAccountsSaleModal .sa-import-grid select{
  width:100%;
  border:1px solid rgba(148,163,184,.12);
  outline:none;
  border-radius:12px;
  background:rgba(10,18,36,.88);
  color:#f8fafc;
  padding:10px 12px;
  box-sizing:border-box;
  font-size:13px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
#studentAccountsProductModal .sa-form-grid textarea:focus,
#studentAccountsProductModal .sa-form-grid input:not([type="file"]):focus,
#studentAccountsProductModal .sa-mapping-grid select:focus,
#studentAccountsSaleModal .sa-form-grid textarea:focus,
#studentAccountsSaleModal .sa-form-grid input:not([type="file"]):focus,
#studentAccountsSaleModal .sa-mapping-grid select:focus{
  border-color:rgba(139,92,246,.54);
  box-shadow:0 0 0 3px rgba(139,92,246,.13);
}
#studentAccountsProductModal .sa-form-grid label,
#studentAccountsProductModal .sa-mapping-grid label,
#studentAccountsSaleModal .sa-form-grid label,
#studentAccountsSaleModal .sa-mapping-grid label{
  font-size:11px;
  font-weight:700;
  color:#8fa2be;
  margin-bottom:5px;
  display:block;
}
#studentAccountsProductModal .sa-form-grid textarea,
#studentAccountsSaleModal .sa-form-grid textarea{
  min-height:72px;
  resize:vertical;
}
#studentAccountsSaleModal .sa-duration-inline{
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px;
  gap:8px;
}
#studentAccountsSaleModal #studentAccountsFile{
  width:100%;
  border-radius:16px;
  border:2px dashed rgba(139,92,246,.34);
  background:rgba(124,58,237,.07);
  color:#d9e5f5;
  padding:16px;
  box-sizing:border-box;
  transition:border-color .18s,background .18s;
}
#studentAccountsSaleModal #studentAccountsFile:hover{
  border-color:rgba(139,92,246,.62);
  background:rgba(124,58,237,.12);
}
#studentAccountsProductModal .actions,
#studentAccountsSaleModal .actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
#studentAccountsDetailModal .actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(148,163,184,.1);
}
#studentAccountsDetailModal .sa-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
#studentAccountsDetailModal .sa-detail-card{
  border-radius:14px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.56);
  padding:10px;
}
#studentAccountsDetailModal .sa-detail-title{
  color:#f8fafc;
  font-size:13px;
  font-weight:800;
  margin-bottom:8px;
}
#studentAccountsDetailModal .sa-detail-list{
  display:grid;
  gap:6px;
}
#studentAccountsDetailModal .sa-detail-item{
  display:grid;
  gap:3px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(148,163,184,.08);
}
#studentAccountsDetailModal .sa-detail-item:last-child{
  padding-bottom:0;
  border-bottom:none;
}
#studentAccountsDetailModal .sa-detail-label{
  color:#8fa2be;
  font-size:10px;
  font-weight:700;
}
#studentAccountsDetailModal .sa-detail-value{
  color:#e5eefb;
  font-size:12px;
  line-height:1.45;
}
#studentAccountsDetailModal .sa-detail-editor{
  margin-top:12px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.5);
  padding:18px;
}
#studentAccountsDetailModal .sa-detail-editor-title{
  color:#f8fafc;
  font-size:15px;
  font-weight:800;
  margin-bottom:12px;
}
#studentAccountsDetailModal .sa-detail-renew-note{
  color:#9fb1cb;
  line-height:1.9;
  margin-bottom:14px;
}
#studentAccountsDetailModal .sa-detail-editor-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
#studentAccountsDetailModal .sa-detail-form-field{
  display:grid;
  gap:6px;
}
#studentAccountsDetailModal .sa-detail-form-field > span{
  color:#8fa2be;
  font-size:11px;
  font-weight:700;
}
#studentAccountsDetailModal .sa-detail-form-field input,
#studentAccountsDetailModal .sa-detail-form-field select{
  width:100%;
  border:1px solid rgba(148,163,184,.12);
  outline:none;
  border-radius:12px;
  background:rgba(10,18,36,.88);
  color:#f8fafc;
  padding:10px 12px;
  box-sizing:border-box;
  font-size:13px;
}
#studentAccountsDetailModal .sa-detail-form-field input:focus,
#studentAccountsDetailModal .sa-detail-form-field select:focus{
  border-color:rgba(139,92,246,.54);
  box-shadow:0 0 0 3px rgba(139,92,246,.13);
}
#studentAccountsDetailModal .sa-detail-inline-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
#studentAccountsDetailModal .active-soft{
  box-shadow:0 0 0 2px rgba(99,102,241,.16) inset;
}
#studentAccountsDetailModal .sa-detail-body{
  min-height:0;
}
#studentAccountsSaleModal .sa-sale-mode-panel{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(148,163,184,.1);
}
#studentAccountsSaleModal .sa-preview-summary{
  margin-top:16px;
  border-radius:18px;
  padding:14px 18px;
  color:#dbe7f7;
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  background:linear-gradient(135deg,rgba(14,165,233,.11),rgba(99,102,241,.08));
  border:1px solid rgba(99,102,241,.2);
  backdrop-filter:blur(12px);
}
#studentAccountsSaleModal .sa-preview-summary.empty{
  color:#8ca0bc;
  background:rgba(15,23,42,.6);
  border-color:rgba(148,163,184,.1);
}
#studentAccountsSaleModal .sa-mapping-grid{
  margin-top:14px;
}
#studentAccountsSaleModal .sa-mapping-item{
  display:grid;
  gap:8px;
}
#studentAccountsSaleModal .sa-mapping-item > span{
  color:#9fb1cb;
  font-size:12px;
  font-weight:700;
}
#studentAccountsSaleModal .sa-table-wrap{
  margin-top:16px;
  overflow:auto;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.1);
  background:rgba(6,11,22,.86);
}
#studentAccountsSaleModal .sa-table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}
#studentAccountsSaleModal .sa-table th,
#studentAccountsSaleModal .sa-table td{
  padding:14px;
  border-bottom:1px solid rgba(148,163,184,.08);
  text-align:right;
  vertical-align:top;
}
#studentAccountsSaleModal .sa-table thead th{
  position:sticky;
  top:0;
  background:linear-gradient(180deg,#0c1628 0%,#0a1320 100%);
  color:#94b8d8;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  z-index:1;
  border-bottom:1px solid rgba(99,102,241,.2);
}
/* ── report section ── */
#studentAccountsPage .sa-report-bar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:20px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(148,163,184,.1);
}
#studentAccountsPage .sa-report-title-wrap{
  display:grid;
  gap:10px;
}
#studentAccountsPage .sa-results-meta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(99,102,241,.24);
  background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(14,165,233,.12));
  color:#dbe7f7;
  font-size:12px;
  font-weight:800;
}
#studentAccountsPage .sa-report-filters{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
#studentAccountsPage .sa-filter-field{
  display:grid;
  gap:6px;
}
#studentAccountsPage .sa-filter-field > span{
  color:#8fa2be;
  font-size:11px;
  font-weight:800;
}
#studentAccountsPage .sa-report-filters select,
#studentAccountsPage .sa-report-filters input{
  height:38px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:12px;
  background:rgba(10,18,36,.88);
  color:#f8fafc;
  padding:0 14px;
  font-size:13px;
  outline:none;
  transition:border-color .18s,box-shadow .18s;
}
#studentAccountsPage .sa-report-filters select{
  min-width:148px;
}
#studentAccountsPage .sa-report-filters input{
  min-width:280px;
}
#studentAccountsPage .sa-report-filters select:focus,
#studentAccountsPage .sa-report-filters input:focus{
  border-color:rgba(139,92,246,.54);
  box-shadow:0 0 0 3px rgba(139,92,246,.13);
}
#studentAccountsPage .sa-report-body{
  display:grid;
  gap:16px;
}
/* preview */
#studentAccountsPage .sa-preview-summary{
  margin-top:16px;
  border-radius:18px;
  padding:14px 18px;
  color:#dbe7f7;
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  background:linear-gradient(135deg,rgba(14,165,233,.11),rgba(99,102,241,.08));
  border:1px solid rgba(99,102,241,.2);
  backdrop-filter:blur(12px);
}
#studentAccountsPage .sa-preview-summary.empty{
  color:#8ca0bc;
  background:rgba(15,23,42,.6);
  border-color:rgba(148,163,184,.1);
}
#studentAccountsPage .sa-mapping-grid{
  margin-top:14px;
}
#studentAccountsPage .sa-mapping-item{
  display:grid;
  gap:8px;
}
#studentAccountsPage .sa-mapping-item > span{
  color:#9fb1cb;
  font-size:12px;
  font-weight:700;
}
/* table */
#studentAccountsPage .sa-table-wrap{
  margin-top:16px;
  overflow:auto;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.1);
  background:rgba(6,11,22,.86);
}
#studentAccountsPage .sa-product-report-grid{
  display:grid;
  gap:18px;
}
#studentAccountsPage .sa-product-report-card{
  border:1px solid rgba(148,163,184,.12);
  border-radius:24px;
  padding:20px;
  background:linear-gradient(145deg,rgba(10,17,33,.92),rgba(8,14,27,.96));
  box-shadow:0 12px 40px rgba(2,6,23,.2);
  position:relative;
  overflow:hidden;
}
#studentAccountsPage .sa-product-report-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,#0ea5e9,#7c3aed,#10b981);
}
#studentAccountsPage .sa-product-report-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
#studentAccountsPage .sa-product-report-title{
  font-size:18px;
  font-weight:800;
  background:linear-gradient(135deg,#e0f2fe,#c4b5fd);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
#studentAccountsPage .sa-product-report-meta{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  color:#93a8c7;
  font-size:12px;
}
#studentAccountsPage .sa-product-report-page{
  color:#c8d8ee;
  font-size:12px;
  font-weight:700;
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(14,165,233,.2),rgba(99,102,241,.16));
  border:1px solid rgba(99,102,241,.22);
}
#studentAccountsPage .sa-table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}
#studentAccountsPage .sa-table th,
#studentAccountsPage .sa-table td{
  padding:14px 14px;
  border-bottom:1px solid rgba(148,163,184,.08);
  text-align:right;
  vertical-align:top;
}
#studentAccountsPage .sa-table thead th{
  position:sticky;
  top:0;
  background:linear-gradient(180deg,#0c1628 0%,#0a1320 100%);
  color:#94b8d8;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  z-index:1;
  border-bottom:1px solid rgba(99,102,241,.2);
}
#studentAccountsPage .sa-cell-main{
  color:#f8fafc;
  font-weight:700;
}
#studentAccountsPage .sa-cell-sub{
  margin-top:6px;
  color:#8fa2be;
  font-size:12px;
  line-height:1.7;
}
#studentAccountsPage .sa-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:100px;
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
}
#studentAccountsPage .sa-status-active{
  background:linear-gradient(135deg,rgba(16,185,129,.22),rgba(52,211,153,.14));
  color:#6ee7b7;
  border:1px solid rgba(52,211,153,.24);
}
#studentAccountsPage .sa-status-expiring{
  background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(251,191,36,.14));
  color:#fcd34d;
  border:1px solid rgba(251,191,36,.26);
}
#studentAccountsPage .sa-status-expired{
  background:linear-gradient(135deg,rgba(239,68,68,.22),rgba(248,113,113,.14));
  color:#fca5a5;
  border:1px solid rgba(248,113,113,.24);
}
#studentAccountsPage .sa-empty{
  padding:40px;
  text-align:center;
  color:#8ea1bc;
}
#studentAccountsPage .sa-pagination{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
#studentAccountsPage .sa-page-btn{
  min-width:38px;
  height:38px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:12px;
  background:rgba(15,23,42,.82);
  color:#dbe7f7;
  font-weight:800;
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}
#studentAccountsPage .sa-page-btn:hover{
  transform:translateY(-2px);
  background:rgba(99,102,241,.22);
  border-color:rgba(99,102,241,.32);
  box-shadow:0 4px 14px rgba(99,102,241,.16);
}
#studentAccountsPage .sa-page-btn.is-active{
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 18px rgba(124,58,237,.42);
}
/* light theme */
body.light-theme #studentAccountsPage{
  background:
    radial-gradient(ellipse at 0% 0%,rgba(124,58,237,.09),transparent 40%),
    radial-gradient(ellipse at 100% 0%,rgba(14,165,233,.11),transparent 40%),
    linear-gradient(160deg,#f0f4ff 0%,#f8fbff 100%);
}
body.light-theme #studentAccountsPage .sa-topbar{
  background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(248,250,252,.99));
  border-color:rgba(148,163,184,.2);
  box-shadow:0 4px 24px rgba(0,0,0,.06);
}
body.light-theme #studentAccountsPage .sa-hero{
  background:linear-gradient(135deg,rgba(124,58,237,.1) 0%,rgba(14,165,233,.08) 100%);
  border-color:rgba(139,92,246,.2);
  box-shadow:0 8px 40px rgba(124,58,237,.08);
}
body.light-theme #studentAccountsPage .sa-hero h1{
  background:linear-gradient(135deg,#4f46e5,#0ea5e9);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
body.light-theme #studentAccountsPage .sa-hero p,
body.light-theme #studentAccountsPage .sa-alert-body,
body.light-theme #studentAccountsPage .sa-cell-sub,
body.light-theme #studentAccountsPage .sa-stat-sub,
body.light-theme #studentAccountsPage .sa-stat-label,
body.light-theme #studentAccountsPage .sa-product-report-meta{
  color:#64748b;
}
body.light-theme #studentAccountsPage .sa-mode-note{
  background:linear-gradient(135deg,rgba(251,191,36,.11),rgba(245,158,11,.06));
  border-color:rgba(245,158,11,.26);
}
body.light-theme #studentAccountsPage .sa-stat-card{
  border-color:rgba(148,163,184,.2);
}
body.light-theme #studentAccountsPage .sa-stat-products{
  background:linear-gradient(145deg,rgba(139,92,246,.13),rgba(124,58,237,.07));
  box-shadow:0 8px 32px rgba(124,58,237,.1);
}
body.light-theme #studentAccountsPage .sa-stat-total{
  background:linear-gradient(145deg,rgba(14,165,233,.13),rgba(56,189,248,.07));
  box-shadow:0 8px 32px rgba(14,165,233,.1);
}
body.light-theme #studentAccountsPage .sa-stat-active{
  background:linear-gradient(145deg,rgba(16,185,129,.13),rgba(52,211,153,.07));
  box-shadow:0 8px 32px rgba(16,185,129,.1);
}
body.light-theme #studentAccountsPage .sa-stat-expiring{
  background:linear-gradient(145deg,rgba(245,158,11,.13),rgba(251,191,36,.07));
  box-shadow:0 8px 32px rgba(245,158,11,.1);
}
body.light-theme #studentAccountsPage .sa-stat-expired{
  background:linear-gradient(145deg,rgba(239,68,68,.13),rgba(248,113,113,.07));
  box-shadow:0 8px 32px rgba(239,68,68,.1);
}
body.light-theme #studentAccountsPage .sa-stat-value{
  color:#0f172a;
}
body.light-theme #studentAccountsPage .sa-stat-sub,
body.light-theme #studentAccountsPage .sa-stat-label{
  color:#64748b;
}
body.light-theme #studentAccountsPage .sa-alert-card-ok{
  background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(4,120,87,.06));
  border-color:rgba(52,211,153,.2);
}
body.light-theme #studentAccountsPage .sa-alert-card-warn{
  background:linear-gradient(135deg,rgba(245,158,11,.13),rgba(180,83,9,.06));
  border-color:rgba(251,191,36,.24);
}
body.light-theme #studentAccountsPage .sa-alert-title,
body.light-theme #studentAccountsPage .sa-cell-main{
  color:#0f172a;
}
body.light-theme #studentAccountsPage .sa-action-card{
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,247,252,.98));
  border-color:rgba(148,163,184,.18);
  box-shadow:0 12px 34px rgba(15,23,42,.08);
}
body.light-theme #studentAccountsPage .sa-action-card h2{
  color:#0f172a;
}
body.light-theme #studentAccountsPage .sa-action-card p{
  color:#64748b;
}
body.light-theme #studentAccountsPage .sa-action-points span{
  background:rgba(241,245,249,.92);
  border-color:rgba(148,163,184,.18);
  color:#334155;
}
body.light-theme #studentAccountsPage .sa-panel{
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(248,250,252,.99));
  border-color:rgba(148,163,184,.18);
  box-shadow:0 8px 32px rgba(0,0,0,.07);
}
body.light-theme #studentAccountsPage .sa-panel-title,
body.light-theme #studentAccountsPage .sa-product-report-title{
  background:linear-gradient(135deg,#4f46e5,#0ea5e9);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
body.light-theme #studentAccountsPage .sa-form-grid textarea,
body.light-theme #studentAccountsPage .sa-form-grid input:not([type="file"]),
body.light-theme #studentAccountsPage .sa-report-filters input,
body.light-theme #studentAccountsPage .sa-report-filters select,
body.light-theme #studentAccountsPage .sa-mapping-grid select{
  background:#fff;
  color:#0f172a;
  border-color:rgba(148,163,184,.26);
}
body.light-theme #studentAccountsPage .sa-form-grid textarea::placeholder,
body.light-theme #studentAccountsPage .sa-form-grid input:not([type="file"])::placeholder,
body.light-theme #studentAccountsPage .sa-report-filters input::placeholder{
  color:#94a3b8;
}
body.light-theme #studentAccountsPage .sa-form-grid textarea:-webkit-autofill,
body.light-theme #studentAccountsPage .sa-form-grid textarea:-webkit-autofill:hover,
body.light-theme #studentAccountsPage .sa-form-grid textarea:-webkit-autofill:focus,
body.light-theme #studentAccountsPage .sa-form-grid input:not([type="file"]):-webkit-autofill,
body.light-theme #studentAccountsPage .sa-form-grid input:not([type="file"]):-webkit-autofill:hover,
body.light-theme #studentAccountsPage .sa-form-grid input:not([type="file"]):-webkit-autofill:focus,
body.light-theme #studentAccountsPage .sa-report-filters input:-webkit-autofill,
body.light-theme #studentAccountsPage .sa-report-filters input:-webkit-autofill:hover,
body.light-theme #studentAccountsPage .sa-report-filters input:-webkit-autofill:focus{
  -webkit-text-fill-color:#0f172a!important;
  box-shadow:0 0 0 1000px #ffffff inset!important;
}
body.light-theme #studentAccountsPage .sa-form-grid textarea:focus,
body.light-theme #studentAccountsPage .sa-form-grid input:not([type="file"]):focus,
body.light-theme #studentAccountsPage .sa-report-filters input:focus,
body.light-theme #studentAccountsPage .sa-report-filters select:focus,
body.light-theme #studentAccountsPage .sa-mapping-grid select:focus{
  border-color:rgba(124,58,237,.4);
  box-shadow:0 0 0 3px rgba(124,58,237,.1);
}
body.light-theme #studentAccountsPage .sa-form-grid label,
body.light-theme #studentAccountsPage .sa-mapping-grid label{
  color:#64748b;
}
body.light-theme #studentAccountsPage .sa-filter-field > span{
  color:#64748b;
}
body.light-theme #studentAccountsPage .sa-report-bar{
  border-bottom-color:rgba(148,163,184,.18);
}
body.light-theme #studentAccountsPage .sa-results-meta{
  color:#334155;
  background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(14,165,233,.08));
  border-color:rgba(99,102,241,.18);
}
body.light-theme #studentAccountsPage .sa-table-wrap{
  background:rgba(255,255,255,.98);
}
body.light-theme #studentAccountsPage .sa-table thead th{
  background:linear-gradient(180deg,#f1f5f9,#e8eef7);
  color:#475569;
  border-bottom:1px solid rgba(99,102,241,.14);
}
body.light-theme #studentAccountsPage .sa-product-report-card{
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(248,250,252,.99));
  border-color:rgba(148,163,184,.18);
  box-shadow:0 8px 28px rgba(0,0,0,.06);
}
body.light-theme #studentAccountsPage .sa-product-report-page{
  background:linear-gradient(135deg,rgba(14,165,233,.14),rgba(99,102,241,.1));
  color:#334155;
}
body.light-theme #studentAccountsPage .sa-preview-summary{
  background:linear-gradient(135deg,rgba(14,165,233,.08),rgba(99,102,241,.06));
  border-color:rgba(99,102,241,.16);
  color:#334155;
}
body.light-theme #studentAccountsPage .sa-preview-summary.empty{
  background:rgba(248,250,252,.8);
  border-color:rgba(148,163,184,.18);
  color:#64748b;
}
body.light-theme #studentAccountsPage .sa-page-btn{
  background:#e2e8f0;
  color:#334155;
  border-color:rgba(148,163,184,.25);
}
body.light-theme #studentAccountsPage .sa-page-btn:hover{
  background:rgba(99,102,241,.13);
  border-color:rgba(99,102,241,.26);
}
body.light-theme #studentAccountsPage .sa-page-btn.is-active{
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 16px rgba(124,58,237,.28);
}
body.light-theme #studentAccountsProductModal .sa-modal-card,
body.light-theme #studentAccountsSaleModal .sa-modal-card,
body.light-theme #studentAccountsDetailModal .sa-modal-card{
  background:linear-gradient(160deg,rgba(255,255,255,.99),rgba(245,248,252,.99));
  border-color:rgba(148,163,184,.18);
  box-shadow:0 30px 90px rgba(15,23,42,.14);
  color:#0f172a;
}
body.light-theme #studentAccountsProductModal .sa-modal-title,
body.light-theme #studentAccountsSaleModal .sa-modal-title,
body.light-theme #studentAccountsDetailModal .sa-modal-title{
  color:#0f172a;
}
body.light-theme #studentAccountsProductModal .sa-modal-sub,
body.light-theme #studentAccountsSaleModal .sa-modal-sub,
body.light-theme #studentAccountsDetailModal .sa-modal-sub{
  color:#64748b;
}

.profile-notifications-list{
  display:grid;
  gap:9px;
  width:100%;
  min-width:0;
  padding:12px;
}
.profile-panel-messages{
  width:100%;
  max-width:none;
}
.profile-notifications-stack{
  display:grid;
  gap:9px;
  width:100%;
  min-width:0;
}
.profile-notification-item{
  display:flex;
  flex-direction:column;
  gap:9px;
  width:100%;
  min-width:0;
  padding:13px 15px;
  border-radius:13px;
  border:1px solid rgba(148,163,184,.13);
  background:linear-gradient(150deg,rgba(12,20,40,.7) 0%,rgba(8,15,32,.62) 100%);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 4px 16px rgba(2,6,23,.16);
  transition:box-shadow .18s;
}
.profile-notification-item:hover{
  box-shadow:0 6px 22px rgba(2,6,23,.22);
}
.profile-notification-item.is-unread{
  border-color:rgba(99,102,241,.26);
  background:linear-gradient(150deg,rgba(16,22,50,.72) 0%,rgba(10,16,40,.65) 100%);
  box-shadow:0 0 0 1px rgba(99,102,241,.1) inset,0 4px 16px rgba(2,6,23,.2);
}
.profile-notification-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.profile-notification-title{
  margin:0 0 4px;
  color:#f0f6ff;
  font-size:13.5px;
  font-weight:800;
  line-height:1.5;
  letter-spacing:-.01em;
}
.profile-notification-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  color:#94a3b8;
  font-size:11px;
  line-height:1.6;
}
.profile-notification-kind{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(99,102,241,.14);
  border:1px solid rgba(99,102,241,.2);
  color:#c7d2fe;
  font-size:10.5px;
  font-weight:700;
}
.profile-notification-body{
  width:100%;
  min-width:0;
  padding:10px 13px;
  border-radius:10px;
  background:rgba(8,14,32,.35);
  backdrop-filter:blur(8px);
  border:1px solid rgba(148,163,184,.1);
  border-right:2px solid rgba(99,102,241,.26);
  color:#cddaf0;
  font-size:.82rem;
  line-height:1.8;
  white-space:pre-wrap;
  word-break:break-word;
}
.profile-notifications-footer{
  display:flex;
  justify-content:flex-start;
}
.profile-messages-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.profile-messages-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-radius:16px;
  border:1px solid rgba(148,185,255,.1);
  background:linear-gradient(135deg,rgba(16,24,52,.62) 0%,rgba(10,16,38,.56) 100%);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 4px 18px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.04) inset;
}
.profile-messages-sub{
  margin-top:5px;
  color:#7a96b8;
  font-size:12px;
  line-height:1.7;
}
.profile-messages-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.profile-messages-chip{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 13px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(16,26,58,.55),rgba(10,18,42,.48));
  backdrop-filter:blur(12px);
  border:1px solid rgba(148,185,255,.12);
  color:#c4d5f0;
  font-size:11px;
  font-weight:800;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.profile-notifications-list-page{
  align-content:start;
  padding:0;
}
body.light-theme .profile-notification-item{
  background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(240,248,255,.68));
  backdrop-filter:blur(12px) saturate(150%);
  border-color:rgba(148,163,184,.15);
  box-shadow:0 4px 16px rgba(15,23,42,.06),0 1px 0 rgba(255,255,255,.9) inset;
}
body.light-theme .profile-notification-item:hover{
  box-shadow:0 6px 20px rgba(15,23,42,.09),0 1px 0 rgba(255,255,255,.9) inset;
}
body.light-theme .profile-notification-item.is-unread{
  border-color:rgba(99,102,241,.22);
  background:linear-gradient(150deg,rgba(240,244,255,.76),rgba(238,242,255,.72));
}
body.light-theme .profile-notification-title{color:#0f172a;}
body.light-theme .profile-notification-meta{color:#64748b;}
body.light-theme .profile-notification-kind{
  background:rgba(99,102,241,.09);
  border-color:rgba(99,102,241,.15);
  color:#4338ca;
}
body.light-theme .profile-notification-body{
  background:rgba(99,102,241,.04);
  backdrop-filter:none;
  border-color:rgba(99,102,241,.1);
  border-right-color:rgba(99,102,241,.26);
  color:#334155;
}
body.light-theme .profile-messages-topbar{
  background:linear-gradient(135deg,rgba(230,240,255,.82),rgba(240,248,255,.78));
  backdrop-filter:blur(20px) saturate(150%);
  border-color:rgba(99,102,241,.12);
  box-shadow:0 4px 18px rgba(99,102,241,.07),0 1px 0 rgba(255,255,255,.8) inset;
}
body.light-theme .profile-messages-sub{color:#64748b;}
body.light-theme .profile-messages-chip{
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(240,248,255,.78));
  backdrop-filter:blur(12px);
  border-color:rgba(99,102,241,.14);
  color:#334155;
  box-shadow:0 2px 6px rgba(99,102,241,.07);
}
@media(max-width:720px){
  .profile-notification-top,
  .profile-messages-topbar{
    flex-direction:column;
  }
  .profile-notification-top .btn{
    align-self:flex-start;
  }
  .profile-notification-item{
    padding:14px;
  }
  .profile-notification-body{
    padding:12px 13px;
    line-height:1.9;
  }
}
body.light-theme #studentAccountsProductModal .sa-modal-close,
body.light-theme #studentAccountsSaleModal .sa-modal-close,
body.light-theme #studentAccountsDetailModal .sa-modal-close{
  background:#e2e8f0;
  color:#334155;
}
body.light-theme #studentAccountsProductModal .sa-modal-close:hover,
body.light-theme #studentAccountsSaleModal .sa-modal-close:hover,
body.light-theme #studentAccountsDetailModal .sa-modal-close:hover{
  background:rgba(99,102,241,.14);
}
body.light-theme #studentAccountsDetailModal .sa-detail-card{
  background:rgba(248,250,252,.94);
  border-color:rgba(148,163,184,.18);
}
body.light-theme #studentAccountsDetailModal .sa-detail-title,
body.light-theme #studentAccountsDetailModal .sa-detail-value{
  color:#0f172a;
}
body.light-theme #studentAccountsDetailModal .sa-detail-label{
  color:#64748b;
}
body.light-theme #studentAccountsDetailModal .sa-modal-sub{
  color:#64748b;
}
body.light-theme #studentAccountsDetailModal .sa-detail-editor{
  background:rgba(248,250,252,.94);
  border-color:rgba(148,163,184,.18);
}
body.light-theme #studentAccountsDetailModal .sa-detail-editor-title{
  color:#0f172a;
}
body.light-theme #studentAccountsDetailModal .sa-detail-renew-note,
body.light-theme #studentAccountsDetailModal .sa-detail-form-field > span{
  color:#64748b;
}
body.light-theme #studentAccountsDetailModal .sa-detail-form-field input,
body.light-theme #studentAccountsDetailModal .sa-detail-form-field select{
  background:#fff;
  color:#0f172a;
  border-color:rgba(148,163,184,.26);
}
body.light-theme #studentAccountsDetailModal .sa-detail-form-field input::placeholder{
  color:#94a3b8;
}
body.light-theme #studentAccountsProductModal .sa-form-grid textarea,
body.light-theme #studentAccountsProductModal .sa-form-grid input:not([type="file"]),
body.light-theme #studentAccountsProductModal .sa-mapping-grid select,
body.light-theme #studentAccountsProductModal .sa-import-grid select,
body.light-theme #studentAccountsSaleModal .sa-form-grid textarea,
body.light-theme #studentAccountsSaleModal .sa-form-grid input:not([type="file"]),
body.light-theme #studentAccountsSaleModal .sa-mapping-grid select,
body.light-theme #studentAccountsSaleModal .sa-import-grid select{
  background:#fff;
  color:#0f172a;
  border-color:rgba(148,163,184,.26);
}
body.light-theme #studentAccountsProductModal .sa-form-grid textarea::placeholder,
body.light-theme #studentAccountsProductModal .sa-form-grid input:not([type="file"])::placeholder,
body.light-theme #studentAccountsSaleModal .sa-form-grid textarea::placeholder,
body.light-theme #studentAccountsSaleModal .sa-form-grid input:not([type="file"])::placeholder{
  color:#94a3b8;
}
body.light-theme #studentAccountsDetailModal .sa-detail-form-field input:-webkit-autofill,
body.light-theme #studentAccountsDetailModal .sa-detail-form-field input:-webkit-autofill:hover,
body.light-theme #studentAccountsDetailModal .sa-detail-form-field input:-webkit-autofill:focus,
body.light-theme #studentAccountsProductModal .sa-form-grid textarea:-webkit-autofill,
body.light-theme #studentAccountsProductModal .sa-form-grid textarea:-webkit-autofill:hover,
body.light-theme #studentAccountsProductModal .sa-form-grid textarea:-webkit-autofill:focus,
body.light-theme #studentAccountsProductModal .sa-form-grid input:not([type="file"]):-webkit-autofill,
body.light-theme #studentAccountsProductModal .sa-form-grid input:not([type="file"]):-webkit-autofill:hover,
body.light-theme #studentAccountsProductModal .sa-form-grid input:not([type="file"]):-webkit-autofill:focus,
body.light-theme #studentAccountsSaleModal .sa-form-grid textarea:-webkit-autofill,
body.light-theme #studentAccountsSaleModal .sa-form-grid textarea:-webkit-autofill:hover,
body.light-theme #studentAccountsSaleModal .sa-form-grid textarea:-webkit-autofill:focus,
body.light-theme #studentAccountsSaleModal .sa-form-grid input:not([type="file"]):-webkit-autofill,
body.light-theme #studentAccountsSaleModal .sa-form-grid input:not([type="file"]):-webkit-autofill:hover,
body.light-theme #studentAccountsSaleModal .sa-form-grid input:not([type="file"]):-webkit-autofill:focus{
  -webkit-text-fill-color:#0f172a!important;
  box-shadow:0 0 0 1000px #ffffff inset!important;
}
body.light-theme #studentAccountsProductModal .sa-form-grid label,
body.light-theme #studentAccountsProductModal .sa-mapping-grid label,
body.light-theme #studentAccountsSaleModal .sa-form-grid label,
body.light-theme #studentAccountsSaleModal .sa-mapping-grid label{
  color:#64748b;
}
body.light-theme #studentAccountsSaleModal .sa-preview-summary{
  background:linear-gradient(135deg,rgba(14,165,233,.08),rgba(99,102,241,.06));
  border-color:rgba(99,102,241,.16);
  color:#334155;
}
body.light-theme #studentAccountsSaleModal .sa-preview-summary.empty{
  background:rgba(248,250,252,.8);
  border-color:rgba(148,163,184,.18);
  color:#64748b;
}
body.light-theme #studentAccountsSaleModal .sa-table-wrap{
  background:rgba(255,255,255,.98);
}
body.light-theme #studentAccountsSaleModal .sa-table thead th{
  background:linear-gradient(180deg,#f1f5f9,#e8eef7);
  color:#475569;
  border-bottom:1px solid rgba(99,102,241,.14);
}

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

img,
video,
canvas,
iframe{
  max-width:100%;
}

@media (max-width: 980px){
  .app{
    display:block;
    min-height:auto;
  }

  .app > .side,
  .side{
    position:fixed;
    top:10px;
    right:10px;
    width:58px;
    min-width:58px;
    max-width:58px;
    height:58px;
    max-height:58px;
    margin:0;
    padding:0;
    z-index:220;
    border:none;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 14px 34px rgba(2,6,23,.34);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  .main{
    width:100%;
    min-width:0;
    padding:84px 12px 28px;
  }

  .wrap{
    max-width:100%;
  }

  .card{
    padding:18px;
    border-radius:16px;
  }

  .grid,
  .products{
    grid-template-columns:1fr;
  }

  .save{
    grid-template-columns:1fr;
  }

  .toolbar,
  .headRow,
  .actions{
    align-items:stretch;
  }

  .search{
    max-width:none;
  }

  .modal{
    padding:8px;
  }

  .modal-card{
    width:min(100%, 720px);
    max-width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
    border-radius:16px;
  }

  .sidebar-header{
    min-height:58px;
    padding:0 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-bottom:none;
  }

  .sidebar-header .brand{
    display:none;
  }

  .sidebar-toggle-btn{
    width:40px;
    height:40px;
    border-radius:12px;
    font-size:22px;
  }

  #sidebarCoreNav,
  #sidebarSalesSection,
  #sidebarAiSection,
  #sidebarPopularSection,
  #sidebarEmptyState{
    display:none;
  }

  .side.mobile-open{
    width:min(272px,calc(100vw - 20px));
    min-width:min(272px,calc(100vw - 20px));
    max-width:min(272px,calc(100vw - 20px));
    height:auto;
    max-height:calc(100vh - 20px);
    overflow:auto;
    border-radius:22px;
  }

  .side.mobile-open .sidebar-header{
    min-height:64px;
    padding:12px 12px 10px;
    justify-content:space-between;
    border-bottom:1px solid rgba(148,163,184,.1);
  }

  .side.mobile-open .sidebar-header .brand{
    display:block;
    font-size:14px;
  }

  .side.mobile-open #sidebarCoreNav,
  .side.mobile-open #sidebarSalesSection,
  .side.mobile-open #sidebarAiSection,
  .side.mobile-open #sidebarPopularSection,
  .side.mobile-open #sidebarEmptyState{
    display:block;
  }

  .side.mobile-open #sidebarCoreNav{
    display:flex;
  }

  .side.mobile-open #sidebarSalesSection .nav,
  .side.mobile-open #sidebarAiSection .nav,
  .side.mobile-open #sidebarPopularSection .nav{
    display:flex;
  }
}

@media (max-width: 640px){
  .app > .side,
  .side{
    top:8px;
    right:8px;
    width:54px;
    min-width:54px;
    max-width:54px;
    height:54px;
    max-height:54px;
    border-radius:16px;
  }

  .side.mobile-open{
    width:min(248px,calc(100vw - 16px));
    min-width:min(248px,calc(100vw - 16px));
    max-width:min(248px,calc(100vw - 16px));
    max-height:calc(100vh - 16px);
    border-radius:20px;
  }

  .sidebar-header{
    min-height:54px;
    padding:0 8px;
    gap:8px;
  }

  .side.mobile-open .sidebar-header{
    min-height:60px;
    padding:10px;
  }

  .brand{
    font-size:15px;
  }

  .nav button{
    padding:12px 14px;
    font-size:14px;
  }

  .main{
    padding:76px 10px 24px;
  }

  .card{
    padding:14px;
    border-radius:14px;
  }

  .btn{
    width:100%;
  }

  .actions .btn,
  .pRowActions .btn,
  .miniActions .mini{
    width:100%;
  }

  .toast{
    right:12px;
    left:12px;
    min-width:0;
    max-width:none;
  }
}
/* responsive */
@media (max-width: 1300px){
  #studentAccountsPage .sa-stats{
    grid-template-columns:repeat(3,1fr);
  }
}
@media (max-width: 1100px){
  #studentAccountsPage .sa-action-grid{
    grid-template-columns:1fr;
  }
  #studentAccountsPage .sa-stats{
    grid-template-columns:repeat(3,1fr);
  }
}
@media (max-width: 780px){
  #studentAccountsPage .sa-shell{
    padding:14px;
  }
  #studentAccountsPage .sa-topbar,
  #studentAccountsPage .sa-hero{
    padding:18px;
  }
  #studentAccountsPage .sa-stats{
    grid-template-columns:repeat(2,1fr);
  }
  #studentAccountsPage .sa-form-grid,
  #studentAccountsPage .sa-product-form,
  #studentAccountsPage .sa-sale-form,
  #studentAccountsPage .sa-mapping-grid,
  #studentAccountsProductModal .sa-form-grid,
  #studentAccountsProductModal .sa-product-form,
  #studentAccountsSaleModal .sa-form-grid,
  #studentAccountsSaleModal .sa-sale-form,
  #studentAccountsSaleModal .sa-mapping-grid{
    grid-template-columns:1fr;
  }
  #studentAccountsPage .sa-duration-inline,
  #studentAccountsSaleModal .sa-duration-inline{
    grid-template-columns:1fr;
  }
  #studentAccountsPage .sa-report-bar{
    flex-direction:column;
    align-items:flex-start;
  }
  #studentAccountsPage .sa-report-filters{
    width:100%;
  }
  #studentAccountsPage .sa-filter-field{
    width:100%;
  }
  #studentAccountsPage .sa-report-filters select,
  #studentAccountsPage .sa-report-filters input{
    flex:1;
    min-width:0;
    width:100%;
  }
  #studentAccountsPage .sa-product-report-card{
    padding:16px;
  }
  #studentAccountsDetailModal .sa-detail-grid{
    grid-template-columns:1fr;
  }
  #studentAccountsDetailModal .sa-detail-editor-grid{
    grid-template-columns:1fr;
  }
  #studentAccountsProductModal .sa-modal-card,
  #studentAccountsSaleModal .sa-modal-card,
  #studentAccountsDetailModal .sa-modal-card{
    padding:18px;
  }
  #studentAccountsPage .sa-pagination{
    justify-content:center;
  }
}

/* ─────────────────────────────────────────
   Global Mobile Polish Sweep
───────────────────────────────────────── */
@media (max-width: 760px){
  .content-portal-header,
  .sales-portal-header,
  .management-portal-header{
    top:8px;
    gap:12px;
    margin-bottom:14px;
    padding:14px 14px;
    border-radius:18px;
    flex-direction:column-reverse;
    align-items:stretch;
  }

  .content-portal-header-actions,
  .sales-portal-header-actions,
  .management-portal-header-actions{
    justify-content:flex-start;
    gap:8px;
  }

  .content-portal-header-title,
  .sales-portal-header-title,
  .management-portal-header-title{
    font-size:15px;
    line-height:1.6;
  }

  .management-portal-header-page-actions{
    width:100%;
    justify-content:flex-start;
    gap:8px;
    flex-wrap:wrap;
  }

  .management-portal-header-page-actions .btn{
    width:auto;
    min-height:38px;
  }

  .dashboard-shell{
    gap:10px;
  }

  .dashboard-hero{
    grid-template-columns:1fr;
    gap:12px;
    padding:14px;
    border-radius:14px;
  }

  .dashboard-hero h1{
    font-size:18px;
    line-height:1.25;
  }

  .dashboard-hero p{
    font-size:12px;
    line-height:1.8;
  }

  .dashboard-date-wrap{
    min-width:0;
    width:100%;
    text-align:right;
  }

  .dashboard-stats{
    grid-template-columns:1fr;
    gap:8px;
  }

  .dashboard-stat-card{
    padding:14px;
    border-radius:14px;
  }

  .dashboard-stat-value{
    font-size:28px;
  }

  .dashboard-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .dashboard-panel{
    padding:14px;
    border-radius:14px;
  }

  .dashboard-system-grid,
  .dashboard-quick-actions{
    grid-template-columns:1fr;
  }

  .mgmt-shell{
    min-height:auto;
    padding:12px;
    border-radius:14px;
    gap:10px;
  }

  .mgmt-topbar{
    padding:10px 12px;
    border-radius:10px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .mgmt-topbar-brand,
  .mgmt-topbar-clock{
    flex-wrap:wrap;
  }

  .mgmt-stats-row{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .mgmt-stat{
    padding:12px 8px;
    border-radius:10px;
  }

  .mgmt-stat-num{
    font-size:20px;
  }

  .mgmt-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .mgmt-left,
  .mgmt-right{
    gap:10px;
  }

  .mgmt-panel{
    padding:12px;
    border-radius:12px;
  }

  .mgmt-api-row,
  .mgmt-portal-row{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .sp-shell{
    gap:12px;
  }

  .sp-header{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    padding:14px;
    border-radius:16px;
  }

  .sp-header-brand{
    align-items:flex-start;
    gap:10px;
  }

  .sp-header-title{
    font-size:17px;
    line-height:1.35;
  }

  .sp-header-sub{
    font-size:12px;
    line-height:1.7;
  }

  .sp-actor-bar{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .sp-actor-field,
  .sp-actor-field-wide{
    width:100%;
  }

  .sp-btn,
  .sp-btn-back,
  .sp-btn-refresh,
  .sp-btn-icon{
    width:100%;
    justify-content:center;
  }

  .sp-stats-row,
  .sp-alerts-row,
  .sp-grid,
  .sp-grid-stack,
  .sp-form-grid,
  .sp-product-grid{
    grid-template-columns:1fr !important;
  }

  .sp-panel{
    padding:14px;
    border-radius:14px;
  }

  .sp-panel-head{
    gap:8px;
    flex-wrap:wrap;
  }

  .sp-panel-actions{
    display:grid;
    gap:8px;
  }

  .sp-panel-actions .sp-btn,
  .sp-panel-actions .btn{
    width:100%;
  }

  .sp-fullinfo-toolbar{
    width:100%;
    display:grid;
    gap:8px;
  }

  .sp-fullinfo-toolbar .btn{
    width:100%;
  }

  .sp-assigned-search{
    width:100%;
    min-width:0;
  }

  #salesAssignedSection,
  #salesNotificationsArchive{
    overflow:auto;
  }

  #suppliersPage{
    padding:12px !important;
  }

  #suppliersPage .sup-hero{
    padding:12px 14px;
    border-radius:12px;
    flex-direction:column;
    align-items:flex-start;
  }

  #suppliersPage .sup-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  #suppliersPage .sup-panel{
    padding:12px;
    border-radius:12px;
  }

  #suppliersPage .sup-stats{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 480px){
  .content-portal-header,
  .sales-portal-header,
  .management-portal-header{
    padding:12px;
    border-radius:16px;
  }

  .content-portal-header-actions .portal-global-btn,
  .sales-portal-header-actions .portal-global-btn,
  .management-portal-header-actions .portal-global-btn{
    min-width:42px;
    min-height:42px;
  }

  .ph-header-pills{
    gap:6px;
  }

  .ph-pill{
    font-size:11px;
    padding:4px 10px;
  }

  .dashboard-stat-value{
    font-size:24px;
  }

  .mgmt-stats-row{
    grid-template-columns:1fr;
  }

  .sp-header,
  .sp-panel,
  .dashboard-panel,
  .mgmt-panel{
    padding:12px;
  }

  #suppliersPage .sup-stats{
    grid-template-columns:1fr;
  }
}

/* Toast layering and mobile-safe positioning */
.toast{
  top:18px;
  right:18px;
  left:auto;
  z-index:2147483647!important;
  max-width:min(420px,calc(100vw - 36px));
}

.modal .toast,
.modal-card .toast{
  z-index:2147483647!important;
}

@media (max-width: 980px){
  .toast{
    top:76px;
    right:12px;
    left:12px;
    width:auto;
    min-width:0;
    max-width:none;
  }
}

@media (max-width: 640px){
  .toast{
    top:72px;
    right:10px;
    left:10px;
    padding:13px 14px;
    border-radius:12px;
    font-size:13px;
  }
}

/* Notification inbox badges and profile inbox */
.notification-inbox-btn{
  position:relative;
  overflow:visible;
}

.notification-inbox-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.notification-inbox-badge{
  position:absolute;
  top:-8px;
  left:-8px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;
  font-size:11px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(220,38,38,.28);
  border:2px solid rgba(15,23,42,.9);
}

body.light-theme .notification-inbox-badge{
  border-color:#fff;
}

.profile-notifications-list{
  display:grid;
  gap:12px;
}

.profile-notification-item{
  border:1px solid rgba(148,163,184,.14);
  border-radius:16px;
  padding:14px 16px;
  background:rgba(15,23,42,.42);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.profile-notification-item.is-unread{
  border-color:rgba(99,102,241,.3);
  box-shadow:0 0 0 1px rgba(99,102,241,.12) inset;
}

.profile-notification-item:hover{
  transform:translateY(-1px);
  border-color:rgba(99,102,241,.24);
}

.profile-notification-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.profile-notification-title{
  color:#f8fafc;
  font-size:14px;
  font-weight:800;
  line-height:1.8;
}

.profile-notification-meta{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  color:#94a3b8;
  font-size:11px;
}

.profile-notification-kind{
  color:#c4b5fd;
  font-weight:800;
}

.profile-notification-body{
  color:#cbd5e1;
  font-size:13px;
  line-height:2;
}

body.light-theme .profile-notification-item{
  background:rgba(248,250,252,.96);
  border-color:#dbe3f2;
}

body.light-theme .profile-notification-item.is-unread{
  border-color:#c7d2fe;
  box-shadow:0 0 0 1px rgba(99,102,241,.1) inset;
}

body.light-theme .profile-notification-title{
  color:#0f172a;
}

body.light-theme .profile-notification-meta{
  color:#64748b;
}

body.light-theme .profile-notification-kind{
  color:#4f46e5;
}

body.light-theme .profile-notification-body{
  color:#334155;
}

@media (max-width: 640px){
  .profile-notification-top{
    flex-direction:column;
    align-items:stretch;
  }

  .profile-notification-top .btn{
    width:100%;
  }
}

.notification-recipients-picker{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.38);
}

.notification-recipients-picker-head{
  color:#cbd5e1;
  font-size:12px;
  font-weight:800;
  margin-bottom:10px;
}

.notification-recipients-picker-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.notification-recipient-chip{
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(30,41,59,.88);
  border:1px solid rgba(148,163,184,.14);
  color:#e2e8f0;
  font:inherit;
  font-size:12px;
  font-weight:700;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}

.notification-recipient-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(99,102,241,.28);
}

.notification-recipient-chip.is-selected{
  background:linear-gradient(135deg,rgba(99,102,241,.28),rgba(79,70,229,.2));
  border-color:rgba(129,140,248,.4);
}

.notification-recipient-chip-meta{
  color:#94a3b8;
  font-size:11px;
}

body.light-theme .notification-recipients-picker{
  background:rgba(248,250,252,.96);
  border-color:#dbe3f2;
}

body.light-theme .notification-recipients-picker-head{
  color:#334155;
}

body.light-theme .notification-recipient-chip{
  background:#fff;
  border-color:#dbe3f2;
  color:#1e293b;
}

body.light-theme .notification-recipient-chip.is-selected{
  background:linear-gradient(135deg,#e0e7ff,#eef2ff);
  border-color:#a5b4fc;
}

body.light-theme .notification-recipient-chip-meta{
  color:#64748b;
}

/* Color pass and theme-specific overrides removed — now handled
   by CSS custom properties in :root and body.light-theme above. */

/* All theming handled by CSS custom properties — see :root and body.light-theme */

/* ═══════════════════════════════════════════════════════════
   GLOBAL UI COLOR STANDARDIZATION
   Final cross-portal readability layer for light/dark themes.
   Shared controls, tooltips, dropdowns, modals, search fields,
   textareas, selects, and table surfaces are normalized here.
   ═══════════════════════════════════════════════════════════ */

body{
  --ui-bg-main:#0f172a;
  --ui-bg-surface:linear-gradient(160deg,#1e293b 0%,#182236 100%);
  --ui-bg-input:#1e293b;
  --ui-bg-input-hover:#243350;
  --ui-bg-popover:linear-gradient(160deg,#1a2235 0%,#111827 100%);
  --ui-bg-table-head:rgba(255,255,255,.03);
  --ui-bg-table-row-even:rgba(255,255,255,.015);
  --ui-bg-table-row-hover:rgba(59,130,246,.08);
  --ui-text-primary:#f1f5f9;
  --ui-text-secondary:#c3cee0;
  --ui-text-muted:#94a3b8;
  --ui-border:rgba(148,163,184,.14);
  --ui-accent:#60a5fa;
  --ui-accent-strong:#4f46e5;
  --ui-shadow-soft:0 12px 32px rgba(0,0,0,.34);
  --ui-shadow-popover:0 20px 44px rgba(0,0,0,.42);
  --ui-tooltip-bg:rgba(15,23,42,.97);
  --ui-tooltip-text:#e2e8f0;
  --ui-tooltip-border:rgba(255,255,255,.07);
  --ui-success-bg:rgba(16,185,129,.16);
  --ui-success-text:#6ee7b7;
  --ui-warning-bg:rgba(245,158,11,.16);
  --ui-warning-text:#fcd34d;
  --ui-danger-bg:rgba(239,68,68,.16);
  --ui-danger-text:#fecaca;
}

body.light-theme{
  --ui-bg-main:#f4f7ff;
  --ui-bg-surface:linear-gradient(160deg,#ffffff 0%,#f5f8ff 100%);
  --ui-bg-input:#ffffff;
  --ui-bg-input-hover:#fdfefe;
  --ui-bg-popover:linear-gradient(180deg,#ffffff 0%,#f7f9ff 100%);
  --ui-bg-table-head:linear-gradient(180deg,#f8fbff 0%,#eef4ff 100%);
  --ui-bg-table-row-even:rgba(244,247,254,.82);
  --ui-bg-table-row-hover:rgba(79,70,229,.06);
  --ui-text-primary:#0f172a;
  --ui-text-secondary:#334155;
  --ui-text-muted:#64748b;
  --ui-border:rgba(148,163,184,.24);
  --ui-accent:#2563eb;
  --ui-accent-strong:#4338ca;
  --ui-shadow-soft:0 10px 26px rgba(15,23,42,.08);
  --ui-shadow-popover:0 20px 44px rgba(15,23,42,.12);
  --ui-tooltip-bg:rgba(255,255,255,.98);
  --ui-tooltip-text:#0f172a;
  --ui-tooltip-border:rgba(148,163,184,.24);
  --ui-success-bg:rgba(16,185,129,.12);
  --ui-success-text:#166534;
  --ui-warning-bg:rgba(245,158,11,.14);
  --ui-warning-text:#92400e;
  --ui-danger-bg:rgba(239,68,68,.12);
  --ui-danger-text:#b91c1c;
}

body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body.light-theme .modal-card,
body.light-theme .links-modal-card,
body.light-theme .site-settings-template-modal-card,
body.light-theme .training-modal-card,
body.light-theme .smart-tool-config-modal,
body.light-theme .sup-detail-modal-card,
body.light-theme .noti-report-modal-card,
body.light-theme .noti-settings-modal-card,
body.light-theme .sp-fi-modal-card,
body.light-theme .sa-modal-card{
  background:var(--ui-bg-surface)!important;
  color:var(--ui-text-primary)!important;
  border-color:var(--ui-border)!important;
  box-shadow:var(--ui-shadow-popover)!important;
}

body.light-theme .modal-overlay,
body.light-theme .sidebar-backdrop,
body.light-theme .lnn-modal-overlay{
  background:rgba(15,23,42,.28)!important;
}

body.light-theme .field label,
body.light-theme .var-filter label,
body.light-theme .training-modal-label,
body.light-theme .sa-filter-field > span{
  color:var(--ui-text-muted)!important;
}

body.light-theme input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
body.light-theme textarea,
body.light-theme select{
  background:var(--ui-bg-input)!important;
  color:var(--ui-text-primary)!important;
  -webkit-text-fill-color:var(--ui-text-primary)!important;
  caret-color:var(--ui-text-primary)!important;
  border-color:var(--ui-border)!important;
}

body.light-theme .field input,
body.light-theme .field textarea,
body.light-theme .field select,
body.light-theme .search input,
body.light-theme .code,
body.light-theme .save,
body.light-theme .smart-tool-output,
body.light-theme .training-textarea,
body.light-theme .plan-info-textarea,
body.light-theme .bldr-prompt-textarea,
body.light-theme .bldr-tpl-area,
body.light-theme .bldr-out-area,
body.light-theme .support-question-input,
body.light-theme .adm-bar-input,
body.light-theme .alm-input,
body.light-theme .alm-otp-input,
body.light-theme .nsa-finput,
body.light-theme .nsa-output,
body.light-theme .sa-form-grid textarea,
body.light-theme .sa-form-grid input:not([type="file"]),
body.light-theme .sa-report-filters input,
body.light-theme .sa-report-filters select,
body.light-theme .sa-mapping-grid select,
body.light-theme .training-search-box input,
body.light-theme .faq-search-box input,
body.light-theme .new-ai-search-box input,
body.light-theme .api-model-search,
body.light-theme .smart-search-input{
  background:var(--ui-bg-input)!important;
  color:var(--ui-text-primary)!important;
  -webkit-text-fill-color:var(--ui-text-primary)!important;
  caret-color:var(--ui-text-primary)!important;
  border-color:var(--ui-border)!important;
}

body.light-theme .field input:hover,
body.light-theme .field textarea:hover,
body.light-theme .field select:hover,
body.light-theme .search input:hover,
body.light-theme .training-textarea:hover,
body.light-theme .plan-info-textarea:hover,
body.light-theme .bldr-prompt-textarea:hover,
body.light-theme .bldr-tpl-area:hover,
body.light-theme .support-question-input:hover,
body.light-theme .adm-bar-input:hover,
body.light-theme .alm-input:hover,
body.light-theme .nsa-finput:hover,
body.light-theme .sa-form-grid textarea:hover,
body.light-theme .sa-form-grid input:not([type="file"]):hover,
body.light-theme .sa-report-filters input:hover,
body.light-theme .sa-report-filters select:hover,
body.light-theme .training-search-box input:hover,
body.light-theme .faq-search-box input:hover,
body.light-theme .new-ai-search-box input:hover,
body.light-theme .api-model-search:hover{
  background:var(--ui-bg-input-hover)!important;
  color:var(--ui-text-primary)!important;
  -webkit-text-fill-color:var(--ui-text-primary)!important;
}

body.light-theme input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):hover,
body.light-theme textarea:hover,
body.light-theme select:hover{
  background:var(--ui-bg-input-hover)!important;
  color:var(--ui-text-primary)!important;
  -webkit-text-fill-color:var(--ui-text-primary)!important;
}

body.light-theme .field input:focus,
body.light-theme .field textarea:focus,
body.light-theme .field select:focus,
body.light-theme .search input:focus,
body.light-theme .code:focus,
body.light-theme .smart-tool-output:focus,
body.light-theme .training-textarea:focus,
body.light-theme .plan-info-textarea:focus,
body.light-theme .bldr-prompt-textarea:focus,
body.light-theme .bldr-tpl-area:focus,
body.light-theme .bldr-out-area:focus,
body.light-theme .support-question-input:focus,
body.light-theme .adm-bar-input:focus,
body.light-theme .alm-input:focus,
body.light-theme .alm-otp-input:focus,
body.light-theme .nsa-finput:focus,
body.light-theme .nsa-output:focus,
body.light-theme .sa-form-grid textarea:focus,
body.light-theme .sa-form-grid input:not([type="file"]):focus,
body.light-theme .sa-report-filters input:focus,
body.light-theme .sa-report-filters select:focus,
body.light-theme .sa-mapping-grid select:focus,
body.light-theme .training-search-box input:focus,
body.light-theme .faq-search-box input:focus,
body.light-theme .new-ai-search-box input:focus,
body.light-theme .api-model-search:focus,
body.light-theme .smart-select-toggle:focus,
body.light-theme .api-model-toggle:focus{
  background:#ffffff!important;
  color:var(--ui-text-primary)!important;
  -webkit-text-fill-color:var(--ui-text-primary)!important;
  caret-color:var(--ui-text-primary)!important;
  border-color:rgba(79,70,229,.34)!important;
  box-shadow:0 0 0 3px rgba(79,70,229,.08)!important;
}

body.light-theme input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
body.light-theme textarea:focus,
body.light-theme select:focus{
  background:#ffffff!important;
  color:var(--ui-text-primary)!important;
  -webkit-text-fill-color:var(--ui-text-primary)!important;
  caret-color:var(--ui-text-primary)!important;
  border-color:rgba(79,70,229,.34)!important;
  box-shadow:0 0 0 3px rgba(79,70,229,.08)!important;
}

body.light-theme input::placeholder,
body.light-theme textarea::placeholder,
body.light-theme .search input::placeholder,
body.light-theme .training-search-box input::placeholder,
body.light-theme .faq-search-box input::placeholder,
body.light-theme .new-ai-search-box input::placeholder,
body.light-theme .support-question-input::placeholder,
body.light-theme .api-model-search::placeholder,
body.light-theme .nsa-finput::placeholder,
body.light-theme .nsa-output::placeholder,
body.light-theme .training-textarea::placeholder,
body.light-theme .plan-info-textarea::placeholder,
body.light-theme .bldr-prompt-textarea::placeholder,
body.light-theme .bldr-tpl-area::placeholder,
body.light-theme .bldr-out-area::placeholder,
body.light-theme .sa-form-grid textarea::placeholder,
body.light-theme .sa-form-grid input:not([type="file"])::placeholder,
body.light-theme .sa-report-filters input::placeholder,
body.light-theme .adm-bar-input::placeholder,
body.light-theme .alm-input::placeholder,
body.light-theme .alm-otp-input::placeholder{
  color:var(--ui-text-muted)!important;
  -webkit-text-fill-color:var(--ui-text-muted)!important;
  opacity:1!important;
}

body.light-theme input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"])::placeholder,
body.light-theme textarea::placeholder{
  color:var(--ui-text-muted)!important;
  -webkit-text-fill-color:var(--ui-text-muted)!important;
  opacity:1!important;
}

body.light-theme select,
body.light-theme select option{
  background:#ffffff!important;
  color:var(--ui-text-primary)!important;
}

body.light-theme input:-webkit-autofill,
body.light-theme input:-webkit-autofill:hover,
body.light-theme input:-webkit-autofill:focus,
body.light-theme textarea:-webkit-autofill,
body.light-theme textarea:-webkit-autofill:hover,
body.light-theme textarea:-webkit-autofill:focus,
body.light-theme select:-webkit-autofill,
body.light-theme select:-webkit-autofill:hover,
body.light-theme select:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ui-text-primary)!important;
  box-shadow:0 0 0 1000px #ffffff inset!important;
  caret-color:var(--ui-text-primary)!important;
}

body.light-theme .rowMenuPanel,
body.light-theme .smart-select-menu,
body.light-theme .api-model-menu,
body.light-theme .sp-searchable-panel,
body.light-theme #newSiteAnalyzerPage .nsa-fg-select .smart-select-menu{
  background:var(--ui-bg-popover)!important;
  border-color:var(--ui-border)!important;
  box-shadow:var(--ui-shadow-popover)!important;
  color:var(--ui-text-primary)!important;
}

body.light-theme .smart-select-toggle,
body.light-theme .api-model-toggle,
body.light-theme .sp-searchable-trigger{
  background:var(--ui-bg-input)!important;
  color:var(--ui-text-primary)!important;
  -webkit-text-fill-color:var(--ui-text-primary)!important;
  border-color:var(--ui-border)!important;
}

body.light-theme .smart-select-arrow,
body.light-theme .api-model-arrow,
body.light-theme .sp-searchable-chevron{
  color:var(--ui-accent-strong)!important;
}

body.light-theme .smart-select-option,
body.light-theme .api-model-option,
body.light-theme .sp-searchable-option{
  background:rgba(248,250,255,.92)!important;
  color:var(--ui-text-secondary)!important;
  border-color:var(--ui-border)!important;
}

body.light-theme .smart-select-option-title,
body.light-theme .api-model-option-title{
  color:var(--ui-text-primary)!important;
}

body.light-theme .smart-select-option:hover,
body.light-theme .api-model-option:hover,
body.light-theme .sp-searchable-option:hover{
  background:rgba(79,70,229,.06)!important;
  border-color:rgba(79,70,229,.18)!important;
}

body.light-theme .smart-select-option.active,
body.light-theme .api-model-option.active,
body.light-theme .sp-searchable-option.is-selected{
  background:linear-gradient(135deg,rgba(79,70,229,.10),rgba(6,182,212,.08))!important;
  border-color:rgba(79,70,229,.24)!important;
  color:var(--ui-text-primary)!important;
}

body.light-theme .smart-select-empty,
body.light-theme .sp-searchable-empty{
  color:var(--ui-text-muted)!important;
  background:rgba(248,250,255,.9)!important;
  border-color:var(--ui-border)!important;
}

body.light-theme .var-table thead tr,
body.light-theme .iv-table thead tr,
body.light-theme .sa-table thead tr{
  background:var(--ui-bg-table-head)!important;
}

body.light-theme .var-table th,
body.light-theme .iv-table th,
body.light-theme .sa-table th{
  color:var(--ui-text-muted)!important;
}

body.light-theme .var-table td,
body.light-theme .iv-table td,
body.light-theme .sa-table td{
  color:var(--ui-text-secondary)!important;
  border-bottom-color:var(--ui-border)!important;
}

body.light-theme .var-table tbody tr:nth-child(even) td,
body.light-theme .iv-table tbody tr:nth-child(even) td,
body.light-theme .sa-table tbody tr:nth-child(even) td{
  background:var(--ui-bg-table-row-even)!important;
}

body.light-theme .var-table tbody tr:hover td,
body.light-theme .iv-table tbody tr:hover td,
body.light-theme .sa-table tbody tr:hover td{
  background:var(--ui-bg-table-row-hover)!important;
}

body.light-theme .status-ok,
body.light-theme .iv-status-ok{
  background:var(--ui-success-bg)!important;
  color:var(--ui-success-text)!important;
}

body.light-theme .status-pending,
body.light-theme .iv-status-warn{
  background:var(--ui-warning-bg)!important;
  color:var(--ui-warning-text)!important;
}

body.light-theme .iv-status-danger,
body.light-theme .xs-btn{
  background:var(--ui-danger-bg)!important;
  color:var(--ui-danger-text)!important;
}

body.light-theme .new-ai-search-icon,
body.light-theme .api-model-search-icon{
  color:var(--ui-text-muted)!important;
}

body.light-theme .new-ai-page-status,
body.light-theme .new-ai-hero-sub,
body.light-theme .smart-tool-logic,
body.light-theme .smart-tool-meta-note,
body.light-theme .lnn-modal-source,
body.light-theme .lnn-modal-loading-text{
  color:var(--ui-text-muted)!important;
}

body.light-theme .new-ai-search-box input,
body.light-theme .smart-tool-output,
body.light-theme .smart-tool-output-json{
  background:var(--ui-bg-input)!important;
  color:var(--ui-text-primary)!important;
  border-color:var(--ui-border)!important;
}

body.light-theme .new-ai-filter-btn{
  background:rgba(255,255,255,.86)!important;
  color:var(--ui-text-secondary)!important;
  border-color:var(--ui-border)!important;
}

body.light-theme .new-ai-filter-btn:hover,
body.light-theme .new-ai-filter-btn.active{
  color:var(--ui-accent-strong)!important;
}