@import 'bootstrap/dist/css/bootstrap.css';
@import 'primeicons/primeicons.css';

/* ============================================================
   Plantoo Tech Admin — SCI-FI DARK theme
   Brand: crimson #b73146 · Accent: cyan #3fe0ff
   ============================================================ */

:root {
  --bg: #0a0e17;
  --surface: #111b2c;
  --surface-2: #0d1623;

  --sidebar: #070b13;
  --sidebar-2: #0f1a29;
  --sidebar-line: rgba(63,224,255,.16);
  --sidebar-text: #c2d4e3;
  --sidebar-muted: #6f879b;

  --ink: #e8f0f8;
  --ink-2: #adbdcd;
  --muted: #7d93a7;
  --faint: #5a7084;

  --line: rgba(120,175,210,.15);
  --line-2: rgba(120,175,210,.22);
  --grey-bg: rgba(255,255,255,.06);

  --brand: #b73146;
  --brand-700: #c83d54;
  --brand-800: #9c2839;
  --blush: #3fe0ff;
  --blush-soft: rgba(63,224,255,.18);
  --blush-bg: rgba(63,224,255,.1);

  --wa: #2bc46e; --wa-bg: rgba(31,170,89,.2);
  --fb: #4f9bff; --fb-bg: rgba(10,124,255,.22);

  --green: #4fd093; --green-bg: rgba(47,158,111,.18);
  --amber: #e6b042; --amber-bg: rgba(201,138,20,.18);
  --red: #ff6d80; --red-bg: rgba(197,56,75,.2);
  --blue: #6fa6ff; --blue-bg: rgba(59,111,212,.22);

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 6px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 56px rgba(0,0,0,.62);

  --ring: rgba(63,224,255,.22);
  --accent-shadow: rgba(63,224,255,.3);

  --font: "Hanken Grotesk", -apple-system, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#react-app { height: 100vh; overflow: hidden; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--blush); color: #0a0e17; }
.pt-mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.pt-tnum { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(120,175,210,.18); border-radius: 20px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,175,210,.28); background-clip: content-box; }
.sidebar ::-webkit-scrollbar-thumb { background: rgba(63,224,255,.18); background-clip: content-box; }

/* ============================================================ LOGIN */
.login-stage {
  height: 100vh; width: 100vw;
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 620px at 76% -12%, rgba(183,49,70,.18), transparent 60%),
    radial-gradient(700px 500px at 8% 110%, rgba(28,58,74,.35), transparent 55%),
    linear-gradient(160deg,#0c1422 0%,#0a0e17 55%,#120e1c 100%);
}
.login-grain { position: absolute; inset: 0; opacity: .4; z-index: 1;
  background-image: radial-gradient(rgba(63,224,255,.06) 1px, transparent 1px);
  background-size: 26px 26px; pointer-events: none; animation: grainPan 40s linear infinite; }
@keyframes grainPan { from{ background-position: 0 0; } to{ background-position: 260px 260px; } }

