/* ===== Fonts ===== */
@font-face{ font-family: 'Bender'; src: url('assets/fonts/bender.light.otf') format('opentype'); font-weight: 300; }
@font-face{ font-family: 'Bender'; src: url('assets/fonts/bender.regular.otf') format('opentype'); font-weight: 400; }
@font-face{ font-family: 'Bender'; src: url('assets/fonts/bender.bold.otf') format('opentype'); font-weight: 700; }
@font-face{ font-family: 'Bender'; src: url('assets/fonts/bender.black.otf') format('opentype'); font-weight: 900; }

/* ===== Tokens (matches Home) ===== */
:root{
  --bg: #0a0d0e;
  --bg-elevated: #12181a;
  --bg-card: #101617;
  --line: rgba(255,255,255,0.08);
  --ink: #f4f7f8;
  --ink-dim: #8a9598;
  --cyan: #2fe4f2;
  --cyan-dim: rgba(47,228,242,0.35);
  --red: #ff3b3b;
  --font-display: 'Bender', system-ui, sans-serif;
  --font-body: 'Bender', system-ui, sans-serif;
}

*{ box-sizing: border-box; }

html,body{
  margin:0; padding:0; min-height:100%;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--font-display); font-weight: 900; margin: 0; letter-spacing: 0.5px; }

/* ===== Header (identical to Home/Crisp/crispadmin) ===== */
.site-header{
  position: relative; z-index: 5;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 32px;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(47,228,242,0.06);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ height: 75px; width: auto; }
.site-nav{ display:flex; gap:28px; }
.site-nav a{ font-size:14px; font-weight:700; color: var(--ink); letter-spacing:0.5px; text-transform:uppercase; transition: color .15s; }
.site-nav a:hover{ color: var(--cyan); }
.site-nav a[aria-current="page"]{ color: var(--cyan); }
.watch-btn{
  font-family: var(--font-display); font-weight:700; font-size:13px; letter-spacing:0.5px; text-transform:uppercase;
  padding: 9px 18px; border-radius: 4px;
  background: var(--cyan); color: #04191b;
  box-shadow: 0 0 0 1px var(--cyan-dim);
  transition: box-shadow .15s, transform .15s;
}
.watch-btn:hover{ box-shadow: 0 0 22px var(--cyan-dim); transform: translateY(-1px); }
@media (max-width: 720px){
  .site-header{ padding: 12px 14px; }
  .brand-mark{ height: 34px; }
  .site-nav{ gap: 10px; }
  .site-nav a{ font-size: 11px; letter-spacing: 0.3px; }
  .watch-btn{ font-size: 10px; padding: 6px 10px; }
}
@media (max-width: 380px){
  .brand-mark{ height: 30px; }
  .site-nav{ gap: 6px; }
  .site-nav a{ font-size: 10px; }
  .watch-btn{ font-size: 9px; padding: 5px 8px; }
}

/* ===== Footer (identical to Home/Crisp/crispadmin) ===== */
.site-footer{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding: 30px 24px 40px; border-top: 1px solid var(--line);
  color: var(--ink-dim); font-size: 13px;
}
.footer-socials{ display:flex; gap:20px; }
.footer-socials a{ font-weight:700; letter-spacing:0.5px; text-transform:uppercase; font-size:12px; color: var(--ink); transition: color .15s; }
.footer-socials a:hover{ color: var(--cyan); }
.footer-handle{ margin:0; letter-spacing:0.5px; }

/* ===== Login gate ===== */
.login-gate{
  min-height: 70vh; display:flex; align-items:center; justify-content:center; padding: 40px 16px;
}
.login-gate.hidden{ display:none; }
.login-card{ max-width: 380px; width:100%; text-align:center; }
.login-logo{ width: min(200px, 55vw); margin-bottom: 18px; }
.login-hint{ color: var(--ink-dim); margin: 0 0 22px; font-size:14px; }
.google-signin-btn{ display:flex; justify-content:center; margin-bottom: 14px; }
.login-status{ color: var(--red); font-size:13px; min-height: 18px; }

/* ===== Signed-in shell ===== */
.hidden{ display:none !important; }
.account-bar{
  display:flex; align-items:center; justify-content:flex-end; gap:14px;
  padding: 14px 32px 0; font-size:13px; color: var(--ink-dim);
}
.btn-signout{
  background:none; border:1px solid var(--line); color: var(--ink-dim);
  font-family: var(--font-body); font-weight:700; font-size:12px; letter-spacing:0.3px; text-transform:uppercase;
  padding: 6px 14px; border-radius: 4px; cursor:pointer; transition: color .15s, border-color .15s;
}
.btn-signout:hover{ color: var(--cyan); border-color: var(--cyan-dim); }

