:root{
  /* Brand accent — same gold in both themes, this is the identity colour. */
  --gold:#ff9f1c;--gold-2:#ffb84d;--gold-3:#b8863f;--on-accent:#1c1305;
  --success:#00ca72;--danger:#fb275d;
  --ease:cubic-bezier(.16,.84,.44,1);

  /* Light theme (default) — white/near-white surfaces, dark ink text. */
  --black:#f5f6fb;--deep:#ffffff;--cosmic:#e7e9fb;--nebula:#4ea1f7;--nebula-2:#8ac4ff;
  --ink:#181b34;
  --muted:rgba(24,27,52,.62);--muted2:rgba(24,27,52,.42);
  --line:rgba(24,27,52,.12);--line-soft:rgba(24,27,52,.06);
  --glass:#ffffff;--glass2:#f0f3ff;
}
[data-theme="dark"]{
  /* Dark theme override — only the surface/text tokens change; the accent,
     success and danger colours stay the same in both themes. */
  --black:#050b18;--deep:#061428;--cosmic:#0b1f42;--nebula:#4cc9f0;--nebula-2:#7fdcfb;
  --ink:#eef0f7;
  --muted:rgba(238,240,247,.62);--muted2:rgba(238,240,247,.42);
  --line:rgba(238,240,247,.12);--line-soft:rgba(238,240,247,.07);
  --glass:rgba(255,255,255,.045);--glass2:rgba(255,255,255,.07);
}
*{box-sizing:border-box}
body{margin:0;background:var(--black);color:var(--ink);font-family:'Figtree',-apple-system,Segoe UI,Arial,sans-serif;-webkit-font-smoothing:antialiased;max-width:960px;margin-left:auto;margin-right:auto;padding:40px 24px 80px;transition:background .2s var(--ease),color .2s var(--ease)}
html{overflow-x:hidden}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
.mono,code{font-family:'Space Mono',monospace}

.aurora{display:none}
[data-theme="dark"] .aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block;
  background:radial-gradient(900px 500px at 15% -10%, rgba(78,161,247,.14), transparent 55%),
             radial-gradient(700px 400px at 100% 10%, rgba(255,159,28,.10), transparent 55%);}

h1{font-family:'Figtree',sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:-.5px;margin:0 0 6px}
h2{font-family:'Figtree',sans-serif;font-weight:700;font-size:1.15rem;margin-top:2em}
h3{font-family:'Figtree',sans-serif;font-weight:600;margin:0 0 4px;font-size:1.02rem}
p.sub, p.lede { color: var(--muted); font-size: .9rem; margin-top: 0; line-height: 1.6; }

.card, .block {
  border:1px solid var(--line);border-radius:12px;background:var(--glass);
  padding:24px 26px;margin-bottom:22px;backdrop-filter:blur(10px);
  box-shadow:0 1px 3px rgba(24,27,52,.06);
}
.block-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:14px;flex-wrap:wrap}

label{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted2);margin:10px 0 6px}
input, select, textarea {
  width:100%;box-sizing:border-box;padding:11px 13px;border-radius:8px;border:1px solid var(--line);
  background:var(--deep);color:var(--ink);font-size:.87rem;outline:none;transition:.2s;font-family:inherit;
}
input:focus, select:focus, textarea:focus{border-color:var(--gold)}
input::placeholder{color:var(--muted2)}