/* sci-fi backdrop */
.login-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; perspective: 600px; }
.sf-grid { position:absolute; left:-25%; right:-25%; bottom:-8%; height:72%;
  background-image: linear-gradient(rgba(63,224,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(63,224,255,.16) 1px, transparent 1px);
  background-size: 46px 46px; transform: rotateX(64deg); transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top,#000,transparent 78%); mask-image: linear-gradient(to top,#000,transparent 78%);
  animation: sfgrid 4.5s linear infinite; }
@keyframes sfgrid { from{ background-position:0 0; } to{ background-position:0 46px; } }
.sf-scan { position:absolute; left:0; right:0; top:0; height:130px;
  background: linear-gradient(to bottom, rgba(63,224,255,.13), transparent);
  border-top: 1px solid rgba(63,224,255,.55); animation: sfscan 6.5s ease-in-out infinite; }
@keyframes sfscan { 0%{ transform: translateY(-30%); opacity:0; } 15%{opacity:1;} 85%{opacity:1;} 100%{ transform: translateY(640px); opacity:0; } }
.sf-bracket { position:absolute; width:44px; height:44px; border:0 solid #3fe0ff; }
.sf-bracket.tl { top:58px; left:58px; border-top-width:2px; border-left-width:2px; animation: sfblink 4s ease-in-out infinite; }
.sf-bracket.tr { top:58px; right:58px; border-top-width:2px; border-right-width:2px; animation: sfblink 4s ease-in-out infinite .6s; }
.sf-bracket.bl { bottom:58px; left:58px; border-bottom-width:2px; border-left-width:2px; animation: sfblink 4s ease-in-out infinite 1.2s; }
.sf-bracket.br { bottom:58px; right:58px; border-bottom-width:2px; border-right-width:2px; animation: sfblink 4s ease-in-out infinite 1.8s; }
@keyframes sfblink { 0%,100%{ opacity:.35; } 50%{ opacity:.95; } }
.sf-ring { position:absolute; border-radius:50%; border:1.5px dashed rgba(63,224,255,.45); }
.sf-ring.rA { width:330px; height:330px; top:7%; right:-95px; opacity:.4; animation: sfspin 26s linear infinite; }
.sf-ring.rB { width:200px; height:200px; bottom:6%; left:-55px; opacity:.5; animation: sfspin 18s linear infinite reverse; }
@keyframes sfspin { from{ rotate: 0deg; } to{ rotate: 360deg; } }
.sf-node { position:absolute; width:8px; height:8px; border-radius:50%; background: #3fe0ff; box-shadow: 0 0 10px rgba(63,224,255,.7); }
.sf-node.n1 { top:24%; left:18%; animation: sfpulse 2.6s ease-in-out infinite; }
.sf-node.n2 { top:70%; left:30%; animation: sfpulse 3.2s ease-in-out infinite .4s; }
.sf-node.n3 { top:34%; right:22%; animation: sfpulse 2.2s ease-in-out infinite .8s; }
.sf-node.n4 { bottom:26%; right:33%; animation: sfpulse 2.8s ease-in-out infinite 1.2s; }
@keyframes sfpulse { 0%,100%{ transform: scale(.7); opacity:.5; } 50%{ transform: scale(1.35); opacity:1; } }
.sf-streak { position:absolute; height:2px; border-radius:2px; left:-180px; background: linear-gradient(90deg, transparent, rgba(63,224,255,.5), transparent); }
.sf-streak.s1 { width:170px; top:30%; animation: sfstreak 4.5s linear infinite; }
.sf-streak.s2 { width:120px; top:62%; animation: sfstreak 5.6s linear infinite 1.5s; }
.sf-streak.s3 { width:90px; top:46%; animation: sfstreak 6.6s linear infinite 3s; }
@keyframes sfstreak { 0%{ transform: translateX(0); } 100%{ transform: translateX(118vw); } }

/* Login card */
.login-card {
  width: 392px; padding: 38px 38px 30px;
  background: linear-gradient(165deg, rgba(17,26,42,.93), rgba(10,15,26,.95));
  border: 1px solid rgba(63,224,255,.28);
  border-radius: 22px; color: #e7eff7;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(63,224,255,.18);
  position: relative; z-index: 2;
  animation: cardIn .6s cubic-bezier(.16,.84,.44,1) both;
}
@keyframes cardIn { from { transform: translateY(22px) scale(.975); } to { transform: none; } }
.login-card > *:not(.sf-cardfx) { animation: fieldIn .5s ease both; position: relative; z-index: 2; }
.login-card > *:nth-child(2){ animation-delay:.04s } .login-card > *:nth-child(3){ animation-delay:.08s }
.login-card > *:nth-child(4){ animation-delay:.12s } .login-card > *:nth-child(5){ animation-delay:.16s }
.login-card > *:nth-child(6){ animation-delay:.20s } .login-card > *:nth-child(7){ animation-delay:.24s }
.login-card > *:nth-child(8){ animation-delay:.28s }
@keyframes fieldIn { from { transform: translateY(9px); opacity: 0; } to { transform: none; opacity: 1; } }
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 30px; }
.login-foot { color: rgba(180,210,230,.45); font-size: 12.5px; text-align: center; }
.sf-cardfx { position:absolute; inset:0; border-radius:22px; overflow:hidden; pointer-events:none; z-index:1; }
.sf-cardfx .cb { position:absolute; width:18px; height:18px; border:2px solid #3fe0ff; opacity:.85; }
.sf-cardfx .cb-tl { top:12px; left:12px; border-right:0; border-bottom:0; }
.sf-cardfx .cb-tr { top:12px; right:12px; border-left:0; border-bottom:0; }
.sf-cardfx .cb-bl { bottom:12px; left:12px; border-right:0; border-top:0; }
.sf-cardfx .cb-br { bottom:12px; right:12px; border-left:0; border-top:0; }
.sf-scanline { position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,rgba(63,224,255,.6),transparent); animation: sfCardScan 4.5s linear infinite; }
@keyframes sfCardScan { 0%{ transform: translateY(-12px); } 100%{ transform: translateY(560px); } }
.sf-termbar { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#86d3ea; display:flex; align-items:center; gap:7px; margin-bottom:16px; white-space:nowrap; }
.sf-live { width:7px; height:7px; border-radius:50%; background:#3fe0ff; box-shadow:0 0 8px #3fe0ff; flex-shrink:0; }
.sf-blink { animation: sfTextBlink 1s steps(1) infinite; }
@keyframes sfTextBlink { 50%{ opacity:0; } }

/* Form fields (sci-fi flavored) */
.pt-field { margin-bottom: 15px; }
.pt-field label { display: block; font-size: 11px; font-weight: 600; color: #7fbdd4; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }
.pt-input { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid rgba(63,224,255,.2); border-radius: 11px; background: rgba(255,255,255,.045); font-size: 14.5px; color: #e7eff7; transition: border-color .15s, box-shadow .15s, background .15s; outline: none; }
.pt-input::placeholder { color: rgba(180,205,220,.4); }
.pt-input:focus { border-color: #3fe0ff; background: rgba(63,224,255,.07); box-shadow: 0 0 0 3px rgba(63,224,255,.16); }
.pt-textarea {
    width: 100%; min-height: 84px; padding: 10px 14px;
    border: 1.5px solid rgba(63,224,255,.2); border-radius: 11px;
    background: rgba(255,255,255,.045); color: #e7eff7;
    font: inherit; font-size: 14px; line-height: 1.55;
    transition: border-color .15s, box-shadow .15s, background .15s;
    outline: none; resize: vertical; -webkit-appearance: none;
}
.pt-textarea::placeholder { color: rgba(180,205,220,.4); }
.pt-textarea:focus { border-color: #3fe0ff; background: rgba(63,224,255,.07); box-shadow: 0 0 0 3px rgba(63,224,255,.16); }
.pt-textarea:disabled { opacity: .55; cursor: not-allowed; }
.pt-textarea::-webkit-scrollbar { width: 10px; height: 10px; }
.pt-textarea::-webkit-scrollbar-thumb { background: rgba(63,224,255,.2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.pt-textarea::-webkit-scrollbar-thumb:hover { background: rgba(63,224,255,.4); background-clip: padding-box; }
.pt-textarea-mono { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; tab-size: 2; -moz-tab-size: 2; padding: 12px 14px; }
.pt-input-wrap { position: relative; }
.pt-input-wrap .pt-input { padding-right: 44px; }
.pt-input-eye { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; display: grid; place-items: center; color: #7fbdd4; border-radius: 8px; background: none; border: none; cursor: pointer; }
.pt-input-eye:hover { background: rgba(63,224,255,.12); }

/* Buttons */
.pt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 11px; font-weight: 600; font-size: 14px; transition: background .15s, transform .12s, box-shadow .15s, border-color .15s, color .15s, filter .15s; white-space: nowrap; border: none; cursor: pointer; font-family: var(--font); }
.pt-btn:active { transform: translateY(1px); }
.pt-btn-primary { background: var(--brand); color: #fff; box-shadow: 0 0 0 1px rgba(63,224,255,.35), 0 0 20px rgba(183,49,70,.4); }
.pt-btn-primary:hover { background: var(--brand-700); transform: translateY(-1px); filter: saturate(1.05); box-shadow: 0 0 0 1px rgba(63,224,255,.55), 0 0 26px rgba(183,49,70,.5); }
.pt-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.pt-btn-block { width: 100%; }
.pt-btn-ghost { background: rgba(63,224,255,.05); color: #cfe0ea; border: 1.5px solid rgba(63,224,255,.2); }
.pt-btn-ghost:hover { background: rgba(63,224,255,.12); border-color: rgba(63,224,255,.38); }
.pt-btn-sm { height: 36px; padding: 0 13px; font-size: 13px; border-radius: 9px; }
.pt-btn-icon { width: 38px; height: 38px; padding: 0; border-radius: 10px; }

.pt-login-error { color: #ff8a96; font-size: 13px; margin-bottom: 12px; padding: 8px 12px; background: rgba(255,109,128,.1); border-radius: 8px; border: 1px solid rgba(255,109,128,.22); }
.pt-login-info { color: #7fd4ec; font-size: 13px; margin-bottom: 12px; padding: 8px 12px; background: rgba(63,224,255,.08); border-radius: 8px; border: 1px solid rgba(63,224,255,.22); }

/* OTP */
.pt-otp { display: flex; gap: 8px; }
.pt-otp-box { width: 100%; height: 48px; text-align: center; font-size: 20px; font-weight: 700; font-family: var(--mono); border: 1.5px solid rgba(63,224,255,.2); background: rgba(255,255,255,.045); color: #e7eff7; border-radius: 11px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; padding: 0; }
.pt-otp-box:focus { border-color: #3fe0ff; box-shadow: 0 0 0 3px rgba(63,224,255,.16); }
.pt-code-send { justify-content: center; }
.pt-code-hint { font-size: 12px; color: #9fb8c8; margin-top: 10px; text-align: center; }
.pt-code-hint a, .pt-code-hint button { color: #7fd4ec; font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; font-size: inherit; }
.pt-code-hint a:hover, .pt-code-hint button:hover { text-decoration: underline; }
.pt-link-toggle { display: block; width: 100%; text-align: center; margin-top: 14px; color: #7fd4ec; font-weight: 600; font-size: 13px; background: none; border: none; cursor: pointer; padding: 4px 0; font-family: inherit; }
.pt-link-toggle:hover { text-decoration: underline; }

/* ============================================================ APP SHELL */
.pt-app { display: grid; grid-template-columns: 248px 1fr; height: 100vh; overflow: hidden; color: var(--ink); }

/* Sidebar */
.sidebar { background: #070b13; color: var(--sidebar-text); display: flex; flex-direction: column; overflow: hidden; }
.sb-brand { display: flex; align-items: center; gap: 11px; padding: 18px 18px 14px; }
.sb-close { display: none; margin-left: auto; width: 34px; height: 34px; border-radius: 9px; align-items: center; justify-content: center; background: rgba(255,255,255,.06); color: var(--sidebar-text); border: none; cursor: pointer; transition: background .13s; }
.sb-close:hover { background: rgba(63,224,255,.12); color: #fff; }
.sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(5,8,14,.66); backdrop-filter: blur(2px); z-index: 40; animation: cardIn .2s ease both; }
.sb-ws { margin: 0 12px 8px; padding: 10px 12px; border-radius: 12px; background: #0f1a29; border: 1px solid rgba(63,224,255,.16); display: flex; align-items: center; gap: 10px; cursor: default; transition: background .15s; }
.sb-ws:hover { background: #13243a; }
.sb-ws .ws-nm { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-ws .ws-rl { font-size: 11px; color: var(--sidebar-muted); }
.sb-nav { flex: 1; overflow-y: auto; padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.sb-sect { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: #5f96b0; padding: 14px 12px 6px; font-weight: 600; }
.sb-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--sidebar-text); font-size: 13.5px; font-weight: 500; transition: background .13s, color .13s, transform .13s; position: relative; width: 100%; text-align: left; background: none; border: none; cursor: pointer; }
.sb-item:hover { background: #0f1a29; color: #fff; transform: translateX(2px); }
.sb-item.on { background: var(--brand); color: #fff; box-shadow: 0 0 0 1px rgba(63,224,255,.45), 0 0 18px rgba(63,224,255,.25), 0 4px 14px rgba(183,49,70,.4); }
.sb-item.on:hover { background: var(--brand); transform: none; }
.sb-item .sb-badge { margin-left: auto; background: rgba(255,255,255,.16); color: #fff; font-size: 11px; font-weight: 600; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; font-family: var(--mono); }
.sb-item.on .sb-badge { background: rgba(255,255,255,.25); }

/* Main */
.pt-main { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* Topbar */
.pt-topbar { height: 62px; flex-shrink: 0; background: linear-gradient(180deg,#0c1626,#0a1320); border-bottom: 1px solid rgba(63,224,255,.16); display: flex; align-items: center; gap: 14px; padding: 0 24px; position: relative; z-index: 30; }
.pt-tb-menu { display: none; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; background: rgba(63,224,255,.05); border: 1.5px solid rgba(63,224,255,.18); color: var(--ink-2); cursor: pointer; flex-shrink: 0; transition: background .14s, border-color .14s; }
.pt-tb-menu:hover { background: rgba(63,224,255,.12); border-color: rgba(63,224,255,.34); }
.pt-tb-title { min-width: 0; flex: 1; }
.pt-topbar h1 { font-size: 18px; margin: 0; font-weight: 700; font-family: var(--mono); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.pt-topbar .pt-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-tb-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* User dropdown */
.pt-tb-user-wrap { position: relative; }
.pt-user-btn { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 8px 0 6px; border-radius: 11px; background: none; border: none; cursor: pointer; transition: background .14s; }
.pt-user-btn:hover { background: rgba(63,224,255,.07); }
.pt-user-btn-meta { text-align: left; line-height: 1.25; max-width: 150px; display: flex; flex-direction: column; }
.pt-u-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-u-role { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 248px; background: #0f1a29; border: 1px solid rgba(63,224,255,.18); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 7px; z-index: 200; animation: cardIn .2s cubic-bezier(.16,.84,.44,1) both; }
.pt-user-dropdown-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); text-align: left; transition: background .12s, color .12s; background: none; border: none; cursor: pointer; font-family: var(--font); }
.pt-user-dropdown-item:hover { background: rgba(63,224,255,.08); color: var(--ink); }
.pt-user-dropdown-item.pt-danger { color: var(--red); }
.pt-user-dropdown-item.pt-danger:hover { background: rgba(255,109,128,.1); }
.pt-dropdown-sep { height: 1px; background: rgba(120,175,210,.15); margin: 6px 4px; }

/* Content */
.pt-content { flex: 1; overflow-y: auto; padding: 26px; background: var(--bg); }

/* ============================================================ AVATARS */
.pt-ava { border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; flex-shrink: 0; background: var(--brand); font-family: var(--font); }
.pt-ava.sq { border-radius: 11px; }

/* ============================================================ DASHBOARD PRIMITIVES */
.pt-page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.pt-page-head h2 { font-size: 23px; margin: 0 0 4px; letter-spacing: -.015em; color: var(--ink); }
.pt-page-head p { margin: 0; color: var(--muted); font-size: 13.5px; }

.pt-grid { display: grid; gap: 16px; }
.pt-g-4 { grid-template-columns: repeat(4, 1fr); }
.pt-g-3 { grid-template-columns: repeat(3, 1fr); }
.pt-g-2 { grid-template-columns: repeat(2, 1fr); }

.pt-card { background: linear-gradient(165deg, rgba(20,32,50,.9), rgba(13,22,35,.94)); border: 1px solid rgba(63,224,255,.14); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.pt-card-pad { padding: 20px; }
.pt-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(63,224,255,.14); }
.pt-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.pt-card-head .pt-hint { font-size: 12.5px; color: var(--muted); }

.pt-stat { background: linear-gradient(165deg, rgba(20,32,50,.9), rgba(13,22,35,.94)); border: 1px solid rgba(63,224,255,.14); border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease; }
.pt-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pt-stat::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--blush), transparent); opacity:.5; }
.pt-stat .pt-lbl { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; font-weight: 500; }
.pt-stat .pt-lbl .pt-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(63,224,255,.14); color: var(--blush); flex-shrink: 0; }
.pt-stat .pt-val { font-size: 28px; font-weight: 700; margin: 12px 0 4px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.pt-stat .pt-delta { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.pt-delta-up { color: var(--green); }
.pt-delta-down { color: var(--red); }
.pt-delta-vs { color: var(--faint); font-weight: 500; margin-left: 4px; }

.pt-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.pt-badge .pt-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pt-b-green { background: var(--green-bg); color: var(--green); }
.pt-b-amber { background: var(--amber-bg); color: var(--amber); }
.pt-b-red { background: var(--red-bg); color: var(--red); }
.pt-b-blue { background: var(--blue-bg); color: var(--blue); }
.pt-b-grey { background: var(--grey-bg); color: var(--muted); }
.pt-b-brand { background: var(--blush-bg); color: var(--blush); }

.pt-live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 20px; background: var(--green-bg); color: var(--green); font-size: 11.5px; font-weight: 600; }
.pt-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: beat 2.4s ease-in-out infinite; position: relative; }
.pt-live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--green); opacity: .5; animation: ripple 1.8s ease-out infinite; }
@keyframes beat { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.35); opacity:.7; } }
@keyframes ripple { 0%{ transform: scale(.6); opacity:.6; } 100%{ transform: scale(1.9); opacity:0; } }

.pt-welcome { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-800) 100%); border-radius: var(--radius); padding: 24px 28px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(183,49,70,.35); }
.pt-welcome::after { content: ""; position: absolute; top: -30%; right: -5%; width: 200px; height: 200px; border-radius: 50%; background: rgba(63,224,255,.12); }
.pt-welcome h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.pt-welcome p { margin: 0; color: rgba(255,255,255,.78); font-size: 14px; }

.pt-quick-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: linear-gradient(165deg, rgba(20,32,50,.9), rgba(13,22,35,.94)); border: 1px solid rgba(63,224,255,.14); cursor: pointer; transition: border-color .13s, box-shadow .13s, transform .13s; text-align: left; width: 100%; font-family: var(--font); color: var(--ink); }
.pt-quick-link:hover { border-color: rgba(63,224,255,.4); box-shadow: 0 0 0 1px rgba(63,224,255,.25), 0 8px 24px rgba(0,0,0,.4); transform: translateY(-2px); }
.pt-quick-link .pt-ql-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(63,224,255,.14); color: var(--blush); display: grid; place-items: center; flex-shrink: 0; }
.pt-quick-link .pt-ql-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.pt-quick-link .pt-ql-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.pt-tl { position: relative; padding-left: 26px; }
.pt-tl::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: rgba(120,175,210,.15); }
.pt-tl-item { position: relative; padding-bottom: 18px; }
.pt-tl-item::before { content: ""; position: absolute; left: -23px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brand); }

/* ============================================================ DETAIL CONFIG (admin) */
.pt-page-head-row { display: flex; align-items: center; gap: 14px; }
.pt-page-icon {
  width: 44px; height: 42px; border-radius: 12px;
  background: linear-gradient(165deg, rgba(63,224,255,.18), rgba(63,224,255,.04));
  border: 1px solid rgba(63,224,255,.3); color: var(--blush);
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 0 22px rgba(63,224,255,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
.pt-count-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px;
  background: var(--blush-bg); color: var(--blush);
  font-size: 11.5px; font-weight: 600; font-family: var(--mono);
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid rgba(63,224,255,.22);
}

.pt-info-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(63,224,255,.06);
  border: 1px solid rgba(63,224,255,.2);
  color: var(--ink-2); font-size: 13px; line-height: 1.55;
  margin-bottom: 18px;
}
.pt-info-banner .pt-info-ico {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(63,224,255,.16); color: var(--blush);
  display: grid; place-items: center;
}
.pt-info-banner b { color: var(--ink); font-weight: 700; }

.pt-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid rgba(63,224,255,.14);
  background: rgba(63,224,255,.02);
}
.pt-toolbar-search { flex: 1 1 240px; max-width: 380px; position: relative; }
.pt-toolbar-search input {
  width: 100%; height: 38px; padding: 0 14px 0 38px;
  border: 1.5px solid rgba(63,224,255,.18); border-radius: 10px;
  background: rgba(255,255,255,.04); color: var(--ink); font-size: 13.5px;
  outline: none; transition: border-color .15s, background .15s, box-shadow .15s;
  font-family: var(--font);
}
.pt-toolbar-search input::placeholder { color: rgba(180,205,220,.4); }
.pt-toolbar-search input:focus {
  border-color: #3fe0ff; background: rgba(63,224,255,.07);
  box-shadow: 0 0 0 3px rgba(63,224,255,.16);
}
.pt-toolbar-search .pt-search-ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.pt-toolbar-actions { display: flex; gap: 8px; margin-left: auto; }

.pt-empty {
  padding: 56px 24px; text-align: center; color: var(--muted);
}
.pt-empty .pt-empty-ico {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(63,224,255,.1); color: var(--blush);
  display: grid; place-items: center; margin: 0 auto 16px;
  border: 1px solid rgba(63,224,255,.22);
}
.pt-empty h4 { color: var(--ink); margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.pt-empty p { margin: 0 0 16px; font-size: 13px; color: var(--muted); }

.pt-key-chip {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  background: rgba(63,224,255,.08); border: 1px solid rgba(63,224,255,.2);
  color: var(--blush); font-family: var(--mono); font-size: 12px;
  letter-spacing: .02em; line-height: 1.4;
}

.pt-pill-row { display: inline-flex; gap: 4px; flex-wrap: wrap; }

.pt-row-actions { display: inline-flex; gap: 4px; }
.pt-row-actions .pt-icon-btn {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(63,224,255,.14);
  color: var(--ink-2); transition: background .14s, border-color .14s, color .14s, transform .12s;
}
.pt-row-actions .pt-icon-btn:hover { background: rgba(63,224,255,.12); border-color: rgba(63,224,255,.34); color: var(--ink); transform: translateY(-1px); }
.pt-row-actions .pt-icon-btn.is-danger:hover { background: rgba(255,109,128,.14); border-color: rgba(255,109,128,.34); color: var(--red); }

/* Dialog: section header (used inside p-dialog body) */
.pt-dialog-section {
  border-top: 1px solid rgba(63,224,255,.12);
  padding-top: 16px; margin-top: 16px;
}
.pt-dialog-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.pt-dialog-section-title {
  font-size: 10.5px; font-weight: 700; color: var(--blush);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em;
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.pt-dialog-section-title::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blush); box-shadow: 0 0 8px var(--blush);
}

/* Expandable-row detail panel (shared by User / Organization / Service lists) */
.pt-detail-panel {
  display: flex; flex-direction: column; gap: 18px;
}
.pt-detail-section { display: flex; flex-direction: column; gap: 10px; }
.pt-detail-section-title {
  font-size: 10.5px; font-weight: 700; color: var(--ink-2);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em;
  display: flex; align-items: center; gap: 8px;
}
.pt-detail-section-title .pt-dot { width: 6px; height: 6px; border-radius: 50%; }
.pt-detail-section-title .pt-dot-blush { background: var(--blush); box-shadow: 0 0 8px var(--blush); }
.pt-detail-section-title .pt-dot-amber { background: var(--amber); box-shadow: 0 0 8px rgba(230,176,66,.6); }
.pt-detail-section-title .pt-dot-grey  { background: var(--muted); }
.pt-detail-section-sub {
  font-size: 10.5px; color: var(--faint); margin-left: auto;
  font-family: var(--mono); letter-spacing: .08em; text-transform: none;
}

.pt-detail-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px;
}
.pt-detail-row {
  display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 14px;
  padding: 8px 12px; border-radius: 9px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(63,224,255,.08);
  min-width: 0;
}
.pt-detail-row-orphan { border-color: rgba(230,176,66,.28); background: rgba(230,176,66,.06); }
.pt-detail-label {
  font-size: 12px; color: var(--muted); font-weight: 500;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  min-width: 0;
}
.pt-detail-value {
  font-size: 13px; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  min-width: 0; word-break: break-word;
}
.pt-detail-empty { color: var(--faint); font-style: italic; font-size: 12.5px; }
.pt-detail-empty-block {
  padding: 14px 16px; border-radius: 9px;
  background: rgba(255,255,255,.02); border: 1px dashed rgba(120,175,210,.18);
  color: var(--muted); font-size: 13px; font-style: italic;
}
.pt-detail-val { word-break: break-word; }
.pt-detail-json {
  background: rgba(7,11,19,.65); border: 1px solid rgba(63,224,255,.14);
  border-radius: 9px; padding: 10px 12px; margin: 0;
  font-family: var(--mono); font-size: 12px; color: #b6d4e6; line-height: 1.55;
  overflow-x: auto; max-height: 240px;
}

@media (max-width: 900px) {
  .pt-detail-grid { grid-template-columns: 1fr; }
  .pt-detail-row { grid-template-columns: 1fr; gap: 4px; }
}

/* PrimeReact row-expander chevron + expansion row background */
.p-datatable .p-row-toggler {
  width: 28px; height: 28px; border-radius: 8px;
  color: var(--muted); background: rgba(63,224,255,.04); border: 1px solid rgba(63,224,255,.14);
  transition: background .14s, color .14s, border-color .14s;
}
.p-datatable .p-row-toggler:hover { background: rgba(63,224,255,.14); color: var(--blush); border-color: rgba(63,224,255,.3); }
.p-datatable .p-row-toggler-icon { font-size: 11px; }
.p-datatable .p-datatable-row-expansion > td { padding: 0; background: transparent; border-bottom: 1px solid rgba(63,224,255,.16); }

/* Switch-style toggle (cosmetic; click handled in JS) */
.pt-switch {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(63,224,255,.14);
  cursor: pointer; transition: border-color .15s, background .15s;
  width: 100%; text-align: left; font-family: var(--font); color: var(--ink);
}
.pt-switch:hover { border-color: rgba(63,224,255,.3); background: rgba(63,224,255,.05); }
.pt-switch .pt-switch-meta { line-height: 1.3; min-width: 0; }
.pt-switch .pt-switch-meta b { color: var(--ink); font-size: 13.5px; display: block; font-weight: 600; }
.pt-switch .pt-switch-meta small { color: var(--muted); font-size: 11.5px; }
.pt-switch .pt-switch-toggle {
  position: relative; width: 38px; height: 22px; border-radius: 22px;
  background: rgba(120,175,210,.2); transition: background .18s, box-shadow .18s;
  flex-shrink: 0;
}
.pt-switch .pt-switch-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  transition: left .2s ease;
}
.pt-switch.is-on .pt-switch-toggle { background: var(--brand); box-shadow: 0 0 12px rgba(183,49,70,.4); }
.pt-switch.is-on .pt-switch-toggle::after { left: 18px; }

.pt-fade-in { animation: ptFade .35s ease both; }
@keyframes ptFade { from { transform: translateY(7px); opacity: 0; } to { transform: none; opacity: 1; } }
.pt-fade-in > *:nth-child(1){ animation: ptRise .5s cubic-bezier(.16,.84,.44,1) .02s both; }
.pt-fade-in > *:nth-child(2){ animation: ptRise .5s cubic-bezier(.16,.84,.44,1) .07s both; }
.pt-fade-in > *:nth-child(3){ animation: ptRise .5s cubic-bezier(.16,.84,.44,1) .12s both; }
.pt-fade-in > *:nth-child(4){ animation: ptRise .5s cubic-bezier(.16,.84,.44,1) .17s both; }
.pt-fade-in > *:nth-child(5){ animation: ptRise .5s cubic-bezier(.16,.84,.44,1) .22s both; }
.pt-fade-in > *:nth-child(6){ animation: ptRise .5s cubic-bezier(.16,.84,.44,1) .27s both; }
@keyframes ptRise { from { transform: translateY(13px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================ MOBILE / RESPONSIVE */
@media (max-width: 1024px) {
  .pt-app { grid-template-columns: 1fr !important; }
  .pt-tb-menu { display: inline-flex; }
  .pt-topbar { padding: 0 16px; gap: 10px; }
  .pt-content { padding: 18px 16px; }
  .pt-user-btn { padding: 0 4px; }
  .pt-user-btn-meta { display: none; }
  .sidebar {
    position: fixed !important; top: 0; bottom: 0; left: 0;
    width: 280px; max-width: 86vw;
    z-index: 50;
    transform: translateX(-104%);
    transition: transform .26s cubic-bezier(.16,.84,.44,1);
    box-shadow: 0 18px 50px rgba(0,0,0,.6);
    will-change: transform;
  }
  .sidebar.is-open { transform: translateX(0); }
  .sb-close { display: inline-flex; }
  .sb-backdrop { display: block; }
}

@media (max-width: 760px) {
  .pt-g-4 { grid-template-columns: repeat(2, 1fr); }
  .pt-g-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .pt-g-4, .pt-g-3, .pt-g-2 { grid-template-columns: 1fr; }
  .pt-topbar h1 { font-size: 16px; }
  .pt-topbar .pt-sub { display: none; }
  .pt-content { padding: 14px; }
  .pt-page-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PrimeReact overrides — sci-fi dark theme
   ============================================================ */

/* Dialog backdrop + shell */
.p-dialog-mask { background: rgba(5,8,14,.72); backdrop-filter: blur(3px); }
.p-dialog {
  background: linear-gradient(165deg, rgba(17,26,42,.96), rgba(10,15,26,.98));
  border: 1px solid rgba(63,224,255,.22);
  border-radius: 16px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(63,224,255,.12);
  color: var(--ink);
  overflow: hidden;
}
.p-dialog .p-dialog-header {
  background: transparent;
  color: var(--ink);
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(63,224,255,.14);
  font-weight: 700;
}
.p-dialog .p-dialog-header .p-dialog-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); font-family: var(--mono); }
.p-dialog .p-dialog-header-icons { gap: 4px; }
.p-dialog .p-dialog-header-icon {
  width: 32px; height: 32px; border-radius: 8px;
  color: var(--muted); background: none; border: none;
  transition: background .14s, color .14s;
}
.p-dialog .p-dialog-header-icon:enabled:hover { background: rgba(63,224,255,.12); color: var(--ink); }
.p-dialog .p-dialog-content { background: transparent; color: var(--ink); padding: 22px 22px 22px; }
.p-dialog .p-dialog-footer { background: transparent; border-top: 1px solid rgba(63,224,255,.14); padding: 14px 22px; }

/* PrimeReact form fields inside dialogs — match pt-input look */
.p-dialog .form-label { display: block; font-size: 11px; font-weight: 600; color: #7fbdd4; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }
.p-dialog .form-group { margin-bottom: 14px; }

/* Hint and error under a dialog field. `.pt-hint` existed only inside .pt-card-head, so a hint
   in a form rendered unstyled at body size and read as content rather than help text. */
.p-dialog .pt-hint { display: block; margin-top: 6px; font-size: 11px; line-height: 1.45; color: var(--muted); word-break: break-word; }
.p-dialog .pt-field-error { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--red); font-weight: 500; }

/* Buttons */
.p-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 10px;
  font-weight: 600; font-size: 13.5px; font-family: var(--font);
  background: var(--brand); color: #fff; border: 1px solid transparent;
  box-shadow: 0 0 0 1px rgba(63,224,255,.32), 0 0 18px rgba(183,49,70,.35);
  transition: background .14s, transform .12s, box-shadow .14s, filter .14s;
  cursor: pointer;
}
.p-button:enabled:hover { background: var(--brand-700); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(63,224,255,.5), 0 0 24px rgba(183,49,70,.45); }
.p-button:enabled:active { transform: translateY(0); }
.p-button.p-button-sm, .p-button.p-button-sm.p-button-icon-only { height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; }
.p-button .p-button-icon { font-size: 13px; }
.p-button.p-button-info { background: rgba(63,224,255,.18); color: var(--blush); border: 1px solid rgba(63,224,255,.4); box-shadow: none; }
.p-button.p-button-info:enabled:hover { background: rgba(63,224,255,.28); border-color: rgba(63,224,255,.6); box-shadow: 0 0 18px rgba(63,224,255,.25); }
.p-button.p-button-warning { background: rgba(230,176,66,.22); color: var(--amber); border: 1px solid rgba(230,176,66,.4); box-shadow: none; }
.p-button.p-button-warning:enabled:hover { background: rgba(230,176,66,.32); border-color: rgba(230,176,66,.6); }
.p-button.p-button-success { background: rgba(79,208,147,.22); color: var(--green); border: 1px solid rgba(79,208,147,.4); box-shadow: none; }
.p-button.p-button-success:enabled:hover { background: rgba(79,208,147,.32); }
.p-button.p-button-danger { background: rgba(255,109,128,.18); color: var(--red); border: 1px solid rgba(255,109,128,.4); box-shadow: none; }
.p-button.p-button-danger:enabled:hover { background: rgba(255,109,128,.28); }
.p-button.p-button-secondary, .p-button.p-button-text {
  background: rgba(63,224,255,.05); color: #cfe0ea; border: 1px solid rgba(63,224,255,.2); box-shadow: none;
}
.p-button.p-button-secondary:enabled:hover, .p-button.p-button-text:enabled:hover { background: rgba(63,224,255,.12); border-color: rgba(63,224,255,.4); }

/* Inputs */
.p-inputtext {
  width: 100%; height: 42px; padding: 0 13px;
  border: 1.5px solid rgba(63,224,255,.2); border-radius: 10px;
  background: rgba(255,255,255,.045); color: var(--ink);
  font-size: 14px; font-family: var(--font);
  transition: border-color .15s, box-shadow .15s, background .15s;
  outline: none;
}
.p-inputtext::placeholder { color: rgba(180,205,220,.4); }
.p-inputtext:enabled:hover { border-color: rgba(63,224,255,.32); }
.p-inputtext:enabled:focus { color: var(--ink); border-color: #3fe0ff; background: rgba(63,224,255,.07); box-shadow: 0 0 0 3px rgba(63,224,255,.16); }
.p-inputtext.p-disabled, .p-inputtext:disabled { opacity: .55; background: rgba(255,255,255,.02); cursor: not-allowed; }

/* Bootstrap's .form-control:focus would force near-black text — keep ink color across the admin theme */
input.form-control,
textarea.form-control,
input.form-control:focus,
textarea.form-control:focus { color: var(--ink); background-color: rgba(63,224,255,.07); }

/* The .p-inputtext base sets height: 42px — that crushes textareas. Restore textarea sizing. */
textarea.p-inputtext, .p-inputtextarea {
  height: auto; min-height: 96px;
  padding: 10px 13px; line-height: 1.5;
  resize: vertical;
}

/* DataTable */
.p-datatable { background: transparent; color: var(--ink); }
.p-datatable .p-datatable-thead > tr > th {
  background: rgba(63,224,255,.04); color: #7fb4cd;
  border-bottom: 1px solid rgba(63,224,255,.16);
  font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  padding: 12px 14px;
}
.p-datatable .p-datatable-tbody > tr { background: transparent; color: var(--ink); transition: background .12s; }
.p-datatable .p-datatable-tbody > tr > td {
  background: transparent; border-bottom: 1px solid rgba(120,175,210,.1);
  padding: 13px 14px; color: var(--ink); font-size: 13.5px;
}
.p-datatable .p-datatable-tbody > tr:hover { background: rgba(63,224,255,.05); }
.p-datatable .p-sortable-column .p-sortable-column-icon { color: var(--muted); }
.p-datatable .p-sortable-column.p-highlight { color: var(--blush); }

/* Paginator */
.p-paginator { background: transparent; border: none; padding: 12px 0; color: var(--muted); }
.p-paginator .p-paginator-pages .p-paginator-page,
.p-paginator .p-paginator-prev, .p-paginator .p-paginator-next,
.p-paginator .p-paginator-first, .p-paginator .p-paginator-last {
  color: var(--ink-2); background: transparent; border: 1px solid transparent;
  min-width: 32px; height: 32px; border-radius: 8px; font-size: 13px;
  transition: background .12s, color .12s;
}
.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover,
.p-paginator .p-paginator-prev:hover, .p-paginator .p-paginator-next:hover { background: rgba(63,224,255,.08); color: var(--ink); }
.p-paginator .p-paginator-pages .p-paginator-page.p-highlight { background: rgba(63,224,255,.16); color: var(--ink); border-color: rgba(63,224,255,.4); }

/* Dropdown / MultiSelect trigger */
.p-multiselect, .p-dropdown {
  background: rgba(255,255,255,.045); border: 1.5px solid rgba(63,224,255,.2);
  border-radius: 10px; color: var(--ink); height: 42px; min-width: 200px;
  transition: border-color .15s, box-shadow .15s;
}
.p-multiselect:not(.p-disabled):hover, .p-dropdown:not(.p-disabled):hover { border-color: rgba(63,224,255,.32); }
.p-multiselect:not(.p-disabled).p-focus, .p-dropdown:not(.p-disabled).p-focus { border-color: #3fe0ff; box-shadow: 0 0 0 3px rgba(63,224,255,.16); }
.p-multiselect .p-multiselect-label, .p-dropdown .p-dropdown-label { color: var(--ink); padding: 10px 13px; font-size: 14px; }
.p-multiselect .p-multiselect-label.p-placeholder, .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(180,205,220,.4); }
.p-multiselect .p-multiselect-trigger, .p-dropdown .p-dropdown-trigger { color: var(--muted); width: 36px; }

/* Dropdown / MultiSelect open panel */
.p-multiselect-panel, .p-dropdown-panel {
  background: #0f1a29; border: 1px solid rgba(63,224,255,.22); border-radius: 12px;
  box-shadow: var(--shadow-lg); color: var(--ink); margin-top: 4px; overflow: hidden;
}
.p-multiselect-header, .p-dropdown-header { background: rgba(63,224,255,.04); border-bottom: 1px solid rgba(63,224,255,.12); padding: 10px 12px; }
.p-multiselect-items, .p-dropdown-items { padding: 4px; }
.p-multiselect-items .p-multiselect-item, .p-dropdown-items .p-dropdown-item {
  color: var(--ink-2); padding: 9px 12px; font-size: 13.5px; border-radius: 8px;
  transition: background .12s, color .12s;
}
.p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover,
.p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { background: rgba(63,224,255,.08); color: var(--ink); }
.p-multiselect-items .p-multiselect-item.p-highlight,
.p-dropdown-items .p-dropdown-item.p-highlight { background: rgba(63,224,255,.14); color: var(--ink); }
.p-multiselect-items .p-multiselect-item.p-highlight:not(.p-disabled):hover,
.p-dropdown-items .p-dropdown-item.p-highlight:not(.p-disabled):hover { background: rgba(63,224,255,.22); }


/* Filter bar (login logs, ship leaderboard).
   Everything in this row is 42px tall and vertically centred. The controls come from three
   different sources — a .p-inputtext, several .p-button-sm presets, and a .p-calendar wrapper —
   and each brought its own height, so the row read as ragged. Rather than chase each one, the
   bar owns the height and its children inherit it. */
.pt-filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.pt-filterbar-group { display: flex; gap: 4px; align-items: center; }
.pt-filterbar-sep { font-size: 12.5px; color: var(--muted); padding: 0 2px; }

.pt-filterbar .p-inputtext,
.pt-filterbar .p-calendar,
.pt-filterbar .p-button,
.pt-filterbar .p-button.p-button-sm {
  height: 42px; min-height: 42px; margin: 0;
}
/* .p-button-sm ships its own smaller padding/·font — keep the type size, drop the height. */
.pt-filterbar .p-button.p-button-sm { padding: 0 14px; font-size: 13px; }
.pt-filterbar .p-button .p-button-icon { font-size: 13px; }

/* Calendar open panel.
   PrimeReact ships no theme CSS in this project (primeicons only), so every component is dressed
   here. Without this block the datepicker renders as an unstyled white sheet on a dark panel —
   which is exactly why the native <input type="date"> was rejected in the first place. Matched to
   the dropdown panel above so the two read as one kit. */
.p-datepicker {
  background: #0f1a29; border: 1px solid rgba(63,224,255,.22); border-radius: 12px;
  box-shadow: var(--shadow-lg); color: var(--ink); padding: 8px; margin-top: 4px;
}
.p-datepicker .p-datepicker-header {
  background: rgba(63,224,255,.04); border-bottom: 1px solid rgba(63,224,255,.12);
  color: var(--ink); padding: 8px 6px; border-radius: 8px 8px 0 0;
}
.p-datepicker .p-datepicker-title .p-datepicker-year,
.p-datepicker .p-datepicker-title .p-datepicker-month { color: var(--ink); font-weight: 700; background: none; border: none; }
.p-datepicker .p-datepicker-prev, .p-datepicker .p-datepicker-next { color: var(--ink-2); border-radius: 8px; }
.p-datepicker .p-datepicker-prev:hover, .p-datepicker .p-datepicker-next:hover { background: rgba(63,224,255,.1); color: var(--ink); }
.p-datepicker table { font-size: 13px; margin: 6px 0 0; }
.p-datepicker table th { color: var(--muted); font-weight: 700; padding: 6px; }
.p-datepicker table td { padding: 2px; }
.p-datepicker table td > span {
  color: var(--ink-2); border-radius: 8px; width: 32px; height: 32px;
  transition: background .12s, color .12s;
}
.p-datepicker table td > span:hover { background: rgba(63,224,255,.1); color: var(--ink); }
.p-datepicker table td > span.p-highlight { background: rgba(63,224,255,.2); color: var(--ink); }
.p-datepicker table td.p-datepicker-today > span { border: 1px solid rgba(63,224,255,.4); color: var(--ink); }
.p-datepicker table td.p-disabled > span, .p-datepicker .p-datepicker-other-month > span { color: var(--faint); }
.p-datepicker .p-datepicker-buttonbar { border-top: 1px solid rgba(63,224,255,.12); padding-top: 8px; }

/* The WRAPPER is the control, not the input inside it.
   .p-calendar renders an <input> plus a trigger <button>, and each arrived with its own border,
   radius and height (.p-inputtext is 42px, .form-control brings Bootstrap's own box, the trigger
   is a .p-button in brand RED). Three boxes side by side gave a visible seam down the middle and
   mismatched heights. So: one border on the wrapper, and the two children are stripped bare and
   simply fill it. Focus is raised on the wrapper via :focus-within, so tabbing into either half
   lights the whole control. */
.p-calendar {
  display: inline-flex; align-items: stretch; width: auto;
  border: 1.5px solid rgba(63,224,255,.2); border-radius: 11px;
  background: rgba(255,255,255,.045); overflow: hidden;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.p-calendar:focus-within {
  border-color: #3fe0ff; background: rgba(63,224,255,.07);
  box-shadow: 0 0 0 3px rgba(63,224,255,.16);
}
.p-calendar > .p-inputtext,
.p-calendar > input.form-control,
.p-calendar > input.p-inputtext:focus,
.p-calendar > input.form-control:focus {
  flex: 1; min-width: 0; height: 42px; margin: 0;
  border: none; border-radius: 0; background: transparent; box-shadow: none; outline: none;
  color: var(--ink); padding: 0 12px; font-size: 14.5px;
  /* Centred: the field is sized for a fixed-width date, so left-aligned text left a gap that
     read as a broken layout rather than an empty half. */
  text-align: center;
}
.p-calendar .p-datepicker-trigger,
.p-calendar .p-datepicker-trigger.p-button {
  flex: 0 0 40px; height: 42px; margin: 0;
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  color: var(--muted); transition: background .12s, color .12s;
}
.p-calendar .p-datepicker-trigger:hover,
.p-calendar .p-datepicker-trigger.p-button:hover { background: rgba(63,224,255,.1); color: var(--ink); }
.p-calendar .p-datepicker-trigger:focus { box-shadow: none; }
.p-calendar .p-datepicker-trigger .p-button-icon,
.p-calendar .p-datepicker-trigger .pi { display: inline-block; margin: 0; font-size: 15px; color: inherit; }
.p-calendar .p-datepicker-trigger .p-button-label { display: none; }

/* Closed-state chip layout — allow the widget to grow when chips wrap, and give chip rows breathing room */
.p-multiselect { height: auto; min-height: 42px; }
.p-multiselect .p-multiselect-label { padding: 6px 13px; }
.p-multiselect-token { margin: 2px 6px 6px 0; }

/* Checkbox (used by MultiSelect items) */
.p-checkbox { width: 18px; height: 18px; }
.p-checkbox .p-checkbox-box {
  background: rgba(255,255,255,.045); border: 1.5px solid rgba(63,224,255,.32);
  border-radius: 5px; width: 18px; height: 18px;
  transition: background .14s, border-color .14s;
}
.p-checkbox:not(.p-disabled):not(.p-highlight) .p-checkbox-box:hover { border-color: #3fe0ff; }
.p-checkbox .p-checkbox-box.p-highlight { background: var(--brand); border-color: var(--brand); }
.p-checkbox .p-checkbox-box .p-checkbox-icon { color: #fff; font-size: 12px; font-weight: 700; }

/* Tag */
.p-tag {
  background: rgba(63,224,255,.14); color: var(--blush);
  border-radius: 20px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; line-height: 1.4;
}
.p-tag.p-tag-success { background: var(--green-bg); color: var(--green); }
.p-tag.p-tag-warning { background: var(--amber-bg); color: var(--amber); }
.p-tag.p-tag-danger { background: var(--red-bg); color: var(--red); }
.p-tag.p-tag-info { background: var(--blue-bg); color: var(--blue); }

/* Message / Messages */
.p-message {
  border-radius: 10px; padding: 10px 14px; font-size: 13px;
  border: 1px solid; margin: 0;
}
.p-message .p-message-wrapper { padding: 0; }
.p-message.p-message-error { background: rgba(255,109,128,.1); border-color: rgba(255,109,128,.28); color: #ff8a96; }
.p-message.p-message-info { background: rgba(63,224,255,.08); border-color: rgba(63,224,255,.28); color: #7fd4ec; }
.p-message.p-message-success { background: rgba(79,208,147,.12); border-color: rgba(79,208,147,.32); color: var(--green); }
.p-message.p-message-warn, .p-message.p-message-warning { background: rgba(230,176,66,.12); border-color: rgba(230,176,66,.32); color: var(--amber); }
.p-message .p-message-icon { font-size: 14px; }

/* ProgressSpinner */
.p-progress-spinner .p-progress-spinner-circle { stroke: var(--blush); animation-duration: 1.2s; }

/* Tooltip */
.p-tooltip .p-tooltip-text { background: #0f1a29; color: var(--ink); border: 1px solid rgba(63,224,255,.2); border-radius: 8px; font-size: 12px; padding: 6px 10px; box-shadow: var(--shadow); }
.p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: rgba(63,224,255,.2); }
.p-tooltip.p-tooltip-top .p-tooltip-arrow { border-top-color: rgba(63,224,255,.2); }

/* Compatibility: Bootstrap form-label inside .p-dialog */
.p-dialog .form-control { width: 100%; }

/* ============================================================
   Click burst (sci-fi) — fired on .login-stage.scifi mousedown
   ============================================================ */
.sf-bursts { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sf-bursts.login-bursts { position: fixed; inset: 0; z-index: 60; }
.sf-burst { position: absolute; width: 0; height: 0; }
.sf-flash {
  position: absolute; left: 0; top: 0; width: 90px; height: 90px;
  margin: -45px 0 0 -45px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(63,224,255,.6) 35%, transparent 70%);
  transform: scale(.2); opacity: .9; animation: sfFlash .5s ease-out forwards;
}
@keyframes sfFlash { 0%{ transform: scale(.2); opacity: .95; } 100%{ transform: scale(1.4); opacity: 0; } }
.sf-shock {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px;
  margin: -15px 0 0 -15px; border-radius: 50%;
  border: 2px solid rgba(63,224,255,.8);
  box-shadow: 0 0 16px rgba(63,224,255,.6);
  transform: scale(.3); opacity: .9;
  animation: sfShock .75s cubic-bezier(.18,.7,.3,1) forwards;
}
.sf-shock.r2 {
  border-color: rgba(183,49,70,.7); box-shadow: 0 0 14px rgba(183,49,70,.5);
  animation-duration: .9s; animation-delay: .05s;
}
@keyframes sfShock { 0%{ transform: scale(.3); opacity: .9; } 100%{ transform: scale(6.5); opacity: 0; } }
.sf-shard {
  position: absolute; left: 0; top: 0; width: 14px; height: 3px;
  margin: -1.5px 0 0 -7px; border-radius: 2px;
  background: linear-gradient(90deg, #3fe0ff, rgba(63,224,255,0));
  box-shadow: 0 0 8px rgba(63,224,255,.8);
  animation: sfShard .8s cubic-bezier(.12,.7,.25,1) forwards;
}
.sf-shard.alt {
  background: linear-gradient(90deg, #ff5c74, rgba(183,49,70,0));
  box-shadow: 0 0 8px rgba(255,92,116,.7); width: 11px;
}
@keyframes sfShard {
  0%{ transform: translate(0,0) rotate(var(--rot)); opacity: 1; }
  100%{ transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ .sf-burst { display: none; } }

/* ============================================================
   Admin panel animated backdrop (sci-fi mirror)
   ============================================================ */
.pt-app.theme-admin .pt-content {
  position: relative;
  background:
    radial-gradient(820px 480px at 94% -10%, rgba(63,224,255,.06), transparent 62%),
    radial-gradient(720px 480px at -8% 106%, rgba(183,49,70,.07), transparent 62%),
    var(--bg);
}
.panel-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pf-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 160px; opacity: .5;
  background: linear-gradient(180deg, rgba(63,224,255,.1), transparent);
  animation: pfScan 7s linear infinite;
}
@keyframes pfScan { 0%{ transform: translateY(-160px); } 100%{ transform: translateY(100vh); } }
.pf-streak {
  position: absolute; height: 2px; border-radius: 2px; left: -220px; width: 170px;
  background: linear-gradient(90deg, transparent, #3fe0ff); opacity: .55;
}
.pf-streak.ps1 { top: 22%; animation: pfStreak 6s linear infinite; }
.pf-streak.ps2 { top: 54%; width: 120px; background: linear-gradient(90deg, transparent, #b73146); animation: pfStreak 7.5s linear infinite 1.6s; }
.pf-streak.ps3 { top: 78%; width: 90px; animation: pfStreak 9s linear infinite 3s; }
@keyframes pfStreak { 0%{ transform: translateX(0); } 100%{ transform: translateX(120vw); } }
.pf-node {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #3fe0ff; box-shadow: 0 0 12px #3fe0ff;
}
.pf-node.pn1 { top: 18%; left: 16%; animation: sfpulse 2.6s ease-in-out infinite; }
.pf-node.pn2 { top: 66%; left: 24%; animation: sfpulse 3.2s ease-in-out infinite .4s; }
.pf-node.pn3 { top: 34%; right: 14%; background: #ff5c74; box-shadow: 0 0 12px #ff5c74; animation: sfpulse 2.2s ease-in-out infinite .8s; }
.pf-node.pn4 { bottom: 20%; right: 28%; animation: sfpulse 2.8s ease-in-out infinite 1.2s; }
.pf-ring { position: absolute; border: 1px dashed rgba(63,224,255,.2); border-radius: 50%; }
.pf-ring.pr1 { width: 320px; height: 320px; top: -90px; right: -80px; animation: sfspin 30s linear infinite; }
.pf-ring.pr2 { width: 200px; height: 200px; bottom: -70px; left: -60px; border-color: rgba(183,49,70,.22); animation: sfspin 22s linear infinite reverse; }
/* Bursts are pointer-events:none, but they need to render above the cards,
   sidebar and topbar so the spark is visible no matter where the admin clicks. */
.panel-fx .sf-bursts { position: fixed; inset: 0; z-index: 60; }
@media (prefers-reduced-motion: reduce){ .pf-scan, .pf-streak, .pf-node, .pf-ring{ animation: none !important; } }

/* ============================================================
   Sci-fi v2 — starfield, explosion bursts, ship fleet, score
   (mirrors Plantoo-Tech-Design/styles.css)
   ============================================================ */

/* hide the older floor-grid + HUD slot now that stars + bursts carry the look */
.sf-grid { display: none !important; }
.sf-hud  { display: none !important; }

/* twinkling starfield */
.sf-stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sf-star { position: absolute; width: 1.5px; height: 1.5px; border-radius: 50%;
  background: #cfe9ff; box-shadow: 0 0 4px rgba(63,224,255,.55);
  animation: sfStar 3s ease-in-out infinite; }
.sf-star.big { width: 2.4px; height: 2.4px; background: #bff3ff;
  box-shadow: 0 0 6px rgba(63,224,255,.7), 0 0 12px rgba(63,224,255,.35);
  animation-name: sfStarBig; }
.sf-star.pop { width: 2px; height: 2px; background: #ff9bb1;
  box-shadow: 0 0 5px rgba(255,92,116,.7); animation-name: sfStarPop; }
@keyframes sfStar    { 0%,100%{ opacity:.25; transform:scale(.85); } 50%{ opacity:.95; transform:scale(1.2); } }
@keyframes sfStarBig { 0%,100%{ opacity:.5;  transform:scale(.9);  } 50%{ opacity:1;   transform:scale(1.4); } }
@keyframes sfStarPop { 0%,100%{ opacity:.3;  transform:scale(.7);  } 50%{ opacity:1;   transform:scale(1.5); } }
@media (prefers-reduced-motion: reduce){ .sf-star { animation: none !important; } }

/* extra streak colours s4-s6 on login + ps4-ps7 on panel */
.sf-streak.s4 { width: 140px; top: 18%; animation: sfstreak 5.2s linear infinite 2.2s; }
.sf-streak.s5 { width: 100px; top: 74%; animation: sfstreak 6.2s linear infinite 4s; }
.sf-streak.s6 { width: 130px; top: 88%; animation: sfstreak 7.4s linear infinite .8s; }
.pf-streak.ps4 { top: 10%; width: 140px; background: linear-gradient(90deg, transparent, #c79bff); animation: pfStreak 7s   linear infinite 2.4s; }
.pf-streak.ps5 { top: 36%; width: 100px; background: linear-gradient(90deg, transparent, #9ee85a); animation: pfStreak 8.2s linear infinite 4s; }
.pf-streak.ps6 { top: 64%; width: 130px; background: linear-gradient(90deg, transparent, #ffd17f); animation: pfStreak 6.8s linear infinite .6s; }
.pf-streak.ps7 { top: 88%; width: 110px; background: linear-gradient(90deg, transparent, #ff9bb1); animation: pfStreak 9.4s linear infinite 5s; }

/* small (cursor-trail) burst variant — quick spark */
.sf-burst.sm .sf-shock.tiny { position: absolute; left: 0; top: 0; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%; border: 1.5px solid rgba(63,224,255,.55);
  transform: scale(.3); opacity: .55; animation: sfShockSm .42s cubic-bezier(.18,.7,.3,1) forwards; }
@keyframes sfShockSm { 0%{ transform:scale(.3); opacity:.55; } 100%{ transform:scale(3.4); opacity:0; } }
.sf-flash.sm { width: 32px; height: 32px; margin: -16px 0 0 -16px;
  background: radial-gradient(circle, rgba(255,255,255,.65), rgba(63,224,255,.35) 45%, transparent 70%);
  animation: sfFlashSm .32s ease-out forwards; }
@keyframes sfFlashSm { 0%{ transform:scale(.4); opacity:.7; } 100%{ transform:scale(1.1); opacity:0; } }

/* flame core + puffs (big ship-kill burst) */
.sf-flame.core { position: absolute; left: 0; top: 0; width: 90px; height: 90px;
  margin: -45px 0 0 -45px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ffffff 6%, #ffe06b 22%, #ff8a3d 50%, rgba(183,49,70,.45) 78%, transparent 95%);
  filter: blur(2px); opacity: 0; transform: scale(.3);
  animation: sfFireball 1.0s cubic-bezier(.16,.7,.3,1) forwards; mix-blend-mode: screen; }
@keyframes sfFireball {
  0%   { transform: scale(.3);  opacity: 0; }
  14%  { transform: scale(1.35); opacity: 1; }
  55%  { transform: scale(1.18); opacity: .9; }
  100% { transform: scale(.6);  opacity: 0; }
}
.sf-flame.puff { position: absolute; left: 0; top: 0; width: 54px; height: 54px;
  margin: -27px 0 0 -27px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff, #ffd17f 30%, #ff5c2e 65%, rgba(183,49,70,.35) 85%, transparent 95%);
  filter: blur(3px); opacity: 0; transform: translate(0,0) scale(.4);
  animation: sfPuff 1.1s cubic-bezier(.16,.7,.3,1) forwards; mix-blend-mode: screen; }
.sf-flame.puff.warm { background: radial-gradient(circle at 40% 40%, #fff5cd, #ffb86b 32%, #ff7a3d 65%, transparent 88%); }
@keyframes sfPuff {
  0%   { transform: translate(0,0) scale(.4); opacity: 0; }
  22%  { transform: translate(var(--fx), var(--fy)) scale(1.15); opacity: 1; }
  100% { transform: translate(var(--fx), calc(var(--fy) - 20px)) scale(.6); opacity: 0; }
}

/* embers spraying outward with gravity */
.sf-ember { position: absolute; left: 0; top: 0; width: 4px; height: 4px;
  margin: -2px 0 0 -2px; border-radius: 50%;
  background: #ffd17f; box-shadow: 0 0 6px #ffd17f, 0 0 14px rgba(255,184,107,.6);
  transform: translate(0,0); opacity: 1;
  animation: sfEmber 1.0s cubic-bezier(.12,.7,.25,1) forwards; }
.sf-ember.yellow { background: #fff5cd; box-shadow: 0 0 6px #fff, 0 0 14px rgba(255,229,131,.75); }
.sf-ember.red    { background: #ff5c2e; box-shadow: 0 0 6px #ff5c2e, 0 0 14px rgba(255,90,46,.6); }
@keyframes sfEmber {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--ex), calc(var(--ey) + 36px)) scale(.4); opacity: 0; }
}

/* smoke puffs trailing the blast */
.sf-smoke { position: absolute; left: 0; top: 0; width: 34px; height: 34px;
  margin: -17px 0 0 -17px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.42), rgba(120,110,110,.32) 55%, rgba(40,30,30,0) 80%);
  filter: blur(5px); opacity: 0; transform: translate(0,0) scale(.6);
  animation: sfSmoke 1.3s ease-out forwards; }
@keyframes sfSmoke {
  0%   { opacity: 0; transform: translate(0,0) scale(.6); }
  25%  { opacity: .7; transform: translate(calc(var(--smx) * .3), -16px) scale(1); }
  100% { opacity: 0; transform: translate(var(--smx), -100px) scale(2); }
}

/* KILLS counter */
.sf-score { position: fixed; bottom: 22px; right: 22px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(20,40,55,.65); backdrop-filter: blur(8px);
  border: 1px solid rgba(63,224,255,.35);
  box-shadow: 0 0 18px rgba(63,224,255,.18), inset 0 0 0 1px rgba(63,224,255,.08);
  z-index: 50; pointer-events: auto; font-family: var(--mono); user-select: none; }
.sf-score-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; color: #7fdfff; }
.sf-score-val { font-size: 18px; font-weight: 700; color: #fff; text-shadow: 0 0 8px rgba(63,224,255,.6); letter-spacing: .06em; }
.sf-score.panel { bottom: 22px; right: 22px; }
@media (max-width: 760px){
  .sf-score { bottom: 14px; right: 14px; padding: 6px 10px; }
  .sf-score-val { font-size: 15px; }
  .sf-score.panel { bottom: 14px; right: 14px; }
}

/* drifting spaceships (clickable to detonate) */
.pf-fleet { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.panel-fx .pf-fleet { position: fixed; inset: 0; z-index: 25; }
.pf-ship { position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none;
  pointer-events: auto; cursor: crosshair;
  animation-name: pfShipFly; animation-timing-function: linear; animation-iteration-count: infinite;
  transition: filter .12s, transform .12s; }
.pf-ship:hover { filter: drop-shadow(0 0 10px var(--pf-glow)) drop-shadow(0 0 18px var(--pf-glow)) brightness(1.2); }
.pf-ship.rev { animation-name: pfShipFlyRev; }
.pf-ship.rev svg { transform: scaleX(-1); }
@keyframes pfShipFly    { from { transform: translate(-12vw, 0); }            to { transform: translate(112vw, var(--drift, 0)); } }
@keyframes pfShipFlyRev { from { transform: translate(112vw, 0) scaleX(1); }  to { transform: translate(-12vw, var(--drift, 0)) scaleX(1); } }
.pf-ship { --pf-stroke: #3fe0ff; --pf-fill: rgba(63,224,255,.18); --pf-light: #3fe0ff; --pf-light-alt: #ff5c74; --pf-thrust: #3fe0ff; --pf-glow: rgba(63,224,255,.4); }
.pf-ship-hull   { fill: #1a2940; stroke: var(--pf-stroke); stroke-width: 1.2; }
.pf-ship-glass  { fill: var(--pf-fill); stroke: var(--pf-stroke); stroke-width: 1; }
.pf-ship-fin    { fill: var(--pf-fill); }
.pf-ship-light  { fill: var(--pf-light); animation: pfBlink 1.6s ease-in-out infinite; }
.pf-ship-light.alt { fill: var(--pf-light-alt); animation-delay: .8s; }
.pf-ship-thrust { fill: var(--pf-thrust); opacity: .6; animation: pfThrust .3s ease-in-out infinite alternate; }
.pf-ship-thrust.alt { fill: #ffb86b; }
@keyframes pfBlink  { 0%,40%,100% { opacity: 1; } 50%,90% { opacity: .3; } }
@keyframes pfThrust { 0% { opacity: .4; transform: scaleX(.7); } 100% { opacity: .9; transform: scaleX(1.2); } }
.pf-ship { filter: drop-shadow(0 0 6px var(--pf-glow)); }
.pf-ship.p-cyan   { --pf-stroke: #3fe0ff; --pf-fill: rgba(63,224,255,.18);   --pf-light: #3fe0ff; --pf-light-alt: #ff5c74; --pf-thrust: #3fe0ff; --pf-glow: rgba(63,224,255,.45); }
.pf-ship.p-amber  { --pf-stroke: #ffd17f; --pf-fill: rgba(255,209,127,.15);  --pf-light: #ffd17f; --pf-light-alt: #ff7a3d; --pf-thrust: #ffb86b; --pf-glow: rgba(255,184,107,.4); }
.pf-ship.p-violet { --pf-stroke: #c79bff; --pf-fill: rgba(199,155,255,.16);  --pf-light: #e0bcff; --pf-light-alt: #ff5cc4; --pf-thrust: #c79bff; --pf-glow: rgba(180,120,255,.45); }
.pf-ship.p-lime   { --pf-stroke: #9ee85a; --pf-fill: rgba(158,232,90,.15);   --pf-light: #caff84; --pf-light-alt: #ffe066; --pf-thrust: #9ee85a; --pf-glow: rgba(158,232,90,.4); }
.pf-ship.p-rose   { --pf-stroke: #ff9bb1; --pf-fill: rgba(255,155,177,.18);  --pf-light: #ffd0db; --pf-light-alt: #ff5c8a; --pf-thrust: #ff9bb1; --pf-glow: rgba(255,123,150,.4); }
.pf-ship.p-ice    { --pf-stroke: #e4f7ff; --pf-fill: rgba(228,247,255,.22);  --pf-light: #ffffff; --pf-light-alt: #bff3ff; --pf-thrust: #e4f7ff; --pf-glow: rgba(228,247,255,.5); }
.pf-ship.p-violet .pf-ship-hull, .pf-ship.p-rose .pf-ship-hull { fill: #1d1830; }
.pf-ship.p-lime   .pf-ship-hull { fill: #10261c; }
.pf-ship.p-amber  .pf-ship-hull { fill: #241a10; }
.pf-ship.p-ice    .pf-ship-hull { fill: #172534; }
@media (prefers-reduced-motion: reduce){
  .pf-ship { animation: none !important; }
  .pf-ship-light, .pf-ship-thrust { animation: none !important; }
}

/* Toast.
   PrimeReact ships its own component CSS with pastel severity colours, and this project loads no
   PrimeReact theme to override them — so "Organization created." arrived as a pale green block on
   a panel that is nothing of the sort. Severity is carried by a left border and the icon, not by
   flooding the whole surface. */
.p-toast { opacity: 1; }
.p-toast .p-toast-message {
  background: #0f1a29; border: 1px solid rgba(63,224,255,.22);
  border-left: 4px solid var(--muted); border-radius: 12px;
  box-shadow: var(--shadow-lg); color: var(--ink); margin: 0 0 12px;
}
.p-toast .p-toast-message .p-toast-message-content { padding: 14px 16px; gap: 12px; align-items: flex-start; }
.p-toast .p-toast-message .p-toast-summary { font-size: 14px; font-weight: 700; color: var(--ink); }
.p-toast .p-toast-message .p-toast-detail { font-size: 13px; margin-top: 3px; color: var(--ink-2); line-height: 1.45; }
.p-toast .p-toast-message .p-toast-message-icon { font-size: 17px; margin-top: 1px; }
.p-toast .p-toast-icon-close { color: var(--muted); width: 26px; height: 26px; border-radius: 7px; }
.p-toast .p-toast-icon-close:hover { background: rgba(63,224,255,.12); color: var(--ink); }

.p-toast .p-toast-message-success { border-left-color: var(--green); }
.p-toast .p-toast-message-success .p-toast-message-icon { color: var(--green); }
.p-toast .p-toast-message-info { border-left-color: var(--blue, var(--brand)); }
.p-toast .p-toast-message-info .p-toast-message-icon { color: var(--blue, var(--brand)); }
.p-toast .p-toast-message-warn { border-left-color: var(--amber); }
.p-toast .p-toast-message-warn .p-toast-message-icon { color: var(--amber); }
.p-toast .p-toast-message-error { border-left-color: var(--brand); }
.p-toast .p-toast-message-error .p-toast-message-icon { color: var(--brand); }

/* PrimeReact renders <Message> (singular) as .p-inline-message, NOT .p-message — without these
   it draws as bare text with a stray glyph. */
.p-inline-message {
  display: inline-flex; align-items: flex-start; gap: 8px; width: 100%;
  border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.5;
  border: 1px solid; margin: 0;
}
.p-inline-message.p-inline-message-error   { background: #fdecee; border-color: rgba(197,56,75,.22); color: #b3253c; }
.p-inline-message.p-inline-message-info    { background: #eef4fd; border-color: #cfe0f8; color: #1b4f9c; }
.p-inline-message.p-inline-message-success { background: #e8f6ed; border-color: rgba(47,158,111,.3); color: #1f6f4c; }
.p-inline-message.p-inline-message-warn    { background: #fdf6e6; border-color: rgba(201,138,20,.3); color: #7a5a12; }
.p-inline-message .p-inline-message-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.p-inline-message .p-inline-message-text { flex: 1; }