/* Public companion to the night-sakura admin studio. Overlay styles live in styles.css. */
:root{
  color-scheme:light;
  --page:#efe4e2;--frame:#292233;--frame-line:#4b3c54;--frame-ink:#f8e9ef;--frame-muted:#c4afc0;
  --surface:#fbf6f2;--card:#fffbf8;--card-2:#f6ece8;--input:#fffdfb;
  --line:#ecdcda;--line-strong:#ddbcc6;
  --ink:#2f2639;--muted:#7a6e80;
  --pink:#e0628f;--pink-strong:#c94d7a;--pink-soft:#fbe5ed;--pink-ink:#9b3963;--ring:#e0628f40;
  --danger:#b3304f;--danger-soft:#fde9ed;--ok:#2c7a59;--ok-soft:#e2f2ea;
  --violet:#8a64a8;--violet-soft:#efe5f6;
  --radius:14px;
  --shadow:0 1px 2px #3a243a0a,0 8px 24px #3a243a0d;
  --font:"Microsoft JhengHei UI","Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#141019;--frame:#1f1928;--frame-line:#3d3147;
  --surface:#231d2b;--card:#2b2434;--card-2:#342b3e;--input:#1f1927;
  --line:#40344a;--line-strong:#5d4a63;
  --ink:#f3e8f0;--muted:#b6a5b6;
  --pink:#ec8db2;--pink-strong:#f3a6c4;--pink-soft:#4a2b40;--pink-ink:#f7c6d9;--ring:#ec8db255;
  --danger:#f08aa2;--danger-soft:#47232f;--ok:#7fd1aa;--ok-soft:#1f3a2f;
  --violet:#c9a7e6;--violet-soft:#3a2d48;
  --shadow:0 1px 2px #0003,0 8px 24px #0002;
}

*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,p{margin:0}h2{font-size:17px;font-weight:700}
button,input{font:inherit;color:inherit}
[hidden],.svg-library{display:none!important}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

