/* ==========================================================================
   mp3ext — "Frequency Deck" theme for DataLife Engine 13.x
   Dark console look: midnight panels, coral signal, teal VU, cassette deck.
   ========================================================================== */

:root{
  --bg:#0b0e1c;
  --bg-2:#0f1325;
  --panel:#141a31;
  --panel-2:#1a2140;
  --panel-3:#212a4f;
  --line:#252d55;
  --line-soft:#1d2446;
  --ink:#eef0ff;
  --ink-2:#c9cdf0;
  --muted:#9aa1c9;
  --dim:#6b729c;
  --accent:#ff6a3d;
  --accent-2:#ff9a5c;
  --accent-ink:#1a0c06;
  --violet:#7c8cff;
  --teal:#35e0c4;
  --pink:#ff4f9a;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 18px 50px -18px rgba(0,0,0,.65);
  --glow:0 0 0 1px rgba(255,106,61,.35),0 12px 40px -10px rgba(255,106,61,.45);
  --display:"Unbounded",system-ui,sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --shell:1280px;
  --dock-h:84px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;padding-bottom:calc(var(--dock-h) + 24px);
  background:
    radial-gradient(1100px 520px at 88% -8%,rgba(124,140,255,.16),transparent 60%),
    radial-gradient(900px 480px at -10% 8%,rgba(255,106,61,.11),transparent 62%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);font:500 15px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{ /* fine grid texture */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 70%);mask:linear-gradient(180deg,#000,transparent 70%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:300;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:10px;font-weight:800}
.skip:focus{top:12px}
.masha_index{display:none!important}

.shell{position:relative;z-index:1;width:100%;max-width:var(--shell);margin:0 auto;padding:0 32px}

/* ---------- ticker ---------- */
.ticker{position:relative;z-index:2;border-bottom:1px solid var(--line-soft);background:rgba(11,14,28,.7);overflow:hidden;height:34px}
.ticker-track{display:flex;width:max-content;animation:ticker 48s linear infinite}
.ticker span{display:inline-flex;align-items:center;gap:10px;padding:0 26px;height:34px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.ticker span b{color:var(--ink-2);font-weight:500}
.ticker .live{color:var(--accent)}
.ticker .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,106,61,.18);animation:pulse 1.8s ease-in-out infinite}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,106,61,0)}}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,14,28,.78);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line-soft)}
.header-row{display:flex;align-items:center;gap:28px;height:76px}
.logo{display:inline-flex;align-items:center;gap:12px;flex:none}
.logo-mark{width:40px;height:40px;flex:none}
.logo-word{font:800 21px/1 var(--display);letter-spacing:-.02em}
.logo-word i{font-style:normal;color:var(--accent)}
.logo-word small{font:500 11px/1 var(--mono);color:var(--dim);letter-spacing:.08em;margin-left:2px}
.nav{display:flex;gap:4px}
.nav a{position:relative;padding:9px 14px;border-radius:10px;font-weight:700;font-size:14px;color:var(--muted);transition:color .2s,background .2s}
.nav a:hover{color:var(--ink);background:var(--panel)}
.nav a.is-active{color:var(--ink)}
.nav a.is-active::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--accent)}
.search{position:relative;margin-left:auto;flex:0 1 380px;min-width:0}
.search input{width:100%;height:46px;padding:0 92px 0 46px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:600 14px var(--body);transition:border-color .2s,box-shadow .2s,background .2s}
.search input::placeholder{color:var(--dim)}
.search input:focus{outline:none;border-color:var(--accent);background:var(--panel-2);box-shadow:0 0 0 4px rgba(255,106,61,.14)}
.search .s-ico{position:absolute;left:15px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--dim);pointer-events:none}
.search kbd{position:absolute;right:52px;top:50%;transform:translateY(-50%);font:500 11px/1 var(--mono);color:var(--dim);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:4px 7px;pointer-events:none}
.search button{position:absolute;right:5px;top:5px;width:36px;height:36px;border:0;border-radius:10px;background:var(--accent);color:var(--accent-ink);cursor:pointer;display:grid;place-items:center;transition:transform .15s,filter .15s}
.search button:hover{filter:brightness(1.08);transform:scale(1.04)}
.search button svg{width:17px;height:17px}