button.action, button, .btn {
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:8px;
  font-weight:600;font-size:.85rem;border:1px solid transparent;cursor:pointer;transition:.2s;
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 60%,var(--gold-3));color:var(--on-accent);
}
button.action:hover, button:hover, .btn:hover{transform:translateY(-1px)}
button.ghost, button.secondary, .btn-ghost {
  background:var(--glass);color:var(--ink);border-color:var(--line);
}
button.warn, button.danger, .btn-danger { background:var(--danger);color:#fff; }
button:disabled{opacity:.5;cursor:not-allowed;transform:none}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:520px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{color:var(--muted2);font-size:.7rem;letter-spacing:.7px;text-transform:uppercase;font-weight:600}
tbody tr:hover{background:var(--glass2)}

.pill{padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;display:inline-block}
.role-super_admin{background:var(--ink);color:var(--deep)}
.role-admin{background:rgba(78,161,247,.18);color:var(--nebula)}
.role-manager{background:rgba(78,161,247,.12);color:var(--nebula)}
.role-tech_support{background:rgba(255,159,28,.16);color:var(--gold)}
.role-org_account{background:rgba(0,202,114,.15);color:var(--success)}
.status-on, .active-p, .paid, .approved, .status-approved { color:var(--success); font-weight:600; }
.status-off, .cancelled, .rejected, .status-rejected { color:var(--danger); font-weight:600; }
.pending, .status-pending { color: var(--gold); font-weight:600; }
.processing, .shipped { color: var(--nebula); font-weight:600; }

.msg, .err { font-size:.84rem; margin-top:10px; }
.msg.ok, .err.ok { color:var(--success); }
.msg.err, p[style*="color:#b91c1c"], .err.err { color:var(--danger) !important; }

.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
a.logout, a.back{font-size:.82rem;color:var(--muted2)}
a.logout:hover, a.back:hover{color:var(--ink)}

.stat, .stat-card{border:1px solid var(--line);border-radius:12px;background:var(--glass);padding:16px 18px;box-shadow:0 1px 3px rgba(24,27,52,.06)}
.stat .l, .sl{font-size:.72rem;letter-spacing:.7px;text-transform:uppercase;color:var(--muted2)}
.stat b{display:block;font-family:'Figtree';font-weight:700;font-size:1.3rem;margin-top:4px}
.stats-row{display:flex;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.stats-row .stat{flex:1;min-width:140px}

.role-desc{font-size:.8rem;color:var(--muted);margin:8px 0 18px;line-height:1.7;background:var(--glass2);border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px}

/* Catch-all overrides for inline light-theme styles left over in older markup —
   several pages predate the shared theme and hard-code a plain light palette
   inline. In light mode (the default) those inline colours are already close
   enough to this theme's own light palette to leave alone; in dark mode they'd
   be unreadable, so the override only kicks in there. */
[data-theme="dark"] [style*="color:#666"], [data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#555"], [data-theme="dark"] [style*="color: #555"],
[data-theme="dark"] [style*="color:#888"], [data-theme="dark"] [style*="color: #888"] { color: var(--muted) !important; }
[data-theme="dark"] [style*="color:#333"], [data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#1a1a2e"], [data-theme="dark"] [style*="color: #1a1a2e"] { color: var(--ink) !important; }
[data-theme="dark"] [style*="color:#b91c1c"], [data-theme="dark"] [style*="color: #b91c1c"] { color: var(--danger) !important; }
[data-theme="dark"] [style*="color:#166534"], [data-theme="dark"] [style*="color: #166534"] { color: var(--success) !important; }
[data-theme="dark"] [style*="background:#f7f7fb"], [data-theme="dark"] [style*="background: #f7f7fb"],
[data-theme="dark"] [style*="background:#f1f1f5"], [data-theme="dark"] [style*="background: #f1f1f5"],
[data-theme="dark"] [style*="background:#eef0ff"], [data-theme="dark"] [style*="background: #eef0ff"],
[data-theme="dark"] [style*="background:#fafafa"], [data-theme="dark"] [style*="background: #fafafa"] { background: var(--glass2) !important; color: var(--ink); }
[data-theme="dark"] [style*="border:1px solid #ccc"], [data-theme="dark"] [style*="border: 1px solid #ccc"],
[data-theme="dark"] [style*="border:1px solid #e8d67a"] { border-color: var(--line) !important; }

/* ---------- Shared shell: sidebar + topbar + sticky footer (shell.js injects the
   markup; this is its layout). Every utility/admin page that loads shell.js gets
   this consistent structure instead of a bare centered card. ---------- */
body.has-shell { max-width: none; margin: 0; padding: 0; display: flex; height: 100vh; overflow: hidden; }
.shell-sidebar {
  width: 240px; flex: none; background: var(--deep); border-right: 1px solid var(--line-soft);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.shell-sidebar::-webkit-scrollbar { display: none; }
.shell-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
.shell-brand b { font-family: 'Figtree'; font-weight:700; font-size: 1rem; }
.shell-brand-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--gold-2), var(--gold) 60%, var(--gold-3)); flex: none; }
.shell-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: var(--muted); font-size: .84rem; text-decoration: none; transition: .15s;
}
.shell-link:hover { background: var(--glass2); color: var(--ink); text-decoration: none; }
.shell-link.active { background: var(--glass2); color: var(--ink); }
.shell-link svg { width: 17px; height: 17px; flex: none; }
.shell-nav-badge {
  margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .5px; color: var(--deep);
  background: var(--gold); padding: 2px 7px; border-radius: 999px; flex: none;
}
.shell-section-label { font-size: .66rem; letter-spacing: .6px; text-transform: uppercase; color: var(--muted2); padding: 14px 12px 6px; }
.shell-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  height: 100vh; overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.shell-main::-webkit-scrollbar { display: none; }
.shell-topbar {
  position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 26px; border-bottom: 1px solid var(--line-soft); background: var(--deep); backdrop-filter: blur(10px);
}
.shell-status { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); }
.shell-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px var(--success); }
.shell-content { flex: 1; padding: 26px; max-width: 960px; }
.shell-footer {
  position: sticky; bottom: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; padding: 12px 26px; border-top: 1px solid var(--line-soft);
  background: var(--deep); backdrop-filter: blur(10px); font-size: .76rem; color: var(--muted2);
}
.shell-footer a { color: var(--muted); margin-right: 14px; }
.shell-footer a:hover { color: var(--ink); }
.shell-menu-btn { display: none; }
@media (max-width: 860px) {
  .shell-sidebar { position: fixed; left: -260px; top: 0; z-index: 200; transition: left .25s; box-shadow: 20px 0 40px rgba(0,0,0,.4); }
  .shell-sidebar.open { left: 0; }
  .shell-menu-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--glass); border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
  .shell-content { padding: 18px; }
  .shell-topbar, .shell-footer { padding: 12px 16px; }
  .shell-footer { flex-direction: column; align-items: flex-start; gap: 6px; }
  h1 { font-size: 1.25rem; }
  .card, .block { padding: 18px 16px; }
  th, td { padding: 9px 10px; font-size: .8rem; }
  .tabs { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 4px; }
  .tabs button { white-space: nowrap; }
  .stats-row .stat, .stats-row .stat-card { min-width: calc(50% - 7px); }
  input[type="text"], input[type="email"], input[type="number"], input[type="date"],
  input[type="datetime-local"], input[type="password"], select { width: 100%; margin-right: 0 !important; }
}

.secret-box{background:rgba(255,159,28,.1) !important;border:1px solid rgba(255,159,28,.35) !important;color:var(--gold) !important;border-radius:8px;padding:12px;font-family:'Space Mono',monospace;font-size:13px;word-break:break-all;margin-top:10px;display:none}

/* Date/time picker icon — force it to the brand gold instead of the default
   black/grey, and give accent-heavy form controls (checkboxes/radios) the same
   gold instead of browser blue. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(70%) sepia(60%) saturate(900%) hue-rotate(340deg) brightness(105%);
  cursor: pointer;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); }
::selection { background: rgba(255,159,28,.35); color: var(--ink); }