:root{
  --bg0:#050a12;
  --bg1:#070f1c;

  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.10);

  --text:#eaf2ff;
  --muted:rgba(234,242,255,.70);

  --accent:#26b7ff;
  --accent2:#0aa3ff;

  --danger:#ff5a5a;
  --warn:#ffc640;
  --ok:#26b7ff;

  --shadow: 0 18px 45px rgba(0,0,0,.45);
  --radius:18px;

  --focus-ring: 0 0 0 4px rgba(38,183,255,.18);
}

/* Reset / base */
*{box-sizing:border-box;-webkit-tap-highlight-color: transparent;}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  text-rendering: optimizeLegibility;
  background: linear-gradient(180deg, var(--bg1), var(--bg0) 60%, #04070d);
  position: relative;
  overflow-x: hidden;
}

/* Fixed glow layer (stable, subtle, no harsh cyan patches) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(1100px 650px at 50% -10%, rgba(38,183,255,.08), transparent 60%),
    radial-gradient(900px 600px at 15% 10%, rgba(38,183,255,.04), transparent 62%);

  /* Slight blur smooths banding on mobile */
  filter: blur(2px);
  transform: translateZ(0);
  will-change: transform;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.98}

.container{max-width:1100px;margin:0 auto;padding:26px 18px 70px}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:30;
  background:rgba(0,0,0,.25);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  gap:12px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{height:34px;width:auto}
.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav a{
  padding:8px 12px;border-radius:12px;
  color:var(--muted);
  border:1px solid transparent;
  transition: transform .12s ease, filter .12s ease, background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
.nav a:hover{background:rgba(255,255,255,.05)}
.nav a.active{color:var(--text); background:rgba(255,255,255,.07); border-color:var(--stroke)}

.pill{
  padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--muted);
}

/* Cards */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{filter:brightness(1.02)}
.card-body{padding:18px}
@media (min-width: 900px){
  .card-body{padding:22px}
}

/* Hero */
.hero{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:22px;
}
.hero h1{margin:0;font-size:34px;letter-spacing:-.4px;line-height:1.08}
.hero p{margin:8px 0 0;color:var(--muted);line-height:1.6}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, filter .12s ease, background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform: translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

.btn.primary{
  background:linear-gradient(180deg, rgba(38,183,255,.95), rgba(10,163,255,.85));
  border-color: rgba(38,183,255,.35);
  color:#00111f;
  font-weight:800;
}
.btn.ghost{
  background:rgba(255,255,255,.03);
}
.btn.full{width:100%}

/* Layout grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
@media (max-width: 900px){ .grid-2,.grid-3{grid-template-columns:1fr} }

/* Stats */
.stat{padding:18px}
.stat .label{font-size:13px;color:var(--muted);font-weight:800;letter-spacing:.2px}
.stat .value{font-size:38px;font-weight:900;margin-top:6px;letter-spacing:-.6px}
.stat .hint{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45}

.section-title{margin:22px 0 10px;font-weight:900;color:var(--text);letter-spacing:-.2px}

/* Quick actions */
.quick-actions{padding:18px}
.quick-actions .row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
@media (max-width: 900px){ .quick-actions .row{grid-template-columns:1fr} }

.quick-actions-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-top:12px;
}
.quick-actions-grid .btn{
  width:100%;
  text-align:center;
  justify-content:center;
}
@media (max-width: 900px){
  .quick-actions-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 480px){
  .quick-actions-grid{grid-template-columns:1fr}
}

/* Tables */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}
.table th{font-size:12px;color:var(--muted);text-align:left;padding:0 12px}
.table td{
  padding:14px 12px;
  background:rgba(255,255,255,.05);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.table td:first-child{border-left:1px solid rgba(255,255,255,.08);border-radius:12px 0 0 12px}
.table td:last-child{border-right:1px solid rgba(255,255,255,.08);border-radius:0 12px 12px 0}

/* Badges */
.badge{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--stroke);
  font-size:12px;color:var(--muted);
}
.badge.ok{border-color:rgba(38,183,255,.25); color:rgba(38,183,255,.95); background: rgba(38,183,255,.08)}
.badge.warn{border-color:rgba(255,198,64,.25); color:rgba(255,198,64,.95); background: rgba(255,198,64,.07)}
.badge.danger{border-color:rgba(255,90,90,.25); color:rgba(255,90,90,.95); background: rgba(255,90,90,.08)}

