/* =====================================================================
   NorthStar Polish v1 — app-shell refinement layer (loads last).
   Keeps the established look: black canvas + red gradient, white text,
   light-blue accent, purple card borders, Playfair headings, Marcellus SC body.
   Adds: depth, hierarchy, consistent controls, focus states, motion.
   Every rule is prefixed `html body` so it wins over the older layers
   (shell.css, northstar-ui.css, nsx-*) without !important wars.
   ===================================================================== */
:root{
  --ps-purple: rgba(185,164,255,.30);
  --ps-purple-hi: rgba(185,164,255,.58);
  --ps-surface: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 42%), #0b0d12;
  --ps-surface-2: #10141b;
  --ps-field: #07090d;
  --ps-accent: #7cc8ff;
  --ps-accent-hi: #a9dcff;
  --ps-accent-glow: rgba(124,200,255,.28);
  --ps-ring: 0 0 0 3px rgba(124,200,255,.28);
  --ps-ease: cubic-bezier(.2,.7,.2,1);
  --ps-r: 16px;
  --ps-r-sm: 10px;
}

/* ---------- Base ---------- */
html body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
html body ::selection{ background:rgba(124,200,255,.32); color:#fff; }
html body #main-scroll{ overflow-x:clip; scroll-behavior:smooth; }
html body *{ scrollbar-width:thin; scrollbar-color:#2a313c transparent; }
html body ::-webkit-scrollbar{ width:10px; height:10px; }
html body ::-webkit-scrollbar-thumb{ background:#232a35; border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
html body ::-webkit-scrollbar-thumb:hover{ background:#36404e; background-clip:padding-box; border:2px solid transparent; }
html body ::-webkit-scrollbar-track{ background:transparent; }
html body :focus-visible{ outline:2px solid rgba(124,200,255,.8); outline-offset:2px; }

/* ---------- Top bar: glass ---------- */
html body #topbar{
  background:linear-gradient(180deg, rgba(5,6,9,.86), rgba(5,6,9,.72));
  -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(185,164,255,.16);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.9);
}

/* ---------- Page header ---------- */
html body #main .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  letter-spacing:.16em; font-size:11px; color:var(--ps-accent);
}
html body #main .eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--ps-accent); box-shadow:0 0 0 3px rgba(124,200,255,.16), 0 0 12px var(--ps-accent-glow);
}
html body #main .page-title{
  font-size:clamp(28px, 3.4vw, 40px); line-height:1.08; letter-spacing:-.015em;
  background:linear-gradient(180deg,#fff 30%, #d9e2ee 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin-top:6px;
}
html body #main .page-desc{ color:var(--text-dim,#c6cdd8); max-width:72ch; line-height:1.55; margin-top:8px; }

/* ---------- Cards ---------- */
html body #main .card,
html body #main .nsv-card,
html body #main .stat-card{
  background:var(--ps-surface);
  border:1px solid var(--ps-purple);
  border-radius:var(--ps-r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 18px 40px -28px rgba(0,0,0,.95);
  transition:border-color .22s var(--ps-ease), box-shadow .22s var(--ps-ease), transform .22s var(--ps-ease);
}
html body #main .card:hover,
html body #main .nsv-card:hover,
html body #main .stat-card:hover{
  border-color:var(--ps-purple-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 22px 50px -30px rgba(0,0,0,1), 0 0 0 1px rgba(185,164,255,.06);
}
html body #main .card .card{ background:var(--ps-surface-2); box-shadow:none; }
html body #main .section-title{ letter-spacing:-.005em; }

/* KPI / stat numbers */
html body #main .stat-value,
html body #main .nsv-hv,
html body #main .nsv-att-v{
  font-family:var(--font-head,'Playfair Display',Georgia,serif);
  font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.01em;
}
html body #main .stat-value{ font-size:clamp(26px,2.6vw,34px); line-height:1.05; }
html body #main .stat-label{ letter-spacing:.12em; font-size:11px; color:var(--text-faint,#8a93a3); }