/* ---------- buttons, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:14px;border:1px solid transparent;font:800 14px/1 var(--body);letter-spacing:.01em;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s,color .2s;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);box-shadow:var(--glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,106,61,.5),0 18px 44px -10px rgba(255,106,61,.6)}
.btn-ghost{background:var(--panel);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-quiet{height:52px;padding:0 18px;background:transparent;border-color:var(--line);color:var(--muted);font-weight:700}
.btn-quiet:hover{color:var(--ink);border-color:var(--muted)}
.kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(20,26,49,.6);font:500 12px/1 var(--mono);color:var(--muted)}
.pill svg{width:14px;height:14px;color:var(--teal)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;padding:64px 0 56px}
.hero h1{font:800 clamp(40px,5.6vw,76px)/.98 var(--display);letter-spacing:-.045em;margin:0 0 22px}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent) 10%,var(--pink) 55%,var(--violet) 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{max-width:520px;margin:0 0 32px;font-size:17px;line-height:1.7;color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px}

/* the deck */
.deck{position:relative;padding:22px;border-radius:28px;background:linear-gradient(160deg,var(--panel-2),var(--panel) 55%,#10152b);border:1px solid var(--line);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05)}
.deck::after{content:"";position:absolute;inset:-1px;border-radius:28px;padding:1px;background:linear-gradient(140deg,rgba(255,106,61,.55),transparent 35%,transparent 65%,rgba(124,140,255,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.deck-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.deck-leds{display:flex;gap:6px}
.deck-leds i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.deck-leds i:first-child{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.is-playing-global .deck-leds i:nth-child(2){background:var(--teal);box-shadow:0 0 10px var(--teal)}
.cassette{position:relative;aspect-ratio:1.6;border-radius:18px;background:linear-gradient(180deg,#232b55,#1a2144);border:1px solid #2f3a6e;padding:14px;overflow:hidden}
.cassette::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 2px,transparent 2px 7px);pointer-events:none}
.cass-label{position:relative;height:100%;border-radius:12px;background:linear-gradient(180deg,#f4efe6 0 34%,var(--accent) 34% 50%,#f4efe6 50%);padding:12px 16px;color:#1b1f36;display:flex;flex-direction:column}
.cass-label .lbl-row{display:flex;justify-content:space-between;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.cass-label .lbl-title{margin-top:8px;font:800 17px/1.15 var(--display);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cass-window{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:62%;height:44%;border-radius:40px;background:#161b36;border:3px solid #2c3561;display:flex;align-items:center;justify-content:space-between;padding:0 7%}
.cass-window::before{content:"";position:absolute;left:30%;right:30%;top:38%;bottom:38%;background:#3b2a24;border-radius:3px}
.reel{position:relative;width:26%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#161b36 0 22%,#f4efe6 23% 30%,#161b36 31% 45%,transparent 46%),repeating-conic-gradient(#e9e3d8 0 20deg,#c9c1b3 20deg 60deg);box-shadow:0 0 0 4px #3b2a24}
.reel::after{content:"";position:absolute;inset:34%;border-radius:50%;background:repeating-conic-gradient(#161b36 0 30deg,transparent 30deg 60deg)}
.is-playing-global .reel{animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.deck-screen{margin-top:16px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end;padding:14px 16px;border-radius:14px;background:#0a0d1b;border:1px solid var(--line-soft)}
.deck-screen small{display:block;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.deck-screen strong{display:block;font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-screen span{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-screen>div{min-width:0}
.spectrum{display:flex;align-items:flex-end;gap:3px;height:38px}
.spectrum i{width:4px;border-radius:2px;background:linear-gradient(180deg,var(--accent),var(--teal));height:20%;opacity:.55}
.is-playing-global .spectrum i{opacity:1;animation:eq 1s ease-in-out infinite alternate}
.spectrum i:nth-child(3n){animation-duration:.72s}
.spectrum i:nth-child(4n+1){animation-duration:1.14s;animation-delay:-.3s}
.spectrum i:nth-child(5n+2){animation-duration:.86s;animation-delay:-.6s}
@keyframes eq{0%{height:14%}40%{height:92%}70%{height:46%}100%{height:70%}}

/* ---------- sections ---------- */
.section{padding:34px 0 26px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}
.section-head .idx{display:block;font:500 12px/1 var(--mono);letter-spacing:.16em;color:var(--dim);margin-bottom:10px}
.section-head h2{margin:0;font:800 clamp(24px,2.6vw,32px)/1.1 var(--display);letter-spacing:-.03em}
.section-head h2 span{color:var(--accent)}
.section-head .more{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.section-head .more:hover{color:var(--accent)}

/* moods */
.moods{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.mood{position:relative;overflow:hidden;min-height:124px;padding:18px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s,border-color .2s}
.mood::before{content:"";position:absolute;inset:auto -30% -55% auto;width:150px;height:150px;border-radius:50%;background:var(--c,var(--accent));filter:blur(38px);opacity:.38;transition:opacity .25s,transform .25s}
.mood:hover{transform:translateY(-4px);border-color:var(--c,var(--accent))}
.mood:hover::before{opacity:.65;transform:scale(1.15)}
.mood svg{position:relative;width:26px;height:26px;color:var(--c,var(--accent))}
.mood b{position:relative;font:700 15px/1.2 var(--display);letter-spacing:-.01em}
.mood small{position:relative;display:block;margin-top:4px;font:500 11px/1 var(--mono);color:var(--dim);letter-spacing:.06em}

/* ---------- track list ---------- */
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;counter-reset:trk}
.tracks.one-col{grid-template-columns:1fr}
.track{position:relative;display:grid;grid-template-columns:30px 48px minmax(0,1fr) auto auto auto;align-items:center;gap:14px;padding:10px 14px 10px 12px;border-radius:16px;border:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(26,33,64,.72),rgba(20,26,49,.72));transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;counter-increment:trk}
.track::before{content:counter(trk,decimal-leading-zero);font:500 12px/1 var(--mono);color:var(--dim);text-align:center}
.track:hover{border-color:var(--line);background:var(--panel-2);transform:translateY(-1px);box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}
.track.is-current{border-color:rgba(255,106,61,.55);background:linear-gradient(90deg,rgba(255,106,61,.12),rgba(26,33,64,.8) 55%)}
.t-play{position:relative;width:48px;height:48px;border:0;border-radius:14px;cursor:pointer;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,hsl(var(--h,14) 90% 62%),hsl(calc(var(--h,14) + 40) 85% 55%));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .15s,filter .2s}
.t-play:hover{transform:scale(1.06);filter:brightness(1.08)}
.t-play svg{width:18px;height:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.t-play .i-pause,.is-current.is-playing .t-play .i-play{display:none}
.is-current.is-playing .t-play .i-pause{display:block}
.track:nth-child(8n+1){--h:14}.track:nth-child(8n+2){--h:250}.track:nth-child(8n+3){--h:168}.track:nth-child(8n+4){--h:330}
.track:nth-child(8n+5){--h:38}.track:nth-child(8n+6){--h:210}.track:nth-child(8n+7){--h:290}.track:nth-child(8n+8){--h:130}
.t-info{min-width:0;display:block}
.t-title{display:block;font-weight:800;font-size:15px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.t-artist{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-info:hover .t-title{color:var(--accent)}
.t-wave{display:flex;align-items:center;gap:2px;height:26px;width:62px}
.t-wave i{flex:1;border-radius:2px;background:var(--line);height:30%}
.t-wave i:nth-child(1){height:35%}.t-wave i:nth-child(2){height:70%}.t-wave i:nth-child(3){height:45%}.t-wave i:nth-child(4){height:90%}.t-wave i:nth-child(5){height:55%}.t-wave i:nth-child(6){height:75%}.t-wave i:nth-child(7){height:40%}.t-wave i:nth-child(8){height:62%}.t-wave i:nth-child(9){height:30%}
.track:nth-child(even) .t-wave{transform:scaleX(-1)}
.is-current .t-wave i{background:var(--accent)}
.is-current.is-playing .t-wave i{animation:eq .9s ease-in-out infinite alternate}
.is-current.is-playing .t-wave i:nth-child(odd){animation-duration:.66s}
.t-time{font:500 12px/1 var(--mono);color:var(--muted);min-width:40px;text-align:right}
.t-dl{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--muted);border:1px solid transparent;transition:color .2s,border-color .2s,background .2s}
.t-dl:hover{color:var(--accent);border-color:var(--line);background:var(--panel)}
.t-dl svg{width:18px;height:18px}

.empty{display:flex;gap:18px;align-items:center;padding:28px;border-radius:var(--radius);border:1px dashed var(--line);background:rgba(20,26,49,.5);color:var(--muted)}
.empty[hidden]{display:none}
.empty svg{width:42px;height:42px;flex:none;color:var(--accent)}
.empty b{display:block;color:var(--ink);font:700 16px/1.3 var(--display);margin-bottom:4px}
.empty p{margin:0}
.empty a{color:var(--accent);font-weight:700}

/* features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{padding:24px;border-radius:var(--radius);border:1px solid var(--line-soft);background:var(--bg-2)}
.feature .f-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--panel-2);color:var(--teal);margin-bottom:16px}
.feature .f-ico svg{width:22px;height:22px}
.feature h3{margin:0 0 8px;font:700 17px/1.25 var(--display);letter-spacing:-.01em}
.feature p{margin:0;color:var(--muted);font-size:14px}

/* ---------- inner pages ---------- */
.page{padding:34px 0 20px;min-height:58vh}
.speedbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:22px;font:500 12px/1.5 var(--mono);color:var(--dim)}
.speedbar a{color:var(--muted)}
.speedbar a:hover{color:var(--accent)}
.page-title{font:800 clamp(28px,3.6vw,44px)/1.08 var(--display);letter-spacing:-.035em;margin:0 0 26px}

/* full track */
.full-hero{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;margin-bottom:28px}
.cover{position:relative;aspect-ratio:1;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:
  radial-gradient(120% 90% at 20% 10%,rgba(255,106,61,.55),transparent 55%),
  radial-gradient(110% 90% at 90% 100%,rgba(124,140,255,.6),transparent 55%),
  #151b36;box-shadow:var(--shadow)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover-art{position:absolute;inset:0;display:grid;place-items:center}
.cover-art::before{content:"";position:absolute;inset:14%;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.07) 0 1px,transparent 1px 9px)}
.cover-art .ca-mark{position:relative;width:44%;opacity:.95}
.cover-art .ca-tag{position:absolute;left:18px;bottom:22px;font:500 11px/1 var(--mono);letter-spacing:.14em;color:rgba(238,240,255,.75);text-transform:uppercase}
.cover-play{position:absolute;right:16px;bottom:16px;width:66px;height:66px;border:0;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.45);transition:transform .15s,background .2s,color .2s}
.cover-play:hover{transform:scale(1.07);background:var(--accent);color:var(--accent-ink)}
.cover-play svg{width:24px;height:24px}
.cover-play .i-pause,.is-current.is-playing .cover-play .i-play{display:none}
.is-current.is-playing .cover-play .i-pause{display:block}
.full-info{min-width:0}
.full-info h1{margin:0 0 10px;font:800 clamp(34px,5vw,64px)/1.02 var(--display);letter-spacing:-.045em;overflow-wrap:anywhere}
.full-artist{margin:0 0 24px;font-size:clamp(18px,2vw,22px);font-weight:600;color:var(--muted)}
.full-artist a:hover{color:var(--accent)}
.meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0;list-style:none}
.meta li{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:12px;background:var(--panel);border:1px solid var(--line-soft);font:500 13px/1 var(--mono);color:var(--ink-2)}
.meta svg{width:16px;height:16px;color:var(--teal);flex:none}
.full-actions{display:flex;flex-wrap:wrap;gap:12px}
.full-actions .i-pause,.is-current.is-playing .full-actions .js-play .i-play{display:none}
.is-current.is-playing .full-actions .js-play .i-pause{display:inline-block}

.wavebar{position:relative;display:flex;align-items:center;gap:3px;height:78px;padding:16px 18px;margin:0 0 34px;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line-soft);cursor:pointer;overflow:hidden}
.wavebar i{flex:1;min-width:2px;border-radius:3px;background:var(--line);transition:background .15s}
.wavebar i.on{background:linear-gradient(180deg,var(--accent-2),var(--accent))}
.wavebar:hover i:not(.on){background:var(--panel-3)}
.wavebar .wb-time{position:absolute;right:14px;top:6px;font:500 10px/1 var(--mono);color:var(--dim);letter-spacing:.06em}

.text-card{padding:26px 28px;border-radius:var(--radius);border:1px solid var(--line-soft);background:var(--bg-2);color:var(--ink-2);line-height:1.8;margin-bottom:34px}
.text-card h2{margin:0 0 12px;font:700 18px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink)}
.text-card a{color:var(--accent)}
.text-card.is-empty{display:none}
.seo-note{margin:0 0 34px;color:var(--dim);font-size:14px}
.seo-note b{color:var(--muted);font-weight:700}

/* service templates */
.berrors,.info-box{padding:20px 22px;border-radius:var(--radius);border:1px solid rgba(255,106,61,.35);background:rgba(255,106,61,.07);color:var(--ink-2);margin:0 0 24px}
.berrors b,.info-box b{color:var(--ink)}
.berrors a{color:var(--accent);font-weight:700}
.static-body{max-width:860px;line-height:1.8;color:var(--ink-2)}
.form-card{max-width:680px;padding:28px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel)}
.form-card h1{margin-top:0}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.form-card input[type=text],.form-card input[type=email],.form-card textarea,.form-card select{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);font:600 14px var(--body)}
.form-card input:focus,.form-card textarea:focus{outline:none;border-color:var(--accent)}
.pager{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:34px 0 10px;font:500 13px/1 var(--mono)}
.pager a,.pager>span>span,.pager .pages>*{min-width:42px;height:42px;padding:0 12px;display:inline-grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--muted)}
.pager .pages{display:flex;gap:8px;flex-wrap:wrap}
.pager .pages>span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pager .pages>span.nav_ext{background:var(--panel);border-color:var(--line);color:var(--dim)}
.pager a:hover{color:var(--ink);border-color:var(--accent)}

/* search module */
.search-hero p{max-width:640px;color:var(--muted);margin:0 0 26px}
.search-big{display:flex;gap:10px;max-width:680px;margin-bottom:34px}
.search-big input{flex:1;min-width:0;height:56px;padding:0 20px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:600 16px var(--body)}
.search-big input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,106,61,.14)}
.search-big .btn{height:56px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-weight:700;font-size:14px;color:var(--ink-2);transition:border-color .2s,color .2s,transform .2s}
.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.sub-head{margin:34px 0 16px;font:700 18px/1.2 var(--display);letter-spacing:-.02em}

/* ---------- footer ---------- */
.site-footer{position:relative;z-index:1;margin-top:40px;border-top:1px solid var(--line-soft);background:linear-gradient(180deg,transparent,rgba(15,19,37,.9))}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding:48px 0 30px}
.footer-grid h4{margin:0 0 14px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer-grid a{color:var(--muted);font-weight:600}
.footer-grid a:hover{color:var(--accent)}
.footer-grid p{color:var(--muted);margin:14px 0 0;max-width:360px}
.footer-word{font:800 clamp(64px,15vw,210px)/.8 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--line);text-align:center;user-select:none;padding:10px 0 26px;overflow:hidden;white-space:nowrap}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding:18px 0 22px;border-top:1px solid var(--line-soft);font:500 12px/1.5 var(--mono);color:var(--dim)}

/* ---------- player dock ---------- */
.dock{position:fixed;z-index:100;left:50%;bottom:14px;transform:translateX(-50%);width:min(1240px,calc(100% - 28px));height:var(--dock-h);display:grid;grid-template-columns:minmax(0,300px) auto minmax(0,1fr) auto;align-items:center;gap:26px;padding:12px 18px 12px 12px;border-radius:22px;background:rgba(20,26,49,.88);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid var(--line);box-shadow:0 24px 60px -20px rgba(0,0,0,.8)}
.now{display:flex;align-items:center;gap:13px;min-width:0}
.now-art{position:relative;width:58px;height:58px;flex:none;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,var(--accent),var(--violet));display:grid;place-items:center}
.now-art .spectrum{height:26px;gap:2px}
.now-art .spectrum i{width:3px;background:#fff;opacity:.8}
.now-txt{min-width:0}
.now-txt strong{display:block;font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-txt span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctrls{display:flex;align-items:center;gap:6px}
.ctrl{width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:color .2s,background .2s}
.ctrl:hover:not(:disabled){color:var(--ink);background:var(--panel-2)}
.ctrl:disabled{opacity:.35;cursor:default}
.ctrl svg{width:20px;height:20px}
a.ctrl{color:var(--muted)}
a.ctrl[aria-disabled=true]{opacity:.35;pointer-events:none}
.ctrl-main{width:50px;height:50px;border-radius:50%;background:var(--ink);color:var(--bg)}
.ctrl-main:hover:not(:disabled){background:var(--accent);color:var(--accent-ink)}
.ctrl-main .i-pause,.is-playing-global .ctrl-main .i-play{display:none}
.is-playing-global .ctrl-main .i-pause{display:block}
.timeline{display:flex;align-items:center;gap:12px;min-width:0;font:500 11px/1 var(--mono);color:var(--dim)}
.range{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:6px;margin:0;border-radius:6px;background:linear-gradient(90deg,var(--accent) var(--p,0%),var(--line) var(--p,0%));cursor:pointer}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--ink);border:3px solid var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.range::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--ink);border:3px solid var(--accent)}
.range:disabled{cursor:default;opacity:.6}
.dock-side{display:flex;align-items:center;gap:8px}
.vol{width:90px;flex:none}
.dock-status{position:absolute;left:84px;top:-30px;font:500 11px/1 var(--mono);color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:6px 9px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
.dock-status.show{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr;gap:40px;padding-top:44px}
  .deck{max-width:560px}
  .moods{grid-template-columns:repeat(3,1fr)}
  .dock{grid-template-columns:minmax(0,1fr) auto auto;gap:14px}
  .dock .timeline{display:none}
  .dock-side .vol{display:none}
  .dock::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--p,0%),transparent var(--p,0%))}
}
@media (max-width:860px){
  .shell{padding:0 18px}
  .nav{display:none}
  .header-row{gap:14px;height:68px}
  .search{flex:1}
  .search kbd{display:none}
  .search input{padding-right:50px}
  .tracks{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
  .full-hero{grid-template-columns:1fr;gap:28px}
  .cover{max-width:320px}
}
@media (max-width:560px){
  body{font-size:14px}
  .ticker{display:none}
  .logo-word small{display:none}
  .logo-word{font-size:18px}
  .logo-mark{width:34px;height:34px}
  .hero{padding:32px 0 36px}
  .hero-actions .btn{flex:1 1 100%}
  .moods{grid-template-columns:repeat(2,1fr);gap:10px}
  .mood{min-height:108px;padding:15px}
  .track{grid-template-columns:44px minmax(0,1fr) auto auto;gap:12px;padding:8px}
  .track::before,.t-wave{display:none}
  .t-play{width:44px;height:44px;border-radius:12px}
  .t-dl{width:34px;height:34px}
  .full-actions .btn{flex:1 1 100%}
  .meta li{font-size:12px;padding:8px 10px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
  .dock{bottom:8px;width:calc(100% - 16px);border-radius:18px;padding:10px 12px 10px 10px;gap:10px;grid-template-columns:minmax(0,1fr) auto}
  .dock-side{display:none}
  .now-art{width:48px;height:48px}
  .ctrl.prev{display:none}
  .search-big{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}