/* Countdown -- Manna / Present family look: warm monochrome shell, Inter + Mulish, white cards with a soft lift. */
:root { --bg:#fcfcfb; --card:#fff; --card-hover:#f7f6f3; --line:rgba(20,20,22,.09); --edge:rgba(20,20,22,.17); --text:#15151a; --dim:#63625f; --faint:#8b8983; --accent:#15151a;
  --up:#1a7a3c; --down:#c22e2e; --new:#b8860b; --hot:#e0342b;
  --shadow:0 1px 2px rgba(20,20,22,.045), 0 7px 20px -8px rgba(20,20,22,.14); --ease:cubic-bezier(.4,0,.2,1);
  --body:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --inter:"InterVariable","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
:root[data-theme="dark"] { --bg:#0c0c10; --card:#17171d; --card-hover:#1d1d25; --line:rgba(255,255,255,.09); --edge:rgba(255,255,255,.2); --text:#f3f3f6; --dim:#a4a6b3; --faint:#7b7e8d; --accent:#f3f3f6;
  --up:#4cc273; --down:#ff7a6b; --new:#e0a92e; --hot:#ff5a4f; --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.65); }
* { box-sizing:border-box; margin:0; padding:0; } html { -webkit-text-size-adjust:100%; }
body { min-height:100vh; background:var(--bg); color:var(--text); font-family:var(--body); -webkit-font-smoothing:antialiased; padding-bottom:calc(30px + env(safe-area-inset-bottom)); }
button, input { font:inherit; color:inherit; } a { color:inherit; }
.top { max-width:1100px; margin:0 auto; padding:calc(14px + env(safe-area-inset-top)) 16px 4px; }
.brand { display:flex; align-items:center; gap:12px; }
.logo { width:clamp(46px,8vw,60px); height:clamp(46px,8vw,60px); filter:drop-shadow(0 3px 8px rgba(255,170,40,.3)); }
h1 { font:1000 clamp(34px,7.5vw,56px)/1 var(--inter); letter-spacing:-.03em; } .tag { font:600 12px/1.2 var(--inter); letter-spacing:.08em; text-transform:uppercase; color:var(--hot); margin-top:4px; }
.tbtn { margin-left:auto; width:42px; height:42px; border-radius:50%; border:1px solid var(--edge); background:var(--card); box-shadow:var(--shadow); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.tbtn img { width:22px; height:22px; }
.swrap { position:relative; margin:14px 0 10px; } .swrap > svg { position:absolute; left:14px; top:13px; width:20px; height:20px; fill:none; stroke:var(--faint); stroke-width:2.2; stroke-linecap:round; pointer-events:none; }
#q { width:100%; font:500 16px/1 var(--body); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:14px; padding:13px 44px 13px 42px; }
#q::-webkit-search-cancel-button { -webkit-appearance:none; display:none; }
.qx { position:absolute; right:9px; top:50%; transform:translateY(-50%); width:26px; height:26px; border:0; border-radius:50%; cursor:pointer; background:color-mix(in srgb,var(--text) 10%, transparent); color:var(--dim); font-size:19px; line-height:1; } .qx[hidden] { display:none; }
.chips { display:flex; gap:7px; overflow-x:auto; padding:3px 4px 9px; scrollbar-width:none; } .chips::-webkit-scrollbar { display:none; }
.chip { flex:none; cursor:pointer; font:700 12.5px/1 var(--body); background:var(--card); border:1px solid var(--edge); border-radius:999px; padding:9px 14px; display:inline-flex; align-items:center; gap:7px; }
.chip small { font-weight:700; opacity:.6; }
.chips.sub .chip { font-weight:600; padding:7px 12px; border-color:var(--line); }
.chip[aria-pressed="true"] { background:var(--accent); color:var(--bg); border-color:var(--accent); box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.main { max-width:1100px; margin:0 auto; padding:6px 16px 20px; }
.ones { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin:4px 0 18px; }
.one { position:relative; overflow:hidden; text-align:left; cursor:default; background:var(--accent); color:var(--bg); border-radius:18px; padding:18px 18px 16px; box-shadow:var(--shadow); }
.one::after { content:"1"; position:absolute; right:10px; top:-34px; font:1000 190px/1 var(--inter); opacity:.09; pointer-events:none; }
.one .lbl { font:700 11px/1 var(--inter); letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.one .t { font:900 clamp(24px,5vw,30px)/1.05 var(--inter); letter-spacing:-.02em; margin:10px 0 3px; } .one .a { font:600 15px/1.25 var(--body); opacity:.85; } .one .s { font:600 12.5px/1.3 var(--body); opacity:.65; margin-top:8px; }
.one .btns { margin-top:14px; }
.list { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.row { display:grid; grid-template-columns:54px 1fr auto; gap:12px; align-items:center; padding:12px 14px; border-top:1px solid var(--line); } .row:first-child { border-top:0; }
@media (hover:hover) { .row:hover { background:var(--card-hover); } }
.rk { text-align:center; } .rk b { display:block; font:900 26px/1 var(--inter); letter-spacing:-.03em; }
.mv { font:800 10.5px/1 var(--inter); margin-top:5px; letter-spacing:.02em; } .mv.up { color:var(--up); } .mv.down { color:var(--down); } .mv.same { color:var(--faint); } .mv.new { color:var(--new); }
.sg { min-width:0; } .ti { font:800 16px/1.2 var(--inter); letter-spacing:-.01em; overflow-wrap:anywhere; } .ar { font:500 14px/1.3 var(--body); color:var(--dim); margin-top:2px; overflow-wrap:anywhere; }
.st { font:600 12px/1.3 var(--body); color:var(--faint); margin-top:4px; } .st b { color:var(--text); font-weight:700; }
.acts { display:flex; gap:6px; align-items:center; }
.btn { display:inline-flex; align-items:center; gap:6px; text-decoration:none; cursor:pointer; font:700 13px/1 var(--body); padding:9px 13px; border-radius:999px; border:1px solid var(--edge); background:var(--card); color:var(--text); white-space:nowrap; }
.btn.go { background:var(--hot); border-color:var(--hot); color:#fff; } .btn svg { width:12px; height:12px; fill:currentColor; }
.one .btn { background:transparent; color:var(--bg); border-color:color-mix(in srgb,var(--bg) 45%, transparent); } .one .btn.go { background:var(--hot); border-color:var(--hot); color:#fff; }
.btn:active { transform:translateY(1px); }
.fav { width:36px; height:36px; flex:none; border-radius:50%; border:1px solid var(--line); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.fav svg { width:17px; height:17px; fill:none; stroke:var(--faint); stroke-width:2; stroke-linejoin:round; } .fav[aria-pressed="true"] svg { fill:var(--new); stroke:var(--new); }
.empty { text-align:center; color:var(--dim); font:600 15px/1.5 var(--body); padding:34px 10px; }
.foot { max-width:1100px; margin:0 auto; padding:6px 16px 0; color:var(--faint); font:600 12px/1.5 var(--body); display:flex; flex-direction:column; gap:3px; } .foot a { text-decoration:underline; }
@media (max-width:560px) { .row { grid-template-columns:42px 1fr auto; padding:12px 12px; } .rk b { font-size:22px; } }

/* collapsible rows: title-only when folded (same three-bar switch as the other sites) */
.crow { display:flex; align-items:center; gap:6px; } .crow .chips { flex:1; min-width:0; }
.fold { flex:none; width:36px; height:24px; border:0; border-radius:12px; background:color-mix(in srgb,var(--text) 7%, transparent); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0; }
.fold b { display:block; width:16px; height:3px; border-radius:2px; background:var(--faint); opacity:.35; transition:opacity .15s, background .15s; }
.fold.l2 b, .fold.l0 b:first-child { opacity:1; background:var(--text); } .fold.lmix b:nth-child(odd) { opacity:1; background:var(--text); }
@media (hover:hover) { .fold:hover { background:color-mix(in srgb,var(--text) 14%, transparent); } }
.gfold { width:40px; height:34px; border-radius:17px; margin-bottom:6px; } .gfold[hidden] { display:none; }
.row .sg { cursor:pointer; } .bd { cursor:default; } .row.folded .bd { display:none; } .row.folded { padding-top:10px; padding-bottom:10px; } .row.folded .rk b { font-size:20px; } .row.folded .mv { margin-top:3px; }

/* YouTube thumbnail as the song's background */
.list { background:none; border:0; box-shadow:none; overflow:visible; display:flex; flex-direction:column; gap:10px; }
.row, .one { position:relative; isolation:isolate; } .row { background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; } .row:first-child { border-top:1px solid var(--line); }
.th { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; display:block; }
.hasimg::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(8,8,12,.9) 0%,rgba(8,8,12,.72) 55%,rgba(8,8,12,.5) 100%); }
.one.hasimg::before { background:linear-gradient(180deg,rgba(8,8,12,.55) 0%,rgba(8,8,12,.86) 100%); } .one.hasimg::after { color:#fff; opacity:.14; z-index:-1; }
.row.hasimg { color:#fff; border-color:transparent; } .row.hasimg .ti { color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.5); } .row.hasimg .ar { color:rgba(255,255,255,.82); } .row.hasimg .st { color:rgba(255,255,255,.68); } .row.hasimg .st b { color:#fff; }
.row.hasimg .mv.up { color:#6ee79a; } .row.hasimg .mv.down { color:#ff8f84; } .row.hasimg .mv.same { color:rgba(255,255,255,.6); } .row.hasimg .mv.new { color:#ffd166; }
.row.hasimg .btn:not(.go) { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); color:#fff; backdrop-filter:blur(4px); }
.row.hasimg .fav { border-color:rgba(255,255,255,.35); background:rgba(0,0,0,.25); } .row.hasimg .fav svg { stroke:rgba(255,255,255,.8); } .row.hasimg .fav[aria-pressed="true"] svg { fill:#ffd166; stroke:#ffd166; }
.row.hasimg .fold { background:rgba(255,255,255,.18); } .row.hasimg .fold b { background:#fff; }
@media (hover:hover) { .row:hover { background:var(--card); } .row.hasimg:hover .th { transform:scale(1.03); } .th { transition:transform .4s var(--ease); } }
@media (min-width:700px) { .row .bd { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:2px; } .row.folded .bd { display:none; } }
.one.hasimg { color:#fff; } .one.hasimg::after { content:none; } .one.hasimg .t { text-shadow:0 1px 8px rgba(0,0,0,.55); }
.one.hasimg .btn:not(.go) { color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12); backdrop-filter:blur(4px); }
.hasimg::before { background:linear-gradient(90deg,rgba(8,8,12,.84) 0%,rgba(8,8,12,.62) 55%,rgba(8,8,12,.34) 100%); }
.one.hasimg::before { background:linear-gradient(180deg,rgba(8,8,12,.4) 0%,rgba(8,8,12,.82) 100%); }