:root{
  --bg:#0b0f14;
  --bg-accent:#101a28;
  --panel:#151d2a;
  --panel-soft:#1b2636;
  --text:#eef4ff;
  --muted:#a7b3c8;
  --primary:#4f8cff;
  --primary-strong:#2f6de0;
  --danger:#ef4444;
  --border:#2a3b56;
  --ring:rgba(79,140,255,.35);
}

*{box-sizing:border-box}

html, body{
  min-height:100%;
}

body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  min-height:100vh;
  background-color:var(--bg);
  background:
    radial-gradient(1100px 480px at 10% -15%, rgba(79,140,255,.16), transparent 60%),
    radial-gradient(800px 380px at 90% -25%, rgba(57,214,180,.1), transparent 60%),
    linear-gradient(180deg, var(--bg-accent) 0%, var(--bg) 50%, #090d12 100%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.topbar{
  position:sticky;
  top:0;
  background:rgba(9,13,20,.84);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
  padding:14px 18px;
  z-index:20;
}

.topbar h1{
  margin:0;
  font-size:19px;
  letter-spacing:.2px;
}

.tabs{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
}

.tab{
  background:#23344f;
  border:1px solid #35517a;
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:12px;
  font-weight:500;
  transition:background .16s ease, transform .14s ease, border-color .16s ease, box-shadow .16s ease;
}

.tab:hover{
  background:#2a3d5d;
  border-color:#486b9d;
  transform:translateY(-1px);
}

.tab.active{
  background:linear-gradient(180deg, #5c99ff 0%, var(--primary-strong) 100%);
  border-color:transparent;
  box-shadow:0 0 0 3px rgba(79,140,255,.22);
}

.tab:focus-visible,
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ring);
}

.container{
  padding:18px;
  max-width:1200px;
  margin:0 auto;
  min-height:calc(100vh - 112px);
  padding-bottom:28px;
}

.dashboard{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

.dash-card{
  background:linear-gradient(180deg, rgba(26,37,55,.92) 0%, rgba(19,28,42,.95) 100%);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 12px;
  box-shadow:0 10px 24px rgba(2,7,16,.28);
}

.dash-card h2{
  margin:0 0 8px;
  font-size:12px;
  color:var(--muted);
  font-weight:500;
}

.dash-card p{
  margin:0;
  font-size:13px;
}

.section{display:none}
.section.active{display:block}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.section-tools{
  display:flex;
  gap:8px;
  align-items:center;
}

.table-search{
  width:280px;
  max-width:48vw;
  background:#111a28;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  color:var(--text);
}

.table-search::placeholder{ color:#8ea0bd; }

.table-search:focus{
  outline:none;
  border-color:#5f9bff;
  box-shadow:0 0 0 3px var(--ring);
}

.section h2{
  margin:0;
  font-size:17px;
  font-weight:700;
}

.table-wrap{
  background:linear-gradient(180deg, rgba(26,37,55,.92) 0%, rgba(19,28,42,.95) 100%);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:auto;
  box-shadow:0 16px 38px rgba(2,7,16,.35);
}

.grid{
  width:100%;
  border-collapse:collapse;
}

.grid th,
.grid td{
  border-bottom:1px solid rgba(93,127,178,.35);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
}

.grid thead th{
  position:sticky;
  top:0;
  background:#1a2638;
  font-weight:700;
  z-index:5;
}

.grid tbody tr:hover{
  background:rgba(55,82,121,.2);
}

.btn{
  background:#2c456b;
  border:1px solid #4f79b2;
  color:#f7fbff;
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  transition:transform .14s ease, background .16s ease, border-color .16s ease;
}

.btn:hover{
  background:#355381;
  border-color:#6b95d3;
  transform:translateY(-1px);
}

.btn.primary{
  background:linear-gradient(180deg, #5c99ff 0%, var(--primary-strong) 100%);
  border-color:transparent;
  color:#fff;
}

.btn.danger{
  background:var(--danger);
  border-color:transparent;
  color:#fff;
}

.btn.sm{
  padding:6px 10px;
  font-size:12px;
  font-weight:500;
}
.row-actions .btn.sm:not(.danger){
  background:#36588b;
  border-color:#5f89c8;
}
.row-actions{display:flex;gap:6px}

.modal{
  position:fixed;
  inset:0;
  background:rgba(3,7,12,.7);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:50;
}

.modal.show{display:flex}

.modal-card{
  width:min(720px,92vw);
  background:linear-gradient(180deg, rgba(26,37,55,.98) 0%, rgba(19,28,42,.99) 100%);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(2,7,16,.55);
}

.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid rgba(93,127,178,.35);
}

.modal-head h3{margin:0;font-size:16px}

.icon-btn{
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:18px;
  cursor:pointer;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:16px;
}

.form-grid .field{display:flex;flex-direction:column;gap:6px}

.field label{font-size:12px;color:var(--muted)}

.field input,
.field textarea,
.field select{
  background:#111a28;
  border:1px solid var(--border);
  border-radius:10px;
  padding:9px 10px;
  color:var(--text);
}

.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color:#5f9bff;
  box-shadow:0 0 0 3px var(--ring);
}

.field textarea{min-height:90px;resize:vertical}
.field select[multiple]{min-height:150px}

.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:14px 16px;
  border-top:1px solid rgba(93,127,178,.35);
}

