:root { --bg:#0e0f12; --panel:#17191e; --line:#2a2d35; --text:#f2f2f2; --muted:#9ca2ad; --accent:#d7ff5f; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
a { color:inherit; text-decoration:none; } a:hover { color:var(--accent); }
.topbar { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; padding:16px 28px; background:rgba(14,15,18,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.topbar nav { display:flex; gap:22px; }.brand { font-weight:800; letter-spacing:.03em; }.logout-form { display:inline; margin:0; }.logout-form button { border:0; padding:0; background:transparent; color:inherit; cursor:pointer; }.logout-form button:hover { color:var(--accent); }.container { max-width:1240px; margin:0 auto; padding:34px 26px 80px; }
h1 { font-size:clamp(32px,5vw,58px); line-height:1.03; margin:4px 0 10px; max-width:780px; } h2 { margin-top:0; } h3 { margin-top:28px; color:#d2d5dc; }
.eyebrow { margin:0; text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--accent); }.crumb { color:var(--muted); }.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:28px; }
.generation-hero { margin:4px 0 34px; }.generation-hero h1 { max-width:1240px; margin:14px 0 18px; letter-spacing:-.035em; }.generation-hero-meta,.generation-hero-tools { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }.generation-hero-meta { justify-content:space-between; }.generation-hero-tools { min-height:28px; }.generation-model { color:var(--muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }.suno-link { display:inline-flex; align-items:center; gap:6px; border:1px solid #464b56; border-radius:999px; padding:6px 10px; color:#c4cad5; font-size:12px; font-weight:650; }.suno-link:hover { border-color:var(--accent); background:#202712; color:var(--accent); }.generation-title { display:inline-flex; align-items:baseline; gap:6px; }.suno-icon-link { display:inline-grid; place-items:center; width:19px; height:19px; border:1px solid #4a4e58; border-radius:5px; color:var(--muted); font-size:14px; line-height:1; }.suno-icon-link:hover { border-color:var(--accent); color:var(--accent); background:#202712; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:24px 0; }.stat,.panel { background:var(--panel); border:1px solid var(--line); border-radius:14px; }.stat { padding:22px; }.stat strong { display:block; font-size:34px; }.stat span,.muted,small { color:var(--muted); }.stat-link { transition:border-color .16s,transform .16s; }.stat-link:hover { color:var(--text); transform:translateY(-2px); }.stat-link small { display:block; margin-top:8px; font-size:11px; }.stat-all { border-color:#3f4653; background:linear-gradient(140deg,#1c2028,#17191e 68%); }.stat-all small { color:#aeb9cb; }.stat-all:hover { border-color:#aeb9cb; }.stat-review { border-color:#6e5228; background:linear-gradient(140deg,#302516,#17191e 68%); }.stat-review strong,.stat-review small { color:#ffc25a; }.stat-review:hover { border-color:#ffc25a; }.stat-contender { border-color:#315b77; background:linear-gradient(140deg,#152b39,#17191e 68%); }.stat-contender strong,.stat-contender small { color:#73c7ff; }.stat-contender:hover { border-color:#73c7ff; }.stat-finalist { border-color:#674677; background:linear-gradient(140deg,#2b1735,#17191e 68%); }.stat-finalist strong,.stat-finalist small { color:#e5a7ff; }.stat-finalist:hover { border-color:#e5a7ff; }
.grid { display:grid; gap:18px; margin-top:18px; }.grid.two { grid-template-columns:1fr 1fr; }.grid.unequal { grid-template-columns:minmax(280px,.75fr) minmax(0,1.5fr); }.panel { padding:22px; overflow:hidden; }
.todo-layout { align-items:start; }.todo-filters { align-items:stretch; flex-wrap:wrap; }.todo-filters input { flex:1 1 220px; }.todo-filters select { flex:0 1 auto; }.todo-list { margin-top:18px; }.todo-item { display:flex; justify-content:space-between; gap:20px; padding:18px 0; border-top:1px solid var(--line); }.todo-item:first-child { border-top:0; padding-top:0; }.todo-item:last-child { padding-bottom:0; }.todo-item-main { min-width:0; }.todo-item-heading { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }.todo-item h2 { margin:0; font-size:18px; }.todo-item p { margin:7px 0; color:#d3d7df; }.todo-item.is-complete h2 { color:var(--muted); text-decoration:line-through; }.todo-links { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }.priority-low,.priority-normal,.priority-high { border:1px solid var(--line); border-radius:999px; padding:2px 8px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }.priority-high { border-color:#82404e; color:#ff9ba8; }.priority-normal { border-color:#657633; color:var(--accent); }
.todo-generation-picker { margin-bottom:13px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#111318; }.todo-picker-label { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:7px; }.todo-picker-label label { color:#d6dae2; font-weight:700; }.todo-picker-label label span { color:var(--muted); font-weight:400; }.todo-picker-label small { color:var(--muted); }.todo-selected-generations { display:grid; gap:7px; min-height:34px; margin:9px 0 14px; }.todo-selection-heading,.todo-results-heading { display:flex; justify-content:space-between; margin-top:14px; color:#d6dae2; font-size:12px; }.todo-selection-heading span,.todo-results-heading { color:var(--muted); }.todo-selection-empty { width:100%; margin:0; padding:9px 10px; border:1px dashed #3b404a; border-radius:8px; color:var(--muted); font-size:12px; }.todo-generation-chip { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:9px; width:100%; border:1px solid #657633; border-left:4px solid #91a94a; border-radius:8px; padding:7px 9px 7px 10px; color:var(--accent); background:#202b12; font-size:12px; }.todo-generation-chip > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.todo-generation-chip[data-generation-status="unreviewed"] { border-left-color:#7b8798; }.todo-generation-chip[data-generation-status="interesting"] { border-left-color:#ff9bd5; }.todo-generation-chip[data-generation-status="contender"] { border-left-color:#8bd4ff; }.todo-generation-chip[data-generation-status="finalist"] { border-left-color:#d7b4ff; }.todo-generation-chip[data-generation-status="master"] { border-left-color:#e5ff82; }.todo-generation-chip[data-generation-status="rejected"] { border-left-color:#ff9ba8; }.todo-generation-chip button { flex:0 0 auto; border:0; padding:0 2px; background:transparent; color:#aeb98d; font-size:17px; line-height:1; }.todo-generation-chip button:hover { color:var(--accent); }.todo-generation-results { display:grid; gap:6px; max-height:250px; margin-top:7px; overflow:auto; }.todo-generation-result { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; padding:10px 12px; text-align:left; }.todo-generation-result-copy { min-width:0; display:grid; gap:2px; }.todo-generation-result-copy strong,.todo-generation-result-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.todo-generation-result-copy b { margin-left:5px; color:var(--accent); }.todo-generation-result-action { flex:0 0 auto; border:1px solid #4a4e58; border-radius:999px; padding:3px 8px; color:#c4cad5; font-size:11px; font-weight:700; text-transform:uppercase; }.todo-generation-result:hover .todo-generation-result-action { border-color:var(--accent); color:var(--accent); }.todo-generation-result.is-selected { border-color:#91a94a; background:#202b12; }.todo-generation-result.is-selected .todo-generation-result-action { border-color:#91a94a; color:var(--accent); }
.featured-controls { margin:22px 0 26px; padding:16px; border:1px solid #53602b; border-radius:14px; background:radial-gradient(circle at 92% 10%,#d7ff5f18,transparent 36%),linear-gradient(135deg,#1c2413,#17191e 70%); }.featured-controls .eyebrow { margin-bottom:12px; color:#d7ff5f; }.featured-controls-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.featured-control { min-height:74px; display:flex; flex-direction:column; justify-content:space-between; padding:12px 14px; border:1px solid #657633; border-radius:10px; background:#11150caa; }.featured-control span { color:#bac59d; font-size:12px; letter-spacing:.05em; text-transform:uppercase; }.featured-control strong { color:var(--accent); font-size:26px; letter-spacing:-.03em; }
.row-link { display:flex; justify-content:space-between; gap:20px; padding:13px 2px; border-top:1px solid var(--line); }.row-link:first-of-type { border-top:0; }
.pill,.tag,.status { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:3px 9px; font-size:12px; }.tag { margin:2px; color:#d9dde5; }.status.unreviewed { border-color:#46505f; color:#b8c0ce; background:#1a1e25; }.status.rejected { border-color:#82404e; color:#ff9ba8; background:#321a21; }.status.interesting { border-color:#a8528b; color:#ff9bd5; background:linear-gradient(135deg,#3a1932,#281b38); }.status.contender { border-color:#3c7aa4; color:#8bd4ff; background:#152a38; }.status.finalist { border-color:#8c5dcc; color:#d7b4ff; background:#2d1b42; }.status.master { border-color:#879d38; color:#e5ff82; background:#273015; }.hero-status { padding:8px 14px; font-size:13px; font-weight:800; letter-spacing:.045em; box-shadow:0 0 0 1px #ffffff08,inset 0 1px #ffffff12; }
.release-badge { display:inline-block; margin:2px 0 2px 8px; border:1px solid #657633; border-radius:999px; padding:2px 7px; color:var(--accent); font-size:11px; vertical-align:middle; }.compact { margin-bottom:18px; }.compact h2 { margin-bottom:8px; }.compact p { margin:6px 0; }
.song-row { align-items:center; }.song-name { display:block; font-weight:650; }.release-context { display:inline-flex; align-items:center; gap:6px; margin:5px 8px 0 0; color:#dce3c1; font-size:12px; }.release-kicker { display:block; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.release-name { border-left:2px solid var(--accent); padding-left:7px; }.release-strip { display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; margin-bottom:18px; padding:16px 18px; border:1px solid #53602b; border-radius:14px; background:linear-gradient(120deg,#1a2012,#17191e); }.release-strip > .release-kicker { width:100%; }.release-strip-item { display:flex; flex-direction:column; min-width:220px; padding:10px 12px; border:1px solid #5d6c32; border-radius:10px; background:#11150c; }.release-strip-item strong { color:var(--accent); }.release-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }.release-card { display:grid; grid-template-columns:112px 1fr; gap:16px; min-height:164px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--panel); transition:border-color .16s,transform .16s; }.release-card:hover { border-color:var(--accent); color:var(--text); transform:translateY(-2px); }.release-art { display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:1; padding:13px; border-radius:10px; overflow:hidden; background:radial-gradient(circle at 78% 15%,#d7ff5f55,transparent 34%),linear-gradient(145deg,#4f5b25,#151a10 62%,#0b0c0e); color:#f4f9e4; }.release-art span,.release-art em { font-size:10px; font-style:normal; letter-spacing:.08em; text-transform:uppercase; opacity:.82; }.release-art strong { font-size:18px; line-height:1.08; overflow-wrap:anywhere; }.release-card-copy { display:flex; flex-direction:column; justify-content:center; }.release-card-copy h2 { margin:3px 0 0; font-size:22px; line-height:1.12; }.release-card-copy p { margin:7px 0; color:#d3d7df; }.release-hero { display:grid; grid-template-columns:minmax(170px,260px) 1fr; gap:28px; align-items:center; margin:10px 0 30px; }.hero-art { width:min(260px,100%); box-shadow:0 16px 40px #0007; }.hero-art strong { font-size:34px; }
.hint { color:#b9c8ff; font-size:12px; }
.filters,.bulk { display:flex; gap:10px; align-items:center; margin-bottom:16px; }.bulk { justify-content:flex-end; }
input,select,textarea,button { font:inherit; color:var(--text); background:#101216; border:1px solid var(--line); border-radius:8px; padding:9px 11px; } input,textarea { width:100%; } button { width:auto; cursor:pointer; background:#252932; } button:hover { border-color:var(--accent); }.form-stack > div { margin-bottom:13px; }.form-stack label { display:block; margin-bottom:5px; color:#d6dae2; }.helptext { display:block; font-size:12px; color:var(--muted); }
.rating-options { display:flex; gap:4px; margin:0; }.rating-options label { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:30px; margin:0; padding:0 8px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:#101216; cursor:pointer; font-size:13px; }.rating-options label:has(input:checked) { border-color:var(--accent); color:#11150b; background:var(--accent); font-weight:800; }.rating-options label:hover { border-color:var(--accent); color:var(--text); }.rating-options label:has(input:focus-visible) { outline:2px solid #d7ff5f88; outline-offset:2px; }.rating-options input { position:absolute; opacity:0; pointer-events:none; width:1px; }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; min-width:760px; } th,td { padding:11px; border-top:1px solid var(--line); text-align:left; vertical-align:top; } th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; background:#0d0f12; border:1px solid var(--line); border-radius:10px; padding:14px; max-height:440px; overflow:auto; } dl { display:grid; grid-template-columns:90px 1fr; gap:8px; } dt { color:var(--muted); }.note { border-top:1px solid var(--line); padding-top:12px; margin-top:12px; }.flash { padding:10px 14px; border:1px solid #657633; border-radius:8px; margin-bottom:18px; }
@media (max-width:800px) { .stats { grid-template-columns:1fr 1fr; }.grid.two,.grid.unequal,.release-hero { grid-template-columns:1fr; }.page-head { align-items:flex-start; flex-direction:column; }.topbar { padding:14px 18px; }.container { padding:24px 16px 60px; }.hero-art { width:180px; }.release-card { grid-template-columns:90px 1fr; } }
.actions { display:flex; gap:10px; margin-bottom:18px; }.actions form { margin:0; }.inline-form { display:flex; gap:7px; }.inline-form input { min-width:130px; } code { color:#dce3c1; }.todo-generation-result-meta { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:0 0 auto; }.todo-generation-result-meta .status { white-space:nowrap; }.todo-generation-chip .status { white-space:nowrap; padding:2px 7px; font-size:10px; }
.search-label { display:block; margin:22px 0 6px; color:#d6dae2; font-weight:650; }.htmx-indicator { display:none; margin-top:6px; }.htmx-request.htmx-indicator { display:block; }.song-search-results { margin-top:12px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }.song-search-group { padding:12px 14px; border-top:1px solid var(--line); }.song-search-group:first-child { border-top:0; }.song-search-group h3 { margin:0 0 7px; font-size:14px; }.song-search-group h3 span { color:var(--muted); }.song-search-generation { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:6px 0; font-size:13px; }.song-search-generation button { padding:4px 7px; margin-left:5px; font-size:12px; }.song-search-generation .comparison-pick.is-selected { border-color:var(--accent); background:#44521f; color:var(--accent); box-shadow:inset 0 0 0 1px #d7ff5f55; }.search-empty { margin:10px 0 0; }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }.auth-card { width:min(440px,100%); padding:32px; }.auth-card h1 { font-size:36px; margin-bottom:26px; }.auth-card form p { margin:0 0 15px; }.auth-card label { display:block; margin-bottom:6px; }.auth-card input { width:100%; }.auth-card button { width:100%; margin-top:8px; }.auth-error { padding:10px 12px; border:1px solid #82404e; border-radius:8px; color:#ff9ba8; }
.release-card-wip { border-color:#7c4fa0; background:linear-gradient(135deg,#24182f,#17191e 65%); }.release-card-wip:hover { border-color:#d7a6ff; }.release-card-wip .release-art { background:radial-gradient(circle at 78% 15%,#df9dff66,transparent 34%),linear-gradient(145deg,#4a235d,#1a1221 62%,#0b0c0e); }.release-strip-item-wip { border-color:#824fac; background:#21152c; }.release-strip-item-wip strong { color:#e4b2ff; }.release-planner { margin-bottom:22px; }.release-planner summary { cursor:pointer; color:#e5b7ff; font-weight:700; }.release-planner form { max-width:620px; margin-top:16px; }.release-assignment { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 18px; }.release-assignment strong { display:block; margin-top:3px; }.release-assignment form { display:flex; align-items:center; gap:8px; }.quiet-button { padding:4px 8px; color:var(--muted); font-size:12px; }
.release-track-adder { display:flex; align-items:center; justify-content:space-between; gap:18px; }.release-track-adder h2 { margin:0; }.release-track-adder form { display:flex; align-items:center; gap:8px; }.release-track-adder select { min-width:240px; }