/* Voci design system. Shared tokens and components; page-specific layout below. */
:root { color-scheme: dark; --bg:#101416; --panel:#192023; --panel-2:#202a2d; --fg:#f5f3ec; --muted:#b0bdbe; --line:#344246; --accent:#b5ebcf; --warn:#f4d397; --bad:#ffaaaa; --radius:18px; --field:#12191c; --shadow:0 18px 48px #00000024; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(ellipse at 80% 0,#25433b50,transparent 42rem),var(--bg); color:var(--fg); font:16px/1.6 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
[hidden],.hidden { display:none !important; }
a { color:var(--accent); text-underline-offset:4px; font-weight:600; }
a:hover { text-decoration-thickness:2px; }
::selection { background:var(--accent); color:var(--bg); }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
button,input,select,textarea { font:inherit; }
button { min-height:44px; padding:10px 18px; border:1px solid transparent; border-radius:10px; background:var(--accent); color:#13261d; font-weight:650; cursor:pointer; transition:background .15s,border-color .15s; }
button:hover { background:#cef6df; }
button:active { background:#91c6ad; }
button:disabled { opacity:.55; cursor:wait; }
button.secondary { background:var(--panel-2); color:var(--fg); border-color:var(--line); }
button.secondary:hover { background:#2d3a3e; }
input:not([type=checkbox]),select,textarea { max-width:100%; min-height:48px; padding:11px 14px; background:var(--field); color:var(--fg); border:1px solid #53666a; border-radius:10px; }
input:not([type=checkbox]),textarea,select.full { width:100%; }
input::placeholder,textarea::placeholder { color:#99aaad; opacity:1; }
input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent); flex-shrink:0; }
label { display:block; margin-top:18px; font-size:.9rem; font-weight:600; }
label input,label textarea,label select { margin-top:7px; }
textarea { min-height:130px; resize:vertical; }
h1,h2,h3 { color:var(--fg); line-height:1.2; font-weight:650; }
h1 { margin:0 0 14px; font-size:clamp(2.15rem,5vw,3.5rem); letter-spacing:-.045em; }
h2 { margin:0 0 12px; font-size:1.25rem; letter-spacing:-.02em; }
h3 { margin:0 0 8px; font-size:1rem; }
p { color:var(--muted); margin:12px 0; }
main { width:min(100% - 48px,1120px); margin:54px auto 80px; }
main > header { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:32px; flex-wrap:wrap; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:700; margin:0 0 14px; }
.help,.optional { color:var(--muted); font-size:.82rem; font-weight:400; }
.optional { float:right; }
.muted,.meta { color:var(--muted); }
.meta { font-size:.82rem; }
.actions,.row { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.status { min-height:1.5em; font-size:.9rem; margin-bottom:0; }
.ok { color:var(--accent); }
.error { color:var(--bad); }
.empty { padding:28px 0; color:var(--muted); }
.skip-link { position:absolute; left:24px; top:-100px; padding:12px 18px; background:var(--accent); color:var(--bg); z-index:10; }
.skip-link:focus { top:12px; }
.voci-nav { width:min(100% - 48px,1120px); margin:auto; min-height:88px; display:flex; align-items:center; gap:12px 28px; border-bottom:1px solid var(--line); flex-wrap:wrap; padding:16px 0; }
.voci-nav a { text-decoration:none; min-height:44px; display:inline-flex; align-items:center; color:var(--muted); font-size:.9rem; }
.voci-nav a:hover,.voci-nav a[aria-current=page] { color:var(--fg); }
.voci-nav a[aria-current=page] { box-shadow:inset 0 -2px var(--accent); }
.voci-nav .voci-brand { color:var(--fg); font-size:1.6rem; font-weight:750; letter-spacing:-.06em; margin-right:20px; }
.voci-session { margin-left:auto; font-size:.82rem; color:var(--muted); overflow-wrap:anywhere; max-width:240px; }
.voci-nav #vociSignIn,.voci-nav button { padding:9px 16px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--fg); font-weight:600; }
.voci-nav #vociSignIn:hover,.voci-nav button:hover { background:var(--panel-2); }
/* Account and form surfaces */
.page-account .grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.page-account section,section.panel { border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg,#ffffff03,transparent),var(--panel); padding:28px; box-shadow:var(--shadow); }
.page-account .profile-panel { grid-row:span 2; }
.check { display:flex; gap:10px; align-items:center; font-weight:400; }
.check input { margin:0; }
.favorite { padding:16px 0; border-bottom:1px solid var(--line); }
.favorite:last-child { border-bottom:0; }
.favorite strong { display:block; }
.venueGroup { padding:20px 0; border-top:1px solid var(--line); }
.venueGroup:first-child { border-top:0; padding-top:0; }
.singerActivity { margin:14px 0 4px; }
.activity { display:grid; grid-template-columns:repeat(var(--weeks,53),minmax(2px,1fr)); grid-auto-flow:column; grid-template-rows:repeat(7,8px); gap:3px; margin:12px 0 6px; }
.activity span { border-radius:2px; background:#2d3b3e; }
.activity span[data-level="1"] { background:#365e4d; }
.activity span[data-level="2"] { background:#478268; }
.activity span[data-level="3"] { background:#70b38d; }
.activity span[data-level="4"] { background:var(--accent); }
.page-auth main,.page-register main { width:min(100% - 40px,540px); padding:36px; border:1px solid var(--line); border-radius:24px; background:var(--panel); box-shadow:var(--shadow); }
.page-auth h1,.page-register h1 { font-size:clamp(2.2rem,6vw,3rem); }
.page-auth form > button { margin-top:18px; }
.verify-panel { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.verify-panel h2 { font-size:1.05rem; }
#code { font-variant-numeric:tabular-nums; letter-spacing:.16em; }
/* Forum */
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); margin:24px 0; }
.filters select { width:auto; }
.filters input[type=search] { flex:1 1 220px; width:auto; }
.chip { border:1px solid var(--line); background:transparent; color:var(--muted); padding:9px 14px; }
.chip:hover { background:var(--panel-2); }
.chip.active { background:var(--accent); color:#13261d; border-color:var(--accent); }
.page-forum .card { display:flex; gap:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:24px; margin-bottom:14px; }
.vote { display:flex; flex-direction:column; align-items:center; gap:5px; flex:0 0 48px; }
.vote button { width:48px; background:var(--panel-2); color:var(--muted); border:1px solid var(--line); padding:8px; }
.vote button:hover { border-color:var(--accent); color:var(--accent); }
.vote button.voted { background:var(--accent); color:#13261d; }
.vote span { font-size:.85rem; font-weight:650; }
.body { flex:1; min-width:0; }
.body h3 { font-size:1.15rem; margin:10px 0; }
.body h3 a { color:var(--fg); text-decoration:none; }
.body h3 a:hover { color:var(--accent); }
.badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.badge { font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:6px; border:1px solid var(--line); }
.badge.bug { background:#432a2a; color:#ffc0bc; }
.badge.feature,.badge.done { background:#213f33; color:#b5ebcf; }
.badge.question,.badge.open { background:#25354a; color:#c0d4ff; }
.badge.planned { background:#39304a; color:#decbff; }
.badge.in-progress { background:#453a22; color:#f4d397; }
.badge.declined { background:var(--panel-2); color:var(--muted); }
.excerpt { margin:0 0 12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
section.panel { margin-bottom:24px; }
.page-topic main { max-width:900px; }
.back { display:inline-flex; align-items:center; min-height:44px; margin-bottom:20px; }
.posthead { display:flex; gap:24px; }
.posthead > div:last-child { min-width:0; flex:1; }
.page-topic h1 { font-size:clamp(1.6rem,4vw,2.5rem); }
.postbody,.cbody { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.adminrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.adminrow label { margin:0; }
.comment { border-top:1px solid var(--line); padding:20px 0; }
.comment:first-child { border-top:0; padding-top:0; }
.crow { display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap; }
.comment .del { background:transparent; color:var(--muted); font-weight:400; }
.comment .del:hover { color:var(--bad); }
/* Public home and downloads */
.page-home main { text-align:center; max-width:760px; margin-top:90px; }
.page-home h1 { font-size:clamp(3rem,9vw,6rem); }
.page-home main p { max-width:34rem; margin:24px auto; font-size:1.2rem; }
.mark { display:grid; place-items:center; width:80px; height:80px; margin:0 auto 32px; border:1px solid var(--line); border-radius:24px; background:var(--panel); box-shadow:var(--shadow); }
.mark svg { width:42px; height:42px; }
.page-home footer { text-align:center; padding:40px 24px; color:var(--muted); font-size:.85rem; }
.page-releases main { max-width:900px; }
.page-releases ul { list-style:none; padding:0; }
.page-releases li { padding:24px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); margin:16px 0; }
.page-releases small { display:block; color:var(--muted); overflow-wrap:anywhere; }
@media(max-width:760px) { main { width:calc(100% - 32px); margin-top:32px; } .voci-nav { width:calc(100% - 32px); gap:8px 16px; } .voci-nav .voci-brand { margin-right:4px; } .voci-session { max-width:none; } .page-account .grid { grid-template-columns:1fr; } .page-account .profile-panel { grid-row:auto; } .page-account section,section.panel { padding:22px; } .page-forum .card { gap:14px; padding:20px; } }
@media(max-width:480px) { .voci-session { flex:1 1 150px; margin-left:0; } .voci-session:empty { display:none; } .voci-nav #vociSignIn { margin-left:auto; } .page-auth main,.page-register main { padding:24px; } .filters select,.filters input[type=search] { flex:1 1 100%; width:100%; } .posthead { gap:12px; } .page-home main { margin-top:56px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } }
@media(forced-colors:active) { .chip.active,.vote button.voted,.voci-nav a[aria-current=page] { border:2px solid Highlight; } }

/* Operational admin components, scoped away from public account pages. */
.page-admin header { padding: 28px clamp(18px, 4vw, 44px) 18px; border-bottom: 1px solid var(--line); background: #141922; }
.page-admin h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1; letter-spacing: 0; }
.page-admin h2 { margin: 0 0 12px; font-size: 1.05rem; letter-spacing: 0; }
.page-admin p { margin: 8px 0 0; color: var(--muted); }
.page-admin main { padding: 24px clamp(18px, 4vw, 44px) 44px; display: grid; gap: 24px; }
.page-admin section { display: grid; gap: 12px; }
.page-admin .meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; color: var(--muted); }
.page-admin .pill { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 6px 9px; }
.page-admin .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.page-admin .card { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 14px; min-height: 86px; }
.page-admin .card .label { color: var(--muted); font-size: .86rem; }
.page-admin .card .value { margin-top: 8px; font-size: 2rem; font-weight: 800; line-height: 1; }
.page-admin .card.error .value { color: var(--bad); font-size: 1.2rem; }
.page-admin .grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
    @media (min-width: 1080px) {.page-admin .grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.page-admin .panel { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; overflow: hidden; }
.page-admin .panel h2 { padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.page-admin .table-wrap { overflow-x: auto; }
.page-admin table { width: 100%; border-collapse: collapse; min-width: 680px; }
.page-admin th, .page-admin td { padding: 10px 12px; border-bottom: 1px solid rgba(51,64,77,.72); text-align: left; vertical-align: top; }
.page-admin th { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.page-admin td { color: var(--fg); }
.page-admin .empty { padding: 18px 16px; color: var(--muted); }
.page-admin .errors { border: 1px solid rgba(255,138,138,.45); background: rgba(255,138,138,.08); border-radius: 8px; padding: 12px 14px; color: #ffd3d3; }
.page-admin .release-lock { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 16px; display: grid; gap: 14px; }
.page-admin .release-lock strong { color: var(--warn); }
.page-admin .release-form { display: grid; gap: 10px; max-width: 780px; }
.page-admin .release-form label { display: flex; gap: 8px; align-items: center; color: var(--fg); }
.page-admin .release-form input[type="text"] { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line); background: #0f141b; color: var(--fg); }
.page-admin .release-form button { width: fit-content; border: 1px solid var(--line); background: var(--panel-2); color: var(--fg); border-radius: 6px; padding: 9px 13px; font-weight: 700; cursor: pointer; }
.page-admin .token-value { overflow-wrap: anywhere; user-select: all; border: 1px solid rgba(138,216,199,.45); background: rgba(138,216,199,.08); border-radius: 6px; padding: 12px; }
.page-admin .inline-form { display: inline-flex; margin: 0; }
.page-admin .inline-form button { border: 1px solid var(--line); background: transparent; color: var(--warn); border-radius: 5px; padding: 6px 9px; cursor: pointer; }
.page-admin code { color: var(--accent); }

.optional-profile { margin-top:18px; font-size:.85rem; color:var(--muted); }
.optional-profile summary { cursor:pointer; min-height:36px; }
.page-admin .release-lock.is-unlocked strong { color:var(--accent); }

.page-account #accountContent > section:last-child { grid-column:1 / -1; }

@media(max-width:480px) { .filters .chip { flex:1 1 calc(50% - 10px); } }

/* Singer foundations: preserve readable account actions under the shared theme. */
.page-account main button:not(.secondary),.page-auth main button,.page-register main button { background:var(--studio-gold);color:var(--studio-bg);border-color:var(--studio-gold); }
.page-account main button:hover,.page-auth main button:hover,.page-register main button:hover { background:var(--studio-gold);filter:brightness(1.08); }
.page-account .favorite button { display:block;margin-top:12px; }
.page-account details summary,.page-auth details summary,.page-register details summary { cursor:pointer;min-height:44px;padding:12px 0; }

/* Forms keep a clear gap between the final field and its action. */
.page-account form > button{margin-top:1rem}