.page-shell{max-width:1240px;margin:20px auto;padding:0 20px 20px;background:var(--frame);border:1px solid var(--frame-line);border-radius:22px;box-shadow:0 24px 60px #2a1a2a2e}

/* Hero */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-height:150px;padding:24px 4px;color:var(--frame-ink)}
.hero::after{content:"";position:absolute;z-index:-1;right:-20px;top:0;width:340px;height:100%;background:url("/static/sakura-corner-v1.png") right 75%/cover no-repeat;opacity:.3;pointer-events:none}
.cat-logo{width:78px;height:74px;color:#f0a9be;flex-shrink:0}
.hero-copy{display:grid;gap:2px}
.eyebrow{font-size:13px;letter-spacing:.2em;color:#efb0c7}
.hero h1{font-size:30px;letter-spacing:.06em}
.hero-actions{display:flex;gap:8px;margin-left:auto}

.rules-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border:1px solid var(--pink);border-radius:10px;background:var(--pink);color:#fff;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
[data-theme="dark"] .rules-button{color:#2a1623}
.rules-button:hover{background:var(--pink-strong);border-color:var(--pink-strong)}
.rules-button.ghost{background:transparent;color:inherit;border-color:var(--line-strong)}
.rules-button.ghost:hover{background:var(--pink-soft);border-color:var(--pink)}
.hero .rules-button.ghost{color:var(--frame-ink);border-color:#7a5d73}
.hero .rules-button.ghost:hover{background:#ffffff12;border-color:#c98aa7}

/* Working surface */
.surface{display:grid;gap:16px;padding:20px;background:var(--surface);border-radius:var(--radius)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-width:0}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-header h2{display:flex;align-items:center;gap:8px}
.panel-header h2::before{content:"";width:4px;height:17px;border-radius:2px;background:var(--pink)}
.count-chip{display:inline-flex;min-width:24px;justify-content:center;padding:1px 9px;border-radius:999px;background:var(--pink-soft);color:var(--pink-ink);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}

.queue-tools{display:grid;gap:8px}
.queue-tools label{font-size:14px;font-weight:700}
.search-row{display:flex;gap:8px}
.queue-tools input{flex:1;min-width:0;min-height:46px;padding:0 14px 0 42px;border:1px solid var(--line-strong);border-radius:12px;background:var(--input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b48a9e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 14px 50%/18px no-repeat;transition:border-color .15s,box-shadow .15s}
.queue-tools input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px var(--ring)}
.search-row .rules-button{min-height:46px}
#viewer-search-result{padding:10px 14px;border-radius:10px;background:var(--pink-soft);color:var(--pink-ink);font-weight:600;overflow-wrap:anywhere}
#viewer-search-result.is-miss{background:var(--card-2);color:var(--muted);font-weight:500}
#viewer-search-result:empty{display:none}
.sync-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.sync-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.sync-error{color:var(--danger);font-weight:700}
.sync-error::before{background:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}

.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat-card{display:flex;flex-direction:column;justify-content:flex-start;gap:2px;min-height:92px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.stat-card.accent{background:linear-gradient(135deg,var(--pink-soft),var(--card) 80%);border-color:var(--line-strong)}
.stat-card small{font-size:11px;color:var(--muted)}
.stat-label{font-size:12px;letter-spacing:.04em;color:var(--muted)}
.stat-value{font-size:28px;line-height:1.3;font-weight:700;font-variant-numeric:tabular-nums}
.stat-value.compact{font-size:20px;overflow-wrap:anywhere}

/* Current slots */
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.queue-slot{position:relative;display:grid;gap:12px;align-content:start;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.queue-slot.is-active{border-color:var(--line-strong);background:linear-gradient(180deg,var(--pink-soft) 0,var(--card) 76px)}
.queue-slot.is-active::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#f3a7c2,var(--pink))}
.queue-slot.is-appealing{background:linear-gradient(180deg,var(--violet-soft) 0,var(--card) 76px)}
.queue-slot.is-appealing::before{background:linear-gradient(90deg,#cfb3e6,var(--violet))}
.queue-slot.is-idle-slot{border-style:dashed;background:transparent;min-height:120px}
.slot-topline{display:flex;justify-content:space-between;align-items:center;font-size:12px}
.slot-badge{color:var(--muted);font-weight:700;letter-spacing:.06em}
.slot-state{padding:1px 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--pink-ink);font-weight:700}
.is-appealing .slot-state{color:var(--violet)}
.slot-state.is-idle{background:transparent;border-style:dashed;color:var(--muted);font-weight:500}
.slot-player{display:flex;align-items:center;gap:12px;min-width:0}
.slot-copy{min-width:0}
.slot-copy strong{display:block;font-size:19px;line-height:1.3;overflow-wrap:anywhere}
.queue-meta{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-empty{display:grid;justify-items:center;gap:4px;align-self:center;color:var(--muted);font-size:13px;text-align:center}
.slot-empty::before{content:"ฅ^•ﻌ•^ฅ";font-size:15px;color:var(--line-strong)}
.redeemed-time{padding-top:8px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

.chip-row{display:flex;flex-wrap:wrap;gap:5px}
.queue-count,.viewer-stats{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;background:var(--card-2);color:var(--muted);font-size:11px;font-weight:500;white-space:nowrap}
.viewer-stats{background:var(--violet-soft);color:var(--violet)}

.twitch-avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border-radius:50%;background:var(--pink-soft);color:var(--pink)}
.twitch-avatar svg{width:55%;height:55%}
.twitch-avatar img{width:100%;height:100%;object-fit:cover}
.public-avatar{width:54px;height:54px;box-shadow:0 0 0 3px var(--card),0 0 0 4px var(--line-strong)}
.waiting-avatar{width:36px;height:36px}

/* Waiting table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;text-align:left}
th{background:var(--card-2);font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
th,td{padding:10px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover{background:var(--card-2)}
tr:last-child td{border-bottom:0}
td:first-child{width:76px}
td:last-child{width:140px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.queue-index{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--pink-soft);color:var(--pink-ink);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.viewer-cell{display:flex;align-items:center;gap:12px;min-width:0}
.viewer-copy{display:grid;gap:3px;min-width:0}
.viewer-copy strong{overflow-wrap:anywhere}
.empty-row td{text-align:center;padding:36px;color:var(--muted);font-size:14px}

.footer-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding:2px 4px;font-size:12px;color:var(--muted)}
.footer-note strong{margin-left:4px;font-weight:600;color:var(--ink)}

#rules-dialog{width:min(560px,calc(100% - 32px));max-height:80vh;overflow:auto;padding:24px;border:1px solid var(--line-strong);border-radius:18px;background:var(--card);color:var(--ink);box-shadow:0 24px 60px #1a0f1a4d}
#rules-dialog::backdrop{background:#1d1826b8;backdrop-filter:blur(2px)}
#rules-dialog h2{display:flex;align-items:center;gap:8px}
#rules-dialog h2::before{content:"";width:4px;height:17px;border-radius:2px;background:var(--pink)}
#rules-content{white-space:pre-wrap;overflow-wrap:anywhere;margin:16px 0 20px;padding:14px 16px;border-radius:12px;background:var(--card-2);line-height:1.8}
#rules-dialog form{display:flex;justify-content:flex-end}

.panel-header .empty-toggle{display:none;min-height:32px;padding:0 12px;font-size:12px}

@media(max-width:820px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){
  .page-shell{margin:8px;padding:0 10px 10px;border-radius:16px}
  .hero{min-height:0;padding:16px 2px;gap:12px}
  .hero::after{width:180px;opacity:.18}
  .cat-logo{width:52px;height:50px}
  .hero h1{font-size:23px}
  .hero-actions{margin-left:0;width:100%}
  .hero-actions .rules-button{flex:1;min-height:44px}
  .surface{padding:12px;gap:12px}
  .panel{padding:14px}
  .stats-grid{gap:8px}
  .stat-card{min-height:80px;padding:12px 14px}
  .stat-value{font-size:24px}
  .slot-grid{grid-template-columns:1fr}
  th,td{padding:10px}
  td:first-child{width:50px}
  td:last-child{width:auto;font-size:12px}
  .waiting-avatar{display:none}
  .footer-note{display:grid;gap:4px}
  .panel-header .empty-toggle:not([hidden]){display:inline-flex}
  .public-current-grid .is-idle-slot{display:none}
  .show-empty-slots .public-current-grid .is-idle-slot{display:grid;min-height:0;padding:10px 14px}
  .show-empty-slots .is-idle-slot .slot-empty{display:none}
  .public-current-grid:has(>.is-idle-slot):not(:has(>.is-active))::before{content:"目前尚無上場觀眾";color:var(--muted);font-size:14px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}