.tabs .right-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.toast-region{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}

.toast{
  min-width:260px;
  max-width:min(420px, calc(100vw - 28px));
  background:#162338;
  color:#f7fbff;
  border:1px solid #38537d;
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 14px 30px rgba(2,7,16,.45);
  font-size:13px;
}

.toast.success{ border-color:#2f8b67; background:#143428; }
.toast.error{ border-color:#ad4a59; background:#3a1c24; }
.toast.info{ border-color:#49699b; background:#1a2940; }

@media (max-width:980px){
  .tabs{flex-wrap:wrap}

  .tabs .right-actions{
    margin-left:0;
    width:100%;
    justify-content:flex-end;
  }

  .dashboard{
    grid-template-columns:1fr;
  }

  .table-search{
    width:220px;
  }
}

@media (max-width:720px){
  .form-grid{grid-template-columns:1fr}
}

@media (max-width:680px){
  .topbar{padding:12px}
  .topbar h1{font-size:17px}
  .container{padding:12px}

  .section-head{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .section-tools{
    flex-direction:column;
    align-items:stretch;
  }

  .table-search{
    width:100%;
    max-width:none;
  }

  .tabs .right-actions{
    flex-wrap:wrap;
    justify-content:stretch;
  }

  .tabs .right-actions > *{
    flex:1 1 100%;
  }

  .grid th,
  .grid td{
    padding:8px 10px;
    font-size:12px;
  }

  .toast-region{
    left:12px;
    right:12px;
    bottom:12px;
  }
}

/* ==========================================================================
   Timeline page redesign (scoped)
   ========================================================================== */
.timeline-page,
.admin-page,
.admin-login-page,
.notfound-page{
  --comic-ink:#161925;
  --comic-muted:#3c4b66;
  --comic-paper:#f9efc9;
  --comic-paper-2:#f5e4b1;
  --comic-panel:rgba(255,255,255,.88);
  --comic-stroke:#1d2536;
  --comic-shadow:0 18px 0 rgba(22,27,41,.16), 0 24px 46px rgba(26,35,49,.2);
  --comic-red:#c5161d;
  --comic-blue:#2f58e8;
  --comic-yellow:#ffd12f;
  --comic-green:#0fa75f;
  font-family:"Bricolage Grotesque","Trebuchet MS",sans-serif;
}

.timeline-page{
  --tl-ink:var(--comic-ink);
  --tl-muted:var(--comic-muted);
  --tl-paper:var(--comic-paper);
  --tl-paper-2:var(--comic-paper-2);
  --tl-panel:var(--comic-panel);
  --tl-stroke:var(--comic-stroke);
  --tl-shadow:var(--comic-shadow);
  --tl-pop-red:var(--comic-red);
  --tl-pop-blue:var(--comic-blue);
  --tl-pop-yellow:var(--comic-yellow);
  --tl-pop-green:var(--comic-green);
  margin:0;
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color:var(--tl-ink);
  font-family:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  font-size:14px;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,87,34,.26), transparent 35%),
    radial-gradient(circle at 82% 10%, rgba(255,209,47,.28), transparent 38%),
    radial-gradient(circle at 50% 82%, rgba(47,88,232,.24), transparent 43%),
    repeating-linear-gradient(120deg, rgba(20,24,34,.035) 0 2px, transparent 2px 12px),
    linear-gradient(145deg, var(--tl-paper), var(--tl-paper-2));
  background-attachment:fixed;
}

.timeline-page::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.26;
  background-image:radial-gradient(rgba(20,21,26,.28) 0.8px, transparent 0.8px);
  background-size:4px 4px;
  mix-blend-mode:soft-light;
}

.timeline-page::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.08;
  background:
    radial-gradient(circle at 10% 85%, #ca1f25 0 7%, transparent 8%),
    radial-gradient(circle at 90% 18%, #2f58e8 0 6%, transparent 7%),
    radial-gradient(circle at 74% 76%, #0fa75f 0 5%, transparent 6%);
}

.timeline-page .btn{
  border-radius:10px;
  border:2px solid #161c2b;
  font-weight:700;
  text-decoration:none;
  color:#ffffff;
  box-shadow:2px 2px 0 rgba(17,22,33,.3);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.timeline-page .btn.primary{
  background:linear-gradient(145deg, #ff4a3f 0%, #d61d24 62%, #98161f 100%);
  color:#fff;
  border-color:transparent;
}

.timeline-page .btn.primary:hover{
  filter:brightness(1.06);
  transform:translate(-1px, -1px);
  box-shadow:3px 3px 0 rgba(17,22,33,.36);
}

.timeline-page .btn.ghost{
  background:linear-gradient(180deg, #ebf1ff 0%, #dce7ff 100%);
  border:2px solid #1b2f6b;
  color:#1a2e63;
  box-shadow:2px 2px 0 rgba(17,22,33,.24);
}

.timeline-page .btn.ghost:hover{
  background:#fff;
  border-color:rgba(26,37,52,.28);
}

.timeline-page .btn.ghost.is-active{
  background:linear-gradient(130deg, #25364f 0%, #304a69 100%);
  color:#f5f8ff;
  border-color:transparent;
}

.timeline-page .container{
  width:100vw;
  max-width:none;
  margin:0;
  flex:1 1 auto;
  min-height:0;
  padding:4px 10px 8px;
  display:flex;
}

.timeline-page .card{
  border-radius:20px;
  border:2px solid var(--tl-stroke);
  background:var(--tl-panel);
  box-shadow:var(--tl-shadow);
}

.timeline-page .legend{
  margin:0 4px 8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  align-items:center;
  animation:none;
}

.timeline-page .legend > span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  border-radius:9px;
  border:2px solid #232b3f;
  background:linear-gradient(180deg, #fffef7 0%, #f1e6c0 100%);
  font-size:.83rem;
  color:#1f2b43;
  box-shadow:2px 2px 0 rgba(20,25,37,.2);
}

.timeline-page .timeline-overview-wrap{
  margin:8px 4px 0;
}

.timeline-page .timeline-overview{
  --overview-density:linear-gradient(90deg, rgba(44,71,114,.16), rgba(44,71,114,.28));
  position:relative;
  height:28px;
  border-radius:10px;
  border:2px solid #232b3f;
  background:
    var(--overview-density),
    linear-gradient(180deg, #fffef7 0%, #f1e6c0 100%);
  box-shadow:2px 2px 0 rgba(20,25,37,.18);
  overflow:hidden;
  cursor:pointer;
  user-select:none;
  touch-action:none;
}

.timeline-page .timeline-overview::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(24,34,52,.26) 0 1px,
      transparent 1px 36px
    );
}

.timeline-page .timeline-overview-window{
  position:absolute;
  top:2px;
  bottom:2px;
  left:0;
  width:18%;
  border-radius:7px;
  background:linear-gradient(130deg, rgba(255,74,63,.24) 0%, rgba(214,29,36,.34) 100%);
  border:2px solid rgba(181,24,32,.78);
  box-shadow:0 0 0 2px rgba(255,255,255,.45) inset;
  cursor:grab;
}

.timeline-page .timeline-overview-window.is-dragging{
  cursor:grabbing;
}

.version-modal[hidden]{
  display:none !important;
}

.version-modal{
  position:fixed;
  inset:0;
  z-index:1300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.version-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(16,20,31,.42);
  backdrop-filter:blur(2px);
}

.version-modal-card{
  position:relative;
  width:min(520px, 94vw);
  border-radius:16px;
  border:3px solid #1d2536;
  background:linear-gradient(180deg, #fffef7 0%, #f1e6c0 100%);
  box-shadow:0 20px 40px rgba(20,25,37,.28);
  z-index:1;
  padding:12px;
}

.version-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:4px 2px 8px;
  border-bottom:2px solid rgba(29,37,54,.2);
}

.version-modal-head h3{
  margin:0;
  font-family:"Chakra Petch","Bricolage Grotesque",sans-serif;
  font-size:1.05rem;
  color:#131a2c;
}

.version-modal-close{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:2px solid #1b2f6b;
  background:linear-gradient(180deg, #ebf1ff 0%, #dce7ff 100%);
  color:#1a2e63;
  font-weight:700;
  cursor:pointer;
}

.version-modal-body{
  padding:10px 2px 2px;
  color:#23324c;
}

.version-modal-body p{
  margin:0 0 8px;
}

.timeline-page .legend-box{
  width:15px;
  height:15px;
  flex:0 0 15px;
  border-radius:4px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 0 0 1px rgba(0,0,0,.12);
}

.timeline-page .timeline-frame{
  margin-top:0;
  width:100%;
  height:100%;
  min-height:0;
  padding:10px;
  animation:timeline-rise .55s ease .2s both;
  position:relative;
  overflow:hidden;
  border:4px solid #1c2334;
  box-shadow:0 0 0 2px rgba(255,255,255,.55) inset, 6px 6px 0 rgba(22,27,41,.2), 0 20px 36px rgba(26,35,49,.16);
  display:flex;
  flex-direction:column;
}

.timeline-page .timeline-frame::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.2;
  background:
    radial-gradient(circle at 18% 20%, rgba(245,95,43,.22), transparent 35%),
    radial-gradient(circle at 86% 0%, rgba(73,120,201,.18), transparent 38%),
    radial-gradient(rgba(20,21,26,.16) 0.75px, transparent 0.75px),
    repeating-linear-gradient(-24deg, rgba(18,22,34,.04) 0 1px, transparent 1px 14px);
  background-size:auto, auto, 4px 4px, auto;
}

.timeline-page .timeline-frame-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px 12px;
  padding:4px 4px 8px;
}

.timeline-page .timeline-tools{
  margin-left:auto;
  display:flex;
  gap:8px;
  align-items:center;
}

.timeline-page .timeline-frame-head h2{
  margin:0;
  font-family:"Bangers","Chakra Petch","Bricolage Grotesque",sans-serif;
  text-transform:uppercase;
  font-size:1.1rem;
  letter-spacing:.07em;
  color:#121a2d;
  text-shadow:1px 1px 0 rgba(255,255,255,.8);
}

.timeline-page .timeline-frame-head p{
  margin:0;
  color:#5b667f;
  font-size:.88rem;
}

.timeline-page #timeline{
  margin-top:0;
  flex:1 1 auto;
  min-height:0;
  height:auto;
  border-radius:14px;
  overflow:hidden;
  border:2px solid rgba(26,37,52,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(246,234,198,.68) 100%);
}

.timeline-page .echarts-tooltip{
  background:#1c2638 !important;
  color:#fbfdff !important;
  border:1px solid rgba(255,255,255,.2) !important;
  border-radius:11px !important;
  box-shadow:0 12px 30px rgba(14,19,31,.36) !important;
}

.timeline-page .darkred{ background-color:#b10f18 !important; }
.timeline-page .blue{ background-color:#2d5dff !important; }
.timeline-page .green{ background-color:#0cae5f !important; }
.timeline-page .purple{ background-color:#7a33dd !important; }
.timeline-page .orange{ background-color:#ef9210 !important; }

@keyframes timeline-rise{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (max-width:960px){
  .timeline-page .timeline-tools{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }
}

@media (max-width:680px){
  .timeline-page .container{
    width:100vw;
    padding:6px;
  }

  .timeline-page .timeline-frame{
    padding:8px;
  }

  .timeline-page .timeline-tools .btn{
    flex:1 1 100%;
  }
}

@media (prefers-reduced-motion:reduce){
  .timeline-page .topbar,
  .timeline-page .legend,
  .timeline-page .timeline-frame{
    animation:none;
  }
}

/* ==========================================================================
   Admin/Login/404 redesign (scoped)
   ========================================================================== */
.admin-page,
.admin-login-page,
.notfound-page{
  --ui-ink:var(--comic-ink);
  --ui-muted:#4f5e79;
  --ui-card:rgba(255,255,255,.9);
  --ui-stroke:rgba(29,37,54,.18);
  --ui-ring:rgba(235,107,31,.22);
  margin:0;
  color:var(--ui-ink);
  background:
    radial-gradient(circle at 16% 14%, rgba(197,22,29,.18), transparent 36%),
    radial-gradient(circle at 82% 10%, rgba(255,209,47,.22), transparent 38%),
    radial-gradient(circle at 50% 82%, rgba(47,88,232,.19), transparent 42%),
    repeating-linear-gradient(120deg, rgba(20,24,34,.035) 0 2px, transparent 2px 12px),
    linear-gradient(145deg, var(--comic-paper), var(--comic-paper-2));
  background-attachment:fixed;
}

.admin-page::before,
.admin-login-page::before,
.notfound-page::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:radial-gradient(rgba(20,21,26,.24) 0.7px, transparent 0.7px);
  background-size:3px 3px;
  mix-blend-mode:soft-light;
}

.admin-page .dash-card,
.admin-page .table-wrap,
.admin-login-page .auth-card,
.notfound-page .card{
  background:var(--ui-card);
  border:2px solid var(--comic-stroke);
  box-shadow:var(--comic-shadow);
}

.admin-login-page .timeline-kicker,
.notfound-page .timeline-kicker{
  margin:0 0 8px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 11px;
  border-radius:10px;
  border:2px solid #101624;
  transform:skew(-9deg);
  font-family:"Chakra Petch","Verdana",sans-serif;
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:linear-gradient(180deg, var(--comic-yellow) 0%, #f6ba00 100%);
  color:#141925;
  box-shadow:3px 3px 0 rgba(18,22,34,.26);
}

.admin-page .timeline-kicker{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 11px;
  border-radius:10px;
  border:2px solid #101624;
  transform:skew(-9deg);
  font-family:"Chakra Petch","Verdana",sans-serif;
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:linear-gradient(180deg, var(--comic-yellow) 0%, #f6ba00 100%);
  color:#141925;
  box-shadow:3px 3px 0 rgba(18,22,34,.26);
}

.admin-page .topbar h1{
  margin:0;
  font-family:"Chakra Petch","Bricolage Grotesque",sans-serif;
  font-size:clamp(1.3rem, 2.7vw, 1.95rem);
  line-height:1.05;
  letter-spacing:-.01em;
  color:#111726;
  text-shadow:1px 1px 0 rgba(255,255,255,.75);
}

.admin-page .tabs{
  margin:0 0 12px;
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px;
  border-radius:14px;
  border:2px solid #1d2536;
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 0 rgba(22,27,41,.12), 0 16px 30px rgba(26,35,49,.12);
}

.admin-page .tab,
.admin-page .btn{
  border-radius:11px;
}

.admin-page .tab{
  background:linear-gradient(180deg, #fffef7 0%, #f1e6c0 100%);
  border:2px solid #232b3f;
  color:#1f2b43;
  font-weight:700;
  box-shadow:2px 2px 0 rgba(20,25,37,.16);
}

.admin-page .tab:hover{
  filter:brightness(1.02);
}

.admin-page .tab.active{
  background:linear-gradient(145deg, #ff4a3f 0%, #d61d24 62%, #98161f 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:2px 2px 0 rgba(17,22,33,.3);
}

.admin-page .container{
  max-width:1240px;
  padding:14px;
  min-height:calc(100vh - 122px);
}

.admin-page .dash-card,
.admin-page .table-wrap{
  border-color:var(--ui-stroke);
}

.admin-page .dash-card h2{
  color:var(--ui-muted);
}

.admin-page .section h2{
  color:#29344a;
}

.admin-page .table-search,
.admin-page .field input,
.admin-page .field textarea,
.admin-page .field select{
  background:#fff;
  border:1px solid rgba(26,37,52,.22);
  color:#1f293a;
}

.admin-page .table-search::placeholder{
  color:#76839a;
}

.admin-page .table-search:focus,
.admin-page .field input:focus,
.admin-page .field textarea:focus,
.admin-page .field select:focus{
  border-color:rgba(213,70,36,.54);
  box-shadow:0 0 0 3px var(--ui-ring);
  outline:none;
}

.admin-page .grid th{
  background:#efe7da;
  color:#2c3a51;
  border-bottom:1px solid rgba(26,37,52,.2);
}

.admin-page .grid th,
.admin-page .grid td{
  border-bottom:1px solid rgba(87,103,130,.22);
}

.admin-page .grid tbody tr:hover{
  background:rgba(247,225,207,.45);
}

.admin-page .btn{
  background:#ffffff;
  border:1px solid rgba(26,37,52,.18);
  color:#22314a;
  font-weight:700;
}

.admin-page .btn:hover{
  background:#fff9f2;
  border-color:rgba(26,37,52,.3);
}

.admin-page .row-actions .btn.sm:not(.danger){
  background:#fff3e4;
  border-color:rgba(26,37,52,.24);
  color:#24344e;
}

.admin-page .row-actions .btn.sm:not(.danger):hover{
  background:#ffe2c2;
  border-color:rgba(26,37,52,.34);
}

.admin-page .btn.primary,
.admin-login-page .btn.primary,
.notfound-page .btn.primary{
  background:linear-gradient(130deg, #eb6b1f 0%, #d54624 55%, #ba2f2f 100%);
  color:#fff;
  border-color:transparent;
}

.admin-page .btn.primary:hover,
.admin-login-page .btn.primary:hover,
.notfound-page .btn.primary:hover{
  background:linear-gradient(130deg, #ef7a33 0%, #de522b 55%, #c63c3c 100%);
}

.admin-page .topbar .btn{
  border-radius:10px;
  border:2px solid #161c2b;
  font-weight:700;
  text-decoration:none;
  box-shadow:2px 2px 0 rgba(17,22,33,.3);
}

.admin-page .topbar .btn:not(.primary){
  background:linear-gradient(180deg, #ebf1ff 0%, #dce7ff 100%);
  border:2px solid #1b2f6b;
  color:#1a2e63;
}

.admin-page .topbar .btn:not(.primary):hover{
  background:#fff;
}

.admin-page .topbar .btn.primary{
  background:linear-gradient(145deg, #ff4a3f 0%, #d61d24 62%, #98161f 100%);
  color:#fff;
  border-color:transparent;
}

.admin-page .topbar .btn.primary:hover{
  filter:brightness(1.06);
}

.admin-page .modal{
  background:rgba(21,28,40,.36);
}

.admin-page .modal-card{
  background:#fffdf9;
  border:1px solid rgba(26,37,52,.2);
  box-shadow:0 20px 44px rgba(26,35,49,.2);
}

.admin-page .modal-head,
.admin-page .modal-actions{
  border-color:rgba(26,37,52,.16);
}

.admin-page .field label{
  color:#53617a;
}

.admin-page .toast{
  background:#fffdfa;
  color:#29344a;
  border:1px solid rgba(26,37,52,.22);
  box-shadow:0 10px 22px rgba(26,35,49,.2);
}

.admin-page .toast.success{ border-color:#2f8b67; background:#edf8f2; }
.admin-page .toast.error{ border-color:#ad4a59; background:#fbecef; }
.admin-page .toast.info{ border-color:#49699b; background:#eef4fb; }

.admin-page .tab:focus-visible,
.admin-page .btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ui-ring);
}

.admin-login-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  padding:0;
}

.admin-login-page .auth-card{
  width:min(420px, 94vw);
  border-radius:18px;
  padding:22px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:26px auto 16px;
  align-self:center;
}

.admin-login-page .timeline-kicker{
  margin:0;
}

.admin-login-page h1{
  margin:0 0 4px 0;
  font-size:1.7rem;
  line-height:1.1;
}

.admin-login-page .field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.admin-login-page .field label{
  font-size:12px;
  color:#55627a;
}

.admin-login-page .field input{
  background:#fff;
  border:1px solid rgba(26,37,52,.24);
  border-radius:11px;
  padding:10px 11px;
  color:#1f293a;
}

.admin-login-page .field input:focus{
  border-color:rgba(213,70,36,.54);
  box-shadow:0 0 0 3px var(--ui-ring);
  outline:none;
}

.admin-login-page .auth-card .btn{
  width:100%;
  justify-content:center;
  margin-top:2px;
  background:#fff;
  border:1px solid rgba(26,37,52,.18);
  color:#22314a;
}

.admin-login-page .auth-card .btn:hover{
  background:#fff9f2;
  border-color:rgba(26,37,52,.3);
}

.admin-login-page .err{
  margin:0;
  min-height:18px;
  font-size:13px;
  color:#a53849;
}

.notfound-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  padding:0;
}

.notfound-page .card{
  width:min(620px, 94vw);
  border-radius:20px;
  padding:22px;
  margin:28px auto 16px;
  align-self:center;
}

.admin-login-page .js-shared-footer,
.notfound-page .js-shared-footer{
  width:100%;
  margin-top:auto;
  align-self:stretch;
}

.notfound-page .timeline-kicker{
  margin:0 0 8px;
}

.notfound-page .code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:70px;
  padding:7px 13px;
  border-radius:999px;
  background:#24354c;
  border:1px solid rgba(255,255,255,.18);
  color:#f3f7ff;
  font-weight:800;
  letter-spacing:.5px;
  margin-bottom:10px;
}

.notfound-page h1{
  margin:0 0 10px;
  font-size:clamp(1.65rem, 4vw, 2.2rem);
  line-height:1.1;
}

.notfound-page p{
  margin:0 0 16px;
  color:#4f5c74;
  line-height:1.5;
}

.notfound-page .actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.notfound-page .card .btn{
  text-decoration:none;
  border-radius:11px;
  border:1px solid rgba(26,37,52,.18);
  background:#fff;
  color:#21314a;
  font-weight:700;
  padding:10px 14px;
}

@media (max-width:980px){
  .admin-page .tabs{
    flex-wrap:wrap;
  }
}

@media (max-width:680px){
  .admin-page .container{
    padding:10px 8px;
  }

  .admin-page .tabs .tab{
    flex:1 1 100%;
  }
}

/* ==========================================================================
   Legal page
   ========================================================================== */
.legal-page{
  margin:0;
  min-height:100vh;
  color:#161925;
  font-family:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  background:
    radial-gradient(circle at 16% 14%, rgba(197,22,29,.18), transparent 36%),
    radial-gradient(circle at 82% 10%, rgba(255,209,47,.22), transparent 38%),
    radial-gradient(circle at 50% 82%, rgba(47,88,232,.19), transparent 42%),
    repeating-linear-gradient(120deg, rgba(20,24,34,.035) 0 2px, transparent 2px 12px),
    linear-gradient(145deg, #f9efc9, #f5e4b1);
  background-attachment:fixed;
}

.legal-page .legal-shell{
  max-width:1240px;
  margin:0 auto;
  padding:14px 10px 28px;
}

.legal-page .card{
  border-radius:16px;
  border:3px solid #1d2536;
  background:rgba(255,255,255,.9);
  box-shadow:0 0 0 2px rgba(255,255,255,.45) inset, 6px 6px 0 rgba(22,27,41,.18), 0 18px 30px rgba(26,35,49,.14);
}

.legal-page .legal-nav{
  padding:10px 12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:12px;
}

.legal-page .legal-nav a{
  text-decoration:none;
  color:#1a2e63;
  font-weight:700;
  border:2px solid #1b2f6b;
  border-radius:11px;
  padding:7px 12px;
  background:linear-gradient(180deg, #ebf1ff 0%, #dce7ff 100%);
  box-shadow:2px 2px 0 rgba(17,22,33,.2);
}

.legal-page .legal-nav a:hover{
  filter:brightness(1.03);
  transform:translateY(-1px);
}

.legal-page .legal-card{
  padding:16px 18px;
  margin-bottom:12px;
}

.legal-page h2{
  margin:0 0 10px;
  font-family:"Chakra Petch","Bricolage Grotesque",sans-serif;
  font-size:1.25rem;
}

.legal-page h3{
  margin:14px 0 6px;
  font-size:1rem;
}

.legal-page p{
  margin:0 0 10px;
  line-height:1.55;
  color:#26344e;
}

.legal-page ul{
  margin:0 0 12px;
  padding-left:18px;
  line-height:1.55;
  color:#23324c;
}

.legal-page a{
  color:#1f4ac7;
}

.legal-page .legal-meta{
  margin-top:8px;
  font-size:.88rem;
  color:#5c6880;
}

/* ==========================================================================
   Shared header
   ========================================================================== */
.timeline-page .site-topbar,
.admin-page .site-topbar,
.admin-login-page .site-topbar,
.legal-page .site-topbar,
.notfound-page .site-topbar{
  position:sticky;
  top:0;
  z-index:40;
  width:100%;
  min-height:0;
  padding:8px clamp(10px, 2vw, 22px) 10px;
  border-bottom:3px solid #1d2536;
  background:
    radial-gradient(circle at 8% 0%, rgba(197,22,29,.2), transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(47,88,232,.19), transparent 30%),
    linear-gradient(165deg, rgba(255,250,236,.97), rgba(246,230,180,.95));
  backdrop-filter:blur(6px);
  box-shadow:0 4px 0 rgba(29,37,54,.34), 0 10px 20px rgba(26,35,49,.12);
}

.admin-login-page .site-topbar,
.notfound-page .site-topbar{
  align-self:stretch;
}

.site-topbar .site-topbar-main{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) auto minmax(320px, 1fr);
  align-items:center;
  gap:10px 16px;
}

.site-topbar p.timeline-kicker.site-badge{
  margin:0;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 11px;
  border-radius:10px;
  border:2px solid #101624;
  transform:skew(-9deg);
  font-family:"Chakra Petch","Verdana",sans-serif;
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:linear-gradient(180deg, #ffd12f 0%, #f6ba00 100%);
  color:#141925;
  box-shadow:3px 3px 0 rgba(18,22,34,.26);
}

.site-topbar h1.site-title{
  margin:0;
  justify-self:center;
  text-align:center;
  font-family:"Chakra Petch","Bricolage Grotesque",sans-serif;
  font-size:clamp(1.15rem, 2.3vw, 1.9rem);
  line-height:1.05;
  letter-spacing:-.01em;
  color:#111726;
  text-shadow:1px 1px 0 rgba(255,255,255,.75);
}

.site-topbar .searchbar.site-search{
  justify-self:end;
  width:min(320px, 100%);
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:12px;
  border:2px solid rgba(28,37,58,.24);
  background:rgba(255,255,255,.78);
  box-shadow:0 4px 12px rgba(17,24,38,.08);
}

.site-topbar .searchbar.site-search span{
  font-family:"Chakra Petch","Bricolage Grotesque",sans-serif;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#394867;
  white-space:nowrap;
}

.site-topbar .searchbar.site-search input{
  width:100%;
  min-width:0;
  border:none;
  border-radius:9px;
  background:rgba(239,244,255,.82);
  color:#1b2d4f;
  padding:7px 9px;
  font-size:.88rem;
}

.site-topbar .searchbar.site-search input::placeholder{
  color:#6a7897;
}

.site-topbar .searchbar.site-search input:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(40,82,196,.25);
}

.site-topbar .site-menu{
  margin-top:8px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}

.site-topbar .site-menu .menu-btn{
  min-height:36px;
  padding:7px 14px;
  border-radius:11px;
  font-family:"Chakra Petch","Bricolage Grotesque",sans-serif;
  font-weight:700;
  letter-spacing:.01em;
  border:2px solid #161c2b;
  text-decoration:none;
  box-shadow:2px 2px 0 rgba(17,22,33,.24);
}

.site-topbar .site-menu .menu-btn{
  border-color:#1b2f6b;
  background:linear-gradient(180deg, #ebf1ff 0%, #dce7ff 100%);
  color:#1a2e63;
}

.site-topbar .site-menu .admin-only{
  display:none;
}

.is-admin-logged .site-topbar .site-menu .admin-only,
.admin-page .site-topbar .site-menu .admin-only{
  display:inline-flex;
}

.site-topbar .site-menu .menu-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}

.site-topbar .site-menu .menu-btn.is-current,
.site-topbar .site-menu .menu-btn[aria-current="page"]{
  border-color:transparent;
  background:linear-gradient(145deg, #ff4a3f 0%, #d61d24 62%, #98161f 100%);
  color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.55) inset, 2px 2px 0 rgba(17,22,33,.24);
}

@media (max-width:980px){
  .site-topbar .site-topbar-main{
    grid-template-columns:1fr;
    gap:8px;
  }

  .site-topbar p.timeline-kicker.site-badge,
  .site-topbar h1.site-title,
  .site-topbar .searchbar.site-search{
    justify-self:stretch;
  }

  .site-topbar h1.site-title{
    text-align:center;
  }

  .site-topbar .site-menu{
    justify-content:center;
    flex-wrap:wrap;
  }
}

@media (max-width:680px){
  .site-topbar{
    padding:10px 10px 9px;
  }

  .site-topbar .searchbar.site-search{
    width:100%;
    padding:8px 10px;
    flex-wrap:wrap;
  }

  .site-topbar .searchbar.site-search span{
    width:100%;
  }

  .site-topbar .site-menu .menu-btn{
    flex:1 1 100%;
    justify-content:center;
  }
}

/* ==========================================================================
   Shared footer (inspired by Train)
   ========================================================================== */
.site-footer{
  margin-top:auto;
  width:100%;
  padding:1rem .8rem;
  color:#1c2b45;
  background:
    radial-gradient(circle at 8% 0%, rgba(197,22,29,.18), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(47,88,232,.16), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(15,167,95,.12), transparent 38%),
    linear-gradient(165deg, #fff7da, #f3e2ac);
  border-top:3px solid #1d2536;
  box-shadow:0 -6px 18px rgba(18,24,35,.12);
}

.js-shared-footer{
  width:100%;
}

.site-footer .menu-footer{
  background:transparent;
  max-width:1240px;
  margin:0 auto;
}

.site-footer .menu-footer ul{
  display:flex;
  justify-content:center;
  list-style-type:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
  gap:.6rem 1.15rem;
}

.site-footer .menu-footer li{
  font-size:.84rem;
  color:#23324c;
  text-align:center;
}

.site-footer .menu-footer a{
  text-decoration:none;
}

.site-footer .menu-footer a,
.site-footer .menu-footer .footer-link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 11px;
  border-radius:10px;
  border:2px solid #1b2f6b;
  background:linear-gradient(180deg, #ebf1ff 0%, #dce7ff 100%);
  color:#1a2e63;
  font-weight:700;
  font-size:.82rem;
  line-height:1.1;
  box-shadow:2px 2px 0 rgba(17,22,33,.2);
  transition:filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

.site-footer .menu-footer .footer-link-btn{
  font-family:inherit;
  cursor:pointer;
}

.site-footer .menu-footer a:hover,
.site-footer .menu-footer a:focus-visible,
.site-footer .menu-footer .footer-link-btn:hover,
.site-footer .menu-footer .footer-link-btn:focus-visible{
  filter:brightness(1.04);
  transform:translateY(-1px);
  box-shadow:3px 3px 0 rgba(17,22,33,.26);
  outline:none;
}

@media (max-width:980px){
}

@media (max-width:680px){
  .admin-login-page{
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
  }

  .admin-login-page .auth-card{
    margin:18px auto 16px;
  }

  .site-footer .menu-footer ul{
    flex-direction:column;
    align-items:center;
    gap:.34rem;
  }
}

/* ==========================================================================
   Cookie banner (shared)
   ========================================================================== */
#cookie-banner[hidden]{
  display:none !important;
}

#cookie-banner{
  position:fixed;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  width:min(980px, calc(100% - 18px));
  z-index:1400;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  border:2px solid #1d2536;
  background:linear-gradient(165deg, rgba(255,249,231,.96) 0%, rgba(246,230,181,.96) 100%);
  box-shadow:0 12px 30px rgba(20,25,37,.28);
  color:#182134;
}

#cookie-banner p{
  margin:0;
  font-size:.9rem;
  line-height:1.45;
}

#cookie-banner a{
  color:#1f4ac7;
  font-weight:700;
}

#cookie-banner button{
  flex:0 0 auto;
  border-radius:10px;
  border:2px solid #161c2b;
  background:linear-gradient(145deg, #ff4a3f 0%, #d61d24 62%, #98161f 100%);
  color:#fff;
  font-weight:700;
  padding:8px 12px;
  cursor:pointer;
}

#cookie-banner button:hover{
  filter:brightness(1.06);
}

@media (max-width:680px){
  #cookie-banner{
    bottom:8px;
    padding:10px;
    flex-direction:column;
    align-items:flex-start;
  }

  #cookie-banner button{
    width:100%;
    justify-content:center;
  }
}