/* ---------- Buttons ---------- */
html body #main .btn,
html body .modal .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:38px; padding:0 16px; border-radius:var(--ps-r-sm);
  background:#0e121a; color:#e8eef6; border:1px solid #2c3442;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  cursor:pointer; white-space:nowrap; line-height:1;
  transition:background .16s var(--ps-ease), border-color .16s var(--ps-ease), transform .12s var(--ps-ease), box-shadow .16s var(--ps-ease), color .16s;
}
html body #main .btn:hover{ background:#141a24; border-color:#3d4859; color:#fff; }
html body #main .btn:active{ transform:translateY(1px) scale(.985); }
html body #main .btn:disabled, html body #main .btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
html body #main .btn-sm{ min-height:32px; padding:0 12px; font-size:12.5px; border-radius:9px; }
html body #main .btn-primary{
  background:linear-gradient(180deg, var(--ps-accent-hi) 0%, var(--ps-accent) 100%);
  color:#03111c; border-color:rgba(169,220,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 8px 22px -12px rgba(124,200,255,.75);
  font-weight:600;
}
html body #main .btn-primary:hover{
  background:linear-gradient(180deg, #c4e7ff 0%, #8fd1ff 100%); color:#020c14; border-color:#c4e7ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 12px 28px -12px rgba(124,200,255,.9);
}
html body #main .btn-danger{ background:rgba(255,107,107,.06); color:#ffb3b3; border-color:rgba(255,107,107,.35); }
html body #main .btn-danger:hover{ background:rgba(255,107,107,.14); color:#fff; border-color:rgba(255,107,107,.6); }

/* ---------- Form fields ---------- */
html body #main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
html body #main select,
html body #main textarea{
  background:var(--ps-field); border:1px solid #2a313c; border-radius:var(--ps-r-sm);
  color:#fff; transition:border-color .16s, box-shadow .16s, background .16s;
}
html body #main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):hover,
html body #main select:hover, html body #main textarea:hover{ border-color:#3a4350; }
html body #main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):focus,
html body #main select:focus, html body #main textarea:focus{
  outline:none; border-color:rgba(124,200,255,.75); box-shadow:var(--ps-ring); background:#090c11;
}
html body #main input::placeholder, html body #main textarea::placeholder{ color:#5f6876; }
html body #main textarea{ line-height:1.5; }
html body #main .field-label{ letter-spacing:.06em; color:var(--text-dim,#c6cdd8); margin-bottom:6px; display:block; }
html body #main input[type=checkbox]{ accent-color:var(--ps-accent); }

/* ---------- Tabs (underline style, refined) ---------- */
html body #main .pill-tabs{ border-bottom:1px solid rgba(185,164,255,.16); gap:4px; overflow-x:auto; scrollbar-width:none; }
html body #main .pill-tabs::-webkit-scrollbar{ display:none; }
html body #main .pill-tab{
  position:relative; color:var(--text-faint,#8a93a3); border-radius:9px 9px 0 0;
  transition:color .16s, background .16s; white-space:nowrap; cursor:pointer;
}
html body #main .pill-tab:hover{ color:#fff; background:rgba(255,255,255,.03); }
html body #main .pill-tab.active{ color:#fff; }
html body #main .pill-tab.active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--ps-accent), #b9a4ff);
  box-shadow:0 0 12px rgba(124,200,255,.55);
}

/* ---------- Tags, badges, pills ---------- */
html body #main .tag{
  display:inline-flex; align-items:center; gap:5px;
  border-radius:999px; padding:3px 10px; font-size:11.5px; letter-spacing:.02em;
  background:rgba(255,255,255,.04); border:1px solid #2a313c; color:var(--text-dim,#c6cdd8);
}
html body #main .badge{ border-radius:999px; letter-spacing:.04em; }

/* ---------- Lists / rows ---------- */
html body #main .task-row{
  border-radius:12px; transition:background .16s var(--ps-ease), border-color .16s;
}
html body #main .task-row:hover{ background:rgba(124,200,255,.035); }
html body #main .task-title{ letter-spacing:-.003em; }
html body #main .task-desc, html body #main .task-meta{ color:var(--text-faint,#8a93a3); }

