:root{
  --bg:#08111f; --panel:rgba(12,22,40,.88); --panel2:rgba(17,31,54,.94);
  --text:#e9f1ff; --muted:#9eb0cf; --line:rgba(255,255,255,.08);
  --blue:#4f8cff; --blue2:#7c5cff; --shadow:0 20px 50px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Inter,Arial,sans-serif; color:var(--text);
  background:radial-gradient(circle at top left, rgba(79,140,255,.14), transparent 25%),
             radial-gradient(circle at top right, rgba(124,92,255,.12), transparent 22%),
             linear-gradient(180deg,#07111f,#08131f);
  min-height:100vh;
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.card,.hero{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px}
.hero{padding:26px;margin-bottom:18px}
.card{padding:20px;margin-bottom:18px}
h1,h2,h3{margin:0 0 12px}
.sub{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:16px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;text-decoration:none;border:none;cursor:pointer;font-weight:700}
.btn.secondary,.btn.ghost{background:rgba(255,255,255,.05);border:1px solid var(--line)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.full{grid-column:1/-1}
input,select,textarea{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text)}
label{display:block;color:var(--muted);font-size:14px}
label input,label select,label textarea{margin-top:6px}
.alert{padding:14px 16px;border-radius:16px;margin-bottom:16px;background:rgba(79,140,255,.12);border:1px solid rgba(79,140,255,.25)}
.alert.error{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.25)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left}
th{color:#b8ccff;font-size:12px;text-transform:uppercase}
.top-actions{display:flex;gap:10px;flex-wrap:wrap}
.badge{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(79,140,255,.1);border:1px solid rgba(79,140,255,.22);color:#cfe0ff}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(255,255,255,.03);padding:2px 6px;border-radius:8px}


.admin-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:-4px 0 18px}
.admin-tabs .tab{padding:10px 14px;border-radius:14px;text-decoration:none;color:var(--text);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.admin-tabs .tab.active{background:linear-gradient(135deg,var(--blue),var(--blue2));border-color:transparent}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat{padding:18px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.stat .k{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.stat .v{font-size:28px;font-weight:800}
.inline-actions{display:flex;gap:8px;flex-wrap:wrap}
.small-btn{padding:8px 10px;border-radius:10px;font-size:12px}
pre.codeblock{white-space:pre-wrap;background:rgba(255,255,255,.03);border:1px solid var(--line);padding:14px;border-radius:14px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}


.live-history-card{margin-top:14px}


.install-banner{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  margin-bottom:18px; padding:14px 16px; border-radius:18px;
  background:rgba(79,140,255,.10); border:1px solid rgba(79,140,255,.22);
}


:root{
  --bg:#060b16;
  --bg-2:#0a1222;
  --panel:rgba(10,18,34,.78);
  --panel-2:rgba(17,28,49,.9);
  --panel-3:rgba(255,255,255,.03);
  --text:#edf4ff;
  --muted:#9fb0cf;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(79,140,255,.22);
  --blue:#4f8cff;
  --blue2:#7c5cff;
  --green:#22c55e;
  --red:#ef4444;
  --shadow:0 24px 70px rgba(0,0,0,.42);
  --radius-xl:30px;
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;
}
html[data-theme="light"]{
  --bg:#eef3fb;
  --bg-2:#f7f9fd;
  --panel:rgba(255,255,255,.88);
  --panel-2:rgba(255,255,255,.96);
  --panel-3:rgba(10,18,34,.03);
  --text:#0f172a;
  --muted:#5b6b86;
  --line:rgba(15,23,42,.08);
  --line-2:rgba(79,140,255,.28);
  --shadow:0 18px 40px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
body{
  transition:background .25s ease,color .25s ease;
}
.card,.hero,.stat-card,.modal-card,.live-panel,.table-wrap,.summary-item,.live-upcoming-item{
  transition:transform .18s ease, box-shadow .18s ease, background .25s ease, border-color .25s ease;
}
.card:hover,.stat-card:hover{
  transform:translateY(-2px);
}
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:180px;
  text-align:center;
  border:1px dashed var(--line);
  border-radius:22px;
  background:var(--panel-3);
  color:var(--muted);
  padding:20px;
}
.empty-state strong{color:var(--text);font-size:18px}
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.dashboard-grid-2{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:16px;
}
.glow-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:rgba(79,140,255,.10);
  color:var(--text);
}
.soft-separator{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
  margin:16px 0;
}
.kpi-note{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}
.fade-in{
  animation:fadeInUp .35s ease both;
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}


/* Professional final UI overrides */
:root{
  --bg:#07111f;
  --bg-soft:#0c1729;
  --panel:rgba(10,18,34,.82);
  --panel2:rgba(14,24,42,.96);
  --panel3:rgba(255,255,255,.04);
  --text:#eef4ff;
  --muted:#9fb1d2;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(99,142,255,.28);
  --blue:#4f8cff;
  --blue2:#7c5cff;
  --green:#22c55e;
  --red:#ef4444;
  --shadow:0 24px 70px rgba(0,0,0,.42);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:18px;
  --radius-sm:14px;
}
html[data-theme="light"]{
  --bg:#eef3fb;
  --bg-soft:#f6f8fd;
  --panel:rgba(255,255,255,.86);
  --panel2:rgba(255,255,255,.98);
  --panel3:rgba(15,23,42,.03);
  --text:#0f172a;
  --muted:#5b6b86;
  --line:rgba(15,23,42,.08);
  --line-strong:rgba(79,140,255,.26);
  --shadow:0 16px 42px rgba(15,23,42,.10);
}
body{
  background:
    radial-gradient(circle at top left, rgba(79,140,255,.16), transparent 25%),
    radial-gradient(circle at top right, rgba(124,92,255,.14), transparent 22%),
    linear-gradient(180deg,var(--bg),#08131f);
  color:var(--text);
}
.page-shell{position:relative;min-height:100vh}
.bg-orb{position:fixed;border-radius:999px;filter:blur(55px);pointer-events:none;opacity:.8;z-index:0}
.bg-orb.orb1{width:260px;height:260px;background:rgba(79,140,255,.18);top:-40px;left:-50px}
.bg-orb.orb2{width:240px;height:240px;background:rgba(124,92,255,.15);top:40px;right:-60px}
.container{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:26px}
.card,.hero,.live-panel,.stat-card,.day-card,.modal-card-custom{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:var(--radius-xl);
}
.hero{padding:28px;margin-bottom:18px}
.hero-home{padding:34px}
.hero-sub{max-width:760px}
.hero-actions,.top-actions,.row-between{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row-between{justify-content:space-between}
.card{padding:22px;margin-bottom:18px}
.badge,.mini-pill,.muted-chip,.status-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--line-strong);
  background:rgba(79,140,255,.10);
  color:var(--text);
  font-size:13px;font-weight:600;
}
.muted-chip{background:rgba(255,255,255,.05);border-color:var(--line)}
.work-pill{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.22)}
.rest-pill{background:rgba(255,255,255,.05);border-color:var(--line)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:16px;border:none;cursor:pointer;
  text-decoration:none;color:#fff;font-weight:700;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  box-shadow:0 12px 30px rgba(79,140,255,.22);
}
.btn:hover{transform:translateY(-1px)}
.btn.secondary,.btn.ghost{
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  color:var(--text);
  box-shadow:none;
}
.small-btn{padding:10px 14px;border-radius:14px}
.sub{color:var(--muted)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.stat-card{padding:18px;border-radius:20px}
.stat-card span,.stat-card small{display:block}
.stat-card span{color:var(--muted);margin-bottom:8px}
.stat-card strong{font-size:26px;line-height:1.1}
.days-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.day-card{padding:18px;border-radius:22px}
.day-card-top,.day-card-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.day-card h3{margin:14px 0 10px}
.day-card.rest{opacity:.88}
.feature-list{margin:0;padding-left:18px;display:grid;gap:10px}
.timeline-list{display:grid;gap:12px}
.timeline-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.timeline-item:last-child{border-bottom:0}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.02)}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left}
th{color:#b8ccff;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;min-height:180px;text-align:center;padding:24px;border-radius:20px;
  background:var(--panel3);border:1px dashed var(--line)
}
.empty-state strong{font-size:20px}
.fade-in{animation:fadeInUp .35s ease both}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.live-shell{margin-top:8px}
.live-main{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
.live-side{display:grid;gap:18px}
.live-panel{padding:22px;border-radius:24px}
.live-panel-focus{min-height:420px;display:flex;flex-direction:column;justify-content:flex-start}
.status-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.timer-big{font-size:84px;font-weight:800;line-height:1;margin:18px 0 10px}
.phase-note{color:var(--muted);font-size:14px}
.live-actions-inline{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.media-box{
  min-height:240px;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;margin-top:12px
}
.media-box img,.media-box video,.media-box iframe{width:100%;max-height:360px;object-fit:contain;border:0}
.history-list{display:grid;gap:10px}
.history-item{background:rgba(255,255,255,.05);border-radius:14px;padding:12px;font-size:14px}
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px
}
.modal-backdrop.show{display:flex}
.modal-card-custom{width:100%;max-width:560px;padding:24px;border-radius:22px}
.single-col{display:grid;grid-template-columns:1fr;gap:12px}
input,select,textarea{
  width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--text)
}
.debug-bar{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:9998;padding:12px 14px;
  border-radius:16px;background:rgba(5,11,20,.95);color:#dbeafe;border:1px solid rgba(79,140,255,.28);
  font-size:13px;line-height:1.4;box-shadow:0 14px 30px rgba(0,0,0,.35)
}
@media (max-width: 980px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .days-grid{grid-template-columns:repeat(2,1fr)}
  .live-main{grid-template-columns:1fr}
}
@media (max-width: 680px){
  .container{padding:18px}
  .hero,.card,.live-panel{padding:18px}
  .stats-grid,.days-grid{grid-template-columns:1fr}
  .timer-big{font-size:62px}
  .btn{width:100%}
  .hero-actions .btn,.top-actions .btn{width:auto}
}


/* Admin tidy pack */
.admin-shell{display:grid;gap:18px}
.admin-headline{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.admin-panel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.admin-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.admin-note{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted)}
.inline-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn.small-btn{padding:9px 12px;border-radius:12px;font-size:13px}
.btn.danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none}
.hero .hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.eyebrow{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(79,140,255,.10);border:1px solid rgba(79,140,255,.22);color:#cfe0ff;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.stat .v{font-size:28px;font-weight:800;display:block}
.stat .k{display:block;color:var(--muted);margin-bottom:6px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width: 900px){
  .admin-panel-grid,.grid-2{grid-template-columns:1fr}
}