:root{
  --ink:#04050D; --ink2:#0A0C1C; --surface:rgba(255,255,255,.04); --border:rgba(255,255,255,.08);
  --blue:#00BFFF; --gold:#FFC200; --green:#00E87A; --red:#FF3B5C; --text1:#EEF2FF; --text2:#8B9AB8; --text3:#4A5578;
  --grad:linear-gradient(135deg,#00BFFF,#0066FF);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Space Grotesk',sans-serif;background:var(--ink);color:var(--text1);min-height:100vh}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:'Outfit',sans-serif;letter-spacing:.03em}

/* NAV */
.pnav{display:flex;align-items:center;flex-wrap:wrap;gap:16px;justify-content:space-between;padding:16px 28px;background:var(--ink2);border-bottom:1px solid var(--border)}
.pnav-brand{font-family:'Outfit',sans-serif;font-size:1.15rem;letter-spacing:.08em;color:var(--text1)}
.pnav-brand span{color:var(--text3);font-size:.7rem;letter-spacing:.15em;font-family:'Space Grotesk',sans-serif;text-transform:uppercase}
.pnav-links{display:flex;gap:4px;flex-wrap:wrap}
.pnav-links a{font-size:.78rem;font-weight:600;color:var(--text2);padding:8px 12px;border-radius:8px}
.pnav-links a:hover,.pnav-links a.on{color:var(--blue);background:rgba(0,191,255,.08)}
.pnav-user{display:flex;align-items:center;gap:12px;font-size:.75rem;color:var(--text2)}
.pnav-user em{color:var(--gold);font-style:normal}
.pnav-user a{color:var(--blue);font-weight:600}
.pnav-user a.logout{color:var(--red)}

/* LAYOUT */
.pwrap{max-width:1200px;margin:0 auto;padding:28px 20px 60px}
.pfoot{text-align:center;padding:20px;color:var(--text3);font-size:.72rem;border-top:1px solid var(--border)}

/* ALERTS */
.palert{padding:12px 16px;border-radius:10px;font-size:.85rem;margin-bottom:20px;border:1px solid}
.palert.success{background:rgba(0,232,122,.08);border-color:rgba(0,232,122,.25);color:var(--green)}
.palert.error{background:rgba(255,59,92,.08);border-color:rgba(255,59,92,.25);color:var(--red)}
.palert.info{background:rgba(0,191,255,.08);border-color:rgba(0,191,255,.25);color:var(--blue)}

/* CARDS */
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:20px}
.pcard h2{font-size:1.3rem;margin-bottom:16px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px}
.stat-box{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;text-align:center}
.stat-box .v{font-family:'Outfit',sans-serif;font-size:1.8rem}
.stat-box .l{font-size:.68rem;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;margin-top:4px}
.stat-box.blue .v{color:var(--blue)} .stat-box.gold .v{color:var(--gold)} .stat-box.green .v{color:var(--green)} .stat-box.red .v{color:var(--red)}

/* FORMS */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.frow{grid-template-columns:1fr}}
.fg{margin-bottom:14px}
.fg label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);margin-bottom:6px}
.fg input,.fg select,.fg textarea{width:100%;padding:11px 14px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:9px;color:var(--text1);font-family:inherit;font-size:.88rem;outline:none}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue)}
.fg select option{background:var(--ink2)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border:none;border-radius:9px;font-weight:800;font-size:.85rem;cursor:pointer;background:var(--grad);color:#fff}
.btn:hover{opacity:.92}
.btn.gold{background:linear-gradient(135deg,#FFC200,#FF7700)}
.btn.gray{background:rgba(255,255,255,.08);color:var(--text2)}
.btn.red{background:linear-gradient(135deg,#FF3B5C,#B0203A)}
.btn.sm{padding:6px 12px;font-size:.72rem}

/* TABLE */
.ptable{width:100%;border-collapse:collapse;font-size:.82rem}
.ptable th{text-align:left;padding:10px 12px;color:var(--text3);text-transform:uppercase;font-size:.65rem;letter-spacing:.08em;border-bottom:1px solid var(--border)}
.ptable td{padding:12px;border-bottom:1px solid var(--border);color:var(--text2)}
.ptable tr:hover td{background:rgba(255,255,255,.02)}
.badge{display:inline-block;padding:3px 10px;border-radius:100px;font-size:.68rem;font-weight:700;text-transform:uppercase}
.badge.pending{background:rgba(255,194,0,.12);color:var(--gold)}
.badge.approved{background:rgba(0,232,122,.12);color:var(--green)}
.badge.rejected{background:rgba(255,59,92,.12);color:var(--red)}
.badge.paid{background:rgba(0,191,255,.12);color:var(--blue)}
.badge.active{background:rgba(0,232,122,.12);color:var(--green)}
.badge.suspended{background:rgba(255,59,92,.12);color:var(--red)}

/* AUTH PAGES */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-box{width:100%;max-width:400px;background:var(--ink2);border:1px solid var(--border);border-radius:18px;padding:36px}
.auth-box h1{font-size:1.5rem;text-align:center;margin-bottom:6px}
.auth-sub{text-align:center;font-size:.78rem;color:var(--text3);margin-bottom:24px;text-transform:uppercase;letter-spacing:.1em}
.auth-links{text-align:center;margin-top:16px;font-size:.78rem;color:var(--text2)}
.auth-links a{color:var(--blue);font-weight:600}

/* SPLIT LOGIN LAYOUT */
.split-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
@media(max-width:900px){.split-wrap{grid-template-columns:1fr}}
.split-brand{background:radial-gradient(circle at 30% 20%,#0A1530,#04050D 70%);border-right:1px solid var(--border);padding:60px;display:flex;flex-direction:column;justify-content:center;gap:20px}
@media(max-width:900px){.split-brand{padding:40px 28px;text-align:left}}
.split-tag{font-size:1.5rem;max-width:420px;line-height:1.25;margin-top:8px}
.split-sub{font-size:.85rem;color:var(--text2);max-width:420px}
.split-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:12px;font-size:.85rem;color:var(--text2)}
.split-form{display:flex;align-items:center;justify-content:center;padding:40px 20px}


/* ════════════════════════════════════════
   PREMIUM POLISH PASS
   ════════════════════════════════════════ */
html { scroll-behavior:smooth; }
body {
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(0,191,255,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 110% 10%, rgba(255,194,0,0.06), transparent 60%),
    var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection { background:rgba(0,191,255,.28); color:#fff; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--ink2); }
::-webkit-scrollbar-thumb { background:rgba(0,191,255,.25); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,191,255,.4); }

/* NAV — glass / sticky */
.pnav {
  position:sticky; top:0; z-index:500;
  background:rgba(10,12,28,.75); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 4px 30px rgba(0,0,0,.25);
}
.pnav-links a { transition:all .25s cubic-bezier(.16,1,.3,1); position:relative; }
.pnav-links a.on { background:rgba(0,191,255,.12); box-shadow:inset 0 0 0 1px rgba(0,191,255,.25); }
.pnav-user a { transition:opacity .2s; } .pnav-user a:hover { opacity:.75; }

/* CARDS — depth + hover lift */
.pcard {
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  backdrop-filter:blur(6px);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -20px rgba(0,0,0,.5);
  transition:box-shadow .35s ease, transform .35s ease;
}
.pcard:hover { box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 28px 60px -24px rgba(0,0,0,.6); }
.pcard h2 { position:relative; padding-left:14px; }
.pcard h2::before { content:''; position:absolute; left:0; top:2px; bottom:2px; width:4px; border-radius:4px; background:var(--grad); }

.stat-box { transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.stat-box:hover { transform:translateY(-4px); box-shadow:0 16px 32px -12px rgba(0,0,0,.5); }

/* BUTTONS — lift + glow */
.btn { transition:all .3s cubic-bezier(.16,1,.3,1); box-shadow:0 6px 20px -6px rgba(0,191,255,.5); }
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px -6px rgba(0,191,255,.65); opacity:1; }
.btn:active { transform:translateY(0); }
.btn.gold { box-shadow:0 6px 20px -6px rgba(255,194,0,.5); }
.btn.gold:hover { box-shadow:0 10px 28px -6px rgba(255,194,0,.65); }
.btn.red { box-shadow:0 6px 20px -6px rgba(255,59,92,.5); }
.btn.red:hover { box-shadow:0 10px 28px -6px rgba(255,59,92,.65); }
.btn.gray { box-shadow:none; }
.btn.gray:hover { background:rgba(255,255,255,.14); transform:translateY(-2px); }

/* FORM INPUTS — smoother focus glow */
.fg input, .fg select, .fg textarea { transition:all .25s ease; }
.fg input:focus, .fg select:focus, .fg textarea:focus {
  box-shadow:0 0 0 4px rgba(0,191,255,.12); background:rgba(255,255,255,.07);
}

/* TABLE — refined */
.ptable { border-radius:12px; overflow:hidden; }
.ptable th { background:rgba(255,255,255,.03); }
.ptable tr:hover td { background:rgba(0,191,255,.04); }

/* AUTH / LOGIN — glass card with glow border */
.auth-box {
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  backdrop-filter:blur(10px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
}
.auth-box h1 { background:linear-gradient(135deg,#fff,#8fd9ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.split-brand::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(0,191,255,.35) 1px, transparent 1px);
  background-size:26px 26px; mask-image:radial-gradient(circle at 30% 30%, black, transparent 70%);
}
.split-brand { position:relative; overflow:hidden; }
.split-list li { transition:transform .25s ease; }
.split-list li:hover { transform:translateX(4px); color:var(--text1); }

/* Fade-in on load for auth pages and cards */
@keyframes premiumFadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.auth-box, .pcard { animation:premiumFadeUp .5s cubic-bezier(.16,1,.3,1) both; }

/* Badge polish */
.badge { letter-spacing:.06em; box-shadow:0 0 0 1px currentColor inset; opacity:.95; }

/* ══════════════════════════════════════════════════════════
   LIGHT THEME — readable text on light background
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --ink:#F2F4FF; --ink2:#E6EAFF; --surface:rgba(30,40,130,.05); --border:rgba(30,40,130,.12);
  --blue:#0055CC; --gold:#BB7700; --green:#007A40; --red:#CC1A3D;
  --text1:#080C2E; --text2:#3A4470; --text3:#7B84A8;
  --grad:linear-gradient(135deg,#0055CC,#003C99);
}
[data-theme="light"] body {
  background:radial-gradient(ellipse 900px 500px at 15% -10%, rgba(0,85,204,.06), transparent 60%), var(--ink);
}
[data-theme="light"] .pnav { background:rgba(255,255,255,.82); box-shadow:0 4px 24px rgba(30,40,130,.08); }
[data-theme="light"] .pnav-brand { color:var(--text1); }
[data-theme="light"] .pnav-brand span { color:var(--text3); }
[data-theme="light"] .pnav-links a { color:var(--text2); }
[data-theme="light"] .pnav-links a:hover, [data-theme="light"] .pnav-links a.on { color:var(--blue); background:rgba(0,85,204,.08); }
[data-theme="light"] .pnav-user { color:var(--text2); }
[data-theme="light"] .pcard {
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 20px 40px -24px rgba(30,40,130,.18);
  border-color:var(--border);
}
[data-theme="light"] .pcard:hover { box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 28px 60px -24px rgba(30,40,130,.22); }
[data-theme="light"] .fg input, [data-theme="light"] .fg select, [data-theme="light"] .fg textarea {
  background:#fff; border-color:var(--border); color:var(--text1);
}
[data-theme="light"] .fg input:focus, [data-theme="light"] .fg select:focus, [data-theme="light"] .fg textarea:focus {
  box-shadow:0 0 0 4px rgba(0,85,204,.1); background:#fff;
}
[data-theme="light"] .fg label { color:var(--text2); }
[data-theme="light"] .btn.gray { background:rgba(30,40,130,.08); color:var(--text2); }
[data-theme="light"] .btn.gray:hover { background:rgba(30,40,130,.14); }
[data-theme="light"] .ptable th { background:rgba(30,40,130,.04); color:var(--text3); }
[data-theme="light"] .ptable td { color:var(--text2); border-color:var(--border); }
[data-theme="light"] .ptable tr:hover td { background:rgba(0,85,204,.03); }
[data-theme="light"] .stat-box { background:#fff; border-color:var(--border); box-shadow:0 4px 16px rgba(30,40,130,.06); }
[data-theme="light"] .badge.pending { background:rgba(187,119,0,.12); color:#8A5A00; }
[data-theme="light"] .badge.approved, [data-theme="light"] .badge.active { background:rgba(0,122,64,.12); color:#00512A; }
[data-theme="light"] .badge.rejected, [data-theme="light"] .badge.suspended { background:rgba(204,26,61,.12); color:#8A0F29; }
[data-theme="light"] .badge.paid { background:rgba(0,85,204,.12); color:#003C99; }
[data-theme="light"] .auth-box {
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
  box-shadow:0 30px 80px -20px rgba(30,40,130,.18), 0 0 0 1px rgba(30,40,130,.08);
}
[data-theme="light"] .auth-box h1 { background:linear-gradient(135deg,#080C2E,#0055CC); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
[data-theme="light"] .split-brand { background:radial-gradient(circle at 30% 20%, #E6EAFF, #F2F4FF 70%); border-right:1px solid var(--border); }
[data-theme="light"] .split-brand::before { opacity:.25; }
[data-theme="light"] .split-tag, [data-theme="light"] .pnav-brand .l1 { color:var(--text1); }
[data-theme="light"] .split-sub, [data-theme="light"] .split-list li { color:var(--text2); }
[data-theme="light"] .palert.info { background:rgba(0,85,204,.08); border-color:rgba(0,85,204,.25); color:var(--blue); }
[data-theme="light"] .palert.success { background:rgba(0,122,64,.08); border-color:rgba(0,122,64,.25); color:var(--green); }
[data-theme="light"] .palert.error { background:rgba(204,26,61,.08); border-color:rgba(204,26,61,.25); color:var(--red); }
[data-theme="light"] ::-webkit-scrollbar-track { background:var(--ink2); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background:rgba(0,85,204,.25); }

/* ══════════════════════════════════════════════════════════
   THEME TOGGLE SWITCH
   ══════════════════════════════════════════════════════════ */
.theme-toggle-portal {
  position:relative; width:52px; height:28px; border-radius:20px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid var(--border); display:flex; align-items:center; padding:3px; flex-shrink:0;
}
[data-theme="light"] .theme-toggle-portal { background:rgba(30,40,130,.08); }
.theme-toggle-portal .tt-icon { font-size:.7rem; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:all .3s cubic-bezier(.16,1,.3,1); z-index:1; }
.theme-toggle-portal .tt-sun { position:absolute; left:3px; opacity:.4; }
.theme-toggle-portal .tt-moon { position:absolute; right:3px; background:var(--grad); box-shadow:0 2px 8px rgba(0,191,255,.4); opacity:1; }
[data-theme="light"] .theme-toggle-portal .tt-sun { background:var(--grad); box-shadow:0 2px 8px rgba(0,85,204,.4); opacity:1; }
[data-theme="light"] .theme-toggle-portal .tt-moon { opacity:.4; background:none; box-shadow:none; }

/* ══════════════════════════════════════════════════════════
   NOTIFICATION BELL
   ══════════════════════════════════════════════════════════ */
.pnotif-wrap { position:relative; }
.pnotif-bell { position:relative; background:none; border:none; font-size:1.1rem; cursor:pointer; color:var(--text2); padding:6px; line-height:1; }
.pnotif-badge {
  position:absolute; top:-2px; right:-2px; background:var(--red); color:#fff; font-size:.6rem; font-weight:800;
  min-width:16px; height:16px; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:0 4px;
  box-shadow:0 0 0 2px var(--ink);
}
.pnotif-drop {
  position:absolute; top:calc(100% + 12px); right:0; width:320px; max-height:400px; overflow-y:auto;
  background:var(--ink2); border:1px solid var(--border); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .25s cubic-bezier(.16,1,.3,1); z-index:1000;
}
[data-theme="light"] .pnotif-drop { background:#fff; box-shadow:0 24px 60px rgba(30,40,130,.2); }
.pnotif-drop.open { opacity:1; visibility:visible; transform:translateY(0); }
.pnotif-head { padding:14px 16px; font-weight:700; font-size:.82rem; border-bottom:1px solid var(--border); color:var(--text1); }
.pnotif-item { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); transition:background .2s; }
.pnotif-item:last-child { border-bottom:none; }
.pnotif-item:hover { background:rgba(0,191,255,.06); }
[data-theme="light"] .pnotif-item:hover { background:rgba(0,85,204,.05); }
.pnotif-item.empty { opacity:.5; }
.pnotif-icon { font-size:1rem; flex-shrink:0; }
.pnotif-label { flex:1; font-size:.78rem; color:var(--text2); }
.pnotif-count { font-size:.7rem; font-weight:800; color:var(--text3); background:rgba(255,255,255,.06); padding:2px 8px; border-radius:10px; }
.pnotif-count.has { color:#fff; background:var(--red); }
.pnotif-empty { padding:20px 16px; text-align:center; font-size:.78rem; color:var(--text3); }

/* ══════════════════════════════════════════════════════════
   PROFESSIONAL PORTAL FOOTER
   ══════════════════════════════════════════════════════════ */
.pfoot-pro {
  margin-top:40px; padding:44px clamp(20px,5vw,60px) 24px;
  background:var(--ink2); border-top:1px solid var(--border);
}
[data-theme="light"] .pfoot-pro { background:#fff; }
.pfoot-grid {
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;
  max-width:1200px; margin:0 auto 28px;
}
.pfoot-brand p { font-size:.8rem; color:var(--text2); line-height:1.7; margin-top:12px; max-width:320px; }
.pfoot-col h4 {
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text3); margin-bottom:14px;
}
.pfoot-col a {
  display:block; font-size:.82rem; color:var(--text2); margin-bottom:10px;
  transition:color .2s;
}
.pfoot-col a:hover { color:var(--blue); }
.pfoot-bottom {
  max-width:1200px; margin:0 auto; padding-top:20px; border-top:1px solid var(--border);
  text-align:center; font-size:.74rem; color:var(--text3);
}
@media(max-width:900px) {
  .pfoot-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:560px) {
  .pfoot-grid { grid-template-columns:1fr; }
}