main{ max-width: 900px; margin: 0 auto; padding: 30px 24px 80px; }
.admin-section{ margin-bottom: 50px; }
.section-title{ font-size: 20px; text-transform:uppercase; letter-spacing:1.5px; margin-bottom: 8px; }
.section-hint{ color: var(--ink-dim); font-size:14px; margin: 0 0 22px; }

/* ===== Hub cards ===== */
.hub-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px){ .hub-grid{ grid-template-columns: 1fr; } }
.hub-card{
  display:block; padding: 22px 24px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--line);
  transition: border-color .15s, transform .15s;
}
a.hub-card:hover{ border-color: var(--cyan-dim); transform: translateY(-2px); }
.hub-card-placeholder{ opacity: 0.5; }
.hub-tag{ font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color: var(--cyan); }
.hub-card h3{ font-size:17px; margin: 8px 0 6px; }
.hub-card p{ font-size:13px; color: var(--ink-dim); margin: 0 0 12px; line-height:1.4; }
.hub-link{ font-size:12px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color: var(--cyan); }

/* ===== Content editor form ===== */
.content-form{
  display:flex; flex-direction:column; gap: 18px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px;
  padding: 24px 28px;
}
.content-form label{
  display:flex; flex-direction:column; gap: 6px;
  font-size: 13px; color: var(--ink-dim); font-weight:700; letter-spacing:0.3px;
}
.content-form input{
  font-family: var(--font-body); font-size: 14px; color: var(--ink); font-weight:400;
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 12px;
}
.content-form input:focus{ outline: none; border-color: var(--cyan-dim); }
.form-actions{ display:flex; align-items:center; gap: 14px; margin-top: 4px; }
.btn-save{
  font-family: var(--font-display); font-weight:700; font-size:13px; letter-spacing:0.5px; text-transform:uppercase;
  padding: 10px 22px; border-radius: 4px; border:none; cursor:pointer;
  background: var(--cyan); color: #04191b;
  transition: box-shadow .15s, transform .15s;
}
.btn-save:hover{ box-shadow: 0 0 22px var(--cyan-dim); transform: translateY(-1px); }
.save-status{ font-size: 13px; color: var(--ink-dim); }
.section-hint code{ color: var(--ink); background: var(--bg-card); padding: 1px 6px; border-radius: 3px; }

/* ===== Entries list (Stream Wheel — shared with /stream) ===== */
.entries-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.entry-row{
  display:flex; align-items:center; gap:10px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 12px; transition: opacity .15s;
}
.entry-row.inactive{ opacity: 0.45; }
.entry-row input[type="text"]{
  flex:1; background:transparent; border:none; color: var(--ink);
  font-family: var(--font-body); font-size:14px; padding: 4px;
}
.entry-row input[type="text"]:focus{ outline:none; }
.entry-toggle{
  display:flex; align-items:center; gap:6px; font-size:11px; color: var(--ink-dim);
  text-transform:uppercase; letter-spacing:0.3px; cursor:pointer; user-select:none; white-space:nowrap;
}
.entry-remove{
  background:none; border:1px solid var(--line); color: var(--red);
  width:26px; height:26px; border-radius:4px; cursor:pointer; font-size:14px; line-height:1;
  flex-shrink:0;
}
.entry-remove:hover{ border-color: var(--red); }
.entry-add-form{ display:flex; gap:10px; margin-bottom:16px; }
.entry-add-form input{
  flex:1; font-family: var(--font-body); font-size:14px; color: var(--ink);
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
}
.entry-add-form input:focus{ outline:none; border-color: var(--cyan-dim); }

/* ===== Season HQ editor ===== */
.content-form textarea{
  font-family: var(--font-body); font-size: 14px; color: var(--ink); font-weight:400;
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 12px; resize: vertical;
}
.content-form textarea:focus{ outline:none; border-color: var(--cyan-dim); }
.field-pair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.counter-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.counter-cell{
  display:flex; flex-direction:column; gap:6px;
  font-size:13px; color:var(--ink-dim); font-weight:700; letter-spacing:0.3px;
}
.counter-controls{ display:flex; gap:8px; }
.counter-controls input{
  width:100%; min-width:0;
  font-family:var(--font-body); font-size:14px; color:var(--ink); font-weight:400;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:6px; padding:10px 12px;
}
.counter-controls input:focus{ outline:none; border-color:var(--cyan-dim); }
.btn-bump{
  flex-shrink:0; font-family:var(--font-display); font-weight:900; font-size:13px;
  padding:0 14px; border-radius:6px; border:1px solid var(--cyan-dim); cursor:pointer;
  background:rgba(47,228,242,0.08); color:var(--cyan);
  transition:background .15s, box-shadow .15s;
}
.btn-bump:hover{ background:rgba(47,228,242,0.18); box-shadow:0 0 14px rgba(47,228,242,0.2); }

