:root {
  color-scheme: dark;
  --bg: #0c0d12;
  --panel: #171820;
  --panel-soft: #20212b;
  --border: #30313d;
  --text: #f4f4f7;
  --muted: #a7a8b3;
  --accent: #f0319b;
  --accent-soft: #4a1835;
  --good: #5ed39a;
  --warning: #f2bf5a;
  --error: #ff7c87;
}

/* Owner event planning calendar */
.planner-filters{display:flex;gap:8px}.planner-filters select{min-width:130px}
.events-planner [hidden]{display:none!important}
.events-planner{width:min(1800px,calc(100vw - 32px));margin-inline:50%;transform:translateX(-50%);padding:24px 0 80px}.events-planner-header,.planner-toolbar,.planner-layout{display:flex;gap:18px}.events-planner-header{align-items:flex-end;justify-content:space-between;margin-bottom:20px}.events-planner-header h1{font-size:clamp(2rem,4vw,4.4rem);margin:.15rem 0}.events-planner-actions,.planner-month-nav,.planner-view-tabs,.planner-discord-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.planner-toolbar{align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(9,7,18,.72);margin-bottom:12px}.planner-view-tabs{background:rgba(255,255,255,.06);padding:4px;border-radius:12px}.planner-view-tabs button{border:0;background:transparent;color:var(--muted);padding:10px 15px;border-radius:9px;font-weight:800}.planner-view-tabs button.active{background:#f32ca8;color:white}.planner-timezone{display:flex;gap:8px;align-items:center}.planner-timezone label{font-size:.82rem;color:var(--muted)}.event-type-legend{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 16px;color:var(--muted);font-size:.84rem}.event-type-legend span{display:flex;align-items:center;gap:6px}.event-type-legend i{width:10px;height:10px;border-radius:50%;background:var(--event-color)}.legend-status{padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.07)}.planner-layout{align-items:flex-start}.planner-calendar-panel{flex:1;min-width:0;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(6,5,15,.64);overflow:hidden}.planner-detail-panel{width:min(420px,32vw);position:sticky;top:92px;max-height:calc(100vh - 110px);overflow:auto;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(9,7,18,.94);padding:20px}.planner-weekdays,.planner-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.planner-weekdays span{text-align:center;padding:12px;color:var(--muted);font-size:.8rem;font-weight:900;text-transform:uppercase}.planner-day{min-height:150px;border-top:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08);padding:8px;overflow:hidden}.planner-day.outside-month{opacity:.35}.planner-day-number{border:0;background:transparent;color:white;font-weight:900;font-size:1rem;padding:5px;border-radius:8px}.planner-day-number:hover{background:rgba(243,44,168,.25)}.planner-day-events{display:grid;gap:5px}.planner-event{display:block;border-left:4px solid var(--event-color);background:color-mix(in srgb,var(--event-color) 22%,#161421);color:white;text-decoration:none;padding:6px 7px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.75rem}.planner-event-status{font-weight:1000;color:var(--event-color)}.planner-agenda-view,.planner-week-view{padding:16px;display:grid;gap:10px}.planner-agenda-view[hidden],.planner-week-view[hidden],.planner-month-view[hidden]{display:none}.planner-agenda-event{border-left:5px solid var(--event-color);display:flex;align-items:center;gap:15px;padding:13px;background:rgba(255,255,255,.06);border-radius:12px;text-decoration:none;color:white}.planner-agenda-event time{min-width:100px;display:grid;color:var(--muted)}.planner-agenda-event div{display:grid}.planner-agenda-event span{color:var(--muted);font-size:.85rem}.event-detail-heading{border-left:5px solid var(--event-color);padding-left:14px}.event-detail-heading p,.event-detail-heading small{color:var(--event-color);font-weight:900;text-transform:uppercase;font-size:.75rem}.event-detail-heading h2{margin:.2rem 0}.event-detail-heading span{display:block}.event-detail-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.event-detail-list div{padding:9px;background:rgba(255,255,255,.05);border-radius:10px;min-width:0}.event-detail-list dt{font-size:.7rem;text-transform:uppercase;color:var(--muted);font-weight:900}.event-detail-list dd{margin:4px 0 0;overflow-wrap:anywhere}.planner-action-group,.planner-history,.event-color-settings,.planner-discord-actions details{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;margin:12px 0}.planner-action-group summary,.planner-history summary,.event-color-settings summary{font-weight:900;cursor:pointer}.planner-form{display:grid;gap:12px;margin-top:14px}.planner-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.planner-form label,.planner-review-form label,.planner-discord-actions label{display:grid;gap:5px;font-weight:750;font-size:.84rem}.planner-form .span-2{grid-column:1/-1}.checkbox-row{display:flex!important;align-items:center}.planner-review-form{display:grid;gap:10px;margin-top:14px}.planner-review-form>div{display:flex;gap:7px;flex-wrap:wrap}.planner-history>div{border-top:1px solid rgba(255,255,255,.08);padding:9px 0;display:grid}.planner-history span{color:var(--muted);font-size:.72rem}.planner-detail-empty{text-align:center;padding:80px 15px;color:var(--muted)}.planner-detail-empty span{font-size:3rem;color:#f32ca8}.event-color-settings{margin-top:18px;background:rgba(9,7,18,.75)}.event-color-settings form>div{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}.event-color-settings label{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.06);padding:9px;border-radius:9px}.event-proposal-dialog{width:min(850px,calc(100vw - 24px));max-height:92vh;overflow:auto;border:1px solid rgba(243,44,168,.5);border-radius:22px;background:#100d1d;color:white;padding:22px}.event-proposal-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-close{border:0;background:rgba(255,255,255,.1);color:white;border-radius:50%;width:40px;height:40px;font-size:1.5rem}.timezone-confirmation{padding:12px;border-radius:10px;background:rgba(66,198,255,.1);border:1px solid rgba(66,198,255,.35);font-size:.85rem}.notice.success{border-color:#38d99a}.notice.error{border-color:#ff5a7a}
@media(max-width:1000px){.planner-layout{display:block}.planner-detail-panel{width:auto;position:static;max-height:none;margin-top:14px}.planner-day{min-height:120px}.planner-event strong{display:none}.event-color-settings form>div{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.events-planner{width:calc(100vw - 20px);padding-top:10px}.events-planner-header,.planner-toolbar{align-items:stretch;flex-direction:column}.events-planner-actions>*{flex:1}.planner-filters{display:grid;grid-template-columns:1fr 1fr}.planner-filters select{min-width:0}.planner-timezone{display:grid;grid-template-columns:1fr auto}.planner-timezone label{grid-column:1/-1}.planner-form-grid{grid-template-columns:1fr}.planner-form .span-2{grid-column:auto}.event-detail-list{grid-template-columns:1fr}.event-type-legend{max-height:86px;overflow:auto}.planner-detail-panel{padding:14px}.event-color-settings form>div{grid-template-columns:1fr}.planner-agenda-event time{min-width:76px}.planner-agenda-event{padding:11px;gap:10px}.planner-weekdays,.planner-month-grid{font-size:.75rem}}

/* Private Riff Student Roster */
.student-register-panel { margin-bottom: 32px; }
.student-member-search { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 12px; align-items: end; position: relative; }
.student-member-search label, .student-member-search .student-member-selected { grid-column: 1; }
.student-member-search > button { grid-column: 2; grid-row: 1; }
.student-member-results { grid-column: 1; display: grid; gap: 4px; position: absolute; z-index: 20; top: 76px; left: 0; right: 180px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.35); overflow: hidden; }
.student-member-results:empty { display: none; }
.student-member-result { appearance: none; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; padding: 12px 14px; cursor: pointer; }
.student-member-result:hover, .student-member-result:focus { background: rgba(240,49,155,.15); }
.student-tier-manager { margin-bottom: 34px; }
.student-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.student-tier-upload { overflow: hidden; }
.student-tier-banner-placeholder { min-height: 145px; display: flex; flex-direction: column; justify-content: end; padding: 18px; background-position: center; background-size: cover; color: white; border-radius: 14px; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.student-tier-banner-placeholder span { text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; }
.student-tier-banner-placeholder strong { font-size: 1.5rem; }
.tier-starter .student-tier-banner-placeholder, .student-card-hero.tier-starter, .student-roster-tile-top.tier-starter { background-image: linear-gradient(125deg,var(--tier-start,#176b73),var(--tier-end,#63d6c7)); }
.tier-blue .student-tier-banner-placeholder, .student-card-hero.tier-blue, .student-roster-tile-top.tier-blue { background-image: linear-gradient(125deg,var(--tier-start,#1268d8),var(--tier-end,#41b8ff)); }
.tier-gold .student-tier-banner-placeholder, .student-card-hero.tier-gold, .student-roster-tile-top.tier-gold { background-image: linear-gradient(125deg,var(--tier-start,#805305),var(--tier-end,#f1c75b)); }
.tier-purple .student-tier-banner-placeholder, .student-card-hero.tier-purple, .student-roster-tile-top.tier-purple { background-image: linear-gradient(125deg,var(--tier-start,#5825a8),var(--tier-end,#b45cff)); }
.student-roster-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.student-roster-tile { color: var(--text); text-decoration: none; overflow: hidden; padding: 0; background: linear-gradient(150deg,var(--student-start),var(--student-end)); }
.student-roster-tile-top { min-height: 82px; padding: 15px; display: flex; flex-direction: column; justify-content: end; color: white; background-position: center; background-size: cover; }
.student-roster-tile-top span { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.student-roster-tile-identity { display: flex; gap: 11px; align-items: center; padding: 16px; }
.student-roster-tile-identity img, .student-avatar-fallback { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--student-accent,#f0319b); color: white; }
.student-roster-tile-identity h3, .student-roster-tile-identity p { margin: 0; overflow-wrap: anywhere; }
.student-roster-tile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 16px 14px; background: rgba(255,255,255,.16); }
.student-roster-tile-stats span { padding: 10px; background: rgba(0,0,0,.24); }
.student-roster-tile-stats small, .student-roster-tile-stats strong { display: block; }
.student-roster-tile > .button { margin: 0 16px 16px; }
.student-legacy-roster,.student-single-lesson-section { position: relative; margin-top: clamp(1.5rem,3vw,2.5rem); padding-top: clamp(1.1rem,2vw,1.6rem); }
.student-legacy-roster::before,.student-single-lesson-section::before { position: absolute; top: 0; left: 0; width: min(9rem,35vw); height: 1px; background: linear-gradient(90deg,rgba(211,212,220,.72),transparent); content: ""; }
.student-legacy-roster .student-roster-grid { opacity: .84; }
.student-roster-primary-section > .section-heading h2,
.student-legacy-roster > .section-heading h2,
.student-single-lesson-section > .section-heading h2 {
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
}
.student-single-lesson-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.student-single-lesson-card { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 66px; padding: 9px 11px; border: 1px solid color-mix(in srgb,var(--accent) 42%,var(--border)); border-radius: 12px; background: linear-gradient(120deg,rgba(240,49,155,.16),rgba(94,75,180,.12)); }
.student-single-lesson-card img,.student-single-avatar-fallback { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: linear-gradient(135deg,var(--accent),#7139cc); }
.student-single-lesson-card div { min-width: 0; }
.student-single-lesson-card strong,.student-single-lesson-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-single-lesson-card small { color: var(--muted); }
.student-single-lesson-card form { margin: 0; }
.student-single-lesson-card button { width: 30px; height: 30px; border: 0; border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.07); cursor: pointer; font-size: 1.15rem; }
.student-single-lesson-card button:hover,.student-single-lesson-card button:focus { color: #fff; background: rgba(255,86,122,.3); }
.student-single-lesson-add { margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.025); }
.student-register-panel .student-single-lesson-add { margin-top: 0; padding: 0; background: transparent; border: 0; }
.student-session-register-panel { margin-top: -1rem; }
.student-workspace { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr); gap: 24px; align-items: start; }
.student-editor { width: 100%; min-width: 0; margin-top: clamp(2rem,5vw,4rem); padding: clamp(1.2rem,3vw,2.2rem); }
.student-editor-grid { display: grid; gap: 14px; }
.student-editor-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.student-editor-grid .span-two { grid-column: span 2; }
.student-editor-section { padding: clamp(1rem,2vw,1.4rem); background: rgba(255,255,255,.022); border: 1px solid rgba(255,255,255,.09); border-radius: 1rem; }
.student-editor-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 10px; align-items: center; }
.student-editor-row.song { grid-template-columns: 1fr 1fr auto; }
.student-editor-row.song-progress { grid-template-columns: 1fr 1fr 90px auto; }
.student-goal-row { grid-template-columns: auto 1fr auto; }
.student-assessment-editor { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.student-assessment-row { grid-template-columns: minmax(0,1fr) 7rem auto; margin: 0; }
.student-preview-column { display: grid; gap: 22px; }
.student-card-preview { overflow: hidden; border: 1px solid color-mix(in srgb,var(--student-accent) 70%,transparent); border-radius: 24px; background: linear-gradient(150deg,var(--student-start),var(--student-end)); box-shadow: 0 28px 70px rgba(0,0,0,.32); color: white; }
.student-card-hero { min-height: 180px; padding: 24px; display: flex; flex-direction: column; justify-content: end; background-size: cover; background-position: center; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.student-card-hero span { text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; }
.student-card-hero h2, .student-card-hero p { margin: 3px 0; }
.student-card-body { padding: 20px; background: rgba(8,8,16,.72); }
.student-card-identity { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 16px; }
.student-card-identity img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--student-accent),0 0 18px rgba(255,255,255,.28); }
.student-card-identity h2, .student-card-identity p { margin: 0; }
.student-card-columns { display: grid; grid-template-columns: .9fr 1.1fr 1fr; gap: 16px; padding-top: 18px; }
.student-card-columns section + section { border-left: 1px solid rgba(255,255,255,.16); padding-left: 16px; }
.student-card-columns dl { margin: 0; }
.student-card-columns dt { color: rgba(255,255,255,.65); text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; margin-top: 10px; }
.student-card-columns dd { margin: 2px 0 0; }
.student-song-line, .student-skill-line { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.11); }
.student-song-line small { display: block; color: rgba(255,255,255,.62); }
.student-skill-line span:last-child { display: flex; gap: 3px; }
.student-skill-line i { width: 16px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.2); }
.student-skill-line i.filled { background: var(--student-accent); }
.student-goal-line { display: flex; gap: 8px; padding: 5px 0; }
.student-card-body blockquote { margin: 18px 0 0; border-left: 3px solid var(--student-accent); padding: 10px 0 10px 14px; }
.student-card-body blockquote p { margin-bottom: 0; }
.student-editor-card-preview { margin-top: clamp(1.5rem,3vw,2.5rem); }
.student-editor-card-preview > .section-heading { margin-bottom: 1rem; }
.student-editor-card-preview .student-public-page { max-width: none; }
@media (max-width: 1180px) { .student-roster-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .student-single-lesson-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .student-workspace { grid-template-columns: 1fr; } .student-preview-column { position: static; } }
@media (max-width: 760px) { .student-tier-grid, .student-roster-grid, .student-single-lesson-grid, .student-editor-grid.three, .student-card-columns, .student-assessment-editor { grid-template-columns: 1fr; } .student-card-columns section + section { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); padding-left: 0; padding-top: 14px; } .student-editor-grid .span-two { grid-column: auto; } .student-member-search { grid-template-columns: 1fr; } .student-member-search > button, .student-member-search label, .student-member-search .student-member-selected { grid-column: 1; grid-row: auto; } .student-member-results { right: 0; } .student-editor-row.song, .student-editor-row.song-progress, .student-goal-row, .student-assessment-row { grid-template-columns: 1fr; } }

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #18121c 0, var(--bg) 38rem);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .4rem; font-size: clamp(1.8rem, 5vw, 2.7rem); }
h2 { font-size: 1.15rem; }
code { color: #ff9fd3; overflow-wrap: anywhere; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .85rem clamp(1rem, 4vw, 2rem);
  background: rgba(12, 13, 18, .92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.brand { color: var(--text); font-weight: 800; text-decoration: none; }
nav { display: flex; flex: 1; gap: .35rem; }
nav a {
  color: var(--muted);
  padding: .55rem .7rem;
  border-radius: .55rem;
  text-decoration: none;
}
nav a:hover, nav a.active { color: var(--text); background: var(--panel-soft); }
.container { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 4rem; }
.login-shell { display: grid; min-height: 100vh; place-items: center; padding: 1rem; }
.login-card {
  width: min(420px, 100%);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}
.site-legal-footer {
  display: flex;
  justify-content: center;
  gap: .65rem;
  padding: 0 1rem 1.5rem;
  color: var(--muted);
  font-size: .82rem;
}
.site-legal-footer a:hover { color: var(--text); }
.legal-page {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 1rem 0 4rem;
}
.legal-hero {
  padding: clamp(1.5rem, 5vw, 3rem);
  margin-bottom: 1rem;
  background: linear-gradient(145deg, rgba(35, 23, 40, .96), rgba(20, 21, 30, .96));
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
}
.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 2rem;
  color: var(--text);
  text-decoration: none;
}
.legal-brand img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.legal-brand span { display: grid; }
.legal-brand small, .legal-updated { color: var(--muted); }
.legal-hero > p:not(.eyebrow, .legal-updated) {
  max-width: 720px;
  line-height: 1.7;
}
.legal-nav {
  display: flex;
  gap: .5rem;
  margin-top: 1.5rem;
}
.legal-nav a {
  padding: .65rem .85rem;
  color: var(--muted);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  border-radius: .6rem;
  text-decoration: none;
}
.legal-nav a:hover, .legal-nav a.active {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.legal-content {
  padding: clamp(1.5rem, 5vw, 3rem);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
}
.legal-content section + section {
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.legal-content h2 {
  margin-bottom: .7rem;
  font-size: 1.12rem;
}
.legal-content p, .legal-content li {
  color: #d6d6de;
  line-height: 1.75;
}
.legal-content ul { padding-left: 1.25rem; }
.legal-content a { color: #ff9fd3; }
.guide-page {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 1rem 0 4rem;
}
.guide-hero {
  padding: clamp(1.5rem, 5vw, 3rem);
  margin-bottom: 1rem;
  background:
    radial-gradient(circle at 85% 10%, rgba(240, 49, 155, .18), transparent 26rem),
    linear-gradient(145deg, rgba(29, 25, 42, .98), rgba(17, 19, 28, .98));
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
}
.guide-hero > p:not(.eyebrow) {
  max-width: 800px;
  color: #d6d6de;
  line-height: 1.7;
}
.guide-quick-links {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-top: 1.5rem;
}
.guide-quick-links a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: .6rem .8rem;
  color: var(--text);
  background: rgba(255, 255, 255, .055);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
}
.guide-quick-links a:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.guide-layout {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.guide-toc {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: .25rem;
}
.guide-toc strong { margin-bottom: .45rem; }
.guide-toc a {
  padding: .48rem .55rem;
  color: var(--muted);
  border-radius: .45rem;
  font-size: .84rem;
  line-height: 1.35;
  text-decoration: none;
}
.guide-toc a:hover {
  color: var(--text);
  background: var(--panel-soft);
}
.guide-content {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.guide-section {
  min-width: 0;
  max-width: 100%;
  padding: clamp(1.35rem, 4vw, 2.25rem);
  scroll-margin-top: 6rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 1rem;
}
.guide-section-heading {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.25rem;
}
.guide-section-heading > div { min-width: 0; }
.guide-section-heading h2 { overflow-wrap: anywhere; }
.guide-section-heading > span {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  color: white;
  background: linear-gradient(135deg, var(--accent), #8457ff);
  border-radius: .75rem;
  font-weight: 850;
}
.guide-section-heading p, .guide-section-heading h2 { margin-bottom: 0; }
.guide-section h3 {
  margin: 1.4rem 0 .65rem;
  font-size: 1rem;
}
.guide-section p, .guide-section li {
  color: #d6d6de;
  line-height: 1.7;
}
.guide-section li + li { margin-top: .35rem; }
.guide-section a { color: #ff9fd3; }
.guide-callout {
  padding: 1rem 1.1rem;
  margin: 1rem 0;
  color: #dfe0e8;
  background: rgba(94, 211, 154, .08);
  border: 1px solid rgba(94, 211, 154, .35);
  border-radius: .75rem;
  line-height: 1.6;
}
.guide-callout.accent {
  background: rgba(240, 49, 155, .08);
  border-color: rgba(240, 49, 155, .4);
}
.guide-callout.warning {
  background: rgba(242, 191, 90, .08);
  border-color: rgba(242, 191, 90, .38);
}
.guide-card-grid, .guide-workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.guide-card-grid article, .guide-workflow-grid article {
  padding: 1rem;
  background: #12131a;
  border: 1px solid var(--border);
  border-radius: .75rem;
}
.guide-card-grid p, .guide-workflow-grid p { margin: .4rem 0 0; }
.guide-workflow-grid h3 { margin-top: 0; }
.guide-workflow-grid ol { padding-left: 1.25rem; }
.command-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: .9rem 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: .75rem;
}
.command-table {
  width: 100%;
  border-collapse: collapse;
  background: #12131a;
}
.command-table th, .command-table td {
  padding: .85rem .9rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.command-table tr:last-child td { border-bottom: 0; }
.command-table th {
  color: var(--muted);
  background: rgba(255, 255, 255, .035);
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.command-table td:first-child { white-space: nowrap; }
.target-command-guide-table td:last-child {
  min-width: 12rem;
}
.guide-steps {
  display: grid;
  gap: .75rem;
  padding: 0;
  list-style: none;
}
.guide-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: .75rem;
  padding: .85rem;
  margin: 0;
  background: #12131a;
  border: 1px solid var(--border);
  border-radius: .75rem;
}
.guide-steps li > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: white;
  background: var(--accent-soft);
  border-radius: 50%;
  font-weight: 800;
}
.guide-steps p { margin: .2rem 0 0; }
.guide-example {
  display: grid;
  gap: .55rem;
  padding: 1rem;
  margin: .9rem 0;
  background: #0e0f15;
  border: 1px dashed #5b5d6d;
  border-radius: .75rem;
}
.guide-example code { white-space: normal; }
.guide-check-list { padding-left: 1.2rem; }
.guide-faq { display: grid; gap: .6rem; }
.guide-faq details {
  padding: .85rem 1rem;
  background: #12131a;
  border: 1px solid var(--border);
  border-radius: .7rem;
}
.guide-faq summary {
  cursor: pointer;
  font-weight: 750;
}
.guide-faq p { margin: .7rem 0 0; }
.guide-badge-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .45rem .7rem;
  align-items: center;
  max-width: 760px;
  margin-top: 1rem;
  color: var(--muted);
  font-size: .85rem;
}
.access-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.access-badge.staff { color: #b9f5da; background: rgba(94, 211, 154, .16); }
.access-badge.owner { color: #ffd1ea; background: rgba(240, 49, 155, .18); }
.access-badge.optional { color: #d9ceff; background: rgba(132, 87, 255, .18); }
.access-badge.role { color: #ffe0a3; background: rgba(242, 191, 90, .17); }
@media (max-width: 1050px) {
  .guide-layout { grid-template-columns: 1fr; }
  .guide-toc { position: static; }
  .guide-card-grid, .guide-workflow-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .guide-page,
  .guide-hero,
  .guide-layout,
  .guide-toc,
  .guide-content,
  .guide-section { width: 100%; max-width: 100%; min-width: 0; }
  .guide-hero,
  .guide-section { padding: 1rem; }
  .guide-section-heading { align-items: flex-start; gap: .7rem; }
  .guide-section-heading > span { flex-basis: 36px; width: 36px; height: 36px; }
  .guide-section ul,
  .guide-section ol { padding-left: 1.2rem; }
  .guide-section p,
  .guide-section li,
  .guide-section code,
  .guide-callout { overflow-wrap: anywhere; word-break: normal; }
  .command-table td:first-child { white-space: normal; }
  .command-table th,
  .command-table td { min-width: 0; padding: .72rem; overflow-wrap: anywhere; }
  .target-command-guide-table td:last-child { min-width: 0; }
}
.button.discord-button {
  display: block;
  margin-top: 1.25rem;
  text-align: center;
  text-decoration: none;
  background: #5865f2;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: .78rem;
}
.login-divider::before, .login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.session-user {
  display: grid;
  min-width: max-content;
  font-size: .78rem;
  text-align: right;
}
.session-user span { color: var(--muted); text-transform: capitalize; }
.mobile-nav-logout { display: none; }
.eyebrow, .label {
  margin-bottom: .45rem;
  color: var(--accent);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.muted, .path { color: var(--muted); }
.path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; overflow-wrap: anywhere; }
.stack { display: grid; gap: 1rem; margin-top: 1.5rem; }
.leaderboard-import-form { display: grid; gap: 1rem; margin-top: 1rem; }
.leaderboard-import-form .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
}
.leaderboard-import-form .checkbox-row input {
  width: auto;
  margin-top: .15rem;
}
.leaderboard-import-form .button { justify-self: start; }

/* Owner leaderboard response controls */
.leaderboard-message-settings,
.leaderboard-message-form { display: grid; gap: 1rem; }
.leaderboard-message-intro h2 { margin-top: 0; }
.leaderboard-placeholder-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .45rem .75rem;
  align-items: center;
}
.leaderboard-placeholder-list code { color: #ff8dcc; font-weight: 800; }
.leaderboard-message-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .85fr);
  gap: 1.2rem;
  align-items: start;
}
.discord-message-preview {
  padding: 1rem;
  color: #dbdee1;
  background: #313338;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: .8rem;
}
.discord-preview-label {
  margin: 0 0 .8rem;
  color: #b5bac1;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.discord-preview-message { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .65rem; }
.discord-preview-avatar {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #f0319b, #6349d1);
  border-radius: 50%;
  font-size: .68rem;
  font-weight: 900;
}
.discord-preview-author { margin: 0 0 .35rem; color: #f2f3f5; font-weight: 800; }
.discord-preview-author span {
  margin-left: .3rem;
  padding: .1rem .25rem;
  color: #fff;
  background: #5865f2;
  border-radius: .2rem;
  font-size: .58rem;
}
.discord-success-embed {
  padding: .7rem .85rem;
  background: #2b2d31;
  border-left: .25rem solid #57f287;
  border-radius: .25rem;
}
.discord-success-embed > strong { display: block; color: #f2f3f5; }
.discord-success-embed p { margin: .35rem 0 0; color: #dbdee1; line-height: 1.4; }
.discord-success-embed code { padding: .1rem .25rem; color: #f2f3f5; background: #1e1f22; border-radius: .2rem; }
.discord-preview-message small { display: block; margin-top: .45rem; color: #b5bac1; }
@media (max-width: 900px) {
  .leaderboard-message-editor-grid { grid-template-columns: 1fr; }
}
label { display: grid; gap: .45rem; color: var(--muted); font-size: .9rem; }
input {
  width: 100%;
  padding: .8rem .9rem;
  color: var(--text);
  background: #101117;
  border: 1px solid var(--border);
  border-radius: .55rem;
  font: inherit;
}
select {
  width: 100%;
  padding: .8rem .9rem;
  color: var(--text);
  background: #101117;
  border: 1px solid var(--border);
  border-radius: .55rem;
  font: inherit;
}
textarea {
  width: 100%;
  padding: .8rem .9rem;
  resize: vertical;
  color: var(--text);
  background: #101117;
  border: 1px solid var(--border);
  border-radius: .55rem;
  font: inherit;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.button {
  padding: .7rem 1rem;
  color: white;
  background: var(--accent);
  border: 0;
  border-radius: .55rem;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}
.button.secondary { color: var(--muted); background: var(--panel-soft); }
.button.danger { background: #a92e4d; }
.page-heading, .section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  padding: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: .85rem;
}
.container > .card + .card { margin-top: 1rem; }
.soft-card { background: #12131a; }
.compact-grid { margin: .8rem 0; }
.metric { margin-bottom: .45rem; font-size: 1.45rem; font-weight: 800; }
.good { color: var(--good); }
.warning-text { color: var(--warning); }
.status-list, .settings-list { display: grid; }
.status-list > div, .settings-list > div, .leaderboard li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-top: 1px solid var(--border);
}
.status-list > div:first-child, .settings-list > div:first-child { border-top: 0; }
.settings-list span { max-width: 65%; color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.two-column { display: grid; grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr); gap: 1rem; }
.leaderboard { margin: 0; padding-left: 1.5rem; }
.leaderboard li span { margin-right: auto; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { padding: .75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .73rem; letter-spacing: .06em; text-transform: uppercase; }
.badge { display: inline-block; padding: .22rem .5rem; background: var(--accent-soft); border-radius: 99px; }
.alert, .empty-state { padding: 1rem; border: 1px solid var(--border); border-radius: .7rem; }
.alert { margin: 1rem 0; }
.compact-alert { margin-bottom: 0; }
.alert.error { color: var(--error); background: #32171c; }
.alert.warning { color: var(--warning); background: #322817; }
.alert.success { color: var(--good); background: #153025; }
.empty-state { color: var(--muted); background: var(--panel); }
.settings-section { margin-bottom: 1rem; }
.settings-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 1.35rem;
  align-items: start;
}
.settings-layout > div:last-child { min-width: 0; }
.settings-sidebar {
  position: sticky;
  top: 5.2rem;
  align-self: start;
  padding: 1rem;
  background:
    radial-gradient(circle at 0 0, rgba(240, 49, 155, .16), transparent 34%),
    linear-gradient(180deg, #1b1c25, var(--panel));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 1.1rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.settings-sidebar-heading {
  margin-bottom: .85rem;
  padding: .15rem .2rem .75rem;
  border-bottom: 1px solid var(--border);
}
.settings-sidebar-heading strong {
  display: block;
  margin-top: .25rem;
  font-size: 1.05rem;
}
.settings-menu {
  display: grid;
  gap: .35rem;
}
.settings-menu-item {
  display: flex;
  align-items: center;
  min-height: 2.65rem;
  padding: .72rem .85rem;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: .78rem;
  text-decoration: none;
  font-weight: 750;
  line-height: 1.2;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.settings-menu-item:hover,
.settings-menu-item:focus-visible,
.settings-menu-item.active {
  color: var(--text);
  background: var(--panel-soft);
  border-color: rgba(240, 49, 155, .38);
  box-shadow: inset 3px 0 0 var(--accent);
}
.settings-menu-item:hover,
.settings-menu-item:focus-visible {
  transform: translateX(2px);
}
.editable-settings { display: grid; }
.setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr);
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}
.setting-row:first-child { border-top: 0; }
.setting-row-large {
  align-items: start;
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr);
}
.setting-copy h3 { margin: 0 0 .25rem; font-size: 1rem; }
.setting-copy p { margin: .4rem 0; color: var(--muted); }
.setting-copy small { color: var(--muted); overflow-wrap: anywhere; }
.setting-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: start; }
.setting-row-large .setting-form { grid-template-columns: 1fr; }
.setting-actions { display: flex; justify-content: flex-end; align-items: center; }
.setting-actions .button { width: auto; min-width: 5.5rem; }
.readonly-value {
  padding: .8rem .9rem;
  color: var(--muted);
  background: #101117;
  border: 1px solid var(--border);
  border-radius: .55rem;
  overflow-wrap: anywhere;
}
.operation-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.action-buttons { display: flex; flex-wrap: wrap; gap: .7rem; }
.checkbox-line {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--muted);
  font-weight: 700;
}
.checkbox-line input { width: auto; }
.compact-stack { gap: .55rem; justify-content: center; }
.operations-columns { margin: 1rem 0; }
details summary { color: var(--muted); cursor: pointer; }
.log-panel { padding: .85rem 0; border-top: 1px solid var(--border); }
.log-panel:first-of-type { border-top: 0; }
.log-output {
  max-height: 28rem;
  margin: .8rem 0 0;
  padding: 1rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #d9dae2;
  background: #0e0f14;
  border: 1px solid var(--border);
  border-radius: .6rem;
  font: .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.log-output.compact { max-height: 10rem; }
.button.small { display: inline-block; padding: .4rem .55rem; font-size: .78rem; text-decoration: none; }
.table-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.status-active { color: var(--good); }
.status-archived { color: var(--muted); background: var(--panel-soft); }
.status-error, .status-failed, .status-missing { color: var(--error); background: #32171c; }
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
}
.detail-grid > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-top: 1px solid var(--border);
}
.detail-grid span { color: var(--muted); }
.detail-grid strong { text-align: right; overflow-wrap: anywhere; }
.stat-preview { margin-top: 1rem; }
.stat-preview img {
  display: block;
  max-width: 100%;
  max-height: 22rem;
  border: 1px solid var(--border);
  border-radius: .7rem;
}
.theme-create-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.3fr) auto;
  gap: .8rem;
  align-items: end;
}
.theme-grid { display: grid; gap: 1rem; }
.theme-card { display: grid; gap: 1rem; }
.theme-card.theme-disabled { opacity: .72; }
.theme-preview {
  overflow: hidden;
  background: #0e0f14;
  border: 1px solid var(--border);
  border-radius: .7rem;
}
.theme-preview img { display: block; width: 100%; aspect-ratio: 4 / 1; object-fit: cover; }
.theme-card-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.theme-card-heading h2 { margin-bottom: .25rem; }
.theme-badges, .theme-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.compact-theme-form {
  grid-template-columns: minmax(180px, 1fr) minmax(100px, .35fr) minmax(220px, 1fr);
  align-items: end;
  margin-top: 0;
}
.compact-theme-form .checkbox-line { align-self: center; }
.compact-theme-form .button { justify-self: start; }
.knowledge-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(140px, .7fr));
  gap: .8rem;
  margin-bottom: 1rem;
}
.filter-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(150px, .7fr) auto;
  gap: .8rem;
  align-items: end;
  margin-bottom: 1rem;
}
.document-preview {
  max-height: 48rem;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #e7e7ed;
  background: #0e0f14;
  border: 1px solid var(--border);
  border-radius: .6rem;
  font: .86rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.knowledge-editor { min-height: 34rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.55; }
.ai-kb-editor { min-height: 32rem; }
.visibility-public { color: var(--good); }
.visibility-staff { color: var(--warning); background: #322817; }
.visibility-internal { color: var(--muted); background: var(--panel-soft); }
.status-found { color: var(--good); }
.status-empty, .status-unreadable { color: var(--warning); background: #322817; }
.subnav, .range-links, .limit-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1rem;
}
.subnav {
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--border);
}
.secondary-subnav { margin-top: -.45rem; font-size: .84rem; }
.subnav a, .limit-links a {
  padding: .4rem .6rem;
  color: var(--muted);
  border-radius: .45rem;
  text-decoration: none;
}
.subnav a:hover, .subnav a.active, .limit-links a:hover, .limit-links a.active {
  color: var(--text);
  background: var(--panel-soft);
}
.analytics-summary-grid { margin-top: 1rem; }
.bar-chart { display: grid; gap: .55rem; max-height: 42rem; overflow: auto; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) minmax(8rem, 1fr) minmax(4.5rem, auto);
  gap: .7rem;
  align-items: center;
  font-size: .82rem;
}
.bar-row strong { text-align: right; }
.bar-track { height: .75rem; overflow: hidden; background: var(--panel-soft); border-radius: 99px; }
.bar-track span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.heatmap-wrap { overflow-x: auto; }
.heatmap-table { min-width: 1050px; font-size: .72rem; }
.heatmap-table th, .heatmap-table td { padding: .32rem; text-align: center; }
.heatmap-table td { color: transparent; border: 2px solid var(--panel); }
.heatmap-table td span { font-size: 0; }
.heat-0 { background: #14151b; }
.heat-1 { background: #35152a; }
.heat-2 { background: #5c1740; }
.heat-3 { background: #8a1e5d; }
.heat-4 { background: #bd267d; }
.heat-5 { background: var(--accent); }
.discord-picker { display: grid; gap: .7rem; min-width: 0; }
.discord-picker-selected {
  padding: .75rem;
  background: #101117;
  border: 1px solid var(--border);
  border-radius: .75rem;
}
.discord-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.discord-picker-chip {
  padding: .32rem .5rem;
  color: var(--text);
  background: var(--accent-soft);
  border: 1px solid rgba(240, 49, 155, .35);
  border-radius: 999px;
  cursor: pointer;
}
.discord-picker-chip span { color: var(--muted); }
.discord-picker-chip.missing-chip {
  color: var(--warning);
  background: #322817;
  border-color: rgba(242, 191, 90, .35);
}
.discord-picker-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: end;
}
.discord-picker-search-label span { font-size: .78rem; font-weight: 750; }
.picker-browse { white-space: nowrap; }
.discord-picker-panel {
  max-height: 28rem;
  overflow-y: auto;
  background: #101117;
  border: 1px solid var(--border);
  border-radius: .8rem;
}
.discord-picker-panel[hidden] { display: none; }
.discord-picker-options {
  display: grid;
  gap: .55rem;
  padding: .65rem;
}
.discord-picker-group {
  overflow: hidden;
  background: #0d0e14;
  border: 1px solid var(--border);
  border-radius: .8rem;
}
.discord-picker-group-header,
.discord-picker-category-row {
  display: flex;
  gap: .6rem;
  align-items: center;
  padding: .65rem .75rem;
  background: var(--panel-soft);
  border-bottom: 1px solid var(--border);
}
.discord-picker-group-header { justify-content: space-between; }
.discord-picker-group-header strong { overflow-wrap: anywhere; }
.discord-picker-category-row .row-main { flex: 1; min-width: 0; }
.category-toggle {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  color: var(--text);
  background: #101117;
  border: 1px solid var(--border);
  border-radius: .45rem;
  cursor: pointer;
}
.discord-picker-group-rows { display: grid; }
.discord-picker-group-rows.collapsed { display: none; }
.discord-picker-status .alert { margin: 0; }
.discord-picker-status:empty { display: none; }
.discord-picker-options > .empty-state { margin: 0; }
.missing-panel {
  display: grid;
  gap: .45rem;
  padding: .75rem;
  color: var(--warning);
  background: #322817;
  border: 1px solid rgba(242, 191, 90, .35);
  border-radius: .75rem;
}
.missing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.discord-picker-option {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem .8rem;
  border-top: 1px solid var(--border);
}
.discord-picker-option:first-child { border-top: 0; }
.discord-picker-option input {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}
.row-main {
  display: grid;
  min-width: 0;
  gap: .12rem;
}
.row-title {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-meta {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  overflow-wrap: anywhere;
}
.role-swatch {
  flex: 0 0 auto;
  width: .9rem;
  height: .9rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
}
.channel-kind {
  flex: 0 0 auto;
  min-width: 1.2rem;
  color: var(--muted);
  text-align: center;
}
.picker-more { margin: .6rem; justify-self: center; }
.picker-note { padding: .7rem .85rem; }

@media (max-width: 850px) {
  .site-header { align-items: flex-start; flex-wrap: wrap; }
  nav { order: 3; flex: 0 0 100%; width: 100%; overflow-x: auto; }
  .site-header form { margin-left: auto; }
  .session-user { margin-left: auto; }
  .card-grid, .card-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-column { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-layout,
  .settings-layout > *,
  .settings-sidebar,
  .settings-menu { min-width: 0; max-width: 100%; }
  .settings-sidebar {
    position: static;
    overflow: hidden;
  }
  .settings-sidebar-heading { margin-bottom: .7rem; }
  .settings-menu {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    padding-bottom: .1rem;
  }
  .settings-menu-item:hover,
  .settings-menu-item:focus-visible {
    transform: none;
  }
  .setting-row, .setting-row-large { grid-template-columns: 1fr; }
  .discord-picker-controls { grid-template-columns: 1fr; }
  .discord-picker-category-row { align-items: flex-start; flex-wrap: wrap; }
  .discord-picker-category-row .row-main { flex-basis: calc(100% - 5rem); }
  .operation-actions { align-items: flex-start; flex-direction: column; }
  .knowledge-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-create-form, .compact-theme-form { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .container { width: min(100% - 1rem, 1180px); padding-top: 1rem; }
  .settings-sidebar { padding: .8rem; border-radius: .9rem; }
  .settings-menu-item { min-height: 2.45rem; padding: .62rem .72rem; }
  .settings-menu-item small { display: none; }
  .settings-section,
  .settings-section .setting-row,
  .setting-form,
  .discord-picker,
  .discord-picker-panel,
  .item-action-card,
  .target-command-form { min-width: 0; max-width: 100%; }
  .card-grid, .card-grid.three { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .settings-list > div { align-items: flex-start; flex-direction: column; }
  .settings-list span { max-width: 100%; text-align: left; }
  .setting-row { grid-template-columns: 1fr; }
  .row-title { white-space: normal; }
  .detail-grid { grid-template-columns: 1fr; }
  .knowledge-filters { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 5.8rem minmax(5rem, 1fr) 4rem; gap: .4rem; }
}

/* 2026 control-center refresh */
:root {
  --bg: #080910;
  --panel: rgba(23, 24, 34, .9);
  --panel-soft: #222431;
  --border: rgba(255, 255, 255, .1);
  --text: #f8f7fb;
  --muted: #aaa9b7;
  --accent: #ff3aa7;
  --accent-2: #8b5cf6;
  --accent-soft: rgba(240, 49, 155, .16);
  --dashboard-gradient-start: #f0319b;
  --dashboard-gradient-end: #6349d1;
  --shadow: 0 22px 65px rgba(0, 0, 0, .28);
}
body {
  background:
    radial-gradient(circle at 8% 0, color-mix(in srgb, var(--dashboard-gradient-start) 17%, transparent), transparent 28rem),
    radial-gradient(circle at 95% 8%, color-mix(in srgb, var(--dashboard-gradient-end) 17%, transparent), transparent 31rem),
    linear-gradient(180deg, color-mix(in srgb, var(--dashboard-gradient-end) 7%, #0d0d16) 0, var(--bg) 36rem);
  background-attachment: fixed;
  overflow-x: clip;
}
.site-header {
  gap: 1rem;
  padding: .68rem clamp(.85rem, 3vw, 1.6rem);
  background: rgba(9, 9, 16, .86);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .22);
  backdrop-filter: blur(20px) saturate(135%);
}
.brand { display: flex; align-items: center; gap: .7rem; min-width: max-content; }
.brand img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 5px 15px rgba(240, 49, 155, .25)); }
.brand span { display: grid; line-height: 1.05; }
.brand strong { font-size: .98rem; }
.brand small { margin-top: .28rem; color: var(--muted); font-size: .67rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.site-header nav { gap: .18rem; }
.site-header nav a { padding: .58rem .68rem; border: 1px solid transparent; font-size: .84rem; font-weight: 700; white-space: nowrap; }
.site-header nav a:hover { background: rgba(255, 255, 255, .06); }
.site-header nav a.active { color: white; background: linear-gradient(135deg, rgba(240, 49, 155, .2), rgba(139, 92, 246, .15)); border-color: rgba(240, 49, 155, .28); }
.mobile-menu-toggle,.mobile-menu-close,.mobile-nav-backdrop{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.owner-navigation { align-items: center; min-width: 0; }
.owner-navigation > a { padding-inline: .56rem; font-size: .8rem; }
.owner-home-link { display: grid; gap: .08rem; line-height: 1.05; }
.owner-home-link small { color: var(--muted); font-size: .58rem; font-weight: 650; text-transform: uppercase; }
.nav-group { position: relative; }
.nav-group > summary { display: flex; align-items: center; gap: .38rem; padding: .58rem .68rem; color: var(--muted); border: 1px solid transparent; border-radius: .55rem; cursor: pointer; font-size: .84rem; font-weight: 700; list-style: none; white-space: nowrap; transition: color .18s ease, background .18s ease, border-color .18s ease; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: "▾"; color: var(--muted); font-size: .7rem; transition: transform .16s ease; }
.nav-group[open] > summary::after { transform: rotate(180deg); }
.nav-group > summary:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.nav-group > summary.active { color: white; background: linear-gradient(135deg, rgba(240, 49, 155, .2), rgba(139, 92, 246, .15)); border-color: rgba(240, 49, 155, .28); }
.nav-group-menu { position: absolute; top: calc(100% + .55rem); left: 0; z-index: 30; display: grid; width: 16.5rem; padding: .45rem; background: rgba(13, 14, 22, .98); border: 1px solid rgba(255, 255, 255, .12); border-radius: .8rem; box-shadow: 0 24px 70px rgba(0, 0, 0, .48); backdrop-filter: blur(18px); }
.nav-group:not([open]) > .nav-group-menu { display: none; }
.nav-group-menu-right { right: 0; left: auto; }
.site-header .nav-group-menu a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .68rem .72rem; }
.nav-access { padding: .2rem .42rem; border-radius: 999px; font-size: .58rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.nav-access.public { color: #b9f5da; background: rgba(94, 211, 154, .16); }
.nav-access.member { color: #c9e6ff; background: rgba(91, 180, 255, .16); }
.nav-access.staff { color: #ffe0a3; background: rgba(242, 191, 90, .17); }
.nav-access.private { color: #ffd1ea; background: rgba(240, 49, 155, .18); }
.container { width: min(1240px, calc(100% - 2rem)); }
.page-heading { align-items: flex-start; margin-bottom: 1.5rem; }
.page-intro { max-width: 48rem; margin: .55rem 0 0; color: var(--muted); line-height: 1.55; }
.hero-heading h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
.card {
  background: linear-gradient(145deg, rgba(27, 28, 39, .94), rgba(20, 21, 30, .9));
  border-color: rgba(255, 255, 255, .09);
  border-radius: 1rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025), var(--shadow);
}
.card-grid > .card { box-shadow: 0 15px 45px rgba(0, 0, 0, .2); }
.button { border-radius: .68rem; background: linear-gradient(135deg, var(--accent), #d728bb); box-shadow: 0 7px 20px rgba(240, 49, 155, .16); transition: transform .15s ease, filter .15s ease; }
.button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.button.secondary { background: rgba(255, 255, 255, .075); box-shadow: none; }
input, select, textarea, .readonly-value { background: rgba(7, 8, 14, .68); border-color: rgba(255, 255, 255, .13); border-radius: .7rem; }
input:focus, select:focus, textarea:focus { border-color: rgba(240, 49, 155, .5); box-shadow: 0 0 0 4px rgba(240, 49, 155, .1); outline: none; }
.color-setting-control { display: flex; align-items: center; gap: .75rem; }
.color-setting-control input[type="color"] { width: 4.5rem; min-height: 3rem; padding: .25rem; cursor: pointer; }
.color-setting-control code { color: var(--muted); }
.dashboard-page-banner { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1800 / 620; max-height: 26rem; margin: 0 0 1.35rem; background: linear-gradient(135deg, var(--dashboard-gradient-start), var(--dashboard-gradient-end)); border: 1px solid rgba(255, 255, 255, .12); border-radius: 1.2rem; box-shadow: 0 22px 65px rgba(0, 0, 0, .28); }
.dashboard-page-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dashboard-theme-layout { align-items: start; }
.dashboard-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; min-width: 0; }
.dashboard-theme-card { overflow: hidden; background: linear-gradient(145deg, rgba(27, 28, 39, .96), rgba(18, 19, 28, .94)); border: 1px solid rgba(255, 255, 255, .1); border-radius: 1rem; box-shadow: var(--shadow); scroll-margin-top: 5rem; }
.dashboard-theme-preview { position: relative; display: grid; overflow: hidden; align-items: end; aspect-ratio: var(--theme-banner-ratio, 1800 / 620); min-height: 12rem; max-height: 30rem; background: linear-gradient(135deg, var(--theme-start), var(--theme-end)); }
.dashboard-theme-preview::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 25%, rgba(8, 9, 16, .9)); }
.dashboard-theme-preview > img, .dashboard-theme-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dashboard-theme-placeholder { display: grid; place-items: center; color: rgba(255, 255, 255, .72); background: linear-gradient(135deg, var(--theme-start), var(--theme-end)); }
.dashboard-theme-preview > div:last-child { position: relative; z-index: 2; padding: 1rem; }
.dashboard-theme-preview > div:last-child > span { font-size: 1.15rem; font-weight: 850; }
.dashboard-theme-preview p { max-width: 34rem; margin: .35rem 0 0; color: rgba(255, 255, 255, .85); font-size: .82rem; line-height: 1.45; }
.dashboard-theme-form { padding: 1rem; }
.dashboard-theme-access { display: flex; align-items: flex-start; gap: .65rem; padding: .7rem; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); border-radius: .7rem; }
.dashboard-theme-access small { color: var(--muted); line-height: 1.4; }
.dashboard-theme-access .access-badge { flex: 0 0 auto; }
.access-badge.public { color: #b9f5da; background: rgba(94, 211, 154, .16); }
.access-badge.member { color: #c9e6ff; background: rgba(91, 180, 255, .16); }
.access-badge.mixed { color: #ffe0a3; background: rgba(242, 191, 90, .17); }
.access-badge.private { color: #ffd1ea; background: rgba(240, 49, 155, .18); }
.dashboard-theme-color-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.dashboard-theme-color-row input[type="color"] { width: 100%; height: 3.2rem; padding: .22rem; cursor: pointer; }
.dashboard-theme-form input[type="file"] { width: 100%; }
.hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin: 0 0 1.15rem; }
.overview-hubs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hub-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; min-height: 5.5rem; padding: 1rem; color: var(--text); background: linear-gradient(145deg, rgba(29, 30, 43, .92), rgba(19, 20, 29, .9)); border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 14px 40px rgba(0, 0, 0, .2); text-decoration: none; transition: transform .16s ease, border-color .16s ease; }
.hub-card:hover { transform: translateY(-2px); border-color: rgba(240, 49, 155, .38); }
.hub-card > span:nth-child(2) { display: grid; min-width: 0; gap: .25rem; }
.hub-card small { color: var(--muted); line-height: 1.35; }
.hub-icon { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; background: linear-gradient(145deg, rgba(240, 49, 155, .18), rgba(139, 92, 246, .18)); border: 1px solid rgba(240, 49, 155, .2); border-radius: .75rem; font-size: 1.2rem; }
.hub-arrow { color: var(--accent); font-size: 1.25rem; }
.visual-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.visual-editor-card { overflow: hidden; background: rgba(9, 10, 16, .58); border: 1px solid var(--border); border-radius: .9rem; }
.banner-preview, .banner-placeholder { display: block; width: 100%; aspect-ratio: 4.26 / 1; object-fit: cover; background: linear-gradient(120deg, #2b1732, #1e2546); }
.banner-placeholder { display: grid; place-items: center; color: var(--muted); }
.visual-editor-body { padding: 1rem; }
.visual-editor-body h3 { margin: 0 0 .4rem; }
.compact-stack-form { margin-top: 1rem; }
.form-pair { display: grid; grid-template-columns: .7fr 1.3fr; gap: .75rem; }
.color-dot { width: 1.25rem; height: 1.25rem; background: var(--dot-color); border: 2px solid rgba(255, 255, 255, .55); border-radius: 999px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }
.compact-list { display: grid; }
.compact-list-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--border); }
.compact-list-row:first-child { border-top: 0; }
.compact-list-row > span:first-child { display: grid; gap: .2rem; }
.compact-list-row small { color: var(--muted); }
.settings-menu-item { gap: .7rem; }
.settings-menu-item > span:last-child { display: grid; gap: .22rem; }
.settings-menu-item small { color: var(--muted); font-size: .7rem; font-weight: 500; }
.settings-group-heading { margin-bottom: .35rem; }
.settings-group-heading h2 { margin-bottom: 0; font-size: 1.25rem; }
.technical-details { margin-top: .55rem; }
.technical-details summary { width: max-content; font-size: .77rem; }
.technical-details code, .technical-details small { display: block; margin-top: .4rem; }
.audit-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style-position: inside; }
.audit-details > summary span { color: var(--muted); font-size: .82rem; font-weight: 400; }
.audit-details[open] > summary { margin-bottom: 1rem; }
.login-card { width: min(460px, 100%); background: linear-gradient(145deg, rgba(29, 29, 42, .96), rgba(18, 19, 28, .96)); border-radius: 1.25rem; }
.login-brand { display: flex; align-items: center; gap: .85rem; }
.login-brand > div { min-width: 0; }
.login-brand img { flex: 0 0 auto; width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(240, 49, 155, .22)); }
.login-brand .eyebrow { margin: 0 0 .32rem; font-size: .66rem; line-height: 1.3; }
.login-brand h1 { margin: 0; font-size: clamp(1.55rem, 2.2vw, 1.82rem); line-height: 1.04; letter-spacing: -.025em; }
.banner-edit-preview { margin: 0 0 1rem; }
.banner-edit-preview img { width: 100%; aspect-ratio: 4.26 / 1; max-height: none; object-fit: cover; }
.metric { letter-spacing: -.025em; }
.target-command-notice { margin-bottom: 1rem; }
.target-command-notice p { margin: .45rem 0 0; color: var(--muted); line-height: 1.55; }
.target-command-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: 1rem;
  align-items: start;
}
.target-command-form { margin-top: 0; }
.picker-field { display: grid; gap: .45rem; }
.picker-field > label { color: var(--muted); font-size: .9rem; }
.picker-field > small, .target-command-form label small { color: var(--muted); line-height: 1.4; }
.form-divider { width: 100%; margin: .4rem 0; border: 0; border-top: 1px solid var(--border); }
.template-guide { padding: .9rem; background: rgba(7, 8, 14, .45); border: 1px solid var(--border); border-radius: .8rem; }
.template-guide > summary { color: var(--text); }
.template-guide p { margin: .65rem 0; }
.template-token-grid { display: flex; flex-wrap: wrap; gap: .45rem; }
.template-token {
  padding: .4rem .55rem;
  color: #ffd0ea;
  background: var(--accent-soft);
  border: 1px solid rgba(240, 49, 155, .28);
  border-radius: .55rem;
  cursor: pointer;
  font: .76rem ui-monospace, SFMono-Regular, Menlo, monospace;
}
.template-token:hover { color: white; border-color: rgba(240, 49, 155, .58); }
.target-command-preview-card { position: sticky; top: 5.2rem; }
.target-command-usage {
  margin-bottom: 1rem;
  padding: .75rem;
  color: #d9dcff;
  background: #11131d;
  border: 1px solid var(--border);
  border-radius: .7rem;
  font: .85rem ui-monospace, SFMono-Regular, Menlo, monospace;
}
.target-message-preview { margin: 0 0 .45rem; color: #d9dcff; }
.target-embed-preview {
  position: relative;
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  overflow: hidden;
  background: #20232d;
  border-radius: .38rem;
}
.target-embed-accent { background: var(--accent); }
.target-embed-copy { display: grid; gap: .42rem; padding: 1rem; }
.target-embed-copy strong { font-size: 1.05rem; }
.target-embed-copy p { margin: 0; color: #e5e7ef; white-space: pre-wrap; line-height: 1.5; }
.target-embed-copy small { color: #b5b8c7; }
.target-preview-note { margin: .9rem 0 0; font-size: .8rem; line-height: 1.45; }
.target-command-row code { font-size: .92rem; }

.item-command-intro { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; margin-bottom: 1rem; background: linear-gradient(135deg,rgba(240,49,155,.09),rgba(99,73,209,.08)); }
.item-command-intro > div { display: grid; grid-template-columns: auto 1fr; gap: .2rem .65rem; align-content: start; padding: .8rem; background: rgba(9,10,16,.46); border: 1px solid var(--border); border-radius: .8rem; }
.item-command-intro-icon { grid-row: span 2; display: grid; width: 2rem; aspect-ratio: 1; place-items: center; color: #fff; background: linear-gradient(135deg,var(--accent),#7657e8); border-radius: 50%; font-weight: 900; }
.item-command-intro p { grid-column: 2; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.item-command-editor-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; align-items: start; }
.item-command-form { margin-top: 0; }
.item-command-help { order: -1; position: static; display: grid; grid-template-columns: minmax(15rem,.35fr) minmax(0,1fr); gap: 1rem; align-items: start; background: linear-gradient(135deg,rgba(240,49,155,.08),rgba(99,73,209,.07)); }
.item-command-help h3 { margin: .45rem 0 0; padding: .8rem; color: #ffd4eb; background: #11131d; border: 1px solid var(--border); border-radius: .65rem; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; }
.item-command-help ol { display: flex; flex-wrap: wrap; gap: .55rem; margin: .45rem 0 0; padding: 0; list-style: none; }
.item-command-help li { flex: 1 1 12rem; padding: .7rem .75rem; background: rgba(255,255,255,.035); border: 1px solid var(--border); border-radius: .65rem; }
.item-action-builder { display: grid; gap: 1rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.item-action-type-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .7rem; }
.item-action-type-grid button { display: grid; grid-template-columns: auto 1fr; gap: .15rem .65rem; min-height: 6rem; padding: .9rem; color: var(--text); text-align: left; background: rgba(18,20,31,.76); border: 1px solid rgba(99,73,209,.4); border-radius: .85rem; cursor: pointer; }
.item-action-type-grid button:hover { border-color: var(--accent); transform: translateY(-1px); }
.item-action-type-grid button > span { grid-row: span 2; font-size: 1.35rem; }
.item-action-type-grid button small { color: var(--muted); }
.item-action-list { display: grid; gap: 1rem; }
.item-action-card { display: grid; gap: 1rem; padding: 1rem; background: linear-gradient(145deg,rgba(28,29,42,.96),rgba(13,14,22,.96)); border: 1px solid rgba(240,49,155,.2); border-radius: 1rem; box-shadow: inset 4px 0 var(--accent); }
.item-action-card > header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-bottom: .8rem; border-bottom: 1px solid var(--border); }
.item-action-card h4 { margin: .2rem 0 0; font-size: 1.08rem; }
.item-message-editor { display: grid; gap: 1rem; }
.item-mirror-option { display: grid; gap: .65rem; padding: .9rem 1rem; background: rgba(99,73,209,.08); border: 1px solid rgba(99,73,209,.32); border-radius: .85rem; }
.item-mirror-option > small { color: var(--muted); }
.item-message-editor textarea { resize: vertical; }
.item-embed-fields { display: grid; gap: .65rem; }
.item-embed-field-row { display: grid; grid-template-columns: minmax(9rem,.7fr) minmax(12rem,1.3fr) auto auto; gap: .65rem; align-items: end; padding: .75rem; background: rgba(255,255,255,.035); border: 1px solid var(--border); border-radius: .7rem; }
.item-embed-field-row .checkbox-line { align-self: center; }
.item-embed-mini-preview { display: grid; gap: .3rem; padding: .85rem 1rem; background: #20232d; border-left: 4px solid var(--item-preview-color); border-radius: .35rem; }
.item-embed-mini-preview span { color: #aeb2c3; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.item-embed-mini-preview p { margin: 0; color: #d9dce7; white-space: pre-wrap; }
.item-command-advanced { padding: 0; background: rgba(7,8,14,.45); border: 1px solid var(--border); border-radius: .9rem; }
.item-command-advanced > summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; cursor: pointer; }
.item-command-advanced > summary span { color: var(--muted); font-size: .82rem; }
.item-command-advanced > .stack { padding: 0 1rem 1rem; border-top: 1px solid var(--border); }

/* Queue tag control panel */
.queue-tags-page { min-width: 0; }
.queue-tag-preview-card {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(20rem, 1.2fr);
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(240,49,155,.1), rgba(99,73,209,.1));
}
.queue-tag-preview-card h2,
.queue-tag-editor-heading h2 { margin: .2rem 0 .35rem; }
.queue-tag-preview {
  display: flex;
  min-width: 0;
  gap: .4rem;
  align-items: center;
  padding: 1rem;
  overflow-x: auto;
  background: #20232d;
  border: 1px solid rgba(255,255,255,.09);
  border-left: 5px solid var(--accent);
  border-radius: .75rem;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.2);
}
.queue-tag-preview-position { padding: .22rem .4rem; color: #dce0ef; background: #303442; border-radius: .35rem; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; }
.queue-tag-preview-member { flex: 0 1 auto; min-width: 0; overflow: hidden; color: #dbe1ff; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.queue-tag-preview-labels { display: flex; flex: 0 0 auto; gap: .2rem; align-items: center; min-width: 0; color: #fff; white-space: nowrap; }
.queue-tag-preview-labels.is-empty { color: var(--muted); font-size: .82rem; }
.queue-tag-preview-marker { display: inline-flex; gap: .1rem; align-items: center; }
.queue-tag-preview-marker img { width: 1.35rem; height: 1.35rem; object-fit: contain; vertical-align: middle; }
.queue-tag-role-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.queue-tag-role-card { display: grid; min-width: 0; gap: .8rem; align-content: start; padding: 1rem; background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: .8rem; }
.queue-tag-role-card p { margin: .35rem 0 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.queue-tag-role-card .button { justify-self: start; }
.queue-custom-rule-create { margin-top: .8rem; overflow: hidden; border: 1px solid var(--border); border-radius: .8rem; background: rgba(255,255,255,.025); }
.queue-custom-rule-create summary { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .9rem 1rem; cursor: pointer; list-style: none; }
.queue-custom-rule-create summary::-webkit-details-marker { display: none; }
.queue-custom-rule-create summary > span:first-child { display: grid; }
.queue-custom-rule-create summary small { color: var(--muted); }
.queue-custom-rule-create[open] summary > span:last-child { transform: rotate(45deg); }
.queue-custom-rule-form { display: grid; grid-template-columns: minmax(10rem,1fr) minmax(14rem,1.4fr) minmax(15rem,1.3fr) 7rem auto auto; gap: .7rem; align-items: end; }
.queue-custom-rule-create .queue-custom-rule-form { padding: 1rem; border-top: 1px solid var(--border); }
.queue-custom-rule-form > label:not(.queue-tag-toggle) { display: grid; min-width: 0; gap: .35rem; }
.queue-custom-rule-list { display: grid; gap: .75rem; margin-top: 1rem; }
.queue-custom-rule-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .7rem; align-items: end; padding: .85rem; border: 1px solid var(--border); border-radius: .8rem; background: rgba(0,0,0,.14); }
.queue-custom-rule-card.queue-tag-disabled { opacity: .66; border-style: dashed; }
.queue-tag-editor { display: grid; min-width: 0; gap: 1rem; }
.queue-tag-editor-heading { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-end; padding: 1rem 0 .25rem; }
.queue-tag-list { display: grid; min-width: 0; gap: .8rem; }
.queue-tag-card { display: grid; min-width: 0; gap: 1rem; transition: opacity .18s ease,border-color .18s ease; }
.queue-tag-card.queue-tag-disabled { opacity: .62; border-style: dashed; }
.queue-tag-card-heading { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .85rem; align-items: center; }
.queue-tag-order-controls { display: grid; grid-template-columns: repeat(2,2.35rem); gap: .35rem; }
.queue-tag-order-controls .button { width: 2.35rem; min-width: 0; padding: .45rem; }
.queue-tag-title { display: grid; min-width: 0; grid-template-columns: max-content minmax(0,1fr); gap: .2rem .55rem; align-items: center; }
.queue-tag-title h3 { overflow-wrap: anywhere; margin: 0; }
.queue-tag-title code { grid-column: 1 / -1; color: var(--muted); font-size: .72rem; }
.queue-tag-toggle { display: flex; gap: .45rem; align-items: center; min-height: 2.5rem; padding: .45rem .65rem; background: rgba(255,255,255,.045); border: 1px solid var(--border); border-radius: 99px; font-size: .82rem; font-weight: 800; }
.queue-tag-toggle input { width: auto; }
.queue-tag-behavior-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.queue-tag-behavior-grid > div { min-width: 0; padding: .8rem; background: rgba(0,0,0,.16); border-radius: .7rem; }
.queue-tag-behavior-grid span { color: #ff91cc; font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.queue-tag-behavior-grid p { margin: .35rem 0 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.queue-tag-controls { display: grid; grid-template-columns: minmax(0,1fr) 8rem; gap: .8rem; align-items: end; }
.queue-tag-position input { text-align: center; }
.queue-tag-sticky-actions { position: sticky; z-index: 5; bottom: .75rem; display: flex; gap: 1rem; justify-content: space-between; align-items: center; padding: .85rem 1rem; background: rgba(18,19,29,.94); border: 1px solid rgba(240,49,155,.35); border-radius: .85rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.38); backdrop-filter: blur(12px); }
.queue-tag-sticky-actions span { color: var(--muted); font-size: .8rem; }
.artist-notice-editor { display: grid; gap: 1rem; padding: 1rem; background: linear-gradient(145deg,rgba(87,242,135,.07),rgba(99,73,209,.08)); border: 1px solid rgba(87,242,135,.26); border-radius: .9rem; }
.artist-notice-heading { display: flex; gap: 1rem; justify-content: space-between; align-items: start; }
.artist-notice-heading h4 { margin: .2rem 0 .35rem; font-size: 1.12rem; }
.artist-notice-heading p { margin-bottom: 0; }
.artist-notice-tokens { padding: .75rem .85rem; background: rgba(0,0,0,.16); border: 1px solid var(--border); border-radius: .7rem; }
.artist-notice-tokens summary { cursor: pointer; font-weight: 800; }
.artist-notice-tokens > div { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.artist-notice-tokens p { margin: .65rem 0 0; font-size: .8rem; }
.artist-notice-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(16rem,.75fr); gap: 1rem; align-items: start; }
.artist-notice-fields { display: grid; min-width: 0; gap: .8rem; }
.artist-notice-fields textarea { resize: vertical; }
.artist-notice-preview-wrap { display: grid; min-width: 0; gap: .5rem; }
.artist-notice-preview { position: relative; display: grid; min-width: 0; gap: .75rem; overflow: hidden; padding: .9rem; color: #f4f5fb; background: #20232d; border-left: 5px solid var(--artist-notice-color); border-radius: .45rem; transition: opacity .18s ease; }
.artist-notice-preview.is-disabled { opacity: .45; }
.artist-notice-preview-copy { display: grid; min-width: 0; gap: .45rem; padding-right: 3.75rem; }
.artist-notice-preview-copy small { color: #c4c7d4; overflow-wrap: anywhere; }
.artist-notice-preview-copy strong { font-size: 1.02rem; overflow-wrap: anywhere; }
.artist-notice-preview-copy p { margin: 0; color: #e0e2ea; font-size: .85rem; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.artist-notice-preview > img[data-artist-preview-thumbnail] { position: absolute; top: .75rem; right: .75rem; width: 3rem; height: 3rem; object-fit: cover; border-radius: .4rem; }
.artist-notice-preview .artist-notice-preview-image { width: calc(100% + 1.8rem); max-height: 10rem; margin: 0 -.9rem -.9rem; object-fit: cover; }
.item-access-stack { display: grid; gap: .7rem; }
.item-access-panel { overflow: hidden; background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: .8rem; }
.item-access-panel > summary { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .85rem 1rem; cursor: pointer; }
.item-access-panel > summary > span:first-child { display: grid; gap: .15rem; }
.item-access-panel > summary small { color: var(--muted); font-weight: 500; }
.item-access-panel > summary > span:last-child { color: var(--accent); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.item-access-panel[open] > summary { background: rgba(99,73,209,.09); border-bottom: 1px solid var(--border); }
.item-access-panel > .picker-field { padding: 1rem; }
.item-command-row code { font-size: .92rem; }
.item-effect-preview-button { border-color: rgba(255,210,75,.55); color: #241800; background: linear-gradient(135deg,#ffe46f,#f4ae32); white-space: nowrap; }
.item-effect-preview-button:hover,.item-effect-preview-button:focus-visible { color: #160d00; background: linear-gradient(135deg,#fff09b,#ffc44f); }
.item-effect-preview-row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: .8rem 0 1rem; padding: .75rem; border: 1px solid rgba(255,210,75,.2); border-radius: .75rem; background: rgba(255,210,75,.055); }
.item-effect-preview-row small { color: var(--muted); line-height: 1.4; }
.item-effect-preview-modal .wheel-winner-modal { isolation: isolate; }
.item-effect-preview-modal .item-effect-preview-note { display: block; margin-top: 1rem; color: rgba(255,255,255,.62); font-size: .76rem; line-height: 1.4; }
.item-effect-preview-modal .wheel-winner-avatar span { display: grid; width: 100%; height: 100%; place-items: center; font-size: 2rem; font-weight: 950; }

@media (max-width: 1050px) {
  .overview-hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .session-user { display: none; }
  .target-command-editor-layout { grid-template-columns: 1fr; }
  .target-command-preview-card { position: static; }
  .item-command-editor-layout { grid-template-columns: 1fr; }
  .item-command-help { position: static; }
}
@media (max-width: 1350px) {
  .session-user { display: none; }
  .site-header { gap: .55rem; padding-inline: .75rem; }
  .site-header nav a,
  .nav-group > summary { padding-inline: .48rem; font-size: .78rem; }
}
@media (max-width: 850px) {
  .site-header{z-index:10002;align-items:center!important;flex-wrap:nowrap!important;min-height:72px;gap:.65rem}
  .site-header .brand{min-width:0;margin-right:auto}
  .site-header .brand span{min-width:0}
  .site-header .brand strong{font-size:clamp(1rem,5vw,1.35rem);white-space:nowrap}
  .site-header .brand small,.site-header .session-user{display:none}
  .site-header .desktop-header-logout{display:none}
  .public-site-header .public-login-link{margin-left:0}
  .mobile-menu-toggle{display:grid;flex:0 0 46px;width:46px;height:46px;padding:11px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(12,10,20,.72);place-content:center;gap:5px}
  .mobile-menu-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:#fff}
  .site-header nav.site-navigation{position:fixed;z-index:10002;inset:0 auto 0 0;display:flex!important;flex-direction:column;align-items:stretch;order:initial;width:min(88vw,380px);max-width:none;height:100dvh;padding:5.25rem 1.1rem 2rem;overflow-x:hidden;overflow-y:auto;background:linear-gradient(165deg,rgba(35,17,43,.98),rgba(9,10,18,.99) 55%);border-right:1px solid rgba(240,49,155,.3);box-shadow:24px 0 70px rgba(0,0,0,.55);transform:translateX(-105%);transition:transform .22s ease;scrollbar-width:thin}
  .site-header nav.site-navigation.is-open{transform:translateX(0)}
  .site-header nav.site-navigation>a,.site-header nav.site-navigation>details{flex:0 0 auto;width:100%}
  .site-header nav.site-navigation a,.site-header nav.site-navigation summary{display:flex;min-height:48px;align-items:center;padding:.78rem .9rem;border-radius:10px;font-size:1rem}
  .site-header nav.site-navigation .mobile-nav-logout{display:block;width:100%;margin-top:auto;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}
  .site-header nav.site-navigation .mobile-nav-logout .button{width:100%;justify-content:center}
  .site-header .nav-group-menu{position:static;display:grid;width:100%;min-width:0;margin:.25rem 0 .5rem;padding:.35rem;background:rgba(255,255,255,.045);box-shadow:none}
  .site-header .nav-group:not([open]) .nav-group-menu{display:none}
  .mobile-menu-close{position:absolute;display:grid;top:1rem;right:1rem;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;font-size:2rem;line-height:1;place-items:center}
  .mobile-nav-backdrop{position:fixed;z-index:10001;inset:0;display:block;border:0;background:rgba(0,0,0,.68);backdrop-filter:none}
  .mobile-nav-backdrop[hidden]{display:none}
  body.mobile-nav-open{overflow:hidden}
  .hub-grid { grid-template-columns: 1fr; }
  .visual-editor-grid { grid-template-columns: 1fr; }
  .item-action-type-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .item-command-help { grid-template-columns: 1fr; }
  .queue-tag-preview-card { grid-template-columns: 1fr; }
  .artist-notice-layout { grid-template-columns: 1fr; }
}

.dashboard-body{background:
  radial-gradient(circle at 10% 0,color-mix(in srgb,var(--dashboard-gradient-start) 50%,transparent),transparent 38rem),
  radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--dashboard-gradient-end) 46%,transparent),transparent 40rem),
  linear-gradient(145deg,color-mix(in srgb,var(--dashboard-gradient-start) 42%,#17131f),color-mix(in srgb,var(--dashboard-gradient-end) 42%,#11131d)) fixed}
.dashboard-body .site-header{background:rgba(9,9,16,.58)}
.dashboard-body .card,
.dashboard-body .panel{background-color:rgba(17,17,29,.64)}
@media (max-width: 540px) {
  .site-legal-footer { flex-wrap: wrap; }
  .brand strong { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand small { display: none; }
  .brand img { width: 36px; height: 36px; }
  .overview-hubs { grid-template-columns: 1fr; }
  .form-pair { grid-template-columns: 1fr; }
  .compact-list-row { align-items: flex-start; flex-direction: column; }
  .audit-details > summary { align-items: flex-start; flex-direction: column; }
  .item-command-intro,.item-action-type-grid { grid-template-columns: 1fr; }
  .item-embed-field-row { grid-template-columns: 1fr; }
  .item-command-advanced > summary { flex-direction: column; }
  .item-command-row .table-actions { width: 100%; justify-content: flex-start; }
  .item-effect-preview-button { flex: 1 1 auto; }
  .item-effect-preview-row { align-items: stretch; flex-direction: column; }
  .queue-tag-role-grid,
  .queue-tag-behavior-grid,
  .queue-tag-controls { grid-template-columns: 1fr; }
  .queue-custom-rule-form,
  .queue-custom-rule-card { grid-template-columns: 1fr; }
  .queue-custom-rule-form .button,
  .queue-custom-rule-card form:last-child .button { width: 100%; }
  .queue-tag-editor-heading { align-items: flex-start; flex-direction: column; }
  .queue-tag-save-top { display: none; }
  .queue-tag-card { padding: .9rem; }
  .queue-tag-card-heading { grid-template-columns: auto minmax(0,1fr); align-items: start; }
  .queue-tag-toggle { grid-column: 1 / -1; justify-content: center; border-radius: .65rem; }
  .queue-tag-order-controls { grid-template-columns: 2.55rem; }
  .queue-tag-order-controls .button { width: 2.55rem; min-height: 2.4rem; }
  .queue-tag-title { grid-template-columns: 1fr; }
  .queue-tag-title code { grid-column: auto; overflow-wrap: anywhere; }
  .queue-tag-preview { padding: .8rem; }
  .queue-tag-sticky-actions { bottom: .45rem; align-items: stretch; flex-direction: column; }
  .queue-tag-sticky-actions .button { width: 100%; }
  .artist-notice-heading { flex-direction: column; }
  .artist-notice-heading .queue-tag-toggle { width: 100%; }
  .discord-picker-group-header,
  .discord-picker-category-row,
  .missing-row { min-width: 0; }
  .discord-picker-group-header strong,
  .discord-picker-category-row .row-title,
  .discord-picker-category-row .row-meta,
  .discord-picker-chip { overflow-wrap: anywhere; }
  .discord-picker-category-row .button,
  .missing-row .button { flex: 0 0 auto; }
  .item-action-card > header,
  .theme-card-heading,
  .section-heading { align-items: flex-start; flex-wrap: wrap; }
}

/* Immersive Riff Supremo brand layer */
body {
  background-size: 135% 135%, 145% 145%, 100% 100%;
  animation: ambient-shift 24s ease-in-out infinite alternate;
}
.dashboard-body::before,
.public-body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: .32;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}
.site-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 58, 167, .65), rgba(91, 214, 255, .55), transparent);
}
.site-header nav a {
  position: relative;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.site-header nav a:hover { transform: translateY(-1px); }
.dashboard-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 1.25rem;
  background: rgba(15, 16, 24, .86);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 1.35rem;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .34), 0 0 55px rgba(240, 49, 155, .08);
  isolation: isolate;
}
.dashboard-hero::before {
  position: absolute;
  inset: -1px;
  z-index: 2;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, .13), transparent 24%, transparent 72%, rgba(88, 209, 255, .12));
  mix-blend-mode: screen;
}
.dashboard-hero-art {
  position: relative;
  overflow: hidden;
  height: clamp(18rem, 32vw, 25rem);
  background: #18101c;
}
.dashboard-hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.03);
  transform: scale(1.008);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s ease;
}
.dashboard-hero:hover .dashboard-hero-art img {
  filter: saturate(1.13) contrast(1.04);
  transform: scale(1.025);
}
.dashboard-hero-art::after {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  content: "";
  background: linear-gradient(to bottom, transparent, rgba(11, 11, 18, .92));
}
.dashboard-hero-glow {
  position: absolute;
  inset: auto 12% -55% 12%;
  height: 65%;
  border-radius: 50%;
  background: rgba(240, 49, 155, .35);
  filter: blur(60px);
  animation: hero-pulse 5s ease-in-out infinite alternate;
}
.dashboard-hero-copy {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.25rem clamp(1.15rem, 3vw, 2rem) 1.5rem;
  background: linear-gradient(135deg, rgba(25, 25, 38, .97), rgba(16, 17, 26, .96));
}
.dashboard-hero-copy h1 { margin-bottom: .15rem; font-size: clamp(1.85rem, 4vw, 2.65rem); }

.tornado-manual-control { background: linear-gradient(145deg, rgba(124,58,237,.12), rgba(37,184,184,.07)); border-color: rgba(152,111,255,.3); }
.tornado-manual-control .section-heading { align-items: center; }
.tornado-manual-control .section-heading p:last-child { max-width: 52rem; }
.tornado-active-count { display: grid; min-width: 7rem; justify-items: end; }
.tornado-active-count strong { color: #c4b5fd; font-size: 2.5rem; line-height: 1; }
.tornado-active-count span { margin-top: .25rem; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tornado-action-status { margin: .75rem 0 0; }

@media (max-width: 620px) {
  .tornado-manual-control .section-heading { align-items: start; }
  .tornado-active-count { min-width: 0; justify-items: start; }
  .tornado-manual-control form .button { width: 100%; }
}
.dashboard-hero-copy .page-intro { margin-top: .35rem; }
.hero-live-status {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: max-content;
  padding: .72rem .9rem;
  color: #eafcf4;
  background: rgba(14, 111, 73, .14);
  border: 1px solid rgba(94, 211, 154, .22);
  border-radius: .85rem;
}
.hero-live-status > span:last-child { display: grid; gap: .15rem; }
.hero-live-status strong { font-size: .78rem; }
.hero-live-status small { color: var(--muted); font-size: .68rem; }
.live-dot {
  width: .58rem;
  height: .58rem;
  background: var(--good);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(94, 211, 154, .1), 0 0 18px rgba(94, 211, 154, .55);
  animation: live-pulse 2.2s ease-in-out infinite;
}
.overview-hubs .hub-card { overflow: hidden; position: relative; }
.overview-hubs .hub-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  opacity: .55;
  background: linear-gradient(to bottom, var(--accent), #5bd6ff);
  transition: width .18s ease, opacity .18s ease;
}
.overview-hubs .hub-card:hover::before { width: 5px; opacity: 1; }
.card-grid > .card {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card-grid > .card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 58, 167, .23);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .3), 0 0 25px rgba(240, 49, 155, .05);
}
.status-list > div { transition: background .16s ease, padding .16s ease; }
.status-list > div:hover {
  margin: 0 -.55rem;
  padding-right: .55rem;
  padding-left: .55rem;
  background: rgba(255, 255, 255, .025);
  border-radius: .5rem;
}
.button:focus-visible,
a:focus-visible {
  outline: 2px solid #67d7ff;
  outline-offset: 3px;
}
.login-shell {
  width: 100%;
  min-height: calc(100vh - 3.2rem);
  padding: clamp(1rem, 4vw, 3rem);
}
.login-experience {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  width: min(1120px, 100%);
  overflow: hidden;
  background: rgba(15, 16, 24, .86);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 1.5rem;
  box-shadow: 0 35px 110px rgba(0, 0, 0, .43), 0 0 70px rgba(240, 49, 155, .08);
}
.login-art {
  position: relative;
  min-height: 34rem;
  overflow: hidden;
  background: #160f1b;
}
.login-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.04);
  transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}
.login-experience:hover .login-art > img { transform: scale(1.025); }
.login-art::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 35%, rgba(8, 9, 16, .22) 60%, rgba(8, 9, 16, .95));
}
.login-art-copy {
  position: absolute;
  right: clamp(1.25rem, 4vw, 2.5rem);
  bottom: clamp(1.25rem, 4vw, 2.5rem);
  left: clamp(1.25rem, 4vw, 2.5rem);
  z-index: 2;
}
.login-art-copy p {
  max-width: 34rem;
  margin: .85rem 0 0;
  color: #f3eff6;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 650;
  line-height: 1.5;
  text-shadow: 0 2px 15px rgba(0, 0, 0, .8);
}
.experience-pill {
  display: inline-flex;
  padding: .45rem .65rem;
  color: white;
  background: rgba(255, 58, 167, .22);
  border: 1px solid rgba(255, 137, 201, .4);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.login-experience .login-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  background:
    radial-gradient(circle at 100% 0, rgba(139, 92, 246, .12), transparent 18rem),
    linear-gradient(145deg, rgba(29, 29, 42, .98), rgba(15, 16, 25, .98));
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .1);
  border-radius: 0;
  box-shadow: none;
}
.login-experience .login-card > .muted { max-width: 29ch; margin: 1rem 0 0; font-size: .88rem; line-height: 1.42; }
.login-experience .button { min-height: 2.85rem; }
.login-experience .discord-button { display: grid; place-items: center; text-decoration: none; }
.login-experience .login-card > .discord-button { margin-top: 1.8rem; }

@keyframes ambient-shift {
  from { background-position: 0 0, 100% 0, 0 0; }
  to { background-position: 8% 4%, 92% 8%, 0 0; }
}
@keyframes hero-pulse {
  from { opacity: .36; transform: scale(.9); }
  to { opacity: .72; transform: scale(1.08); }
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .68; transform: scale(.85); }
}
@media (max-width: 900px) {
  .login-experience { grid-template-columns: 1fr; width: min(680px, 100%); }
  .login-art { min-height: 20rem; }
  .login-experience .login-card { border-top: 1px solid rgba(255, 255, 255, .1); border-left: 0; }
}
@media (max-width: 700px) {
  .dashboard-hero-art { height: 15rem; }
  .dashboard-hero-copy { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .hero-live-status { width: 100%; min-width: 0; }
}
@media (max-width: 540px) {
  .container { width: min(100% - 1rem, 1240px); padding-top: 1rem; }
  .dashboard-hero { border-radius: 1rem; }
  .dashboard-hero-art { height: 13.5rem; }
  .dashboard-hero-copy { padding: 1rem; }
  .hero-live-status small { font-size: .62rem; }
  .login-shell { padding: .55rem; }
  .login-experience { border-radius: 1rem; }
  .login-art { min-height: 15rem; }
  .login-art-copy p { font-size: .95rem; }
  .login-brand img { width: 58px; height: 58px; }
  .login-brand h1 { font-size: 1.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Public leaderboard gallery */
.public-site-header .public-login-link { margin-left: auto; text-decoration: none; }
.public-leaderboards-page {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 1rem 0 4rem;
}
.public-leaderboards-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  overflow: hidden;
  margin-bottom: 1.25rem;
  background: linear-gradient(145deg, rgba(29, 25, 42, .98), rgba(17, 19, 28, .98));
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 1.35rem;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .34), 0 0 45px rgba(240, 49, 155, .07);
}
.public-leaderboards-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 58, 167, .08), rgba(91, 214, 255, .06));
}
.public-leaderboards-hero > img {
  width: 100%;
  height: 100%;
  min-height: 21rem;
  object-fit: cover;
  object-position: center;
}
.public-leaderboards-hero > div {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3.5rem);
}
.public-leaderboards-hero h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); }
.public-leaderboards-hero > div > p:not(.eyebrow) {
  max-width: 42rem;
  color: #d8d7e1;
  line-height: 1.7;
}
.public-leaderboards-hero .guide-quick-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 0 0 auto;
  width: 100%;
  align-items: stretch;
}
.public-leaderboards-hero .guide-quick-links a {
  width: 100%;
  min-height: 2.7rem;
  padding: .55rem .65rem;
  border-radius: .7rem;
  text-align: center;
}
.public-gallery-section {
  padding: clamp(1.25rem, 3vw, 1.8rem) 0;
  scroll-margin-top: 6rem;
}
.public-gallery-section + .public-gallery-section {
  border-top: 1px solid rgba(255, 255, 255, .065);
}
.public-gallery-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.public-gallery-heading h2,
.public-gallery-heading p { margin-bottom: 0; }
.public-gallery-heading h2 { margin-top: .25rem; font-size: clamp(1.45rem, 3vw, 2rem); }
.public-gallery-heading > span {
  color: var(--muted);
  font-size: .8rem;
}
.public-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
}
.public-board-grid.masonry-ready {
  grid-auto-rows: 8px;
}
.community-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.public-board-card {
  --board-accent: var(--accent);
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: linear-gradient(145deg, rgba(27, 28, 39, .96), rgba(16, 17, 25, .96));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 1rem;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .24);
}
.public-board-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 3;
  width: 3px;
  content: "";
  background: var(--board-accent);
  box-shadow: 0 0 22px var(--board-accent);
}
.public-board-card.featured-board { width: 100%; }
.accent-chat { --board-accent: #f03b9f; }
.accent-voice { --board-accent: #7c74ff; }
.accent-bump { --board-accent: #25b8b8; }
.public-board-banner {
  display: block;
  width: 100%;
  aspect-ratio: 4.26 / 1;
  object-fit: cover;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.public-board-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.15rem .9rem;
}
.public-board-card > header h3 { margin: 0; font-size: 1.18rem; }
.public-board-card > header p { margin: .3rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.public-board-card > header > span {
  flex: 0 0 auto;
  padding: .35rem .55rem;
  color: #d5d4de;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  font-size: .7rem;
}
.public-board-kicker {
  color: #f7b5da !important;
  font-size: .66rem !important;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.public-ranking-list,
.public-roster-list {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: 0 .8rem .85rem;
  list-style: none;
}
.public-ranking-list li,
.public-roster-list li {
  display: grid;
  grid-template-columns: 2.2rem 2.15rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem;
  min-height: 3.6rem;
  padding: .48rem .62rem;
  background: rgba(255, 255, 255, .038);
  border: 1px solid rgba(255, 255, 255, .045);
  border-radius: .72rem;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.public-ranking-list li:hover,
.public-roster-list li:hover {
  background: rgba(255, 255, 255, .065);
  border-color: rgba(255, 255, 255, .09);
  transform: translateX(2px);
}
.public-rank { color: var(--muted); font-size: .8rem; font-weight: 800; }
.public-rank.podium { color: #ffd86b; }
.public-member-avatar {
  position: relative;
  overflow: hidden;
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  color: white;
  background: linear-gradient(145deg, rgba(240, 49, 155, .88), rgba(94, 80, 210, .88));
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  font-size: .76rem;
  font-weight: 850;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .07), 0 .2rem .65rem rgba(0, 0, 0, .22);
}
.public-member-avatar > span { position: relative; z-index: 0; }
.public-member-avatar > img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.public-member-identity,
.public-roster-list li > span:last-child { display: grid; min-width: 0; gap: .1rem; }
.public-member-identity strong,
.public-member-identity small,
.public-roster-list strong,
.public-roster-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.public-member-identity strong,
.public-roster-list strong { font-size: .82rem; }
.public-member-identity small,
.public-roster-list small { color: var(--muted); font-size: .68rem; }
.public-score {
  padding: .42rem .58rem;
  color: #f7f6fb;
  background: rgba(255, 255, 255, .065);
  border-radius: .55rem;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.public-roster-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.public-roster-list li { grid-template-columns: 2.15rem minmax(0, 1fr); }
.public-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: .72rem;
}
.public-pager a,
.public-pager span { color: var(--muted); text-decoration: none; }
.public-pager a:last-child,
.public-pager span:last-child { text-align: right; }
.public-pager a:hover { color: white; }
.public-pager strong { font-size: .7rem; }
.public-board-empty {
  margin: 0 .8rem .8rem;
  padding: 1.25rem;
  color: var(--muted);
  background: rgba(255, 255, 255, .025);
  border: 1px dashed rgba(255, 255, 255, .09);
  border-radius: .7rem;
  text-align: center;
}
.public-gallery-updated { margin: 2rem 0 0; color: var(--muted); font-size: .75rem; text-align: center; }

@media (max-width: 850px) {
  .public-leaderboards-hero { grid-template-columns: 1fr; }
  .public-leaderboards-hero > img { min-height: 15rem; max-height: 20rem; }
  .public-board-grid,
  .community-board-grid { grid-template-columns: 1fr; }
  .public-board-grid.masonry-ready { grid-auto-rows: auto; }
  .public-board-grid.masonry-ready > * { grid-row-end: auto !important; }
}
@media (max-width: 620px) {
  .public-site-header { flex-wrap: nowrap; }
  .public-site-header nav.site-navigation { order: initial; width: min(88vw,380px); overflow-x: hidden; }
  .public-login-link { margin-left: auto; }
  .public-leaderboards-page { padding-top: 0; }
  .public-leaderboards-hero { border-radius: 1rem; }
  .public-leaderboards-hero > div { padding: 1.25rem; }
  .public-leaderboards-hero .guide-quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .public-leaderboards-hero .guide-quick-links a { min-width: 0; min-height: 2.65rem; white-space: normal; }
  .public-gallery-heading { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .public-roster-list { grid-template-columns: 1fr; }
  .public-ranking-list li { grid-template-columns: 1.8rem 2rem minmax(0, 1fr) auto; padding: .42rem; }
  .public-member-avatar { width: 2rem; height: 2rem; }
}

/* Artist Profile Studio — Design A */
.artist-profile-page { display: grid; gap: 1.4rem; }
.artist-profile-gradient-body {
  background: linear-gradient(145deg, var(--artist-page-bg-start), var(--artist-page-bg-end)) fixed;
}
.student-tier-profile-body {
  min-height: 100vh;
  background-color: var(--student-tier-page-start);
  background-image: linear-gradient(145deg, var(--student-tier-page-start), var(--student-tier-page-end));
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
.artist-profile-page.artist-profile-custom-background {
  position: relative;
  isolation: isolate;
  padding: clamp(.75rem, 2vw, 1.5rem);
  border-radius: 1.35rem;
}
.artist-profile-page.artist-profile-custom-background::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(145deg, var(--artist-page-bg-start), var(--artist-page-bg-end));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: inherit;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .25);
}
.artist-page-heading { align-items: center; }
.artist-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .65rem; }
.artist-preview-toggle {
  color: #fff;
  background: linear-gradient(135deg, #f0319b, #d728bb);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 .45rem 1.3rem rgba(240, 49, 155, .3);
  font-weight: 800;
}
.artist-preview-toggle:hover,
.artist-preview-toggle:focus-visible { color: #fff; box-shadow: 0 .55rem 1.55rem rgba(240, 49, 155, .42); }
.artist-member-selector { display: flex; align-items: end; gap: .8rem; padding: 1rem 1.2rem; }
.artist-member-selector label { width: min(100%, 34rem); }
.artist-member-search-wrap { position: relative; display: block; }
.artist-member-search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + .35rem);
  right: 0;
  left: 0;
  overflow-y: auto;
  max-height: 22rem;
  padding: .4rem;
  background: rgba(17, 17, 27, .98);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: .8rem;
  box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, .5);
}
.artist-member-search-results button {
  display: grid;
  width: 100%;
  gap: .15rem;
  padding: .65rem .75rem;
  color: #fff;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: .55rem;
  cursor: pointer;
}
.artist-member-search-results button:hover,
.artist-member-search-results button:focus-visible { background: rgba(240, 49, 155, .18); outline: none; }
.artist-member-search-results button span { color: var(--muted); font-size: .78rem; }
.artist-member-search-empty { display: block; padding: .7rem .75rem; color: var(--muted); }
.artist-design-a-card {
  overflow: hidden;
  background: linear-gradient(145deg, var(--artist-bg-start, #0c0e15), var(--artist-bg-end, #211226));
  border: 1px solid var(--artist-accent, #f0319b);
  border-radius: 1.2rem;
  box-shadow: 0 1.3rem 3.8rem rgba(0, 0, 0, .28);
}
.artist-design-a-banner {
  position: relative;
  min-height: 17rem;
  overflow: hidden;
  background:
    linear-gradient(120deg, var(--artist-bg-start, #211833), var(--artist-accent, #f0319b), var(--artist-bg-end, #152d42));
}
.artist-design-a-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(13, 15, 23, .8));
}
.artist-design-a-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.artist-design-a-banner span {
  position: absolute;
  z-index: 2;
  top: 1.4rem;
  right: 1.4rem;
  padding: .45rem .72rem;
  color: #fff;
  background: rgba(8, 10, 18, .66);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.artist-design-a-identity {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.1rem;
  padding: 0 2rem 1.6rem;
  margin-top: -5rem;
}
.artist-design-a-avatar {
  display: grid;
  width: 9rem;
  height: 9rem;
  overflow: hidden;
  place-items: center;
  color: white;
  background: linear-gradient(145deg, var(--artist-accent, #f0319b), var(--artist-bg-end, #6550d6));
  border: .3rem solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  box-shadow: 0 0 0 .16rem rgba(255, 255, 255, .18), 0 0 1.25rem rgba(255, 255, 255, .24), 0 .8rem 2rem rgba(0, 0, 0, .32);
  font-size: 2.5rem;
  font-weight: 800;
}
.artist-design-a-avatar img { width: 100%; height: 100%; object-fit: cover; }
.artist-design-a-identity h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); }
.artist-design-a-identity p { margin: .2rem 0 .3rem; color: var(--muted); }
.artist-revision { margin-bottom: .45rem; color: var(--muted); font-size: .72rem; }
.artist-design-a-content {
  display: grid;
  grid-template-columns: minmax(17rem, .82fr) minmax(26rem, 1.35fr);
  gap: 1.7rem;
  padding: 0 2rem 2rem;
}
.artist-profile-story { display: grid; align-content: start; gap: 1rem; }
.artist-spotlight-preview {
  display: grid;
  min-height: 19rem;
  overflow: hidden;
  place-items: end start;
  padding: 0;
  color: white;
  background:
    radial-gradient(circle at 25% 30%, rgba(240, 49, 155, .55), transparent 28%),
    linear-gradient(145deg, #20223c, #193542);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 1rem;
  box-shadow: 0 0 1.4rem rgba(255, 255, 255, .16), inset 0 0 .8rem rgba(255, 255, 255, .08);
}
.artist-spotlight-preview img { width: 100%; height: 100%; min-height: 19rem; object-fit: cover; }
.artist-spotlight-preview span { margin: 1rem; padding: .36rem .6rem; background: rgba(0, 0, 0, .48); border-radius: 999px; }
.artist-bio { margin: 0; color: #eae8f0; font-size: 1rem; line-height: 1.65; }
.artist-favorites { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 0; }
.artist-favorites div { padding: .8rem 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.artist-favorites dt,
.artist-latest-song > span { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.artist-favorites dd { margin: .25rem 0 0; font-weight: 800; }
.artist-favorites .artist-wide-detail { grid-column: 1 / -1; }
.artist-latest-song { display: grid; gap: .16rem; padding: 1rem; background: rgba(255, 255, 255, .07); border-left: 3px solid #fff; border-radius: .7rem; }
.artist-latest-song strong { font-size: 1.05rem; }
.artist-latest-song small { color: var(--muted); }
.artist-songbook > header { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: .55rem; }
.artist-songbook > header .eyebrow { color: #fff; }
.artist-songbook > header h3 { margin: 0; font-size: 1.5rem; }
.artist-songbook-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.artist-songbook-stats > span { padding: .4rem .65rem; background: rgba(255, 255, 255, .075); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; font-size: .75rem; white-space: nowrap; }
.artist-songbook ol { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.artist-songbook li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto auto;
  gap: .7rem;
  align-items: center;
  padding: .62rem;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: .72rem;
}
.artist-song-number { color: var(--muted); font-size: .75rem; font-weight: 800; text-align: center; }
.artist-songbook li.artist-signature-song { background: color-mix(in srgb, #dcae4b 12%, rgba(255, 255, 255, .035)); border-color: rgba(220, 174, 75, .52); }
.artist-signature-song .artist-song-number { color: #efcb76; font-size: 1rem; }
.artist-signature-label { display: inline-flex; flex: 0 0 auto; align-items: center; padding: .22rem .42rem; color: #ffe2a0 !important; background: rgba(220, 174, 75, .13); border: 1px solid rgba(220, 174, 75, .42); border-radius: 999px; font-size: .62rem !important; font-weight: 800; letter-spacing: .04em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.artist-public-song { display: grid; gap: .12rem; min-width: 0; }
.artist-song-title { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.artist-song-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-width: 0; }
.artist-song-meta time,
.artist-song-date-row { color: rgba(255, 255, 255, .52); font-size: .62rem; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.artist-public-song strong,
.artist-public-song span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-public-song span { color: var(--muted); font-size: .8rem; }
.artist-song-repeat { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 2.1rem; padding: .24rem .45rem; color: #fff !important; background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; font-size: .7rem !important; font-weight: 800; line-height: 1; }
.artist-public-preview .artist-songbook li { grid-template-columns: 2rem minmax(0, 1fr); padding: .78rem; }
.artist-song-edit-form { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: .5rem; align-items: end; min-width: 0; }
.artist-song-edit-form label { min-width: 0; color: var(--muted); font-size: .62rem; }
.artist-song-edit-form input { width: 100%; margin-top: .2rem; padding: .5rem .58rem; }
.artist-dashboard-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .7rem; margin-top: .8rem; }
.artist-dashboard-pager > :last-child { justify-self: end; }
.artist-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.artist-editor-panel { padding: 1.2rem; }
.artist-editor-panel header h2 { margin: 0; }
.artist-upload-stack { display: grid; gap: .9rem; }
.artist-color-controls { margin: .2rem 0; padding: .9rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: .75rem; }
.artist-color-controls legend { padding: 0 .35rem; font-weight: 800; }
.artist-color-controls p { margin: 0 0 .8rem; }
.artist-color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.artist-page-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.artist-color-grid input[type="color"] { width: 100%; height: 3rem; padding: .22rem; cursor: pointer; }
.artist-batch-song-form { gap: .7rem; }
.artist-batch-song-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin: 0;
  padding: .7rem;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: .75rem;
}
.artist-batch-song-row legend { padding: 0 .35rem; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.artist-profile-page .artist-design-a-card :is(
  .artist-design-a-identity p,
  .artist-revision,
  .artist-favorites dt,
  .artist-latest-song > span,
  .artist-latest-song small,
  .artist-song-number,
  .artist-public-song span,
  .artist-song-meta time,
  .artist-song-date-row
) { color: rgba(255, 255, 255, .88); }
@media (max-width: 980px) {
  .dashboard-theme-grid { grid-template-columns: 1fr; }
  .artist-design-a-content { grid-template-columns: 1fr; }
  .artist-spotlight-preview { min-height: 16rem; }
  .artist-editor-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .dashboard-page-banner { border-radius: .85rem; }
  .artist-design-a-banner { min-height: 12rem; }
  .artist-design-a-identity { grid-template-columns: auto minmax(0, 1fr); padding: 0 1rem 1rem; margin-top: -3.5rem; }
  .artist-design-a-avatar { width: 6.5rem; height: 6.5rem; }
  .artist-revision { display: none; }
  .artist-design-a-content { padding: 0 1rem 1rem; }
  .artist-spotlight-preview {
    width: min(100%, 25rem);
    min-height: 0;
    max-height: none;
    aspect-ratio: 1;
    justify-self: center;
  }
  .artist-spotlight-preview img {
    height: 100%;
    min-height: 0;
    object-fit: cover;
  }
  .artist-public-preview .artist-design-a-identity p,
  .artist-public-preview .artist-favorites dt,
  .artist-public-preview .artist-latest-song > span,
  .artist-public-preview .artist-latest-song small,
  .artist-public-preview .artist-song-meta span,
  .artist-public-preview .artist-song-number,
  .artist-public-preview .artist-song-meta time {
    color: rgba(255, 255, 255, .9);
  }
  .artist-songbook li { grid-template-columns: 1.7rem minmax(0, 1fr); }
  .artist-song-date-row { grid-column: 2; }
  .artist-songbook li > form:last-child { grid-column: 2; }
  .artist-song-edit-form { grid-template-columns: 1fr; }
  .artist-songbook > header { align-items: flex-start; flex-direction: column; }
  .artist-songbook-stats { justify-content: flex-start; }
  .artist-favorites { grid-template-columns: 1fr; }
  .artist-member-selector { align-items: stretch; flex-direction: column; }
  .artist-heading-actions { justify-content: flex-start; }
  .artist-batch-song-row { grid-template-columns: 1fr; }
  .artist-color-grid { grid-template-columns: 1fr; }
}

/* Member Artist Directory */
.artist-directory-page { display: grid; gap: 2rem; }
.artist-directory-heading { align-items: end; }
.artist-directory-section { display: grid; gap: 1rem; }
.artist-directory-section > header h2 { margin: 0; }
.featured-profile-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .85rem; }
.featured-profile-card,
.artist-directory-card,
.your-profile-card {
  color: #fff;
  background: linear-gradient(145deg, var(--artist-bg-start, #0c0e15), var(--artist-bg-end, #211226));
  border: 1px solid color-mix(in srgb, var(--artist-accent, #f0319b) 72%, white 8%);
  box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .2);
}
.featured-profile-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  min-width: 0;
  overflow: hidden;
  border-radius: 1rem;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
.featured-profile-card:hover,
.artist-directory-card:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .3); }
.featured-profile-card > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.featured-profile-card > span {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  left: .55rem;
  padding: .45rem .6rem;
  color: #fff;
  background: rgba(8, 9, 14, .86);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: .6rem;
  font-size: .68rem;
  font-weight: 800;
  text-align: center;
  opacity: 0;
  transform: translateY(.35rem);
  transition: opacity .16s ease, transform .16s ease;
}
.featured-profile-card:hover > span,
.featured-profile-card:focus-visible > span { opacity: 1; transform: translateY(0); }
.directory-card-avatar {
  display: grid;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--artist-accent, #f0319b), var(--artist-bg-end, #211226));
  border: 2px solid var(--artist-accent, #f0319b);
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 800;
}
.directory-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.featured-profile-manager { padding: 1rem 1.2rem; }
.featured-profile-manager summary { cursor: pointer; font-weight: 800; }
.featured-profile-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem; margin-top: 1rem; }
.featured-profile-form .featured-profile-count { grid-column: 1 / -1; max-width: 18rem; }
.featured-profile-form .button { grid-column: 1 / -1; justify-self: start; }
.your-profile-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.2rem;
  border-radius: 1rem;
}
.your-profile-card h3,
.your-profile-card p { margin: 0; }
.your-profile-card p { color: rgba(255, 255, 255, .68); }
.your-profile-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.artist-directory-list-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.artist-directory-search { width: min(100%, 22rem); }
.artist-directory-search span { color: var(--muted); font-size: .7rem; }
.artist-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.artist-directory-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: center;
  min-width: 0;
  padding: .9rem;
  border-radius: .9rem;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
.artist-directory-card .directory-card-avatar { width: 3.25rem; height: 3.25rem; font-size: 1.15rem; }
.artist-directory-card-copy { min-width: 0; }
.artist-directory-card-copy h3,
.artist-directory-card-copy p,
.artist-directory-card-copy span { display: block; overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.artist-directory-card-copy p,
.artist-directory-card-copy span { color: rgba(255, 255, 255, .65); font-size: .76rem; }
.artist-directory-card > strong { color: var(--artist-accent, #f0319b); font-size: 1.2rem; }
@media (max-width: 1100px) {
  .featured-profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .featured-profile-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .artist-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .featured-profile-form,
  .artist-directory-grid { grid-template-columns: 1fr; }
  .featured-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .your-profile-card { grid-template-columns: auto minmax(0, 1fr); }
  .your-profile-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .artist-directory-list-heading { align-items: stretch; flex-direction: column; }
  .artist-directory-search { width: 100%; }
}

/* Public Events */
.public-events-page { display: grid; gap: 2.25rem; }
.public-events-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(19, 20, 31, .96), rgba(48, 20, 46, .94));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1.35rem;
  box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, .28);
}
.public-events-hero-art { aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; }
.public-events-hero-art img { width: 100%; height: 100%; object-fit: cover; }
.public-events-hero > div:last-child { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); }
.public-events-hero h1 { margin: .15rem 0 .7rem; font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: .95; }
.public-events-hero p:not(.eyebrow) { max-width: 32rem; color: var(--muted); font-size: 1.03rem; }
.public-events-hero-actions,
.public-event-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.public-events-hero-actions { margin-top: 1rem; }
.public-events-list,
.public-events-month,
.public-events-calendar-section { display: grid; gap: 1rem; }
.public-events-section-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.public-events-section-heading h2,
.public-events-month > h3 { margin: 0; }
.public-events-section-heading > span { color: var(--muted); }
.public-events-month { margin-top: .75rem; }
.public-events-month > h3 { color: rgba(255, 255, 255, .72); font-size: .88rem; letter-spacing: .08em; text-transform: uppercase; }
.public-event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.public-event-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(27, 28, 39, .96), rgba(42, 23, 38, .94));
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 1.1rem;
  box-shadow: 0 .8rem 2.2rem rgba(0, 0, 0, .2);
}
.public-event-art { position: relative; aspect-ratio: 5 / 2; min-height: 0; overflow: hidden; background: linear-gradient(145deg, #5b1648, #201a3d); }
.public-event-art::before { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.16); font-size: 4rem; }
.public-event-art::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(5, 6, 10, .92)); }
.public-event-art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.public-event-date { position: absolute; z-index: 3; right: .8rem; bottom: .8rem; left: .8rem; display: grid; }
.public-event-date strong { font-size: .86rem; }
.public-event-date small { color: rgba(255, 255, 255, .72); }
.public-event-copy { display: flex; min-width: 0; flex-direction: column; gap: .9rem; padding: 1.15rem; }
.public-event-title-row { display: flex; justify-content: space-between; gap: .7rem; align-items: start; }
.public-event-title-row h3 { margin: .15rem 0 0; font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.08; overflow-wrap: anywhere; }
.public-event-interest { flex: 0 0 auto; padding: .3rem .5rem; color: #f7d8ec; background: rgba(240, 49, 155, .16); border: 1px solid rgba(240, 49, 155, .32); border-radius: 999px; font-size: .68rem; }
.public-event-description { display: -webkit-box; overflow: hidden; margin: 0; color: rgba(255, 255, 255, .76); font-size: .84rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.public-event-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .55rem; margin-top: auto; color: var(--muted); font-size: .74rem; }
.public-event-meta a { color: #ff78c1; font-weight: 700; }
.public-event-actions { padding-top: .85rem; border-top: 1px solid rgba(255, 255, 255, .09); }
.public-event-actions form { margin: 0; }
.public-event-actions small { flex: 1 1 12rem; color: var(--muted); line-height: 1.3; }
.event-reminder-editor { position: relative; }
.event-reminder-editor > summary { cursor: pointer; list-style: none; }
.event-reminder-editor > summary::-webkit-details-marker { display: none; }
.event-reminder-editor[open] { flex: 1 1 100%; padding: .75rem; border: 1px solid rgba(255,255,255,.12); border-radius: .8rem; background: rgba(7,8,18,.7); }
.event-reminder-editor fieldset { display: flex; flex-wrap: wrap; gap: .45rem .8rem; margin: 0 0 .65rem; padding: 0; border: 0; }
.event-reminder-editor fieldset legend { width: 100%; margin-bottom: .3rem; font-weight: 800; }
.event-reminder-editor label { display: inline-flex; align-items: center; gap: .3rem; color: var(--text); }
.event-reminder-editor form + form { margin-top: .5rem; }
.event-subscribe-button { color: #fff; background: linear-gradient(135deg, #f0319b, #b52178); box-shadow: 0 .45rem 1.25rem rgba(240, 49, 155, .24); }
.event-subscribed-button { color: #fff; background: linear-gradient(135deg, #573164, #34253d); }
.public-event-login-note { color: var(--muted); font-size: .8rem; }
.public-events-empty { padding: 4rem 1rem; text-align: center; background: rgba(18, 19, 28, .7); border: 1px dashed rgba(255,255,255,.16); border-radius: 1rem; }
.public-events-empty > span { font-size: 3rem; }
.public-events-empty h3 { margin: .7rem 0 .25rem; }
.public-events-empty p { margin: 0; color: var(--muted); }
.public-calendar-frame { overflow: hidden; padding: .7rem; background: rgba(15, 16, 24, .84); border: 1px solid rgba(255,255,255,.11); border-radius: 1.1rem; }
.public-calendar-frame img { display: block; width: 100%; height: auto; border-radius: .7rem; }
@media (max-width: 1080px) {
  .public-event-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .public-events-hero { grid-template-columns: 1fr; }
  .public-events-hero-art { aspect-ratio: 16 / 9; min-height: 0; max-height: none; }
  .public-event-art { aspect-ratio: 5 / 2; min-height: 0; max-height: none; }
  .public-events-section-heading { align-items: start; flex-direction: column; }
}

/* Personalized member Passport */
.passport-page {
  display: grid;
  gap: 1.15rem;
  --passport-panel: color-mix(in srgb, var(--passport-bg-end) 68%, #11131d 32%);
  --passport-line: color-mix(in srgb, var(--passport-accent) 48%, rgba(255, 255, 255, .16));
}
.passport-hero {
  position: relative;
  min-height: 25rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--passport-accent) 45%, transparent), transparent 38%),
    linear-gradient(135deg, var(--passport-bg-start), var(--passport-bg-end));
  border: 1px solid var(--passport-line);
  border-radius: 1.45rem;
  box-shadow: 0 1.6rem 5rem rgba(0, 0, 0, .36), inset 0 0 5rem color-mix(in srgb, var(--passport-accent) 8%, transparent);
}
.passport-hero::after {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) .65px, transparent .65px);
  background-size: 8px 8px;
  content: "";
  opacity: .14;
  pointer-events: none;
}
.passport-hero-art,
.passport-hero-art img,
.passport-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.passport-hero-art img { object-fit: cover; object-position: center; }
.passport-hero-shade {
  z-index: 1;
  background: linear-gradient(90deg, rgba(5, 6, 12, .9) 0%, rgba(5, 6, 12, .58) 48%, rgba(5, 6, 12, .2) 100%), linear-gradient(0deg, rgba(5, 6, 12, .86), transparent 55%);
}
.passport-hero-identity {
  position: absolute;
  z-index: 2;
  right: clamp(1.35rem, 4vw, 3.2rem);
  bottom: clamp(1.35rem, 4vw, 3.2rem);
  left: clamp(1.35rem, 4vw, 3.2rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.15rem;
  align-items: end;
}
.passport-avatar {
  display: grid;
  width: clamp(6rem, 10vw, 8rem);
  aspect-ratio: 1;
  overflow: hidden;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--passport-accent), var(--passport-bg-end));
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--passport-accent) 75%, transparent), 0 1rem 2.5rem rgba(0,0,0,.45);
  font-size: 2.5rem;
  font-weight: 900;
}
.passport-avatar img { width: 100%; height: 100%; object-fit: cover; }
.passport-welcome { min-width: 0; text-shadow: 0 .2rem 1rem rgba(0,0,0,.72); }
.passport-welcome h1 { overflow-wrap: anywhere; margin: .15rem 0 .25rem; font-size: clamp(2rem, 5vw, 4rem); line-height: .95; }
.passport-welcome > p:last-child { margin: 0; color: rgba(255,255,255,.76); }
.passport-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.passport-primary-button { color: #fff; background: linear-gradient(135deg, var(--passport-accent), color-mix(in srgb, var(--passport-accent) 62%, #51103b)); border-color: color-mix(in srgb, var(--passport-accent) 78%, white 22%); box-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--passport-accent) 28%, transparent); }
.passport-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.passport-stat-grid article {
  display: flex;
  gap: .8rem;
  align-items: center;
  min-width: 0;
  padding: 1rem 1.1rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--passport-bg-start) 74%, #151725), var(--passport-panel));
  border: 1px solid rgba(255,255,255,.11);
  border-top-color: var(--passport-line);
  border-radius: 1rem;
  box-shadow: 0 .7rem 1.8rem rgba(0,0,0,.18);
}
.passport-stat-grid article > span { font-size: 1.45rem; }
.passport-stat-grid article div { display: grid; min-width: 0; }
.passport-stat-grid strong { font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1; }
.passport-stat-grid small { overflow: hidden; margin-top: .25rem; color: rgba(255,255,255,.62); text-overflow: ellipsis; white-space: nowrap; }
.passport-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .75fr); gap: 1rem; align-items: start; }
.passport-main-column,
.passport-side-column { display: grid; gap: 1rem; }
.passport-panel {
  min-width: 0;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  background: linear-gradient(145deg, color-mix(in srgb, var(--passport-bg-start) 58%, #161824), var(--passport-panel));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.15rem;
  box-shadow: 0 1rem 2.8rem rgba(0,0,0,.2);
}
.passport-section-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.passport-section-heading h2,
.passport-panel > header h2 { margin: .12rem 0 0; }
.passport-section-heading > a { color: color-mix(in srgb, var(--passport-accent) 70%, white); font-size: .78rem; font-weight: 800; text-decoration: none; }
.passport-event-list,
.passport-song-list { display: grid; gap: .58rem; margin: 0; padding: 0; list-style: none; }
.passport-event {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: center;
  min-width: 0;
  padding: .8rem;
  color: #fff;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .85rem;
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.passport-event:hover { color: #fff; background: rgba(255,255,255,.075); border-color: var(--passport-line); transform: translateX(.2rem); }
.passport-event-date { display: grid; padding-right: .8rem; border-right: 1px solid rgba(255,255,255,.12); }
.passport-event-date strong { color: color-mix(in srgb, var(--passport-accent) 64%, white); font-size: 1.04rem; }
.passport-event-date small,
.passport-event-copy span { color: rgba(255,255,255,.59); font-size: .73rem; }
.passport-event-copy { display: grid; min-width: 0; gap: .2rem; }
.passport-event-copy strong,
.passport-event-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passport-event-arrow { color: var(--passport-accent); font-weight: 900; }
.passport-more-note { margin: .8rem 0 0; color: var(--muted); font-size: .75rem; }
.passport-empty-card { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; padding: 1rem; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.16); border-radius: .9rem; }
.passport-empty-card > span { font-size: 1.7rem; }
.passport-empty-card > div { flex: 1 1 15rem; }
.passport-empty-card p { margin: .2rem 0 0; color: var(--muted); font-size: .8rem; }
.passport-song-list li { display: grid; grid-template-columns: 2rem minmax(0,1fr) auto; gap: .75rem; align-items: center; padding: .72rem .8rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.065); border-radius: .82rem; }
.passport-song-list li > span { color: rgba(255,255,255,.42); font-size: .72rem; font-weight: 800; text-align: center; }
.passport-song-list li > div { display: grid; min-width: 0; }
.passport-song-list strong,
.passport-song-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passport-song-list small { color: var(--muted); }
.passport-song-list em { padding: .24rem .45rem; color: #fff; background: color-mix(in srgb, var(--passport-accent) 28%, transparent); border: 1px solid var(--passport-line); border-radius: 999px; font-size: .68rem; font-style: normal; font-weight: 900; }
.passport-stamp-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .7rem; }
.passport-stamp { position: relative; overflow: hidden; min-width: 0; padding: 1rem; background: radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--passport-accent) 20%, transparent), transparent 42%), rgba(255,255,255,.04); border: 1px solid var(--passport-line); border-radius: .9rem; }
.passport-stamp > span { display: block; margin-bottom: .5rem; font-size: 1.7rem; }
.passport-stamp strong { display: block; }
.passport-stamp p { margin: .25rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.passport-next-stamps { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-top: .85rem; color: var(--muted); font-size: .72rem; }
.passport-next-stamps > span { padding: .34rem .5rem; background: rgba(255,255,255,.05); border-radius: 999px; }
.passport-artist-panel { border-top-color: var(--passport-line); }
.passport-spotlight { overflow: hidden; margin: .9rem 0; aspect-ratio: 4 / 3; border: 1px solid rgba(255,255,255,.25); border-radius: .9rem; box-shadow: 0 0 1.6rem rgba(255,255,255,.1); }
.passport-spotlight img { width: 100%; height: 100%; object-fit: cover; }
.passport-bio { color: rgba(255,255,255,.8); font-size: .82rem; line-height: 1.5; }
.passport-details { display: grid; gap: .65rem; margin: 1rem 0; }
.passport-details div { min-width: 0; padding-top: .6rem; border-top: 1px solid rgba(255,255,255,.09); }
.passport-details dt { color: rgba(255,255,255,.5); font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.passport-details dd { overflow-wrap: anywhere; margin: .18rem 0 0; font-size: .8rem; line-height: 1.4; }
.passport-artist-panel > .button { width: 100%; }
.passport-streak-panel { position: relative; overflow: hidden; text-align: center; }
.passport-streak-panel::after { position: absolute; inset: auto -20% -60% 30%; aspect-ratio: 1; background: var(--passport-accent); border-radius: 50%; content: ""; filter: blur(70px); opacity: .13; }
.passport-streak-icon { font-size: 2.3rem; }
.passport-streak-panel > strong { display: block; font-size: 2rem; }
.passport-streak-panel > span,
.passport-streak-panel > small { display: block; margin-top: .25rem; color: var(--muted); }
.passport-portals-panel nav { display: grid; gap: .5rem; margin-top: .85rem; }
.passport-portals-panel nav a { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .65rem; align-items: center; padding: .68rem; color: #fff; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); border-radius: .72rem; text-decoration: none; }
.passport-portals-panel nav a:hover { color: #fff; border-color: var(--passport-line); }
.passport-portals-panel nav a > div { display: grid; min-width: 0; }
.passport-portals-panel nav small { color: var(--muted); font-size: .68rem; }
.passport-portals-panel nav em { color: var(--passport-accent); font-style: normal; }
.passport-connect-panel { display: grid; justify-items: center; max-width: 46rem; margin: clamp(2rem, 8vh, 6rem) auto; padding: clamp(2rem, 6vw, 4.5rem); text-align: center; background: radial-gradient(circle at 50% 0%, rgba(240,49,155,.18), transparent 45%), linear-gradient(145deg, rgba(27,28,43,.96), rgba(35,17,36,.96)); }
.passport-connect-panel h1 { margin: .2rem 0 .7rem; font-size: clamp(2rem, 5vw, 3.8rem); }
.passport-connect-panel > p:not(.eyebrow) { max-width: 38rem; color: var(--muted); line-height: 1.6; }
.passport-connect-panel .button { margin: 1rem 0; --passport-accent: #f0319b; }
.passport-connect-panel > small { max-width: 32rem; color: rgba(255,255,255,.5); }
.passport-connect-icon { font-size: 3.5rem; filter: drop-shadow(0 .5rem 1rem rgba(240,49,155,.3)); }
@media (max-width: 1050px) {
  .passport-hero-identity { grid-template-columns: auto minmax(0,1fr); }
  .passport-hero-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .passport-dashboard-grid { grid-template-columns: 1fr; }
  .passport-side-column { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .passport-artist-panel { grid-row: span 2; }
  .passport-stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .passport-page { gap: .8rem; }
  .passport-hero { min-height: 28rem; border-radius: 1rem; }
  .passport-hero-shade { background: linear-gradient(0deg, rgba(5,6,12,.96) 0%, rgba(5,6,12,.55) 70%, rgba(5,6,12,.25) 100%); }
  .passport-hero-identity { grid-template-columns: 1fr; align-items: start; }
  .passport-avatar { width: 5.5rem; }
  .passport-welcome h1 { font-size: 2.25rem; }
  .passport-hero-actions .button { flex: 1 1 auto; }
  .passport-stat-grid { gap: .5rem; }
  .passport-stat-grid article { padding: .8rem; }
  .passport-stat-grid article > span { display: none; }
  .passport-stat-grid small { font-size: .68rem; }
  .passport-side-column { grid-template-columns: 1fr; }
  .passport-artist-panel { grid-row: auto; }
  .passport-stamp-grid { grid-template-columns: 1fr; }
  .passport-section-heading { align-items: start; flex-direction: column; }
  .passport-event { grid-template-columns: 4.25rem minmax(0,1fr) auto; }
}

/* Riff-Off journey Passport — intentionally distinct from Artist Cards */
.journey-passport-page {
  --passport-navy: #08182f;
  --passport-navy-soft: #122b52;
  --passport-accent: #376fe0;
  --passport-ink: #102744;
  --passport-muted-ink: #536d8e;
  --passport-paper: #e4f6ff;
  --passport-paper-deep: #c8e9fa;
  display: grid;
  gap: 1.5rem;
  color: #f7f3e8;
}
.journey-passport-page .eyebrow,
.journey-passport-page .label { color: #83e4ff; }
.journey-passport-heading { position: relative; display: flex; overflow: hidden; justify-content: space-between; gap: 1rem; align-items: end; }
.journey-passport-heading.has-banner { min-height: 13rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid rgba(104,220,255,.3); border-radius: .9rem; isolation: isolate; }
.journey-passport-heading.has-banner::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(8,24,47,.97), rgba(18,43,82,.76) 55%, rgba(70,40,120,.42)); content: ""; }
.journey-passport-heading-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.journey-passport-heading > div,
.journey-passport-heading > .journey-passport-status { position: relative; z-index: 1; }
.journey-passport-heading h1 { margin: .12rem 0 .35rem; color: transparent; background: linear-gradient(90deg, #fff 5%, #83e4ff 52%, #c4b4ff); background-clip: text; -webkit-background-clip: text; font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif; font-size: clamp(2.5rem, 6vw, 4.8rem); font-weight: 900; letter-spacing: -.06em; line-height: .95; }
.journey-passport-heading p:last-child { max-width: 46rem; margin: 0; color: rgba(255,255,255,.66); }
.journey-passport-status { padding: .45rem .7rem; color: #8be9ff; background: rgba(69,114,220,.12); border: 1px solid rgba(104,220,255,.42); border-radius: .35rem; font-family: ui-monospace, monospace; font-size: .66rem; letter-spacing: .1em; }
.passport-book {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  overflow: hidden;
  background: #07152b;
  border: .65rem solid #173b70;
  border-radius: 1rem;
  box-shadow: 0 2rem 5rem rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.08);
}
.passport-book-spine { position: absolute; z-index: 5; top: 0; bottom: 0; left: 50%; width: 1.1rem; background: linear-gradient(90deg, rgba(3,14,36,.68), rgba(116,226,255,.25), rgba(3,14,36,.72)); box-shadow: 0 0 1.4rem rgba(25,92,190,.38); transform: translateX(-50%); pointer-events: none; }
.passport-paper {
  position: relative;
  min-width: 0;
  min-height: 36rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  color: var(--passport-ink);
  background:
    linear-gradient(rgba(45,112,190,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,112,190,.04) 1px, transparent 1px),
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.88), transparent 35%),
    linear-gradient(135deg, var(--passport-paper), #cceaff);
  background-size: 24px 24px, 24px 24px, auto, auto;
}
.passport-paper:first-of-type { box-shadow: inset -1.5rem 0 2.5rem rgba(28,76,142,.12); }
.passport-paper:last-child { box-shadow: inset 1.5rem 0 2.5rem rgba(28,76,142,.12); }
.passport-paper-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-bottom: .65rem; border-bottom: 2px solid rgba(23,32,51,.32); font-family: ui-monospace, monospace; letter-spacing: .09em; }
.passport-paper-heading span { color: var(--passport-accent); font-size: .65rem; font-weight: 900; }
.passport-paper-heading strong { font-family: "Avenir Next", system-ui, sans-serif; font-size: 1.15rem; font-weight: 900; letter-spacing: -.02em; }
.passport-page-watermark { position: absolute; right: 1rem; bottom: -3rem; color: rgba(55,111,224,.06); font-family: "Avenir Next", system-ui, sans-serif; font-size: 25rem; font-weight: 900; line-height: 1; pointer-events: none; }
.passport-id-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(8rem,.75fr) minmax(0,1.35fr); gap: 1.2rem; margin-top: 1.4rem; }
.passport-photo { display: grid; align-content: start; overflow: hidden; background: #bddff2; border: 1px solid rgba(16,39,68,.34); box-shadow: .35rem .45rem 0 rgba(55,111,224,.14); }
.passport-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.9) contrast(1.04); }
.passport-photo > span { padding: .4rem; color: var(--passport-paper); background: var(--passport-navy); font: 800 .55rem/1.2 ui-monospace, monospace; letter-spacing: .08em; text-align: center; }
.passport-id-copy { min-width: 0; }
.passport-field-label,
.passport-id-fields dt { margin: 0; color: var(--passport-accent); font: 900 .58rem/1.2 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.passport-id-copy h2 { overflow-wrap: anywhere; margin: .2rem 0 0; font-family: "Avenir Next", system-ui, sans-serif; font-size: clamp(1.65rem,3vw,2.65rem); font-weight: 900; letter-spacing: -.04em; line-height: .98; }
.passport-username { margin: .35rem 0 1rem; color: var(--passport-muted-ink); }
.passport-id-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin: 0; }
.passport-id-fields div { min-width: 0; padding-bottom: .45rem; border-bottom: 1px solid rgba(23,32,51,.2); }
.passport-id-fields dd { overflow-wrap: anywhere; margin: .2rem 0 0; font-family: ui-monospace, monospace; font-size: .75rem; font-weight: 800; }
.passport-lifetime-totals { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; margin-top: 1.25rem; padding: .75rem; background: rgba(255,255,255,.28); border: 1px solid rgba(23,32,51,.2); }
.passport-lifetime-totals div { min-width: 0; text-align: center; }
.passport-lifetime-totals strong { display: block; color: var(--passport-accent); font: 900 1.3rem/1 "Avenir Next",system-ui,sans-serif; }
.passport-lifetime-totals span { display: block; margin-top: .25rem; color: var(--passport-muted-ink); font: 800 .52rem/1.2 ui-monospace,monospace; letter-spacing: .04em; text-transform: uppercase; }
.passport-official-seal { position: relative; z-index: 1; display: grid; width: 8.5rem; aspect-ratio: 1; margin: 1.5rem auto .8rem; place-items: center; align-content: center; color: rgba(55,111,224,.82); border: .28rem double rgba(55,111,224,.7); border-radius: 50%; outline: 1px dashed rgba(109,79,210,.58); outline-offset: .35rem; transform: rotate(-7deg); }
.passport-official-seal span { font: 900 2rem/1 "Avenir Next",system-ui,sans-serif; letter-spacing: -.08em; }
.passport-official-seal strong,
.passport-official-seal small { font: 900 .55rem/1.3 ui-monospace,monospace; letter-spacing: .1em; }
.passport-identity-note { position: relative; z-index: 1; max-width: 29rem; margin: 1.3rem auto 0; color: var(--passport-muted-ink); font-size: .76rem; font-style: italic; text-align: center; }
.passport-stamp-summary { display: flex; gap: .45rem; align-items: baseline; margin: 1rem 0; color: var(--passport-muted-ink); font-family: ui-monospace,monospace; }
.passport-stamp-summary strong { color: var(--passport-accent); font: 900 2rem/1 "Avenir Next",system-ui,sans-serif; }
.passport-progress-overview { display: grid; grid-template-columns: 9rem minmax(0,1fr); gap: 1.2rem; align-items: center; margin: 1.4rem 0; padding: 1rem; background: rgba(255,255,255,.38); border: 1px solid rgba(55,111,224,.22); border-radius: .8rem; }
.passport-progress-overview h2 { margin: .15rem 0 .35rem; color: var(--passport-accent); font: 900 clamp(2rem,4vw,3.2rem)/1 "Avenir Next",system-ui,sans-serif; letter-spacing: -.06em; }
.passport-progress-overview p:last-child { margin: 0; color: var(--passport-muted-ink); font-size: .78rem; line-height: 1.45; }
.passport-progress-ring { position: relative; display: grid; width: 8rem; aspect-ratio: 1; place-items: center; background: conic-gradient(#416fdf var(--passport-progress), rgba(55,111,224,.13) 0); border-radius: 50%; box-shadow: 0 0 1.6rem rgba(65,111,223,.2); }
.passport-progress-ring::before { position: absolute; width: 6.3rem; aspect-ratio: 1; background: #def3ff; border: 1px solid rgba(55,111,224,.18); border-radius: 50%; content: ""; }
.passport-progress-ring > span { position: relative; z-index: 1; display: grid; justify-items: center; color: var(--passport-ink); }
.passport-progress-ring strong { font: 900 1.65rem/1 "Avenir Next",system-ui,sans-serif; }
.passport-progress-ring small { margin-top: .25rem; color: var(--passport-muted-ink); font: 900 .48rem/1 ui-monospace,monospace; letter-spacing: .08em; }
.passport-mini-stamp-section { margin-top: 1rem; }
.passport-mini-stamp-section > header { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; padding-bottom: .45rem; border-bottom: 1px solid rgba(16,39,68,.2); }
.passport-mini-stamp-section > header span { color: var(--passport-accent); font: 900 .62rem/1 ui-monospace,monospace; letter-spacing: .09em; }
.passport-mini-stamp-section > header small { color: var(--passport-muted-ink); font-size: .62rem; }
.passport-mini-stamp-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin-top: .65rem; }
.passport-mini-stamp-grid article { display: grid; grid-template-columns: 2.1rem minmax(0,1fr); gap: .55rem; align-items: center; min-width: 0; padding: .55rem; background: rgba(255,255,255,.35); border: 1px solid rgba(55,111,224,.18); border-radius: .55rem; }
.passport-mini-stamp-grid article > span { display: grid; aspect-ratio: 1; place-items: center; color: #fff; background: linear-gradient(145deg,#376fe0,#6851ce); border-radius: 50%; font-weight: 900; }
.passport-mini-stamp-grid article > div { display: grid; min-width: 0; }
.passport-mini-stamp-grid strong { overflow: hidden; color: var(--passport-ink); font-size: .67rem; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.passport-mini-stamp-grid small { overflow: hidden; margin-top: .12rem; color: var(--passport-muted-ink); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.passport-mini-stamp-section.next article { opacity: .62; }
.passport-rankings-section {
  padding: clamp(1rem,2.5vw,1.5rem);
  color: #48243b;
  background:
    radial-gradient(circle at 92% 8%, rgba(255,255,255,.86), transparent 28%),
    linear-gradient(135deg,#fff2f8,#f8d9e9);
  border: 1px solid rgba(175,79,132,.3);
  border-radius: .9rem;
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,.2);
}
.passport-rankings-section .passport-section-title { align-items: center; margin-bottom: .8rem; }
.passport-rankings-section .eyebrow { color: #a13c78; }
.passport-rankings-section .passport-section-title h2 { color: #48243b; }
.passport-rankings-section .passport-section-title p:last-child { color: #805e73; }
.passport-ranking-count { display: grid; min-width: 6.5rem; justify-items: end; }
.passport-ranking-count strong { color: #a13c78; font: 900 2rem/1 "Avenir Next",system-ui,sans-serif; }
.passport-ranking-count span { margin-top: .2rem; color: #805e73; font: 800 .58rem/1 ui-monospace,monospace; text-transform: uppercase; }
.passport-ranking-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .45rem; margin: 0; padding: 0; list-style: none; }
.passport-ranking-grid li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .55rem; align-items: center; min-width: 0; padding: .58rem .68rem; background: rgba(255,255,255,.56); border: 1px solid rgba(175,79,132,.16); border-radius: .55rem; }
.passport-ranking-place { color: #a13c78; font: 900 .68rem ui-monospace,monospace; }
.passport-ranking-grid strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.passport-ranking-points { color: #5e3150; font: 900 .78rem ui-monospace,monospace; white-space: nowrap; }
.passport-ranking-points small { color: #9a7189; font-size: .48rem; }
.passport-ranking-note { margin: .65rem 0 0; color: #805e73; font-size: .68rem; }
.passport-ranking-empty { padding: .8rem; color: #805e73; background: rgba(255,255,255,.42); border: 1px dashed rgba(175,79,132,.28); border-radius: .55rem; font-size: .82rem; text-align: center; }
.passport-stamp-album { padding: clamp(1rem,3vw,1.8rem); color: var(--passport-ink); background: linear-gradient(rgba(45,112,190,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(45,112,190,.04) 1px, transparent 1px), linear-gradient(135deg,#e7f7ff,#cceaff); background-size: 24px 24px,24px 24px,auto; border: .4rem solid #173b70; border-radius: 1rem; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.3); }
.passport-stamp-album .passport-section-title { align-items: center; padding-bottom: 1rem; border-bottom: 1px solid rgba(16,39,68,.22); }
.passport-stamp-album .passport-section-title h2 { color: var(--passport-ink); }
.passport-stamp-album .passport-section-title p:last-child { color: var(--passport-muted-ink); }
.passport-album-count { display: grid; min-width: 7rem; justify-items: end; }
.passport-album-count strong { color: var(--passport-accent); font: 900 2.5rem/1 "Avenir Next",system-ui,sans-serif; }
.passport-album-count span { margin-top: .2rem; color: var(--passport-muted-ink); font: 800 .62rem/1 ui-monospace,monospace; text-transform: uppercase; }
.journey-stamp-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .8rem; }
.journey-stamp { position: relative; display: grid; min-height: 7.3rem; padding: .7rem; align-content: center; justify-items: center; color: var(--passport-accent); border: .16rem double currentColor; border-radius: 50% 44% 48% 45%; outline: 1px dashed currentColor; outline-offset: -.35rem; text-align: center; transform: rotate(var(--stamp-turn)); }
.journey-stamp > span { font-size: 1.45rem; line-height: 1; }
.journey-stamp > strong { margin-top: .25rem; font: 900 .66rem/1.15 ui-monospace,monospace; letter-spacing: .04em; text-transform: uppercase; }
.journey-stamp > small { margin-top: .2rem; font-size: .55rem; line-height: 1.2; }
.journey-stamp > em { margin-top: .35rem; padding: .12rem .28rem; color: var(--passport-paper); background: currentColor; font: 900 .45rem/1 ui-monospace,monospace; letter-spacing: .06em; }
.journey-stamp.locked { color: rgba(55,85,125,.2); filter: grayscale(.55); }
.journey-stamp.locked > em { color: rgba(55,85,125,.42); background: transparent; border: 1px solid currentColor; }
.passport-itinerary-section,
.passport-journey-log,
.passport-destinations { padding: clamp(1rem,2.5vw,1.5rem); background: linear-gradient(145deg, rgba(8,24,47,.97), rgba(26,35,76,.94)); border: 1px solid rgba(104,220,255,.24); border-radius: .9rem; box-shadow: 0 1rem 2.5rem rgba(0,0,0,.24); }
.passport-section-title { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.passport-section-title h2 { margin: .12rem 0 0; font-family: "Avenir Next",system-ui,sans-serif; font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 900; letter-spacing: -.035em; }
.passport-section-title p:last-child { margin: .2rem 0 0; color: rgba(255,255,255,.55); }
.passport-ink-link { color: #83e4ff; font-weight: 800; text-decoration: none; }
.passport-boarding-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }
.passport-boarding-pass { display: grid; grid-template-columns: 6rem minmax(0,1fr) 5.2rem; overflow: hidden; min-width: 0; color: var(--passport-ink); background: #fff0d8; border: 1px solid rgba(255,185,101,.62); border-radius: .65rem; box-shadow: .35rem .45rem 0 rgba(208,103,43,.2); }
.boarding-pass-art { position: relative; overflow: hidden; min-height: 11.5rem; background: linear-gradient(160deg, #ffc074, #e67f4c); }
.boarding-pass-art-rotator { position: absolute; top: 50%; left: 2.3rem; display: block; width: 11.5rem; height: 4.6rem; transform: translate(-50%,-50%) rotate(-90deg); }
.boarding-pass-art-rotator img { display: block; width: 100%; height: 100%; object-fit: contain; }
.boarding-pass-art-fallback { display: grid; width: 100%; height: 100%; place-items: center; color: rgba(255,255,255,.7); font: 900 2rem "Avenir Next",system-ui,sans-serif; }
.boarding-pass-main { min-width: 0; padding: .9rem; }
.boarding-pass-main > p { margin: 0; color: #c65a22; font: 900 .48rem ui-monospace,monospace; letter-spacing: .06em; }
.boarding-pass-main h3 { overflow: hidden; margin: .3rem 0 .8rem; font-family: "Avenir Next",system-ui,sans-serif; font-size: 1.25rem; font-weight: 900; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.boarding-pass-main dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; margin: 0; }
.boarding-pass-main dt { color: var(--passport-muted-ink); font: 900 .48rem ui-monospace,monospace; text-transform: uppercase; }
.boarding-pass-main dd { overflow: hidden; margin: .14rem 0 0; font-size: .65rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.boarding-pass-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.boarding-pass-actions .button { color: #fff; background: #dc6b2f; border-color: #dc6b2f; box-shadow: 0 .4rem 1rem rgba(197,83,30,.2); }
.boarding-pass-actions .button.secondary { color: var(--passport-ink); background: transparent; border-color: rgba(23,32,51,.28); }
.passport-ticket-reminders { flex: 1 1 100%; }
.passport-ticket-reminders > summary { cursor: pointer; list-style: none; }
.passport-ticket-reminders > summary::-webkit-details-marker { display: none; }
.passport-ticket-reminders[open] { padding: .55rem; border: 1px solid rgba(23,32,51,.2); border-radius: .65rem; }
.passport-ticket-reminders label { display: flex; align-items: center; gap: .35rem; margin: .25rem 0; font-size: .78rem; }
.passport-ticket-reminders form + form { margin-top: .4rem; }
.boarding-pass-reminders { display: block; margin-top: .55rem; color: var(--passport-muted); }
.boarding-pass-stub { display: grid; align-content: center; justify-items: center; padding: .6rem; background: #f2d2a5; border-left: 2px dashed rgba(117,61,31,.28); text-align: center; }
.boarding-pass-stub span { color: #b94f1d; font: 900 .7rem ui-monospace,monospace; }
.boarding-pass-stub strong { margin: .45rem 0; font: 900 .75rem "Avenir Next",system-ui,sans-serif; }
.boarding-pass-stub small { font: 800 .45rem ui-monospace,monospace; letter-spacing: .05em; }
.passport-empty-itinerary { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: 1rem; border: 1px dashed rgba(104,220,255,.35); border-radius: .6rem; }
.passport-empty-itinerary > span { color: #83e4ff; font-size: 2rem; }
.passport-empty-itinerary > div { flex: 1 1 18rem; }
.passport-empty-itinerary p { margin: .2rem 0 0; color: rgba(255,255,255,.55); }
.passport-lower-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(18rem,.8fr); gap: 1rem; }
.passport-journey-log ol { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.passport-journey-log li { display: grid; grid-template-columns: 4.6rem 2rem minmax(0,1fr); gap: .6rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.passport-journey-log time { color: #83e4ff; font: 900 .65rem ui-monospace,monospace; }
.passport-journey-log li > span { display: grid; width: 1.75rem; aspect-ratio: 1; place-items: center; color: var(--passport-navy); background: linear-gradient(135deg,#83e4ff,#b4a2ff); border-radius: 50%; }
.passport-journey-log li > div { display: grid; min-width: 0; }
.passport-journey-log li strong,
.passport-journey-log li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passport-journey-log li small { color: rgba(255,255,255,.5); }
.passport-empty-log { color: rgba(255,255,255,.55); }
.passport-destinations nav { display: grid; gap: .45rem; }
.passport-destinations a { display: grid; grid-template-columns: 4.2rem minmax(0,1fr) auto; gap: .65rem; align-items: center; padding: .7rem; color: #f4f8ff; border: 1px solid rgba(104,220,255,.16); border-radius: .45rem; text-decoration: none; }
.passport-destinations a:hover { color: #fff; background: rgba(104,220,255,.08); border-color: rgba(104,220,255,.42); }
.passport-destinations a span { color: #83e4ff; font: 900 .52rem ui-monospace,monospace; letter-spacing: .08em; }
.passport-destinations a em { color: #b4a2ff; font-style: normal; }
.passport-lookup-section { padding: clamp(1rem,2.5vw,1.5rem); background: linear-gradient(145deg,rgba(8,24,47,.97),rgba(32,27,72,.95)); border: 1px solid rgba(104,220,255,.24); border-radius: .9rem; box-shadow: 0 1rem 2.5rem rgba(0,0,0,.24); }
.passport-lookup-form { display: grid; gap: .35rem; }
.passport-lookup-form > label { color: #83e4ff; font: 900 .62rem ui-monospace,monospace; letter-spacing: .07em; text-transform: uppercase; }
.passport-lookup-form > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .55rem; }
.passport-lookup-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin-top: .85rem; }
.passport-lookup-results > a { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .65rem; align-items: center; min-width: 0; padding: .65rem; color: #fff; background: rgba(255,255,255,.055); border: 1px solid rgba(104,220,255,.16); border-radius: .6rem; text-decoration: none; }
.passport-lookup-results > a:hover { background: rgba(104,220,255,.09); border-color: rgba(104,220,255,.42); transform: translateY(-1px); }
.passport-lookup-avatar { display: grid; overflow: hidden; width: 2.35rem; aspect-ratio: 1; place-items: center; color: #09162b; background: linear-gradient(135deg,#83e4ff,#c4b4ff); border-radius: 50%; font-weight: 900; }
.passport-lookup-avatar img { width: 100%; height: 100%; object-fit: cover; }
.passport-lookup-results > a > span:nth-child(2) { display: grid; min-width: 0; }
.passport-lookup-results strong,.passport-lookup-results small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passport-lookup-results small { color: rgba(255,255,255,.52); }
.passport-lookup-results em { color: #83e4ff; font-size: .7rem; font-style: normal; font-weight: 800; white-space: nowrap; }
.passport-lookup-results > p { grid-column: 1 / -1; margin: 0; padding: .75rem; color: rgba(255,255,255,.58); border: 1px dashed rgba(104,220,255,.25); border-radius: .55rem; text-align: center; }
@media (max-width: 1100px) {
  .passport-book { grid-template-columns: 1fr; }
  .passport-book-spine { display: none; }
  .passport-paper:first-of-type,
  .passport-paper:last-child { box-shadow: inset 0 -1.5rem 2.5rem rgba(28,76,142,.1); }
  .passport-boarding-grid { grid-template-columns: 1fr; }
  .passport-ranking-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .journey-stamp-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .journey-passport-heading { align-items: start; flex-direction: column; }
  .passport-book { border-width: .35rem; }
  .passport-paper { min-height: 0; padding: 1rem; }
  .passport-id-layout { grid-template-columns: 7rem minmax(0,1fr); }
  .passport-id-fields { grid-template-columns: 1fr; }
  .passport-lifetime-totals { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .journey-stamp-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .passport-lower-grid { grid-template-columns: 1fr; }
  .passport-section-title { align-items: start; flex-direction: column; }
  .passport-ranking-count { justify-items: start; }
  .passport-lookup-results { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .passport-paper { padding: .75rem; }
  .passport-paper-heading { gap: .55rem; }
  .passport-paper-heading span { font-size: .55rem; }
  .passport-paper-heading strong { font-size: .95rem; }
  .passport-id-layout { grid-template-columns: minmax(6.25rem,.75fr) minmax(0,1.35fr); gap: .75rem; margin-top: 1rem; }
  .passport-photo { width: 100%; max-width: none; }
  .passport-photo > span { padding: .3rem .2rem; font-size: .42rem; }
  .passport-id-copy h2 { font-size: clamp(1.25rem,7vw,1.8rem); }
  .passport-id-copy { padding-right: 3.75rem; }
  .passport-username { overflow-wrap: anywhere; margin: .25rem 0 .65rem; font-size: .8rem; }
  .passport-id-fields { gap: .45rem; }
  .passport-id-fields div { padding-bottom: .3rem; }
  .passport-id-fields dd { font-size: .62rem; }
  .passport-official-seal { position: absolute; top: 4.2rem; right: 1.75rem; width: 3.55rem; margin: 0; outline-offset: .16rem; border-width: .18rem; }
  .passport-official-seal span { font-size: 1rem; }
  .passport-official-seal strong { font-size: .31rem; letter-spacing: .08em; }
  .passport-official-seal small { max-width: 2.7rem; margin-top: .08rem; font-size: .28rem; letter-spacing: .055em; line-height: 1.18; text-align: center; }
  .passport-lifetime-totals { gap: .2rem; padding: .55rem .35rem; }
  .passport-lifetime-totals strong { font-size: 1.05rem; }
  .passport-lifetime-totals span { font-size: .43rem; }
  .passport-ranking-grid { grid-template-columns: 1fr; }
  .passport-ranking-grid li { padding: .55rem .6rem; }
  .passport-lookup-form > div { grid-template-columns: 1fr; }
  .passport-lookup-form .button { width: 100%; }
  .passport-lookup-results > a { grid-template-columns: auto minmax(0,1fr); }
  .passport-lookup-results em { grid-column: 2; }
  .passport-boarding-pass { grid-template-columns: 1fr; }
  .boarding-pass-art { min-height: 0; aspect-ratio: 5 / 2; border-bottom: 1px solid rgba(117,61,31,.2); }
  .boarding-pass-art-rotator { inset: 0; width: 100%; height: 100%; transform: none; }
  .boarding-pass-art-rotator img { object-fit: contain; }
  .boarding-pass-stub { display: none; }
  .boarding-pass-main { padding: .75rem; }
  .boarding-pass-main h3 { margin-bottom: .6rem; font-size: 1.1rem; }
  .boarding-pass-main dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .boarding-pass-main dl div:nth-child(3) { grid-column: 1 / -1; }
  .boarding-pass-actions { align-items: stretch; }
  .boarding-pass-actions > a,
  .boarding-pass-actions > form { flex: 1 1 8rem; }
  .boarding-pass-actions .button { width: 100%; min-height: 2.4rem; padding: .5rem .6rem; }
  .journey-stamp-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
  .journey-stamp { min-height: 6.5rem; padding: .5rem .35rem; transform: none; }
  .journey-stamp > span { font-size: 1.15rem; }
  .journey-stamp > strong { font-size: .56rem; }
  .journey-stamp > small { font-size: .47rem; }
  .passport-progress-overview { grid-template-columns: 1fr; }
  .passport-mini-stamp-grid { grid-template-columns: 1fr; }
  .passport-album-count { justify-items: start; }
}

/* Riff Student Roster — public presentation with owner-only editing controls. */
.student-roster-body {
  position:relative;
  background:linear-gradient(145deg,var(--roster-bg-1,#241047),var(--roster-bg-2,#7b173d)) fixed;
  --accent: #D3D4DC;
  --accent-soft: rgba(211, 212, 220, .16);
}
.student-roster-ambient{position:fixed;z-index:-1;inset:0;overflow:hidden;background:linear-gradient(145deg,var(--roster-bg-1),var(--roster-bg-2));pointer-events:none}
.student-roster-aurora{position:absolute;inset:-30%;background:conic-gradient(from 130deg at 50% 100%,transparent,var(--roster-bg-2),transparent 35%,var(--roster-aurora,#7348d5),transparent 64%);filter:blur(70px);opacity:.7;animation:ambient-shift 18s ease-in-out infinite alternate}
.student-roster-sparkles{position:absolute;inset:0;opacity:.34;background-image:radial-gradient(circle,#fff 0 1px,transparent 2px),radial-gradient(circle,#ffc9eb 0 1px,transparent 2px);background-size:64px 64px,93px 93px;animation:fx-stars-drift 20s linear infinite}
.student-roster-spotlights{position:absolute;inset:-18% -12% -8%;background:conic-gradient(from 154deg at 50% 0,transparent 0 7%,color-mix(in srgb,var(--roster-spotlight,#f7c6ff) 38%,transparent) 8% 13%,transparent 14% 28%,color-mix(in srgb,var(--roster-spotlight,#f7c6ff) 28%,transparent) 29% 34%,transparent 35% 68%,color-mix(in srgb,var(--roster-spotlight,#f7c6ff) 34%,transparent) 69% 75%,transparent 76% 88%,color-mix(in srgb,var(--roster-spotlight,#f7c6ff) 38%,transparent) 89% 94%,transparent 95%);filter:blur(10px);opacity:.7;transform-origin:50% 0;animation:roster-spotlights 8s ease-in-out infinite alternate}
.student-roster-music-notes{position:absolute;inset:0;overflow:hidden;color:color-mix(in srgb,var(--roster-spotlight,#f7c6ff) 72%,white);opacity:.68}
.student-roster-music-notes span{position:absolute;bottom:-3rem;font-size:clamp(1.2rem,3vw,2.4rem);text-shadow:0 0 1.1rem currentColor;animation:roster-note-float 13s linear infinite}
.student-roster-music-notes span:nth-child(1){left:8%;animation-delay:-3s}.student-roster-music-notes span:nth-child(2){left:24%;animation-delay:-9s;animation-duration:16s}.student-roster-music-notes span:nth-child(3){left:42%;animation-delay:-6s}.student-roster-music-notes span:nth-child(4){left:61%;animation-delay:-12s;animation-duration:18s}.student-roster-music-notes span:nth-child(5){left:78%;animation-delay:-4s;animation-duration:15s}.student-roster-music-notes span:nth-child(6){left:92%;animation-delay:-10s;animation-duration:17s}
@keyframes fx-stars-drift{to{background-position:64px 128px,-93px 186px}}
@keyframes roster-spotlights{from{transform:rotate(-6deg) scale(1.03)}to{transform:rotate(6deg) scale(1.1)}}
@keyframes roster-note-float{0%{transform:translate3d(0,0,0) rotate(-8deg);opacity:0}12%{opacity:.8}88%{opacity:.55}100%{transform:translate3d(2rem,-110vh,0) rotate(15deg);opacity:0}}
.student-roster-body .site-header{position:sticky;z-index:10002}
.student-roster-body main,
.student-roster-body .site-legal-footer{position:relative;z-index:1}
.student-roster-body main{isolation:isolate}
.student-roster-body .container{position:relative}
.student-roster-body .eyebrow,
.student-roster-body .label { color: #D3D4DC; }
.student-roster-body .button:not(.secondary, .danger) {
  background: #950606;
  box-shadow: 0 7px 20px rgba(149, 6, 6, .24);
}
.student-roster-body .student-member-result:hover,
.student-roster-body .student-member-result:focus { background: rgba(149, 6, 6, .18); }
.student-roster-body .student-editor-section:focus-within {
  background: rgba(149, 6, 6, .055);
  border-color: rgba(149, 6, 6, .7);
}
.student-heading-actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.student-roster-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 1.25rem; border-color: rgba(255,86,122,.34); background: linear-gradient(135deg,rgba(169,46,77,.11),rgba(255,255,255,.018)); }
.student-roster-danger-zone h2 { margin: .15rem 0 .35rem; }
.student-roster-danger-zone p:last-child { max-width: 52rem; margin-bottom: 0; color: var(--muted); }
.student-roster-danger-zone form { flex: 0 0 auto; }
.student-editor-section { transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.student-editor-section:focus-within { background: rgba(240,49,155,.045); border-color: rgba(240,49,155,.55); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.14); transform: translateY(-1px); }
.student-public-page { display: grid; gap: 1rem; max-width: 1420px; margin: 0 auto; }
.student-public-toolbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .75rem 1rem; color: rgba(255,255,255,.82); background: rgba(15,16,27,.82); border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; box-shadow: 0 .8rem 2rem rgba(0,0,0,.18); backdrop-filter: blur(18px); }
.student-public-toolbar > div { display: grid; grid-template-columns: auto auto; gap: .05rem .55rem; align-items: center; }
.student-public-toolbar small { grid-column: 2; color: rgba(255,255,255,.5); }
.student-preview-live-dot { width: .65rem; height: .65rem; grid-row: span 2; background: #55eaa0; border-radius: 50%; box-shadow: 0 0 0 .28rem rgba(85,234,160,.12), 0 0 1rem rgba(85,234,160,.7); }
.student-public-card { --student-readable-accent:color-mix(in srgb,var(--student-accent) 30%,white); overflow: hidden; color: #fff; background: linear-gradient(145deg, var(--student-start), var(--student-end)); border: 1px solid color-mix(in srgb,var(--student-accent) 58%,rgba(255,255,255,.12)); border-radius: clamp(1.2rem,2.5vw,2.2rem); box-shadow: 0 2.2rem 7rem rgba(0,0,0,.42), 0 0 4rem color-mix(in srgb,var(--student-accent) 12%,transparent); isolation: isolate; animation: student-card-arrive .65s cubic-bezier(.2,.75,.25,1) both; }
.student-public-hero { position: relative; display: grid; aspect-ratio: 1800 / 620; min-height: 0; padding: clamp(1rem,2.5vw,2rem); align-content: end; background-image:linear-gradient(125deg,var(--tier-start,#0d4b9b),var(--tier-end,#41b8ff));background-position:center;background-repeat:no-repeat;background-size:cover; isolation: isolate; }
.student-public-tier-seal { position: absolute; top: clamp(1rem,3vw,2.2rem); right: clamp(1rem,3vw,2.2rem); display: grid; min-width: 12rem; padding: .9rem 1.1rem; justify-items: end; color: white; background: rgba(9,10,18,.58); border: 1px solid rgba(255,255,255,.24); border-radius: 1rem; box-shadow: 0 .8rem 2rem rgba(0,0,0,.22); backdrop-filter: blur(15px); }
.student-public-tier-seal span { color: var(--student-readable-accent); font-size: .67rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.student-public-tier-seal strong { margin: .15rem 0; font-size: 1.15rem; }
.student-public-tier-seal small { color: rgba(255,255,255,.62); }
.student-public-identity { display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(1rem,2.5vw,1.8rem); align-items: center; max-width: calc(100% - 11rem); }
.student-public-identity img,
.student-public-avatar-fallback { display: grid; width: clamp(5.25rem,8vw,7rem); aspect-ratio: 1; place-items: center; object-fit: cover; color: #fff; background: var(--student-accent); border: .28rem solid rgba(255,255,255,.92); border-radius: 50%; box-shadow: 0 0 0 .35rem var(--student-accent), 0 1.2rem 3rem rgba(0,0,0,.4), 0 0 2rem color-mix(in srgb,var(--student-accent) 45%,transparent); font-size: 2.4rem; font-weight: 900; }
.student-public-identity .eyebrow { margin: 0 0 .25rem; color: var(--student-readable-accent); }
.student-public-identity h1 { overflow-wrap: anywhere; margin: 0; font-size: clamp(1.8rem,4vw,3.6rem); line-height: .96; letter-spacing: -.04em; text-shadow: 0 .2rem 1.3rem rgba(0,0,0,.48); }
.student-public-identity div > p:last-child { margin: .6rem 0 0; color: rgba(255,255,255,.66); font-size: clamp(1rem,2vw,1.35rem); }
.student-public-progress { position: absolute; right: clamp(1rem,2.5vw,2rem); bottom: clamp(1rem,2.5vw,2rem); display: grid; width: clamp(5.5rem,8vw,7rem); aspect-ratio: 1; place-items: center; background: conic-gradient(var(--student-accent) var(--student-progress),rgba(255,255,255,.16) 0); border-radius: 50%; box-shadow: 0 1rem 2rem rgba(0,0,0,.28); }
.student-public-progress::before { position: absolute; width: calc(100% - .7rem); aspect-ratio: 1; background: rgba(9,10,18,.88); border-radius: inherit; content: ""; }
.student-public-progress div { position: relative; display: grid; justify-items: center; }
.student-public-progress strong { font-size: clamp(1.45rem,3vw,2.15rem); line-height: 1; }
.student-public-progress span { margin-top: .2rem; color: rgba(255,255,255,.57); font-size: .65rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.student-public-summary { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.35fr) minmax(0,.9fr) minmax(0,1fr); margin: -1px clamp(1rem,4vw,3.5rem) 0; background: rgba(12,13,23,.8); border: 1px solid rgba(255,255,255,.11); border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.2); backdrop-filter: blur(18px); }
.student-public-summary div { min-width: 0; padding: 1rem 1.1rem; }
.student-public-summary div + div { border-left: 1px solid rgba(255,255,255,.1); }
.student-public-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-public-summary strong { display: block; overflow-wrap: anywhere; line-height: 1.25; white-space: normal; }
.student-public-summary small { margin-bottom: .32rem; color: rgba(255,255,255,.46); font-size: .64rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.student-public-content { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 1rem; padding: clamp(1rem,4vw,3.5rem); }
.student-public-panel { min-width: 0; padding: clamp(1rem,2.5vw,1.6rem); background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.11); border-radius: 1.2rem; box-shadow: inset 0 1px rgba(255,255,255,.04); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.student-public-panel:hover { border-color: color-mix(in srgb,var(--student-accent) 55%,rgba(255,255,255,.1)); box-shadow: 0 1.1rem 2.5rem rgba(0,0,0,.16); transform: translateY(-3px); }
.student-public-panel-title { display: flex; justify-content: space-between; gap: 1rem; align-items: end; padding-bottom: .9rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.student-public-panel-title .eyebrow { margin: 0; color: var(--student-readable-accent); text-shadow: 0 1px .8rem rgba(0,0,0,.35); }
.student-public-panel-title h2 { margin: .15rem 0 0; font-size: clamp(1.3rem,2.5vw,2rem); }
.student-public-panel-title > span { flex: none; padding: .3rem .55rem; color: rgba(255,255,255,.68); background: rgba(255,255,255,.07); border-radius: 99px; font-size: .7rem; }
.repertoire-panel { grid-column: span 7; }
.assessment-panel { grid-column: span 5; }
.focus-panel { grid-column: span 5; }
.goals-panel { grid-column: span 7; }
.student-public-repertoire-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.35rem; margin-top: 1rem; }
.student-public-repertoire-grid h3 { margin: 0 0 .65rem; color: rgba(255,255,255,.57); font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; }
.student-public-song { display: grid; grid-template-columns: minmax(0,1fr) 4.5rem auto; gap: .6rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.student-public-song > div:first-child { display: grid; min-width: 0; }
.student-public-song strong,.student-public-song span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-public-song span { color: rgba(255,255,255,.58); font-size: .78rem; }
.student-public-song em { color: var(--student-accent); font-size: .7rem; font-style: normal; font-weight: 900; }
.student-song-progress { overflow: hidden; height: .35rem; background: rgba(255,255,255,.12); border-radius: 99px; }
.student-song-progress i { display: block; width: var(--song-progress); height: 100%; background: var(--student-accent); border-radius: inherit; box-shadow: 0 0 .8rem var(--student-accent); }
.student-public-song.learned { grid-template-columns: auto minmax(0,1fr); }
.student-song-check { display: grid; width: 1.7rem; aspect-ratio: 1; place-items: center; color: #07110c !important; background: #55eaa0; border-radius: 50%; font-weight: 900; }
.student-song-overflow { margin-top: .45rem; }
.student-song-overflow summary { padding: .55rem .7rem; color: rgba(255,255,255,.78); background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); border-radius: .65rem; cursor: pointer; font-size: .76rem; font-weight: 800; text-align: center; }
.student-song-overflow[open] summary { margin-bottom: .15rem; color: #fff; background: rgba(255,255,255,.09); }
.student-public-skill-grid { display: grid; gap: .9rem; margin-top: 1rem; }
.student-public-skill header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.student-public-skill header span { color: rgba(255,255,255,.5); font-size: .75rem; }
.student-public-skill > div { display: grid; grid-template-columns: repeat(5,1fr); gap: .35rem; }
.student-public-skill i { height: .5rem; background: rgba(255,255,255,.11); border-radius: 99px; }
.student-public-skill i.filled { background: linear-gradient(90deg,color-mix(in srgb,var(--student-accent) 70%,white),var(--student-accent)); box-shadow: 0 0 .75rem color-mix(in srgb,var(--student-accent) 45%,transparent); }
.focus-panel ul { display: grid; gap: .55rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.focus-panel li { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .65rem; align-items: center; padding: .65rem; background: rgba(255,255,255,.045); border-radius: .65rem; }
.focus-panel li span { color: var(--student-accent); font: 900 .7rem ui-monospace,monospace; }
.goals-panel > div:last-child { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin-top: 1rem; }
.goals-panel p { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .65rem; align-items: center; margin: 0; padding: .65rem; background: rgba(255,255,255,.045); border-radius: .65rem; }
.goals-panel p span { display: grid; width: 1.6rem; aspect-ratio: 1; place-items: center; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; font-size: .65rem; }
.goals-panel p.complete span { color: #07110c; background: #55eaa0; border-color: #55eaa0; }
.student-public-coach-note { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1rem; align-items: start; margin: 0; padding: clamp(1.2rem,3vw,2rem); background: linear-gradient(120deg,color-mix(in srgb,var(--student-accent) 18%,transparent),rgba(255,255,255,.035)); border: 1px solid color-mix(in srgb,var(--student-accent) 38%,rgba(255,255,255,.1)); border-radius: 1.2rem; }
.student-public-coach-note > span { color: color-mix(in srgb,var(--student-accent) 45%,white); font-family: Georgia,serif; font-size: 4rem; line-height: .7; }
.student-public-coach-note .eyebrow { margin: 0 0 .3rem; color: var(--student-readable-accent); text-shadow: 0 1px .8rem rgba(0,0,0,.35); }
.student-public-coach-note div p:last-child { max-width: 70rem; margin: 0; color: rgba(255,255,255,.82); font-size: clamp(1rem,2vw,1.25rem); line-height: 1.6; }
.student-public-empty { color: rgba(255,255,255,.48); font-style: italic; }
.student-public-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem,4vw,3.5rem); color: rgba(255,255,255,.42); background: rgba(0,0,0,.18); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
@keyframes student-card-arrive { from { opacity: 0; transform: translateY(1rem) scale(.99); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) {
  .student-public-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .student-public-summary div + div { border-left: 0; }
  .student-public-summary div:nth-child(even) { border-left: 1px solid rgba(255,255,255,.1); }
  .student-public-summary div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
  .repertoire-panel,.assessment-panel,.focus-panel,.goals-panel { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .student-roster-danger-zone { align-items: stretch; flex-direction: column; }
  .student-roster-danger-zone form,.student-roster-danger-zone .button { width: 100%; }
  .student-public-toolbar { align-items: stretch; flex-direction: column; }
  .student-public-toolbar .button { text-align: center; }
  .student-public-hero { aspect-ratio: 1800 / 620; min-height: 0; padding: .7rem; }
  .student-public-tier-seal { top: .55rem; right: .55rem; left: auto; min-width: 0; max-width: 44%; padding: .42rem .58rem; justify-items: end; border-radius: .65rem; }
  .student-public-tier-seal span { font-size: .52rem; }
  .student-public-tier-seal strong { margin: .05rem 0; font-size: .78rem; }
  .student-public-tier-seal small { overflow: hidden; max-width: 17ch; font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
  .student-public-identity { max-width: calc(100% - 4.25rem); padding: 0; gap: .7rem; }
  .student-public-identity img,.student-public-avatar-fallback { width: 3.55rem; border-width: .18rem; box-shadow: 0 0 0 .2rem var(--student-accent),0 .6rem 1.2rem rgba(0,0,0,.38); font-size: 1.4rem; }
  .student-public-identity .eyebrow { margin-bottom: .1rem; font-size: .5rem; letter-spacing: .1em; }
  .student-public-identity h1 { font-size: clamp(1rem,5.4vw,1.45rem); line-height: 1; }
  .student-public-identity div > p:last-child { overflow: hidden; margin-top: .25rem; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
  .student-public-progress { right: .65rem; bottom: .65rem; left: auto; width: 3.4rem; }
  .student-public-progress::before { width: calc(100% - .4rem); }
  .student-public-progress strong { font-size: 1rem; }
  .student-public-progress span { margin-top: .08rem; font-size: .42rem; letter-spacing: .08em; }
  .student-public-summary { grid-template-columns: 1fr 1fr; margin-inline: .75rem; }
  .student-public-summary div:nth-child(n) { border-top: 1px solid rgba(255,255,255,.08); }
  .student-public-repertoire-grid,.goals-panel > div:last-child { grid-template-columns: 1fr; }
  .student-public-content { padding: .75rem; }
  .student-public-footer { align-items: start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .student-public-card { animation: none; }
  .student-public-panel,.student-editor-section { transition: none; }
  .student-roster-aurora,.student-roster-sparkles,.student-roster-spotlights,.student-roster-music-notes span { animation: none; }
}

/* Student Roster coaching spotlight and owner-only tier artwork controls. */
.dashboard-theme-content { display: grid; min-width: 0; gap: 2rem; }
.dashboard-theme-tier-manager { margin: 0; padding: clamp(1rem,2.5vw,1.5rem); background: linear-gradient(145deg,rgba(27,28,39,.96),rgba(18,19,28,.94)); border: 1px solid rgba(240,49,155,.2); border-radius: 1rem; box-shadow: var(--shadow); scroll-margin-top: 5rem; }
.dashboard-theme-tier-manager .student-tier-upload { background: rgba(7,8,14,.48); box-shadow: none; }
.student-coaching-spotlight { margin-top: clamp(2rem,5vw,4rem); scroll-margin-top: 6rem; }
.student-spotlight-card { --spotlight-start:#11131f; --spotlight-end:#2b1027; --spotlight-media:#090a11; --spotlight-accent:#f0319b; --spotlight-text:#fff; position: relative; display: grid; overflow: hidden; color: var(--spotlight-text); background: linear-gradient(135deg,var(--spotlight-start),var(--spotlight-end)); border: 1px solid color-mix(in srgb,var(--spotlight-accent) 42%,transparent); border-radius: clamp(1rem,2.5vw,1.8rem); box-shadow: 0 2rem 5rem rgba(0,0,0,.32); isolation: isolate; }
.student-spotlight-card::before { position: absolute; z-index: -1; width: 30rem; height: 30rem; right: -8rem; bottom: -20rem; background: radial-gradient(circle,color-mix(in srgb,var(--spotlight-accent) 24%,transparent),transparent 68%); content: ""; pointer-events: none; }
.student-spotlight-art { position: relative; display: grid; overflow: hidden; width: 100%; aspect-ratio: 4 / 1; place-items: center; background: var(--spotlight-media); border-bottom: 1px solid color-mix(in srgb,var(--spotlight-accent) 25%,transparent); }
.student-spotlight-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: student-spotlight-reveal .7s ease both; }
.student-spotlight-placeholder { position: absolute; z-index: 1; inset: 0; display: grid; align-content: center; justify-items: center; padding: 2rem; color: rgba(255,255,255,.8); text-align: center; }
.student-spotlight-placeholder::before { position: absolute; width: 60%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 1.5rem rgba(255,255,255,.025),0 0 0 3rem rgba(255,255,255,.018); content: ""; }
.student-spotlight-placeholder span,.student-spotlight-placeholder strong,.student-spotlight-placeholder small { position: relative; z-index: 1; }
.student-spotlight-placeholder span { color: var(--spotlight-accent); font-size: 3rem; text-shadow: 0 0 1.5rem color-mix(in srgb,var(--spotlight-accent) 80%,transparent); }
.student-spotlight-placeholder strong { margin: .5rem 0; font-size: 1.4rem; }
.student-spotlight-placeholder small { color: rgba(255,255,255,.5); }
.student-spotlight-copy { display: grid; align-content: start; padding: clamp(1.5rem,4vw,3rem); }
.student-spotlight-kicker { color: var(--spotlight-accent); font-size: .7rem; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; }
.student-spotlight-copy h3 { max-width: 28ch; margin: .55rem 0 1.25rem; font-size: clamp(1.8rem,3.6vw,3.35rem); line-height: 1.02; letter-spacing: -.035em; }
.student-spotlight-body { max-width: 75rem; color: color-mix(in srgb,var(--spotlight-text) 76%,transparent); font-size: clamp(.95rem,1.35vw,1.08rem); line-height: 1.7; }
.student-spotlight-body p { margin: 0 0 1rem; }
.student-spotlight-body p:last-child { margin-bottom: 0; }
.student-spotlight-content { display: grid; gap: 1.25rem; padding: 0 clamp(1.1rem,3vw,2rem) clamp(1.1rem,3vw,2rem); }
.student-coach-identity { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1.2rem; align-items: end; margin-top: -3.8rem; }
.student-coach-portrait { display: grid; overflow: hidden; width: clamp(7.25rem,12vw,9rem); aspect-ratio: 1; place-items: center; color: #fff; background: linear-gradient(135deg,var(--spotlight-accent),color-mix(in srgb,var(--spotlight-accent) 48%,#111)); border: .3rem solid rgba(255,255,255,.92); border-radius: 50%; box-shadow: 0 0 0 .3rem color-mix(in srgb,var(--spotlight-accent) 72%,transparent),0 1.2rem 2.5rem rgba(0,0,0,.38); font-size: 2.4rem; font-weight: 900; }
.student-coach-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.student-coach-identity > div:last-child { min-width: 0; padding-bottom: .4rem; }
.student-coach-identity h3 { max-width: 36ch; margin: .35rem 0 0; font-size: clamp(1.65rem,3vw,2.75rem); line-height: 1.04; letter-spacing: -.035em; text-shadow: 0 .25rem 1.2rem rgba(0,0,0,.35); }
.student-coach-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: .85rem; }
.student-coach-grid > section { min-width: 0; padding: 1rem; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: .9rem; box-shadow: inset 0 1px rgba(255,255,255,.035); }
.student-coach-grid .eyebrow { margin: 0 0 .65rem; color: color-mix(in srgb,var(--spotlight-accent) 38%,white); }
.student-coach-about { grid-column: span 7; }
.student-coach-why { grid-column: span 5; }
.student-coach-learn { grid-column: span 5; }
.student-coach-examples { grid-column: span 4; }
.student-coach-actions { grid-column: span 3; }
.student-coach-why > p:last-child { margin: 0; color: color-mix(in srgb,var(--spotlight-text) 80%,transparent); line-height: 1.6; }
.student-coach-learn ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.student-coach-learn li { display: grid; grid-template-columns: 1.4rem minmax(0,1fr); gap: .45rem; align-items: start; }
.student-coach-learn li span { display: grid; width: 1.15rem; aspect-ratio: 1; margin-top: .15rem; place-items: center; color: #07110c; background: #55eaa0; border-radius: 50%; font-size: .65rem; font-weight: 900; }
.student-coach-examples > div { display: grid; gap: .45rem; }
.student-coach-examples a { display: flex; gap: .5rem; align-items: center; padding: .55rem .65rem; color: var(--spotlight-text); background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.08); border-radius: .6rem; text-decoration: none; }
.student-coach-examples a:hover { border-color: var(--spotlight-accent); transform: translateY(-1px); }
.student-coach-examples a span { color: var(--spotlight-accent); }
.student-coach-actions > div { display: grid; gap: .55rem; }
.student-coach-actions .button { justify-content: center; text-align: center; }
.student-roster-body .student-coaching-spotlight .eyebrow,
.student-roster-body .student-spotlight-kicker,
.student-roster-body .student-coach-examples a span,
.student-roster-body .student-review-arrow{color:#fff}
.student-roster-body .student-coach-actions .button.secondary,
.student-bottom-coach-actions .student-learn-more{color:#fff;background:linear-gradient(135deg,#b30e1d,#e22a32);border-color:#e34b55}
.student-bottom-coach-actions{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;margin:1.25rem auto 0}
.student-register-panels{display:grid;gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
.student-spotlight-link-row { grid-template-columns: minmax(10rem,.7fr) minmax(14rem,1.3fr) auto; }
.student-spotlight-editor { overflow: hidden; margin-top: 1rem; padding: 0; background: rgba(16,17,28,.82); }
.student-spotlight-editor summary { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.15rem; cursor: pointer; list-style: none; }
.student-spotlight-editor summary::-webkit-details-marker { display: none; }
.student-spotlight-editor summary > span:first-child { display: grid; }
.student-spotlight-editor summary small { color: var(--muted); }
.student-spotlight-editor summary > span:last-child { color: var(--accent); font-size: 1.5rem; transition: transform .2s ease; }
.student-spotlight-editor[open] summary > span:last-child { transform: rotate(45deg); }
.student-spotlight-editor form { padding: 0 1.15rem 1.15rem; border-top: 1px solid rgba(255,255,255,.08); }
.student-spotlight-editor textarea { resize: vertical; }
.student-spotlight-fieldset { display: grid; gap: 1rem; margin: 0; padding: 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; }
.student-spotlight-fieldset legend { padding: 0 .45rem; color: var(--accent); font-weight: 900; }
.student-spotlight-editor-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.student-spotlight-color-grid { display: grid; grid-template-columns: repeat(5,minmax(7rem,1fr)); gap: 1rem; }
.student-spotlight-color-grid input[type="color"] { width: 100%; min-height: 3rem; padding: .25rem; cursor: pointer; }
@keyframes student-spotlight-reveal { from { opacity: .25; transform: scale(1.035); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .student-spotlight-color-grid { grid-template-columns: repeat(3,minmax(7rem,1fr)); }
  .student-coach-about,.student-coach-why,.student-coach-learn,.student-coach-examples,.student-coach-actions { grid-column: span 6; }
  .student-coach-about { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .student-spotlight-editor-grid,.student-spotlight-color-grid { grid-template-columns: 1fr; }
  .student-spotlight-copy h3 { font-size: 2.25rem; }
  .student-coach-identity { grid-template-columns: 1fr; margin-top: -2.75rem; }
  .student-coach-portrait { width: 6rem; }
  .student-coach-grid > section { grid-column: 1 / -1; }
  .student-spotlight-link-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .student-spotlight-art img { animation: none; }
}
/* Public queue wheel ----------------------------------------------------- */
.public-body:has(.wheel-page),
.dashboard-body:has(.wheel-page) { background: linear-gradient(145deg, var(--wheel-page-color-start, #21152f), var(--wheel-page-color-end, #111827)) fixed; }
.wheel-page { position: relative; isolation: isolate; padding: clamp(1rem, 3vw, 2.5rem) clamp(.75rem, 2vw, 1.5rem) 4rem; border-radius: 30px; background: transparent; }
.wheel-page-fx { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.wheel-page > :not(.wheel-page-fx) { position: relative; z-index: 1; }
.wheel-page-fx > i { position: absolute; inset: 0; display: block; }
.wheel-fx-gradient {
  background:
    radial-gradient(circle at 16% 18%,var(--wheel-fx-2),transparent 45%),
    radial-gradient(circle at 86% 24%,var(--wheel-fx-3),transparent 46%),
    linear-gradient(145deg,var(--wheel-fx-1),var(--wheel-fx-4));
  opacity: calc(var(--wheel-fx-opacity) / 100);
  animation: wheel-fx-drift var(--wheel-fx-drift-duration,20s) ease-in-out infinite alternate;
}
.wheel-fx-layer { display: none!important; opacity: calc(var(--wheel-fx-opacity) / 150); }
.wheel-fx-layer.active { display: block!important; }
.wheel-fx-aurora { inset: -25%!important; background: conic-gradient(from 90deg at 50% 65%,transparent,var(--wheel-fx-2),transparent 30%,var(--wheel-fx-3),transparent 65%); filter: blur(68px); animation: wheel-fx-turn var(--wheel-fx-turn-duration,25s) linear infinite; }
.wheel-fx-sparkles,.wheel-fx-stars { background-image: radial-gradient(circle,#fff 0 1px,transparent 1.8px),radial-gradient(circle,var(--wheel-fx-3) 0 1.5px,transparent 2.2px); background-position: 0 0,35px 45px; background-size: 72px 72px,113px 113px; animation: wheel-fx-stars var(--wheel-fx-stars-duration,24s) linear infinite; }
.wheel-fx-fog { inset: 20% -25% -20%!important; background: radial-gradient(ellipse at 20% 70%,rgba(255,255,255,.24),transparent 48%),radial-gradient(ellipse at 80% 55%,rgba(255,255,255,.18),transparent 52%); filter: blur(32px); animation: wheel-fx-drift 16s ease-in-out infinite alternate; }
.wheel-fx-lasers { background: repeating-linear-gradient(113deg,transparent 0 18%,color-mix(in srgb,var(--wheel-fx-3) 48%,transparent) 18.25% 18.5%,transparent 18.8% 30%); transform-origin: 50% 0; animation: wheel-fx-lasers 8s ease-in-out infinite alternate; }
.wheel-fx-spotlights { inset: -22% -12% -8%!important; background: conic-gradient(from 154deg at 50% 0,transparent 0 5%,color-mix(in srgb,var(--wheel-fx-2) 42%,transparent) 6% 10%,transparent 11% 20%,color-mix(in srgb,var(--wheel-fx-3) 38%,transparent) 21% 26%,transparent 27% 74%,color-mix(in srgb,var(--wheel-fx-2) 38%,transparent) 75% 80%,transparent 81% 89%,color-mix(in srgb,var(--wheel-fx-3) 42%,transparent) 90% 94%,transparent 95%); filter: blur(7px); transform-origin: 50% 0; animation: wheel-fx-spotlights 7s ease-in-out infinite alternate; }
.wheel-fx-bokeh { background-image: radial-gradient(circle at 15% 25%,rgba(255,255,255,.18) 0 18px,transparent 20px),radial-gradient(circle at 78% 68%,color-mix(in srgb,var(--wheel-fx-2) 48%,transparent) 0 26px,transparent 29px),radial-gradient(circle at 48% 38%,rgba(255,255,255,.12) 0 12px,transparent 14px); filter: blur(2px); animation: wheel-fx-drift 12s ease-in-out infinite alternate; }
.wheel-stage-fx-settings { margin-top: 1rem; padding: .9rem; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.035); }
.wheel-stage-fx-settings > summary { cursor: pointer; font-weight: 900; }
.wheel-stage-fx-settings[open] > summary { margin-bottom: .9rem; }
.wheel-stage-fx-settings .wheel-page-colors { grid-template-columns: repeat(4,minmax(0,1fr)); }
.wheel-stage-fx-settings .checkbox-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
.wheel-stage-fx-settings .checkbox-grid label { display: flex; align-items: center; gap: .45rem; margin: 0; padding: .55rem; background: rgba(255,255,255,.04); border-radius: 10px; }
.wheel-stage-fx-settings .checkbox-grid input { width: auto; }
@keyframes wheel-fx-drift { to { transform: translate3d(4%,-3%,0) scale(1.08); } }
@keyframes wheel-fx-turn { to { transform: rotate(360deg) scale(1.08); } }
@keyframes wheel-fx-stars { to { background-position:72px 144px,-78px 226px; } }
@keyframes wheel-fx-lasers { to { transform: rotate(12deg) scale(1.1); } }
@keyframes wheel-fx-spotlights { from { transform: rotate(-7deg) scale(1.04); } to { transform: rotate(7deg) scale(1.12); } }
.wheel-hero { max-width: 760px; margin-bottom: 2rem; }
.wheel-hero .eyebrow,.wheel-hero h1,.wheel-hero > p { color: #fff; }
.wheel-hero h1 { margin: .15rem 0 .55rem; font-size: clamp(1.9rem, 4vw, 3.15rem); line-height: 1; }
.wheel-hero > p { font-size: 1.06rem; }
.wheel-stage-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-top: 1.15rem; }
.wheel-stage-links a { padding: .68rem .95rem; border: 1px solid rgba(232,218,255,.42); border-radius: 12px; color: #25153a; background: #d9c3ff; box-shadow: 0 8px 24px rgba(96,63,160,.18); font-size: .78rem; font-weight: 900; letter-spacing: .04em; text-decoration: none; }
.wheel-stage-links a:hover,.wheel-stage-links a:focus-visible { background: #eadfff; transform: translateY(-1px); }
.wheel-stage-links-empty { max-width: 900px; margin-inline: auto; }
.wheel-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 360px); gap: 1.4rem; align-items: start; }
.wheel-stage,
.wheel-lineup-card,
.wheel-staff-card { border: 1px solid rgba(255,255,255,.1); border-radius: 24px; box-shadow: 0 22px 70px rgba(0,0,0,.24); }
.wheel-stage { background: rgba(0,0,0,.30); }
.wheel-lineup-card,
.wheel-staff-card { background: rgba(0,0,0,.50); }
.wheel-stage { padding: clamp(1rem, 3vw, 2rem); overflow: hidden; }
.wheel-stage-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.wheel-stage-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; align-items: end; }
.wheel-mode-switch { display: inline-flex; gap: .2rem; padding: .25rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(0,0,0,.32); }
.wheel-mode-switch button { min-width: 84px; padding: .48rem .75rem; border: 0; border-radius: 999px; color: rgba(255,255,255,.72); background: transparent; font: inherit; font-size: .78rem; font-weight: 900; cursor: pointer; }
.wheel-mode-switch button.active { color: #170d2b; background: #d9c3ff; box-shadow: 0 5px 16px rgba(124,92,255,.24); }
.wheel-mode-switch button:not(.active):hover,.wheel-mode-switch button:not(.active):focus-visible { color: #fff; background: rgba(255,255,255,.1); }
.wheel-stage-heading span,
.wheel-queue-picker span { color: #f0319b; font-size: .74rem; font-weight: 850; letter-spacing: .13em; }
.wheel-stage-heading h2 { margin: .25rem 0 0; }
.wheel-queue-picker { min-width: 180px; }
.wheel-queue-picker select { margin-top: .35rem; }
.wheel-canvas-shell { position: relative; width: min(100%, 720px); aspect-ratio: 1; margin: 1rem auto .4rem; border-radius: 28px; overflow: hidden; background: transparent; }
#wheel-canvas { display: block; width: 100%; height: 100%; }
.wheel-pointer { position: absolute; z-index: 2; right: 1.1%; top: 50%; width: 0; height: 0; transform: translateY(-50%); border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-right: 52px solid #fff; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.wheel-click-spin { position: absolute; z-index: 2; inset: 8%; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(8,10,16,.24); cursor: pointer; transition: background .2s ease,opacity .2s ease; }
.wheel-click-spin span { padding: .7rem 1.05rem; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; background: rgba(9,10,18,.66); box-shadow: 0 8px 28px rgba(0,0,0,.28); font-size: clamp(.95rem,2vw,1.2rem); font-weight: 900; backdrop-filter: blur(8px); }
.wheel-click-spin:hover,.wheel-click-spin:focus-visible { background: rgba(240,49,155,.16); outline: 3px solid rgba(255,255,255,.75); outline-offset: -8px; }
.wheel-click-spin.busy { opacity: 0; pointer-events: none; }
.wheel-sound-toggle { position: absolute; z-index: 4; right: .75rem; bottom: .75rem; min-height: 46px; padding: .58rem .9rem; border: 2px solid rgba(255,255,255,.45); border-radius: 999px; color: #fff; background: rgba(5,7,14,.82); backdrop-filter: blur(12px); font: inherit; font-size: .88rem; font-weight: 900; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.wheel-sound-toggle:hover,.wheel-sound-toggle:focus-visible { background: rgba(240,49,155,.82); outline: 2px solid #fff; outline-offset: 2px; }
.wheel-result { margin-top: .65rem; padding: .9rem 1rem; border-radius: 14px; background: linear-gradient(135deg, rgba(240,49,155,.16), rgba(109,74,255,.16)); text-align: center; font-weight: 800; }
.wheel-entry-count { margin-top: .8rem; text-align: center; color: var(--muted, #b9b5c6); }
.wheel-sidebar { display: grid; gap: 1rem; }
.wheel-lineup-card,
.wheel-staff-card { padding: 1.2rem; }
.wheel-lineup { display: grid; gap: .55rem; max-height: 510px; overflow: auto; padding-right: .15rem; }
.wheel-lineup-member { display: flex; align-items: center; gap: .7rem; padding: .62rem .7rem; border-radius: 14px; background: rgba(255,255,255,.045); border: 1px solid transparent; }
.wheel-lineup-member.selected { border-color: #ffd447; background: rgba(255,212,71,.11); }
.wheel-lineup-member img,
.wheel-avatar-fallback { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; object-fit: cover; }
.wheel-avatar-fallback { display: grid; place-items: center; background: linear-gradient(135deg,#f0319b,#6d4aff); font-weight: 900; }
.wheel-custom-entry-number { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; color: #fff; background: linear-gradient(135deg,#f0319b,#6d4aff); font-size: .78rem; font-weight: 900; }
.wheel-lineup-member > span:last-child { min-width: 0; display: grid; }
.wheel-lineup-member strong,
.wheel-lineup-member small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wheel-lineup-member small { color: var(--muted, #aaa6b8); }
.wheel-slot-badge { margin-left: auto; flex: 0 0 auto; padding: .3rem .48rem; border-radius: 999px; color: #eadfff; background: rgba(124,92,255,.22); font-size: .7rem; white-space: nowrap; }
.wheel-spin-button,.wheel-button-shuffle,.wheel-button-delay { width: 100%; min-height: 52px; margin: .5rem 0; font-size: 1.03rem; }
.wheel-button-spin { border-color: #42df8a; color: #07150d; background: linear-gradient(135deg,#5ee49b,#32bc73); }
.wheel-button-spin:hover,.wheel-button-spin:focus-visible { background: linear-gradient(135deg,#7af0b0,#45d588); }
.wheel-button-shuffle { border-color: #5aa9ff; color: #fff; background: linear-gradient(135deg,#3c9cff,#246bd7); }
.wheel-button-shuffle:hover,.wheel-button-shuffle:focus-visible { background: linear-gradient(135deg,#67b4ff,#327ee9); }
.wheel-button-delay { border-color: #ff73bf; color: #fff; background: linear-gradient(135deg,#f84fab,#d62886); }
.wheel-button-delay:hover,.wheel-button-delay:focus-visible { background: linear-gradient(135deg,#ff78c4,#e33b97); }
.wheel-control-grace { margin-top: .5rem; border-color: rgba(132,211,255,.38); }
.wheel-control-grace summary { color: #08233a; background: linear-gradient(135deg,#b9e8ff,#70c6f2); }
.wheel-control-grace form { display: grid; gap: .55rem; padding: .8rem; }
.wheel-control-grace label { display: grid; gap: .3rem; font-size: .8rem; font-weight: 800; }
.wheel-control-grace select { min-width: 0; width: 100%; }
.wheel-button-grace { color: #08233a; background: linear-gradient(135deg,#c7efff,#79cbf5); }
.wheel-button-grace:hover,.wheel-button-grace:focus-visible { background: linear-gradient(135deg,#dcf6ff,#91dafd); }
.wheel-control-grid { display: grid; gap: .8rem; margin-top: 1rem; }
.wheel-pull-form { margin: 0; padding: 0; }
.wheel-control-grid .wheel-pull-form { padding: 0; }
.wheel-pull-form .wheel-button-pull { width: 100%; min-height: 52px; margin: 0; text-align: center; }
.wheel-control-action { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.035); }
.wheel-control-action summary { padding: .8rem 1rem; color: #fff; font-weight: 900; cursor: pointer; list-style: none; text-align: center; }
.wheel-control-action summary::-webkit-details-marker { display: none; }
.wheel-control-pull summary { background: linear-gradient(135deg,#d94855,#a92939); }
.wheel-control-remove summary { background: linear-gradient(135deg,#ffad47,#d87518); }
.wheel-control-slots summary { background: linear-gradient(135deg,#8a65ef,#6542c6); }
.wheel-control-action[open] summary { border-bottom: 1px solid rgba(255,255,255,.12); }
.wheel-control-grid form { display: grid; gap: .55rem; padding: .8rem; }
.wheel-button-pull { color: #fff; background: #c73543; }
.wheel-button-remove { color: #fff; background: linear-gradient(135deg,#f6a43d,#d66d12); }
.wheel-button-slots { color: #fff; background: #7653d7; }
.wheel-control-grid label { display: grid; gap: .3rem; font-size: .8rem; font-weight: 800; }
.wheel-control-grid small { color: var(--muted, #aaa6b8); line-height: 1.35; }
.wheel-control-grid input,.wheel-control-grid select { min-width: 0; width: 100%; }
.wheel-appearance summary { color: #fff; cursor: pointer; font-weight: 850; }
.wheel-appearance form { display: grid; gap: 1rem; margin-top: 1rem; }
.wheel-appearance label { display: grid; gap: .4rem; font-weight: 750; }
.wheel-appearance label small { color: var(--muted, #aaa6b8); font-weight: 500; }
.wheel-appearance .wheel-remove-option { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted, #aaa6b8); }
.wheel-remove-option input { width: auto; margin: 0; }
.wheel-save-appearance { border-color: #42df8a; color: #fff; background: linear-gradient(135deg,#32bc73,#218b55); }
.wheel-save-appearance:hover,.wheel-save-appearance:focus-visible { color: #fff; background: linear-gradient(135deg,#45d588,#29a665); }
.wheel-custom-editor form { display: grid; gap: .7rem; }
.wheel-custom-editor textarea { min-height: 330px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.55; }
.wheel-custom-editor p,.wheel-custom-editor small,.wheel-custom-safety { color: var(--muted, #aaa6b8); }
.wheel-save-custom { color: #fff; background: linear-gradient(135deg,#7c5cff,#f0319b); }
.wheel-custom-safety { margin: 1rem 0 0; padding: .8rem; border-radius: 12px; background: rgba(255,255,255,.05); font-size: .85rem; line-height: 1.5; }
.wheel-winner-backdrop.custom-result .wheel-winner-avatar,.wheel-winner-backdrop.custom-result #wheel-winner-name { display: none; }
.wheel-winner-backdrop.custom-result #wheel-winner-title { max-width: 100%; margin: 1.15rem 0 1.4rem; font-size: clamp(2rem,6vw,4rem); line-height: 1.08; overflow-wrap: anywhere; }
.wheel-winner-backdrop.slot-announcement #wheel-winner-title { max-width: 100%; margin: 0 0 .8rem; color: #fff; font-size: clamp(.92rem,3.5vw,1.7rem); line-height: 1.12; letter-spacing: .01em; white-space: nowrap; }
.wheel-winner-backdrop.slot-announcement #wheel-winner-name { margin: 0 0 1.35rem; font-size: clamp(1.05rem,3.5vw,1.4rem); line-height: 1.35; }
.wheel-winner-backdrop.fire-announcement { background: radial-gradient(circle at 50% 72%,rgba(255,80,20,.32),transparent 42%),rgba(8,2,2,.82); }
.wheel-winner-backdrop.fire-announcement .wheel-winner-modal { border-color: rgba(255,126,48,.72); background: radial-gradient(circle at 50% 105%,rgba(255,91,24,.46),transparent 44%),radial-gradient(circle at 50% 0%,rgba(166,18,10,.48),transparent 52%),linear-gradient(145deg,#2a0909,#0e0708 72%); box-shadow: 0 30px 100px rgba(0,0,0,.72),0 0 82px rgba(255,72,24,.38); animation: wheel-fire-modal-arrive .52s cubic-bezier(.2,.9,.2,1.12) both,wheel-fire-modal-pulse 1.15s .52s ease-in-out 2; }
.wheel-winner-backdrop.fire-announcement .wheel-winner-modal::before { background: linear-gradient(90deg,#7d0909,#ff5a1f,#ffdc62,#ff5a1f,#7d0909); }
.wheel-winner-backdrop.fire-announcement .wheel-winner-kicker { color: #ffb14a; }
.wheel-winner-backdrop.fire-announcement .wheel-winner-avatar { border-color: #ffc15a; background: linear-gradient(135deg,#ffb52e,#d31f12); box-shadow: 0 0 0 7px rgba(255,92,24,.25),0 0 42px rgba(255,83,20,.48); }
.wheel-winner-backdrop.golden-ticket-announcement { background: radial-gradient(ellipse at 50% 0%,rgba(255,224,85,.42),transparent 55%),rgba(7,5,1,.8); }
.wheel-winner-backdrop.golden-ticket-announcement .wheel-winner-modal,.wheel-winner-backdrop.golden-buzzer-announcement .wheel-winner-modal { border-color: rgba(255,220,86,.78); background: radial-gradient(circle at 50% 0%,rgba(255,211,55,.42),transparent 48%),linear-gradient(145deg,#342506,#100c05 72%); box-shadow: 0 30px 100px #000b,0 0 90px rgba(255,208,50,.42); }
.wheel-winner-backdrop.golden-ticket-announcement .wheel-winner-modal::before,.wheel-winner-backdrop.golden-buzzer-announcement .wheel-winner-modal::before { background: linear-gradient(90deg,#966800,#ffe26f,#fff5c1,#ffe26f,#966800); }
.wheel-winner-backdrop.keycard3-announcement .wheel-winner-modal { border-color: rgba(255,141,40,.75); background: repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 7px),radial-gradient(circle at 0 0,rgba(255,139,31,.48),transparent 52%),linear-gradient(145deg,#35154e,#10091b 72%); box-shadow: 0 30px 100px #000b,0 0 82px rgba(173,70,255,.42); }
.wheel-winner-backdrop.keycard3-announcement .wheel-winner-modal::before { background: linear-gradient(90deg,#ff8a24,#ffcf59,#9f4dff,#5a25b7); }
.wheel-winner-backdrop.keycard5-announcement .wheel-winner-modal { border-color: rgba(88,255,155,.72); background: radial-gradient(circle at 15% 0,rgba(95,255,169,.33),transparent 45%),radial-gradient(circle at 100% 85%,rgba(255,63,166,.34),transparent 48%),linear-gradient(145deg,#092a23,#140b24 75%); box-shadow: 0 30px 100px #000b,0 0 82px rgba(61,255,153,.34); }
.wheel-winner-backdrop.keycard5-announcement .wheel-winner-modal::before { background: linear-gradient(90deg,#41ef9a,#b4ffce,#ff62ba,#ff9cd1); }
.wheel-winner-backdrop.rivalpass-announcement { background: radial-gradient(circle at 50% 35%,rgba(93,142,255,.34),transparent 46%),rgba(2,4,15,.84); }
.wheel-winner-backdrop.rivalpass-announcement .wheel-winner-modal { border-color: rgba(121,175,255,.82); background: linear-gradient(145deg,#091a45,#150928 72%); box-shadow: 0 30px 100px #000c,0 0 100px rgba(89,149,255,.5); animation: wheel-winner-arrive .35s ease-out both,wheel-lightning-flash .42s .4s ease-out 3; }
.wheel-winner-backdrop.rivalpass-announcement .wheel-winner-modal::before { background: linear-gradient(90deg,#477dff,#d9e9ff,#9c62ff,#ffffff); }
.wheel-winner-backdrop.golden-buzzer-announcement { background: radial-gradient(circle at 50% 45%,rgba(255,212,65,.38),transparent 48%),rgba(7,5,1,.78); }
.wheel-winner-backdrop.riff-rose-announcement { background: radial-gradient(circle at 28% 20%,rgba(42,210,255,.28),transparent 42%),radial-gradient(circle at 72% 78%,rgba(255,48,174,.34),transparent 45%),rgba(9,3,22,.84); }
.wheel-winner-backdrop.riff-rose-announcement .wheel-winner-modal { border-color: rgba(122,221,255,.82); background: radial-gradient(circle at 18% 0,rgba(55,207,255,.34),transparent 46%),radial-gradient(circle at 100% 92%,rgba(245,47,178,.42),transparent 48%),linear-gradient(145deg,#32105d,#100724 72%); box-shadow: 0 30px 100px #000c,0 0 95px rgba(183,75,255,.48); }
.wheel-winner-backdrop.riff-rose-announcement .wheel-winner-modal::before { background: linear-gradient(90deg,#31d8ff,#8f65ff,#ff49b8,#72e8ff); }
.wheel-winner-backdrop.riff-rose-announcement .wheel-winner-kicker { color: #86eaff; }
.wheel-winner-backdrop.riff-rose-announcement .wheel-winner-avatar { border-color: #ff8bd2; background: linear-gradient(135deg,#39d8ff,#8b57ff 48%,#ff4fb8); box-shadow: 0 0 0 7px rgba(92,208,255,.2),0 0 48px rgba(255,73,184,.48); }
.wheel-winner-backdrop.grace-announcement { background: radial-gradient(circle at 50% 15%,rgba(197,239,255,.48),transparent 50%),rgba(7,18,35,.8); }
.wheel-winner-backdrop.grace-announcement .wheel-winner-modal { border-color: rgba(183,231,255,.88); background: radial-gradient(circle at 50% 0,rgba(215,245,255,.38),transparent 48%),linear-gradient(145deg,#235c87,#172741 72%); box-shadow: 0 30px 100px #000b,0 0 92px rgba(133,210,255,.48); }
.wheel-winner-backdrop.grace-announcement .wheel-winner-modal::before { background: linear-gradient(90deg,#7fcfff,#eefbff,#c8b8ff,#7fcfff); }
.wheel-winner-backdrop.grace-announcement .wheel-winner-kicker { color: #d8f5ff; }
.wheel-winner-backdrop.grace-announcement .wheel-winner-avatar { border-color: #d9f6ff; background: linear-gradient(135deg,#bcecff,#8bcafa 52%,#beaaff); box-shadow: 0 0 0 7px rgba(196,239,255,.24),0 0 48px rgba(158,218,255,.52); }
.wheel-item-effects.effect-grace i { color: #e9faff; text-shadow: 0 0 12px #8bd7ff,0 0 24px #c4b4ff; }
.wheel-item-effects.effect-grace i:nth-child(3n+2) { color: #a9ddff; }
.wheel-item-effects.effect-grace i:nth-child(3n) { color: #d8c9ff; }
.wheel-item-effects.effect-riff_rose i { color: #ff6fc7; text-shadow: 0 0 12px #704cff,0 0 24px #39dfff; }
.wheel-item-effects.effect-riff_rose i:nth-child(3n+2) { color: #66ddff; }
.wheel-item-effects.effect-riff_rose i:nth-child(3n) { color: #a983ff; }
.wheel-theme-preview { display: flex; height: 22px; overflow: hidden; border-radius: 999px; }
.wheel-theme-preview i { flex: 1; }
.wheel-page-colors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.wheel-page-colors input[type="color"] { width: 100%; min-height: 46px; padding: .2rem; cursor: pointer; }
.wheel-feedback { min-height: 1.5rem; margin: 1.25rem auto 0; color: rgba(255,255,255,.68); font-size: .82rem; text-align: center; }
.wheel-feedback .success { color: #a7e8c4; }
.wheel-feedback .error { color: #ffadb5; }
.wheel-empty-state { min-height: 330px; display: grid; place-content: center; text-align: center; }
.wheel-winner-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(3,4,10,.72); backdrop-filter: blur(10px); }
.wheel-page > .wheel-winner-backdrop { position: fixed; z-index: 10020; inset: 0; }
.wheel-winner-backdrop[hidden] { display: none; }
.wheel-winner-backdrop.custom-result .wheel-winner-avatar { display: none; }
.wheel-winner-modal { position: relative; width: min(92vw, 520px); padding: clamp(1.4rem, 5vw, 2.4rem); overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 28px; color: #fff; background: radial-gradient(circle at 50% 0%, rgba(240,49,155,.32), transparent 48%), linear-gradient(145deg,#1b1730,#0d0d17 70%); box-shadow: 0 30px 100px rgba(0,0,0,.58), 0 0 65px rgba(240,49,155,.18); text-align: center; animation: wheel-winner-arrive .45s cubic-bezier(.2,.9,.2,1.12) both; }
.wheel-winner-modal::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: linear-gradient(90deg,#f0319b,#ffd447,#52e0ff,#7c5cff); }
.wheel-winner-close { position: absolute; z-index: 2; top: .8rem; right: .8rem; width: 42px; height: 42px; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.1); font-size: 1.7rem; cursor: pointer; }
.wheel-winner-kicker { display: block; margin-bottom: 1rem; color: #ffd447; font-size: .78rem; font-weight: 950; letter-spacing: .16em; }
.wheel-winner-avatar { width: 98px; height: 98px; margin: 0 auto 1rem; overflow: hidden; border: 4px solid #fff; border-radius: 50%; background: linear-gradient(135deg,#f0319b,#6d4aff); box-shadow: 0 0 0 7px rgba(240,49,155,.22); }
.wheel-winner-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wheel-winner-avatar span { display: grid; width: 100%; height: 100%; place-items: center; font-size: 2.6rem; font-weight: 950; }
.wheel-winner-modal h2 { margin: 0; color: rgba(255,255,255,.68); font-size: 1rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.wheel-winner-modal p { margin: .25rem 0 1.25rem; overflow-wrap: anywhere; font-size: clamp(2rem, 8vw, 3.6rem); font-weight: 900; line-height: 1.05; }
.wheel-winner-done { min-width: 150px; }
.wheel-winner-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.wheel-winner-actions form { margin: 0; }
.wheel-winner-remove { min-width: 150px; border-color: #ffb24b; color: #fff; background: linear-gradient(135deg,#f6a43d,#d66d12); }
.wheel-winner-remove:hover,.wheel-winner-remove:focus-visible { color: #fff; background: linear-gradient(135deg,#ffb85f,#e87b18); }
.wheel-confetti { position: fixed; z-index: 1001; inset: 0; overflow: hidden; pointer-events: none; }
.wheel-confetti i { position: absolute; top: -6vh; left: 0; width: 10px; height: 18px; border-radius: 2px; opacity: 0; transform: translate3d(var(--confetti-x),-8vh,0) rotate(0); animation: wheel-confetti-fall var(--confetti-duration) var(--confetti-delay) cubic-bezier(.12,.62,.35,1) forwards; }
.wheel-fire { position: fixed; z-index: 1001; inset: 0; overflow: hidden; pointer-events: none; }
.wheel-fire i { position: absolute; bottom: -12vh; left: 0; width: 24px; height: 38px; border-radius: 55% 45% 64% 36% / 68% 42% 58% 32%; opacity: 0; filter: blur(.5px) drop-shadow(0 0 12px currentColor); transform: translate3d(var(--fire-x),8vh,0) rotate(45deg) scale(var(--fire-scale)); animation: wheel-fire-rise var(--fire-duration) var(--fire-delay) ease-out forwards; }
.wheel-item-effects { position: fixed; z-index: 1001; inset: 0; overflow: hidden; pointer-events: none; }
.wheel-item-effects i { position: absolute; top: 0; left: 0; color: #ffd85a; opacity: 0; filter: drop-shadow(0 0 12px currentColor); font-style: normal; font-size: clamp(1rem,2.8vw,2.25rem); transform: translate3d(var(--effect-x),var(--effect-y),0) scale(var(--effect-scale)); animation: wheel-item-burst var(--effect-duration) var(--effect-delay) ease-out forwards; }
.wheel-item-effects.effect-keycard3 i:nth-child(odd) { color: #ff8d2c; }
.wheel-item-effects.effect-keycard3 i:nth-child(even) { color: #a34fff; }
.wheel-item-effects.effect-keycard5 i:nth-child(odd) { color: #54ffa8; }
.wheel-item-effects.effect-keycard5 i:nth-child(even) { color: #ff65b8; }
.wheel-item-effects.effect-rivalpass i { color: #d7e8ff; font-size: clamp(1.7rem,5vw,4rem); }
.wheel-item-effects.effect-golden_buzzer i,.wheel-item-effects.effect-golden_ticket i { color: #ffe164; }
@keyframes wheel-winner-arrive { from { opacity: 0; transform: translateY(24px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes wheel-confetti-fall { 8% { opacity: 1; } to { opacity: .95; transform: translate3d(calc(var(--confetti-x) + 6vw),108vh,0) rotate(var(--confetti-spin)); } }
@keyframes wheel-fire-rise { 8% { opacity: .92; } 70% { opacity: .72; } to { opacity: 0; transform: translate3d(calc(var(--fire-x) + var(--fire-drift)),-112vh,0) rotate(405deg) scale(calc(var(--fire-scale) * .25)); } }
@keyframes wheel-fire-modal-arrive { 0% { opacity: 0; transform: scale(.82); } 55% { transform: scale(1.035); } 100% { opacity: 1; transform: scale(1); } }
@keyframes wheel-fire-modal-pulse { 50% { box-shadow: 0 30px 100px rgba(0,0,0,.72),0 0 112px rgba(255,87,20,.62); transform: scale(1.012); } }
@keyframes wheel-item-burst { 0% { opacity: 0; transform: translate3d(var(--effect-x),var(--effect-y),0) scale(.2) rotate(-20deg); } 18% { opacity: 1; } 72% { opacity: .92; } 100% { opacity: 0; transform: translate3d(calc(var(--effect-x) - 2vw),calc(var(--effect-y) - 18vh),0) scale(calc(var(--effect-scale) * 1.3)) rotate(140deg); } }
@keyframes wheel-lightning-flash { 35% { filter: brightness(1.8); box-shadow: 0 0 130px rgba(175,215,255,.88); } }

@media (max-width: 880px) {
  .wheel-layout { grid-template-columns: 1fr; }
  .wheel-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wheel-lineup-card { grid-row: span 2; }
}

@media (max-width: 600px) {
  .wheel-page { margin-inline: -.5rem; padding-top: .75rem; border-radius: 20px; }
  .wheel-hero { margin-bottom: 1.2rem; }
  .wheel-stage-links { display: grid; grid-template-columns: 1fr; }
  .wheel-stage-links a { text-align: center; }
  .wheel-layout { gap: .8rem; }
  .wheel-stage { padding: .75rem; border-radius: 18px; }
  .wheel-stage-heading { align-items: start; flex-direction: column; }
  .wheel-stage-tools { width: 100%; justify-content: stretch; }
  .wheel-mode-switch { width: 100%; }
  .wheel-mode-switch button { flex: 1; }
  .wheel-queue-picker { width: 100%; }
  .wheel-canvas-shell { margin-top: .65rem; border-radius: 18px; }
  .wheel-sound-toggle { top: .45rem; right: .45rem; bottom: auto; min-height: 30px; padding: .28rem .52rem; border-width: 1px; background: rgba(5,7,14,.68); font-size: .66rem; box-shadow: 0 5px 14px rgba(0,0,0,.2); }
  .wheel-pointer { border-top-width: 15px; border-bottom-width: 15px; border-right-width: 35px; }
  .wheel-sidebar { grid-template-columns: 1fr; }
  .wheel-lineup-card,
  .wheel-staff-card { padding: 1rem; border-radius: 18px; }
  .wheel-lineup { max-height: 330px; }
  .wheel-lineup-member { gap: .55rem; }
  .wheel-slot-badge { font-size: .64rem; }
  .wheel-page-colors { grid-template-columns: 1fr; }
  .wheel-stage-fx-settings .wheel-page-colors,
  .wheel-stage-fx-settings .checkbox-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wheel-winner-modal { border-radius: 22px; }
  .wheel-winner-avatar { width: 82px; height: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  .wheel-winner-modal { animation: none; }
  .wheel-confetti,.wheel-fire,.wheel-item-effects { display: none; }
  .wheel-page-fx > i { animation: none!important; }
}
/* Web-only Quiz & Form workflows */
.qf-shell,.qf-participant-shell{width:min(1420px,calc(100% - 32px));margin:28px auto 80px}.qf-narrow{max-width:720px}.qf-hero,.qf-builder-head{display:flex;justify-content:space-between;gap:28px;align-items:flex-end;padding:34px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:linear-gradient(135deg,rgba(240,49,155,.15),rgba(99,73,209,.14))}.qf-hero h1,.qf-builder-head h1,.qf-response-head h1{font-size:clamp(2.1rem,5vw,4.7rem);line-height:.98;margin:.2rem 0 1rem}.qf-create-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:min(560px,100%)}.qf-create-grid form{display:grid;gap:8px}.qf-item-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px;margin-top:22px}.qf-item-card,.qf-panel,.qf-question,.qf-section,.qf-participant-card,.qf-sheet-answer,.qf-denied{background:rgba(17,17,29,.84);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:22px}.qf-item-card{display:flex;flex-direction:column;min-height:260px}.qf-item-card h2{margin:18px 0 8px}.qf-item-card p{color:var(--muted,#aaa);flex:1}.qf-card-top,.qf-stats,.qf-actions,.qf-check-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.qf-kind,.qf-status,.qf-review-pill{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;padding:6px 10px;border-radius:999px;background:#333}.qf-kind.quiz{background:#633c9d;color:#eadbff}.qf-kind.form{background:#174e58;color:#bff8ff}.qf-status.published{background:#174f38;color:#a8ffd2}.qf-status.closed,.qf-status.archived{background:#493d28;color:#ffe4a7}.qf-stats{padding:16px 0;border-top:1px solid rgba(255,255,255,.08)}.qf-stats span{flex:1}.qf-builder-layout,.qf-sheet-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:22px;margin-top:22px}.qf-builder-aside{display:grid;gap:14px;align-content:start;position:sticky;top:18px;height:max-content}.qf-panel summary{cursor:pointer;font-weight:800;font-size:1.05rem}.qf-panel[open] summary{margin-bottom:18px}.qf-panel label,.qf-basics label,.qf-question label,.qf-review-form label{display:grid;gap:7px;margin:12px 0;font-weight:650}.qf-panel input,.qf-panel textarea,.qf-panel select,.qf-basics input,.qf-basics textarea,.qf-question input,.qf-question textarea,.qf-question select,.qf-filter-bar input,.qf-filter-bar select,.qf-participant-card input,.qf-participant-card textarea,.qf-participant-card select{width:100%;box-sizing:border-box}.qf-basics{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.qf-basics .wide{grid-column:1/-1}.qf-sections{display:grid;gap:20px;margin-top:20px}.qf-section{border-left:5px solid var(--dashboard-gradient-start,#f0319b)}.qf-section>header,.qf-question>header,.qf-question>footer,.qf-sheet-answer>header{display:flex;align-items:center;justify-content:space-between;gap:10px}.qf-section-number{font-size:.75rem;letter-spacing:.12em;color:#ff71bd;font-weight:900}.qf-question-list{display:grid;gap:14px;margin:18px 0}.qf-question{background:rgba(255,255,255,.035);padding:18px;border-radius:16px}.qf-question.dragging{opacity:.45;border-color:#ff4faf}.qf-question>header .q-type{flex:1}.qf-drag{cursor:grab;font-size:1.3rem;color:#aaa}.icon-button{border:0;background:#2d2d3c;color:white;border-radius:10px;padding:8px 12px;cursor:pointer}.qf-two,.qf-three{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.qf-three{grid-template-columns:repeat(3,1fr)}.qf-grading{margin:14px 0;padding:14px;border:1px solid rgba(156,110,255,.32);border-radius:14px;background:rgba(99,73,209,.08)}.qf-add-row,.qf-action-stack{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.qf-action-stack form{flex:1}.qf-action-stack button{width:100%}.qf-audit{display:grid;gap:10px;padding-left:18px}.qf-audit li small{display:block;color:#999}.qf-participant-shell{max-width:900px}.qf-participant-card{padding:0;overflow:hidden;background:rgba(16,16,27,.94)}.qf-cover{display:block;width:100%;max-height:320px;object-fit:cover}.qf-response-head{padding:42px 42px 24px}.qf-response-head p,.qf-instructions{white-space:pre-wrap;color:#c7c4d0}.qf-instructions{padding:16px;border-radius:14px;background:rgba(255,255,255,.05)}.qf-progress{height:7px;margin:0 42px;background:#292938;border-radius:20px;overflow:hidden}.qf-progress span{display:block;width:20%;height:100%;background:linear-gradient(90deg,#f0319b,#765de8)}#qf-response-form{padding:12px 42px 42px}.qf-participant-section>header{margin:30px 0 14px}.qf-participant-question,.qf-info-block{padding:22px;margin:14px 0;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.03)}.qf-participant-question h3{margin:0 0 6px}.qf-participant-question>p{color:#aaa}.qf-choice-list{display:grid;gap:9px}.qf-choice{display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:12px;cursor:pointer}.qf-choice input{width:auto}.qf-choice img{width:68px;height:54px;object-fit:cover;border-radius:9px}.qf-question-image,.qf-info-block img{max-width:100%;max-height:340px;border-radius:14px;object-fit:contain}.qf-scale input{margin-top:12px}.qf-scale output{display:block;font-size:1.8rem;font-weight:800;text-align:center}.qf-scale div{display:flex;justify-content:space-between;color:#aaa}.qf-grid-question{overflow:auto}.qf-grid-question table{min-width:620px;width:100%;border-collapse:collapse}.qf-grid-question th,.qf-grid-question td{padding:9px;border-bottom:1px solid #333;text-align:center}.qf-submit-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;bottom:10px;padding:18px;border-radius:18px;background:rgba(28,27,43,.97);box-shadow:0 12px 40px #0008}.qf-submit-bar small{display:block;color:#aaa}.qf-feedback{margin-top:10px;padding:12px;border-radius:10px}.qf-feedback.correct{background:#153d2b;color:#aaffcd}.qf-feedback.incorrect{background:#4b202a;color:#ffc5d0}.qf-denied{text-align:center;margin-top:80px;padding:60px}.qf-denied>span{font-size:3rem}.qf-denied small{color:#aaa}.qf-filter-bar{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto auto;gap:10px;margin:22px 0;align-items:center}.qf-review-table-wrap{overflow:auto;border-radius:18px;border:1px solid rgba(255,255,255,.1)}.qf-review-table{width:100%;min-width:900px;border-collapse:collapse;background:rgba(17,17,29,.8)}.qf-review-table th,.qf-review-table td{padding:14px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}.qf-review-table td small{display:block;color:#999}.qf-score-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}.qf-score-summary div{padding:18px;border-radius:16px;background:rgba(255,255,255,.06)}.qf-score-summary small,.qf-score-summary strong{display:block}.qf-score-summary strong{font-size:1.25rem;margin-top:4px}.qf-sheet-layout main{display:grid;gap:14px}.qf-sheet-answer h3{margin:0}.qf-answer-value{white-space:pre-wrap;margin:12px 0;color:#f3eff8}.qf-inline-grade{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:end}.qf-inline-grade label{display:grid;gap:5px}.qf-confirmation{text-align:center;padding:30px;border-radius:18px;background:rgba(71,196,143,.12)}
@media(max-width:900px){.qf-shell,.qf-participant-shell{width:min(100% - 18px,900px);margin-top:12px}.qf-hero,.qf-builder-head{align-items:stretch;flex-direction:column;padding:22px}.qf-create-grid,.qf-builder-layout,.qf-sheet-layout{grid-template-columns:1fr;min-width:0}.qf-builder-aside{position:static}.qf-basics,.qf-two,.qf-three{grid-template-columns:1fr}.qf-filter-bar{grid-template-columns:1fr 1fr}.qf-score-summary{grid-template-columns:1fr 1fr}.qf-response-head{padding:28px 20px 18px}#qf-response-form{padding:8px 20px 28px}.qf-progress{margin:0 20px}.qf-submit-bar{align-items:stretch;flex-direction:column}.qf-inline-grade{grid-template-columns:1fr}.qf-create-grid{grid-template-columns:1fr}}
@media print{.site-header,.site-legal-footer,.qf-builder-head .button,.qf-answer-sheet aside,.back-link{display:none!important}.qf-shell{width:100%;margin:0;color:#000}.qf-sheet-layout{display:block}.qf-sheet-answer,.qf-score-summary div{break-inside:avoid;background:#fff;border:1px solid #ccc;color:#000}.qf-answer-value{color:#000}}
.qf-answer-key{margin:12px 0;padding:12px;border-radius:12px;background:rgba(99,73,209,.14);color:#e7dcff}.qf-answer-key p{margin:6px 0 0;color:#c9bced}
.qf-bulk-bar{display:flex;gap:10px;justify-content:flex-end;margin:12px 0}.qf-bulk-bar select{width:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.qf-builder-save-actions{display:grid;gap:.55rem;justify-items:end}.qf-builder-save-state{color:rgba(255,255,255,.66);font-size:.76rem;font-weight:700}.qf-question.invalid{border-color:#ff5c78;box-shadow:0 0 0 3px rgba(255,92,120,.18),0 1rem 2.5rem rgba(0,0,0,.2)}.qf-question.invalid .q-options,.qf-question.invalid .q-prompt{border-color:#ff5c78}.qf-builder #qf-builder-client-error[hidden]{display:none}
@media(max-width:900px){.qf-builder-save-actions{justify-items:stretch}.qf-builder-save-state{text-align:left}}
.qf-hub{display:grid;gap:clamp(1.5rem,4vw,3rem)}.qf-hub-section{display:grid;gap:1rem}.qf-hub-section>header h2{margin:.15rem 0;font-size:clamp(1.5rem,3vw,2.35rem)}.qf-hub-section>header p:last-child{margin:.25rem 0;color:var(--muted)}.qf-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem}.qf-hub-card{display:flex;flex-direction:column;gap:.75rem;min-height:14rem;padding:1.25rem;border:1px solid rgba(255,255,255,.1);border-radius:1.25rem;background:rgba(17,17,29,.78);box-shadow:0 1rem 2.6rem rgba(0,0,0,.2)}.qf-hub-card.compact{min-height:0}.qf-hub-card h3,.qf-submission-list h3{margin:0}.qf-hub-card p{flex:1;margin:0;color:var(--muted)}.qf-hub-card small{color:var(--muted)}.qf-hub-card .button{align-self:flex-start}.qf-hub-card-head,.qf-hub-actions,.qf-dm-choice,.qf-dm-preference{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center}.qf-status-pill{display:inline-flex;padding:.35rem .65rem;border-radius:999px;background:rgba(118,93,232,.2);color:#e8e0ff;font-size:.72rem;font-weight:800}.qf-submission-list{display:grid;gap:.75rem}.qf-submission-list>article{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:1rem;align-items:center;padding:1rem 1.15rem;border:1px solid rgba(255,255,255,.1);border-radius:1rem;background:rgba(17,17,29,.72)}.qf-submission-result{display:grid;gap:.4rem;justify-items:end}.qf-member-note{grid-column:1/-1;margin:0;padding:.8rem 1rem;border-left:3px solid var(--accent,#f0319b);border-radius:.6rem;background:rgba(255,255,255,.05)}.qf-empty{grid-column:1/-1;padding:1.5rem;border:1px dashed rgba(255,255,255,.15);border-radius:1rem;color:var(--muted)}.qf-dm-choice{margin:1.2rem 0;padding:1rem;border:1px solid rgba(255,255,255,.12);border-radius:1rem;background:rgba(255,255,255,.035)}.qf-dm-choice legend{padding:0 .35rem;font-weight:800}.qf-dm-choice input,.qf-dm-preference input{width:auto}.qf-dm-choice small{flex-basis:100%;color:var(--muted)}.qf-dm-preference{margin:1rem 0;padding:1rem;border:1px solid rgba(255,255,255,.1);border-radius:1rem;background:rgba(255,255,255,.04)}.qf-current-note{padding:.65rem;border-radius:.6rem;background:rgba(255,255,255,.05);color:var(--muted)}@media(max-width:700px){.qf-submission-list>article{grid-template-columns:1fr}.qf-submission-result{justify-items:start}.qf-hub-card .button,.qf-submission-list .button{width:100%;justify-content:center}}
.qf-quick-status{display:grid;min-width:15rem;gap:.45rem}.qf-quick-status textarea{width:100%;min-height:3.5rem;box-sizing:border-box;resize:vertical}.qf-quick-status .button{justify-self:start}.qf-bulk-bar+.field-hint{margin-top:-.2rem;color:var(--muted);font-size:.78rem}

/* Student community reviews and click-to-load performance gallery */
.student-community-feature { margin-top: clamp(1.5rem,4vw,3.2rem); padding: clamp(1rem,2.5vw,1.65rem); overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: clamp(1rem,2vw,1.5rem); background: linear-gradient(145deg,rgba(28,29,43,.44),rgba(13,14,24,.45)); box-shadow: 0 1.4rem 3.5rem rgba(0,0,0,.22); backdrop-filter: blur(8px); }
.student-feature-heading { align-items: end; margin-bottom: 1rem; }
.student-feature-heading h2 { margin: .15rem 0 .25rem; font-size: clamp(1.45rem,3vw,2.25rem); }
.student-feature-heading p:last-child { max-width: 48rem; margin: 0; color: var(--muted); }
.student-review-summary { display: grid; grid-template-columns: auto auto; gap: 0 .25rem; align-items: center; min-width: 6rem; padding: .65rem .8rem; border: 1px solid rgba(255,215,86,.2); border-radius: 1rem; color: #ffd75e; background: rgba(255,214,77,.075); text-align: right; }
.student-review-summary strong { color: #fff; font-size: 1.35rem; line-height: 1; }
.student-review-summary > span { line-height: 1; }
.student-review-summary small { grid-column: 1/-1; color: var(--muted); font-size: .68rem; }
.student-review-carousel { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .55rem; align-items: center; }
.student-review-track { display: grid; grid-auto-columns: minmax(min(100%,25rem),1fr); grid-auto-flow: column; gap: .8rem; overflow-x: auto; padding: .15rem; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.student-review-track::-webkit-scrollbar { display: none; }
.student-review-arrow { width: 2.35rem; height: 2.35rem; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: #fff; background: rgba(255,255,255,.075); cursor: pointer; font-size: 1.65rem; line-height: 1; transition: background .2s ease,transform .2s ease; }
.student-review-arrow:hover,.student-review-arrow:focus-visible { background: rgba(240,49,155,.24); transform: scale(1.05); }
.student-review-card { display: flex; flex-direction: column; min-height: 13rem; padding: 1rem; scroll-snap-align: start; border: 1px solid rgba(255,255,255,.09); border-radius: 1rem; background: linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); }
.student-review-card header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .65rem; align-items: center; }
.student-review-card header img,.student-review-avatar { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; object-fit: cover; border: 2px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; background: linear-gradient(135deg,#f0319b,#7558df); font-weight: 900; }
.student-review-card header div { min-width: 0; }
.student-review-card header strong,.student-review-card header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-review-card header small { color: var(--muted); font-size: .72rem; }
.student-review-stars { color: #ffd653; white-space: nowrap; }
.student-review-stars i { color: rgba(255,255,255,.15); font-style: normal; }
.student-review-card blockquote { flex: 1; margin: 1rem 0 .7rem; color: rgba(255,255,255,.82); font-size: .93rem; line-height: 1.62; }
.student-review-remove { align-self: start; padding: 0; border: 0; color: #ffabbc; background: transparent; cursor: pointer; font-size: .72rem; }
.student-feature-empty { display: flex; gap: .9rem; align-items: center; padding: 1rem; border: 1px dashed rgba(255,255,255,.14); border-radius: 1rem; color: var(--muted); background: rgba(255,255,255,.025); }
.student-feature-empty > span { display: grid; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#f0319b,#7558df); }
.student-feature-empty strong,.student-feature-empty p { display: block; margin: 0; }
.student-feature-empty p { margin-top: .15rem; font-size: .82rem; }
.student-review-compose,.student-showcase-editor { overflow: hidden; margin-top: 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; background: rgba(255,255,255,.025); }
.student-review-compose summary,.student-showcase-editor summary { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .9rem 1rem; cursor: pointer; list-style: none; }
.student-review-compose summary::-webkit-details-marker,.student-showcase-editor summary::-webkit-details-marker { display: none; }
.student-review-compose summary > span:first-child,.student-showcase-editor summary > span:first-child { display: grid; }
.student-review-compose summary small,.student-showcase-editor summary small { color: var(--muted); font-size: .72rem; }
.student-review-compose summary > span:last-child,.student-showcase-editor summary > span:last-child { color: var(--accent); font-size: 1.3rem; transition: transform .2s ease; }
.student-review-compose[open] summary > span:last-child,.student-showcase-editor[open] summary > span:last-child { transform: rotate(45deg); }
.student-review-form,.student-showcase-editor form { padding: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.student-review-form > label { display: grid; gap: .4rem; }
.student-review-form textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.student-review-form label small { color: var(--muted); }
.student-star-picker { margin: 0 0 1rem; padding: 0; border: 0; }
.student-star-picker legend { margin-bottom: .45rem; font-weight: 800; }
.student-star-picker > div { display: flex; flex-wrap: wrap; gap: .35rem; }
.student-star-picker label { position: relative; display: grid; width: 2.65rem; height: 2.65rem; place-items: center; cursor: pointer; }
.student-star-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.student-star-picker span { display: grid; width: 100%; height: 100%; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: .7rem; color: rgba(255,255,255,.22); background: rgba(255,255,255,.04); font-size: 1.25rem; }
.student-star-picker input:checked + span,.student-star-picker label:hover span,.student-star-picker input:focus-visible + span { border-color: rgba(255,214,83,.7); color: #ffd653; background: rgba(255,214,83,.11); }
.student-star-picker small { position: absolute; right: .16rem; bottom: .04rem; color: rgba(255,255,255,.46); font-size: .55rem; }
.student-review-note { margin: 1rem 0 0; color: var(--muted); font-size: .78rem; }
.student-video-carousel { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .55rem; align-items: center; }
.student-video-grid { display: flex; width: 100%; min-width: 0; gap: .85rem; overflow-x: auto; padding: .15rem; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.student-video-grid::-webkit-scrollbar { display: none; }
.student-video-card { flex: 0 0 15.5rem; min-width: 0; overflow: hidden; scroll-snap-align: start; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; background: rgba(7,8,15,.72); }
.student-video-arrow { width: 2.35rem; height: 2.35rem; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: #fff; background: rgba(255,255,255,.075); cursor: pointer; font-size: 1.65rem; line-height: 1; transition: background .2s ease,transform .2s ease; }
.student-video-arrow:hover,.student-video-arrow:focus-visible { background: rgba(240,49,155,.24); transform: scale(1.05); }
.student-video-stage { position: relative; display: grid; aspect-ratio: 9/16; place-items: center; overflow: hidden; background: #070811 center/cover no-repeat; isolation: isolate; }
.student-video-stage.youtube { background-image: linear-gradient(rgba(5,6,10,.16),rgba(5,6,10,.45)),var(--video-thumbnail); }
.student-video-stage.tiktok { background: radial-gradient(circle at 38% 36%,rgba(32,240,220,.4),transparent 35%),radial-gradient(circle at 65% 65%,rgba(255,27,94,.46),transparent 37%),linear-gradient(145deg,#14131e,#080910); }
.student-video-stage.tiktok::before { content: "TikTok"; position: absolute; color: rgba(255,255,255,.11); font-size: clamp(2rem,5vw,4.2rem); font-weight: 950; transform: rotate(-8deg); }
.student-video-stage button,.student-video-external { position: relative; z-index: 2; display: grid; min-width: 4.7rem; padding: .65rem .8rem; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff; background: rgba(9,10,18,.74); box-shadow: 0 .75rem 2rem rgba(0,0,0,.35); cursor: pointer; text-decoration: none; backdrop-filter: blur(12px); }
.student-video-stage button span,.student-video-external span { font-size: 1.1rem; }
.student-video-stage button strong,.student-video-external strong { font-size: .68rem; }
.student-video-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.student-video-card footer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .65rem; align-items: center; padding: .75rem .85rem; }
.student-video-card footer div { min-width: 0; }
.student-video-card footer span,.student-video-card footer strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-video-card footer span { color: var(--accent); font-size: .62rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.student-video-card footer a { color: var(--muted); font-size: .7rem; text-decoration: none; }
.student-showcase-editor-row { grid-template-columns: minmax(10rem,.7fr) minmax(14rem,1.3fr) auto; }
.student-showcase-editor .section-heading { align-items: center; }
.student-showcase-alert { margin-bottom: .8rem; }
.student-showcase-client-error { margin: 0; }

@media (max-width: 640px) {
  .student-community-feature { margin-top: 1.25rem; padding: .8rem; border-radius: 1rem; }
  .student-feature-heading { align-items: start; flex-direction: column; }
  .student-review-summary { align-self: start; }
  .student-review-carousel { grid-template-columns: 1fr; }
  .student-review-arrow { position: absolute; z-index: 3; top: calc(50% - 1.2rem); }
  .student-review-arrow.previous { left: .4rem; }
  .student-review-arrow.next { right: .4rem; }
  .student-review-track { grid-auto-columns: 100%; padding-inline: .1rem; }
  .student-review-card { padding: .85rem 2.8rem; }
  .student-review-card header { grid-template-columns: auto minmax(0,1fr); }
  .student-review-stars { grid-column: 1/-1; }
  .student-video-carousel { grid-template-columns: 1fr; }
  .student-video-arrow { position: absolute; z-index: 3; top: calc(50% - 1.2rem); }
  .student-video-arrow.previous { left: .4rem; }
  .student-video-arrow.next { right: .4rem; }
  .student-video-grid { padding-inline: .1rem; }
  .student-video-card { flex-basis: 76vw; max-width: 17rem; }
  .student-showcase-editor-row { grid-template-columns: 1fr; }
  .student-showcase-editor .section-heading { align-items: stretch; flex-direction: column; }
}
/* Choice questions always use option identity matching, not text grading. */
.qf-auto-grading{display:flex;align-items:center;min-height:48px;padding:0 14px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.045);color:#dcd3f6;font-weight:750}

/* Each quiz/form owns its complete page palette. */
body.qf-themed-body {
  --accent: var(--qf-accent, #f0319b);
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 4%, color-mix(in srgb, var(--qf-accent) 28%, transparent), transparent 34rem),
    linear-gradient(145deg, var(--qf-bg-start, #24133a), var(--qf-bg-end, #10131f)) fixed;
}
body.qf-themed-body .qf-theme-swatch {
  min-height: 4.5rem;
  margin-top: 1rem;
  border: 1px solid color-mix(in srgb, var(--qf-accent) 55%, white 10%);
  border-radius: .85rem;
  background:
    radial-gradient(circle at 18% 15%, color-mix(in srgb, var(--qf-accent) 48%, transparent), transparent 45%),
    linear-gradient(135deg, var(--qf-bg-start), var(--qf-bg-end));
}
.qf-theme-color-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}
.qf-theme-color-grid label {
  align-content: start;
  min-width: 0;
  font-size: .82rem;
}
.qf-theme-color-grid input[type="color"] {
  min-height: 3rem;
  padding: .3rem;
  cursor: pointer;
}
body.qf-themed-body .qf-section {
  border-left-color: var(--qf-accent);
}
body.qf-themed-body .qf-section-number,
body.qf-themed-body .qf-shell a:not(.button) {
  color: color-mix(in srgb, var(--qf-accent) 70%, white);
}
body.qf-themed-body .qf-progress span {
  background: linear-gradient(90deg, var(--qf-accent), color-mix(in srgb, var(--qf-accent) 42%, white));
}
body.qf-themed-body .qf-choice input,
body.qf-themed-body .qf-scale input {
  accent-color: var(--qf-accent);
}
body.qf-themed-body .qf-choice:has(input:checked) {
  border-color: var(--qf-accent);
  background: color-mix(in srgb, var(--qf-accent) 18%, rgba(20, 20, 31, .9));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--qf-accent) 28%, transparent);
}
body.qf-themed-body .qf-participant-shell .button:not(.secondary):not(.danger),
body.qf-themed-body .qf-builder-save-actions .button:not(.secondary):not(.danger) {
  color: #fff;
  background: var(--qf-accent);
  border-color: color-mix(in srgb, var(--qf-accent) 75%, black);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 8px 22px color-mix(in srgb, var(--qf-accent) 24%, transparent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}
body.qf-themed-body .qf-question:focus-within,
body.qf-themed-body .qf-participant-question:focus-within {
  border-color: color-mix(in srgb, var(--qf-accent) 72%, white);
}
@media (max-width: 720px) {
  .qf-theme-color-grid { grid-template-columns: 1fr; }
}

.branded-error-page {
  width: min(1120px, 100%);
  min-height: clamp(520px, 68vh, 760px);
  margin: clamp(24px, 5vw, 72px) auto;
  padding: clamp(28px, 6vw, 76px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--error-accent) 45%, transparent);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(10, 8, 20, .82), rgba(18, 14, 32, .62)),
    linear-gradient(135deg, var(--dashboard-gradient-start), var(--dashboard-gradient-end));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
}

.branded-error-copy h1 {
  margin: 8px 0 16px;
  font-size: clamp(2.3rem, 6vw, 5rem);
  line-height: .98;
}

.branded-error-copy > p:not(.branded-error-status) {
  max-width: 620px;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
}

.branded-error-status {
  margin: 0;
  color: var(--error-accent);
  font-size: clamp(4.5rem, 13vw, 9rem);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: .8;
}

.branded-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.branded-error-primary {
  background: var(--error-accent);
  border-color: var(--error-accent);
}

.branded-error-art {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.branded-error-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.branded-error-art-fallback span {
  color: color-mix(in srgb, var(--error-accent) 70%, white);
  font-size: clamp(5rem, 14vw, 10rem);
  font-weight: 900;
  opacity: .55;
  transform: rotate(-8deg);
}

.error-theme-controls {
  padding: 18px;
  display: grid;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: rgba(0, 0, 0, .18);
}

.error-theme-controls h3,
.error-theme-controls p {
  margin: 0;
}

@media (max-width: 760px) {
  .branded-error-page {
    min-height: 0;
    margin: 18px auto;
    padding: 30px 22px;
    grid-template-columns: 1fr;
    border-radius: 24px;
  }

  .branded-error-art {
    width: min(100%, 360px);
    margin: 0 auto;
    grid-row: 1;
  }

  .branded-error-actions {
    display: grid;
  }

  .branded-error-actions .button {
    width: 100%;
    justify-content: center;
  }
}
.hidden-poll-ledger { max-width: 1050px; margin: 0 auto; display: grid; gap: 18px; }
.hidden-poll-ledger-header, .hidden-poll-ledger-group { padding: clamp(20px, 3vw, 34px); border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: rgba(10,8,20,.72); }
.hidden-poll-ledger-header h1 { margin: 4px 0 10px; }
.hidden-poll-ledger-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hidden-poll-ledger-stats span { padding: 9px 13px; border-radius: 999px; background: rgba(255,255,255,.08); }
.hidden-poll-ledger-group h2 { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.hidden-poll-ledger-group h2 span { color: #f6a8d2; font-size: .8em; white-space: nowrap; }
.hidden-poll-voter-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hidden-poll-voter-list a { max-width: 100%; padding: 7px 11px; overflow-wrap: anywhere; border-radius: 10px; color: #fff; background: rgba(240,49,155,.14); text-decoration: none; }
.hidden-poll-ledger-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; }
@media (max-width: 620px) {
  .hidden-poll-ledger-group h2 { align-items: flex-start; flex-direction: column; gap: 4px; }
  .hidden-poll-ledger-pagination { flex-wrap: wrap; }
}

/* Event-planning navigation and controls */
@media (min-width: 851px) {
  .site-header nav.site-navigation { min-width: 0; align-items: center; overflow: visible; }
  .site-header .session-user,
  .site-header .desktop-header-logout { flex: 0 0 auto; }
  .owner-tools-nav-group { margin-left: auto; }
  .nav-overflow-group > .nav-group-menu { right: 0; left: auto; }
}
.nav-wide-only { display: none; }
@media (min-width: 1780px) {
  .site-header nav.site-navigation > .nav-wide-only { display: flex; }
  .site-header nav.site-navigation > .nav-overflow-group { display: none; }
}

.planner-display-toggle {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
}
.planner-display-toggle button {
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
  cursor: pointer;
}
.planner-display-toggle button:hover,
.planner-display-toggle button:focus-visible { color: white; background: rgba(255, 255, 255, .09); }
.planner-display-toggle button.active { color: white; background: #f32ca8; }
.planner-event-time { margin-right: .22rem; }
.events-planner[data-event-label-mode="name-only"] .planner-month-view .planner-event-time,
.events-planner[data-event-label-mode="name-only"] .planner-week-view .planner-event-time { display: none; }
.events-planner[data-event-label-mode="name-only"] .planner-event-name { margin-left: 0; }
.event-detail-description { grid-column: 1 / -1; }
.event-detail-description dd {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.events-sync-button {
  color: #fff;
  border-color: #1fb66a;
  background: #168a4b;
  box-shadow: 0 8px 22px rgba(22, 138, 75, .28);
}
.events-sync-button:hover,
.events-sync-button:focus-visible { color: #fff; background: #1aa45a; }
.events-sync-button:focus-visible { outline: 3px solid rgba(120, 255, 182, .38); outline-offset: 2px; }
.events-sync-button:disabled,
.events-sync-button.is-loading { opacity: .68; cursor: wait; filter: saturate(.7); transform: none; }
.event-banner-fields {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
}
.event-banner-fields legend { padding: 0 7px; font-weight: 900; }
.event-banner-preview {
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 5;
  margin: 8px 0 12px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(0, 0, 0, .22);
}
.event-banner-preview img { width: 100%; height: 100%; object-fit: cover; }
.event-banner-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.event-banner-fields > small { display: block; margin: 10px 0; color: var(--muted); line-height: 1.45; }

@media (max-width: 1000px) {
  .planner-event .planner-event-time { display: inline; }
  .events-planner[data-event-label-mode="name-only"] .planner-month-view .planner-event-time,
  .events-planner[data-event-label-mode="name-only"] .planner-week-view .planner-event-time { display: none; }
}
@media (max-width: 720px) {
  .planner-display-toggle { width: 100%; }
  .planner-display-toggle button { flex: 1; }
  .event-banner-inputs { grid-template-columns: 1fr; }
  .event-banner-preview { aspect-ratio: 16 / 6; }
}

/* Event planner staff editor: keep every control inside the details surface. */
.planner-detail-panel,
.planner-detail-panel *,
.event-proposal-dialog,
.event-proposal-dialog * { box-sizing: border-box; }
.planner-detail-panel { overflow-x: hidden; }
.planner-detail-panel form,
.planner-detail-panel fieldset,
.planner-detail-panel label,
.planner-detail-panel input,
.planner-detail-panel select,
.planner-detail-panel textarea,
.event-proposal-dialog form,
.event-proposal-dialog fieldset,
.event-proposal-dialog label,
.event-proposal-dialog input,
.event-proposal-dialog select,
.event-proposal-dialog textarea {
  min-width: 0;
  max-width: 100%;
}
.planner-detail-panel input,
.planner-detail-panel select,
.planner-detail-panel textarea,
.event-proposal-dialog input,
.event-proposal-dialog select,
.event-proposal-dialog textarea { width: 100%; }
.planner-detail-panel textarea,
.event-proposal-dialog textarea {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.planner-detail-panel .planner-form-grid { grid-template-columns: minmax(0, 1fr); }
.planner-detail-panel .planner-form .span-2 { grid-column: auto; }
.planner-detail-panel .event-banner-inputs { grid-template-columns: minmax(0, 1fr); }
.planner-detail-panel .event-banner-preview { aspect-ratio: 16 / 6; }
.planner-detail-panel .event-banner-preview img { display: block; max-width: 100%; }
.planner-event.status-completed,
.planner-agenda-event.status-completed { opacity: .78; }
.planner-event.status-cancelled,
.planner-event.status-declined,
.planner-event.status-discord_unavailable,
.planner-agenda-event.status-cancelled,
.planner-agenda-event.status-declined,
.planner-agenda-event.status-discord_unavailable {
  opacity: .62;
  filter: saturate(.55);
}
.planner-duplicate-form { display: grid; margin: 12px 0; }
.planner-duplicate-form .button { width: 100%; justify-content: center; }
.planner-mobile-detail-close { display: none; }

@media (max-width: 720px) {
  .planner-detail-panel { width: 100%; min-height: 0; overflow-x: hidden; }
  .planner-detail-panel.open {
    position: fixed;
    inset: 0;
    z-index: 1200;
    max-height: 100dvh;
    margin: 0;
    padding: 16px 14px 32px;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: #100d1d;
  }
  .planner-mobile-detail-close {
    display: inline-flex;
    min-height: 44px;
    margin-bottom: 12px;
    align-items: center;
    color: #fff;
    font-weight: 850;
    text-decoration: none;
  }
  .event-proposal-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 18px 14px 28px;
    border-radius: 0;
  }
  .event-proposal-dialog .planner-form-grid { grid-template-columns: minmax(0, 1fr); }
  .event-proposal-dialog .planner-form .span-2 { grid-column: auto; }
  .planner-detail-panel button,
  .event-proposal-dialog button,
  .planner-filters select { min-height: 46px; }
}