/* Alerts (for forms, notices, etc.) */
.alert{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:var(--text);
}
.alert.ok{
  border-color:rgba(38,183,255,.25);
  background:rgba(38,183,255,.08);
  color:rgba(170,233,255,.95);
}
.alert.warn{
  border-color:rgba(255,198,64,.25);
  background:rgba(255,198,64,.08);
  color:rgba(255,235,190,.95);
}
.alert.danger{
  border-color:rgba(255,90,90,.25);
  background:rgba(255,90,90,.08);
  color:rgba(255,210,210,.95);
}

/* Footer */
.footer{
  position:fixed;left:0;right:0;bottom:0;
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.25);
  backdrop-filter: blur(14px);
  color:var(--muted);
  padding:12px 18px;
  text-align:center;
  font-size:12px;
}

/* Forms */
.form{max-width:520px;margin:40px auto;padding:22px}
.field{margin-top:12px}
.helper{color:var(--muted);font-size:13px;margin-top:10px;line-height:1.5}

.input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,.05);
  color:var(--text);
  outline:none;
  min-height:44px;
  transition: box-shadow .12s ease, border-color .12s ease, filter .12s ease;
}
.input:focus{
  border-color:rgba(38,183,255,.45);
  box-shadow:var(--focus-ring);
}
.input::placeholder{color:rgba(234,242,255,.45)}

/* Messages */
.error{margin-top:12px;color:#ff7b7b}
.success{margin-top:12px;color:#7bffb1}

/* Pill link helpers */
.pill-link { text-decoration:none; cursor:pointer; }
.pill-link:hover { opacity:0.85; }

/* Select dropdown contrast (dark UI) */
select.input {
  background-color:#0f1f2d;
  color:#e6f2ff;
  padding-right:36px;
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #8fd3ff 50%),
    linear-gradient(135deg, #8fd3ff 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat:no-repeat;
}
select.input option {
  background-color:#0f1f2d;
  color:#e6f2ff;
}
select.input option:disabled {
  color:rgba(230,242,255,0.45);
}

/* Clickable stats */
a.card.stat{display:block}
a.card.stat:hover{transform: translateY(-1px)}
.stat-link{cursor:pointer}
.stat-link:hover{transform: translateY(-1px)}
.stat-link:focus{outline: 2px solid rgba(0, 200, 255, .35); outline-offset: 2px;}

/* Focus visibility for keyboard users */
:where(a, button, input, select, textarea, .btn, .nav a):focus-visible{
  outline:none;
  box-shadow: var(--focus-ring);
  border-radius: 14px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn, .card, .nav a, .input, a.card.stat, .stat-link{transition:none}
}

/* ========= Reduce “cyan flash” / high-contrast accent spikes ========= */

/* 1) Kill mobile tap highlight (Safari/Chrome) */
a, button, .btn, input, select, textarea {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* 2) Keep focus visible, but softer */
:root{
  --focus-ring: 0 0 0 3px rgba(38,183,255,.14); /* was 4px/.18 */
}
body.admin{
  --focus-ring: 0 0 0 3px rgba(79,208,255,.16);
}

/* 3) Avoid bright cyan “fills” on active/hover states */
.btn.primary,
body.admin .btn.primary {
  /* slightly calmer gradient */
  background: linear-gradient(180deg, rgba(38,183,255,.88), rgba(10,163,255,.78));
}

/* When pressed/tapped, don’t spike brightness */
.btn:active,
.btn.primary:active,
body.admin .btn.primary:active {
  filter: brightness(1.02);
}

/* Active nav items: keep border highlight but reduce fill */
.nav a.active{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* If any of your badges use accent backgrounds, keep them subtle */
.badge.ok{
  background: rgba(38,183,255,.06); /* was .08 */
}
body.admin .nav-panel a.active{
  background: rgba(38,183,255,.10); /* was .16 */
  border-color: rgba(79,208,255,.28);
}

/* Chrome autofill dark-mode override (prevents bright flash) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(15,31,45,.95) inset !important;
  box-shadow: 0 0 0px 1000px rgba(15,31,45,.95) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Locks the background page (keep this) */
.cw-no-scroll{
  overflow:hidden;
}

/* Make the modal panel fit the viewport and allow internal scrolling */
.cw-modal-panel{
  max-height: calc(100vh - 48px);
  overflow: hidden;            /* keeps the panel tidy */
}

/* Allow scrolling inside the modal content */
.cw-modal-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 360px); /* adjusts based on media/header; tweak if needed */
}

/* On smaller screens, give the body more room */
@media (max-width: 820px){
  .cw-modal-body{
    max-height: calc(100vh - 300px);
  }
}

.cw-modal-media{
  max-height: 42vh;
}
.cw-modal-media img{
  max-height: 42vh;
  width: 100%;
  object-fit: contain;
}