/* ===== Stream schedule editor ===== */
.schedule-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.schedule-row{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:6px; padding:8px 12px;
}
.slot-input{
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:6px; padding:8px 10px;
}
.slot-input:focus{ outline:none; border-color:var(--cyan-dim); }
.slot-label-wide{ flex:1; min-width:0; }
.schedule-row select.slot-input{ appearance:auto; }
@media (max-width:560px){
  .schedule-row{ flex-wrap:wrap; }
  .field-pair{ grid-template-columns:1fr; }
}

/* ===== BitBot uses — grant/deduct ===== */
.subhead{ font-size:14px; text-transform:uppercase; letter-spacing:0.8px; color:var(--ink-dim); margin:22px 0 10px; }
.subhead:first-child{ margin-top:0; }
.applier-status{
  font-size:13px; padding:8px 12px; border-radius:6px; margin-bottom:18px;
  border:1px solid var(--line); background:var(--bg-card); color:var(--ink-dim);
}
.applier-status.ok{ color:#2fe45a; border-color:rgba(47,228,90,0.35); background:rgba(47,228,90,0.08); }
.applier-status.warn{ color:#ffc94a; border-color:rgba(255,201,74,0.35); background:rgba(255,201,74,0.08); }
.applier-status.bad{ color:var(--red); border-color:rgba(255,59,59,0.35); background:rgba(255,59,59,0.08); }
.command-checklist{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px;
  margin-bottom:14px;
}
.command-check{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink);
  background:var(--bg-card); border:1px solid var(--line); border-radius:6px; padding:8px 10px;
  cursor:pointer;
}
.grant-result-list{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.grant-result{
  display:grid; grid-template-columns:90px 140px 1fr; align-items:center; gap:12px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:6px;
  padding:9px 12px; font-size:13px;
}
.grant-result .log-login{ color:var(--ink); font-weight:700; }
.grant-log-row{
  display:grid; grid-template-columns:90px 64px 140px 1fr; align-items:center; gap:12px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:6px;
  padding:9px 12px; font-size:13px;
}
.grant-log-row .log-login{ color:var(--ink); font-weight:700; }
@media (max-width:560px){
  .grant-result, .grant-log-row{ grid-template-columns:1fr; row-gap:4px; }
}
.inline-form{ flex-direction:row; align-items:flex-end; flex-wrap:wrap; }
.inline-form label.grow{ flex:1; min-width:180px; }
.mode-toggle{
  display:flex; gap:18px; font-size:13px; color:var(--ink-dim); font-weight:400;
  margin: 2px 0 4px;
}
.mode-toggle label{ display:flex; align-items:center; gap:6px; cursor:pointer; font-weight:400; }
.lookup-table{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.lookup-row{
  display:grid; grid-template-columns:1fr 60px; align-items:center; gap:12px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:6px;
  padding:7px 12px; font-size:13px;
}
.lookup-row .lookup-count{ text-align:right; font-weight:700; color:var(--cyan); }
.lookup-row.zero .lookup-count{ color:var(--ink-dim); font-weight:400; }
.lookup-empty{ color:var(--ink-dim); font-size:13px; padding:8px 0; }
.btn-undo{
  font-family:var(--font-display); font-weight:900; font-size:11px; letter-spacing:0.4px;
  padding:3px 10px; border-radius:5px; border:1px solid var(--line); cursor:pointer;
  background:transparent; color:var(--ink-dim); margin-left:8px;
}
.btn-undo:hover{ color:var(--cyan); border-color:var(--cyan-dim); }
.grant-log-row .log-detail{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* ===== BitBot Trigger Log ===== */
.log-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px; }
.log-select, .log-search{
  font-family: var(--font-body); font-size:13px; color: var(--ink);
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px;
}
.log-select:focus, .log-search:focus{ outline:none; border-color: var(--cyan-dim); }
.log-search{ flex:1; min-width:160px; }
.log-live{
  display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  letter-spacing:0.5px; text-transform:uppercase; color: var(--ink-dim); flex:none;
}
.log-live-dot{ width:7px; height:7px; border-radius:50%; background: var(--ink-dim); flex:none; }
.log-live.connected .log-live-dot{ background:#2fe45a; box-shadow:0 0 6px rgba(47,228,90,0.6); animation: log-pulse 1.6s ease-in-out infinite; }
.log-live.retrying{ color: var(--red); }
.log-live.retrying .log-live-dot{ background: var(--red); }
@keyframes log-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
@media (prefers-reduced-motion: reduce){ .log-live.connected .log-live-dot{ animation:none; } }
.log-count{ font-size:12px; color: var(--ink-dim); flex:none; margin-left:auto; }

.log-list{ display:flex; flex-direction:column; gap:6px; }
.log-row{
  display:grid; grid-template-columns: 90px 64px 1fr 120px 1fr; align-items:center; gap:12px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 12px; font-size:13px;
}
.log-time{ color: var(--ink-dim); font-size:11.5px; white-space:nowrap; }
.log-action{
  font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  padding:3px 7px; border-radius:3px; text-align:center; flex:none;
}
.log-action.trigger{ color: var(--cyan); background: rgba(47,228,242,0.12); }
.log-action.cheer{ color:#b794ff; background: rgba(145,71,255,0.14); }
.log-command{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family: ui-monospace, Consolas, monospace; font-size:12.5px; }
.log-login{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--ink-dim); }
.log-outcome-wrap{ display:flex; align-items:center; gap:8px; min-width:0; }
.log-badge{
  font-size:10px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
  padding:3px 8px; border-radius:3px; flex:none;
}
.log-badge.ok{ color:#2fe45a; background: rgba(47,228,90,0.12); }
.log-badge.warn{ color:#ffc94a; background: rgba(255,201,74,0.12); }
.log-badge.bad{ color: var(--red); background: rgba(255,59,59,0.12); }
.log-badge.muted{ color: var(--ink-dim); background: rgba(255,255,255,0.04); }
.log-detail{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--ink-dim); font-size:12px; }
.log-empty{ color: var(--ink-dim); font-size:13px; padding: 20px 0; text-align:center; }
.log-empty.hidden{ display:none; }
@media (max-width: 720px){
  .log-row{ grid-template-columns: 1fr 1fr; grid-template-areas: "time action" "command login" "outcome outcome"; row-gap:6px; }
  .log-time{ grid-area:time; }
  .log-action{ grid-area:action; justify-self:end; }
  .log-command{ grid-area:command; white-space:normal; }
  .log-login{ grid-area:login; justify-self:end; }
  .log-outcome-wrap{ grid-area:outcome; }
  .log-toolbar{ flex-direction:column; align-items:stretch; }
  .log-count{ margin-left:0; }
}

/* ===== Categories and collapsible panels =====
   The page used to be one hub-card section followed by five long editors
   stacked vertically, so reaching anything meant scrolling past everything
   else. These group them and let each one fold away.

   They are <details>, not JS-toggled divs, deliberately: the children stay in
   the DOM whether open or shut, so every getElementById, form binding and live
   log render in app.js keeps working with no changes at all. */

.cat-title{
  font-size: 20px; text-transform: uppercase; letter-spacing: 1.5px;
  margin: 44px 0 6px;
}
.cat-hint{ color: var(--ink-dim); font-size: 14px; margin: 0 0 18px; max-width: 70ch; }

.panel{
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 14px;
  transition: border-color .15s;
}
.panel[open]{ border-color: var(--cyan-dim); }
.panel:hover{ border-color: var(--cyan-dim); }

.panel-head{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "tag toggle" "title toggle" "hint toggle";
  gap: 2px 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  align-items: center;
}
.panel-head::-webkit-details-marker{ display: none; }
.panel-head .hub-tag{ grid-area: tag; }
.panel-title{ grid-area: title; font-size: 17px; font-weight: 700; }
.panel-hint{ grid-area: hint; font-size: 13px; color: var(--ink-dim); line-height: 1.4; margin-top: 4px; }

/* Word rather than a glyph: "Open"/"Close" says what the click does, where a
   bare chevron leaves you guessing which way it folds. */
.panel-toggle{
  grid-area: toggle;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--cyan);
  white-space: nowrap;
}
.panel-toggle::after{ content: "Open ↓"; }
.panel[open] .panel-toggle::after{ content: "Close ↑"; }

.panel-body{ padding: 0 22px 22px; border-top: 1px solid var(--line); padding-top: 18px; }

/* The editors already carry their own card chrome; nested inside a panel that
   doubles the border and padding, so flatten them here only. */
.panel-body .content-form{
  background: transparent; border: 0; border-radius: 0; padding: 0;
}

@media (max-width: 620px){
  .panel-head{ padding: 15px 16px; }
  .panel-body{ padding: 16px 16px 18px; }
}