/* ---------- Progress ---------- */
html body #main .progress-bar{ background:#151a22; border-radius:999px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.6); }
html body #main .progress-fill{
  background:linear-gradient(90deg, #5fb6f5, var(--ps-accent-hi));
  box-shadow:0 0 14px rgba(124,200,255,.45); border-radius:999px;
  transition:width .6s var(--ps-ease);
}

/* ---------- Tables (where modules use them) ---------- */
html body #main table{ border-collapse:separate; border-spacing:0; width:100%; }
html body #main th{ font-size:11px; letter-spacing:.12em; color:var(--text-faint,#8a93a3); text-align:left; padding:10px 12px; border-bottom:1px solid rgba(185,164,255,.18); }
html body #main td{ padding:11px 12px; border-bottom:1px solid #161b23; }
html body #main tbody tr{ transition:background .14s; }
html body #main tbody tr:hover{ background:rgba(124,200,255,.035); }

/* ---------- Empty states ---------- */
html body #main .empty-state{
  border:1px dashed rgba(185,164,255,.28); border-radius:14px;
  background:radial-gradient(120% 140% at 50% 0%, rgba(124,200,255,.05), transparent 60%);
  color:var(--text-dim,#c6cdd8); padding:26px 18px; text-align:center;
}

/* ---------- Save status: quiet floating chip ---------- */
html body #workspace-save-status{
  position:fixed; left:18px; bottom:18px; z-index:880;
  display:inline-flex; align-items:center; gap:8px; max-width:min(420px, calc(100vw - 36px));
  padding:7px 12px; border-radius:999px; font-size:12px; letter-spacing:.04em;
  background:rgba(10,12,16,.88); border:1px solid #232a35; color:var(--text-faint,#8a93a3);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -14px #000;
  transition:opacity .3s var(--ps-ease), transform .3s var(--ps-ease);
}
html body #workspace-save-status:empty{ display:none; }
html body #workspace-save-status::before{
  content:""; width:7px; height:7px; border-radius:50%; background:#3ddc97; box-shadow:0 0 10px rgba(61,220,151,.6); flex:none;
}
html body #workspace-save-status.ps-quiet{ opacity:0; transform:translateY(6px); }

/* ---------- Toasts ---------- */
html body #ns-toasts .ns-toast{
  border-radius:14px; border:1px solid rgba(185,164,255,.28);
  background:rgba(11,13,18,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 24px 60px -24px #000, inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---------- Page entrance (route changes only; see ns-polish.js) ---------- */
@keyframes psRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
html body #main.ps-enter > *{ animation:psRise .5s var(--ps-ease) both; }
html body #main.ps-enter > *:nth-child(2){ animation-delay:.04s; }
html body #main.ps-enter > *:nth-child(3){ animation-delay:.08s; }
html body #main.ps-enter > *:nth-child(4){ animation-delay:.12s; }
html body #main.ps-enter > *:nth-child(5){ animation-delay:.16s; }
html body #main.ps-enter > *:nth-child(n+6){ animation-delay:.2s; }
@media (prefers-reduced-motion: reduce){
  html body #main.ps-enter > *{ animation:none; }
  html body #main .card, html body #main .btn, html body #main .progress-fill{ transition:none; }
}

/* ---------- Mobile ---------- */
@media (max-width:860px){
  /* Some modules hard-code two-column grids inline; stack them on small screens. */
  html body #main .grid[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  html body #main .pill-tabs{ flex-wrap:nowrap; max-width:100%; min-width:0; }
  /* Long <select> options and wide children were pushing pages sideways on phones. */
  html body #main .form-grid > *, html body #main .grid > *, html body #main .sg-layout > *{ min-width:0; }
  html body #main .sg-layout{ grid-template-columns:minmax(0,1fr) !important; }
  html body #main select, html body #main input, html body #main textarea{ max-width:100%; }
}
@media (max-width:640px){
  html body #main .page-title{ font-size:28px; }
  html body #main .btn{ min-height:40px; }
  html body #main .btn-sm{ min-height:34px; }
  html body #workspace-save-status{ left:12px; bottom:12px; }
}