/* =========================================================================
   Karaokster — the remote (phone)

   Built mobile-first and thumb-first: everything you need mid-song sits in
   the bottom half of the screen. Brand runs #FF007A -> #7000FF.
   ========================================================================= */

:root {
    --pink: #FF007A;
    --purple: #7000FF;
    --brand: linear-gradient(135deg, #FF007A 0%, #7000FF 100%);
    --brand-soft: linear-gradient(135deg, rgba(255, 0, 122, .16), rgba(112, 0, 255, .16));

    --bg: #07050D;
    --bg-2: #0D0918;
    --surface: rgba(255, 255, 255, .045);
    --surface-2: rgba(255, 255, 255, .075);
    --border: rgba(255, 255, 255, .085);
    --border-lit: rgba(255, 255, 255, .16);

    --text: #FFFFFF;
    --muted: #A399BC;
    --muted-2: #6F6685;

    --radius: 18px;
    --radius-sm: 12px;
    --radius-lg: 26px;

    --nav-h: 66px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);

    --ease: cubic-bezier(.22, .9, .3, 1);
    color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overscroll-behavior-y: none;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Two fixed brand glows. Cheap (no filters), and they give the near-black
   background the pink/violet cast the logo lives in. */
body::before,
body::after {
    content: '';
    position: fixed;
    width: 90vw;
    height: 90vw;
    max-width: 620px;
    max-height: 620px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
body::before {
    top: -34vw;
    left: -30vw;
    background: radial-gradient(circle, rgba(255, 0, 122, .22) 0%, transparent 68%);
}
body::after {
    bottom: -40vw;
    right: -32vw;
    background: radial-gradient(circle, rgba(112, 0, 255, .24) 0%, transparent 68%);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

/* Icons are drawn from the sprite with no dimensions of their own, so give
   every one a sane default. Component rules below are all single-class and
   therefore still win. */
svg { width: 20px; height: 20px; flex: none; }

/* Components below set display, which would otherwise beat the UA rule. */
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 0; height: 0; }

/* ---------------------------------------------------------------- shell -- */

.app {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(var(--safe-t) + 14px) 18px 12px;
    background: linear-gradient(180deg, rgba(7, 5, 13, .96) 60%, rgba(7, 5, 13, 0));
}

.topbar__logo { height: 26px; width: auto; display: block; }

/* App switcher: the logo is the button, a small caret says it opens. */
.apps { position: relative; }

.apps__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -6px -8px;
    padding: 6px 8px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: background .2s;
}
.apps__btn:hover, .apps.is-open .apps__btn { background: var(--surface-2); }
.apps__btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.apps__caret { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.apps.is-open .apps__caret { transform: rotate(180deg); }

.apps__menu {
    position: absolute;
    top: calc(100% + 12px);
    left: -8px;
    z-index: 60;
    width: min(290px, calc(100vw - 24px));
    padding: 8px;
    border-radius: var(--radius);
    background: rgba(20, 14, 34, .97);
    border: 1px solid var(--border-lit);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
    animation: appsIn .2s var(--ease);
}
.apps__menu[hidden] { display: none; }
@keyframes appsIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

.apps__head {
    margin: 0;
    padding: 6px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.apps__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    transition: background .2s;
}
.apps__item:hover { background: var(--surface-2); }
.apps__item[aria-current] { background: var(--brand-soft); }
.apps__text { flex: 1; min-width: 0; }
.apps__text img { display: block; width: auto; max-width: 100%; height: 23px; }
.apps__text small { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.apps__check { width: 17px; height: 17px; flex: none; color: var(--pink); }

.topbar__spacer { flex: 1; }

.view {
    flex: 1;
    padding: 4px 18px calc(var(--nav-h) + var(--safe-b) + 108px);
    animation: viewIn .28s var(--ease);
}
.view[hidden] { display: none; }

@keyframes viewIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.view__title {
    margin: 18px 0 4px;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.03em;
}
.view__sub {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 14px;
}

.section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 26px 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted-2);
}

/* -------------------------------------------------------------- surfaces -- */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.panel--brand {
    background: var(--brand-soft), var(--surface);
    border-color: rgba(255, 0, 122, .26);
}

/* ---------------------------------------------------------------- buttons -- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: transform .16s var(--ease), opacity .16s, background .16s;
}
.btn:active { transform: scale(.96); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn--block { width: 100%; }

.btn--primary {
    background: var(--brand);
    border-color: transparent;
    box-shadow: 0 10px 30px -12px rgba(255, 0, 122, .75);
}

.btn--sm { min-height: 38px; padding: 0 14px; font-size: 13.5px; }

.btn__icon { width: 19px; height: 19px; flex: none; }

/* ----------------------------------------------------------------- inputs -- */

.field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, .3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 14px;
    transition: border-color .18s, box-shadow .18s;
}
.field:focus-within {
    border-color: rgba(255, 0, 122, .55);
    box-shadow: 0 0 0 3px rgba(255, 0, 122, .12);
}
.field svg { width: 18px; height: 18px; flex: none; color: var(--muted-2); }
.field input {
    flex: 1;
    min-width: 0;
    height: 50px;
    background: none;
    border: 0;
    outline: none;
    font-size: 16px;   /* below 16px iOS zooms the page on focus */
}
.field input::placeholder { color: var(--muted-2); }

.field__clear {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    flex: none;
}

/* -------------------------------------------------------------- segmented -- */

.segmented {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(0, 0, 0, .3);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.segmented button {
    flex: 1;
    min-height: 38px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--muted);
    transition: color .18s, background .18s;
}
.segmented button[aria-selected="true"] {
    background: var(--brand);
    color: #fff;
}

/* ---------------------------------------------------------------- toggle -- */

.setting {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.setting:last-child { border-bottom: 0; }
.setting__text { flex: 1; min-width: 0; }
.setting__name { font-weight: 600; font-size: 14.5px; }
.setting__hint { color: var(--muted-2); font-size: 12.5px; margin-top: 2px; }

.switch {
    position: relative;
    width: 50px;
    height: 30px;
    flex: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    transition: background .22s var(--ease);
}
.switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    transition: transform .22s var(--ease);
}
.switch[aria-checked="true"] { background: var(--brand); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }

/* ------------------------------------------------------------ track rows -- */

.tracks { display: flex; flex-direction: column; gap: 6px; }

.track {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid transparent;
    transition: background .16s, border-color .16s, transform .16s var(--ease);
}
.track:active { transform: scale(.985); }
.track.is-current {
    background: var(--brand-soft);
    border-color: rgba(255, 0, 122, .38);
}

.track__art {
    position: relative;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 9px;
    overflow: hidden;
    background: var(--surface-2);
}
.track__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.track__art--empty {
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: rgba(255, 255, 255, .5);
}
.track__art--empty svg { width: 20px; height: 20px; }

.track__body { flex: 1; min-width: 0; }
.track__title {
    font-weight: 600;
    font-size: 14.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.track__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.track__action {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--muted);
    transition: background .16s, color .16s;
}
.track__action:active { background: var(--surface-2); color: #fff; }
.track__action svg { width: 19px; height: 19px; }

.track__index {
    width: 22px;
    flex: none;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
}

/* Playing bars — three columns bouncing on transform only. */
.eq { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.eq i {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: var(--pink);
    transform-origin: bottom;
    animation: eq .9s ease-in-out infinite;
}
.eq i:nth-child(2) { animation-delay: .18s; background: #c04bff; }
.eq i:nth-child(3) { animation-delay: .36s; background: var(--purple); }
@keyframes eq {
    0%, 100% { transform: scaleY(.28); }
    50%      { transform: scaleY(1); }
}

/* ---------------------------------------------------------------- badges -- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--muted);
}
.chip--live { color: #fff; background: var(--brand); border-color: transparent; }
.chip--warn { color: #FFC46B; border-color: rgba(255, 196, 107, .3); background: rgba(255, 196, 107, .1); }
.chip svg { width: 12px; height: 12px; }

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted-2);
    flex: none;
}
.dot--on { background: #35E08B; box-shadow: 0 0 0 3px rgba(53, 224, 139, .18); }
.dot--busy { background: #FFC46B; }

/* ------------------------------------------------------------- cast card -- */

.cast-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: var(--radius-lg);
    background: var(--brand-soft), rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .1);
    position: relative;
    overflow: hidden;
}
.cast-card::after {
    content: '';
    position: absolute;
    inset: -60% -30% auto auto;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 0, 122, .3), transparent 70%);
    pointer-events: none;
}

.cast-card__head { display: flex; align-items: center; gap: 10px; }
.cast-card__title { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.cast-card__status { color: var(--muted); font-size: 13px; margin-top: 1px; }

.cast-card__actions { display: flex; gap: 10px; position: relative; }
.cast-card__actions .btn { flex: 1; }

/* ------------------------------------------------------------- empty state -- */

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 46px 24px;
    color: var(--muted-2);
}
.empty__icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: var(--brand-soft);
    border: 1px solid var(--border);
    color: rgba(255, 255, 255, .6);
}
.empty__icon svg { width: 26px; height: 26px; }
.empty__title { color: #fff; font-weight: 700; font-size: 16px; }
.empty p { margin: 0; font-size: 13.5px; max-width: 30ch; }

/* --------------------------------------------------------------- spinner -- */

.spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    animation: spin .7s linear infinite;
    flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 26px;
    color: var(--muted);
    font-size: 14px;
}

/* ---------------------------------------------------------- mini player -- */

.mini {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--nav-h) + var(--safe-b) + 8px);
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px 8px 8px;
    border-radius: 16px;
    background: rgba(20, 13, 34, .94);
    border: 1px solid var(--border-lit);
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .9);
    transform: translateY(140%);
    opacity: 0;
    visibility: hidden;
    transition: transform .34s var(--ease), opacity .26s, visibility 0s linear .34s;
}
.mini.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.mini__art {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 10px;
    overflow: hidden;
    background: var(--brand);
}
.mini__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mini__body { flex: 1; min-width: 0; }
.mini__title {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini__artist {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini__btn {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand);
}
.mini__btn svg { width: 20px; height: 20px; }

.mini__bar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}
.mini__bar i {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 2px;
    background: var(--brand);
    transform-origin: left;
    transform: scaleX(0);
}

/* ---------------------------------------------------------------- tabbar -- */

.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: calc(var(--nav-h) + var(--safe-b));
    padding-bottom: var(--safe-b);
    background: rgba(10, 7, 18, .97);
    border-top: 1px solid var(--border);
}

.tabbar button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--muted-2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
    transition: color .18s;
    position: relative;
}
.tabbar button svg { width: 22px; height: 22px; }
.tabbar button[aria-selected="true"] { color: #fff; }
.tabbar button[aria-selected="true"]::before {
    content: '';
    position: absolute;
    top: 0;
    width: 26px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--brand);
}

.tabbar__count {
    position: absolute;
    top: 6px;
    left: 50%;
    margin-left: 6px;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--pink);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
}

/* ------------------------------------------------------------ now playing -- */

.sheet {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    transform: translateY(100%);
    transition: transform .38s var(--ease);
    overflow: hidden;
}
.sheet.is-open { transform: none; }

.sheet__glow {
    position: absolute;
    inset: -20% -20% auto -20%;
    height: 60%;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 0, 122, .34), transparent 70%);
    pointer-events: none;
}

.sheet__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(var(--safe-t) + 12px) 16px 8px;
}
.sheet__grip {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
}
.sheet__grip svg { width: 20px; height: 20px; }
.sheet__label {
    flex: 1;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.sheet__body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 6px 22px calc(var(--safe-b) + 20px);
    min-height: 0;
}

.np-art {
    position: relative;
    width: min(64vw, 260px);
    aspect-ratio: 1;
    margin: 8px auto 20px;
    border-radius: 22px;
    overflow: hidden;
    background: var(--brand);
    box-shadow: 0 26px 60px -24px rgba(255, 0, 122, .6);
    flex: none;
    transition: transform .5s var(--ease);
}
.np-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-art.is-paused { transform: scale(.9); }

.np-title {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.03em;
    text-align: center;
    line-height: 1.2;
}
.np-artist {
    margin-top: 4px;
    color: var(--muted);
    font-size: 15px;
    text-align: center;
}

/* Scrubber — a native range styled flat so it stays draggable everywhere. */
.np-scrub { margin: 22px 0 4px; }
.np-scrub input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;
    background: none;
    display: block;
}
.np-scrub input::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--pink) 0%, var(--purple) var(--pct, 0%), rgba(255, 255, 255, .14) var(--pct, 0%));
}
.np-scrub input::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--pink) 0%, var(--purple) var(--pct, 0%), rgba(255, 255, 255, .14) var(--pct, 0%));
}
.np-scrub input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.np-scrub input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: #fff;
}

.np-times {
    display: flex;
    justify-content: space-between;
    color: var(--muted-2);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.np-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 0 14px;
}
.np-btn {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--muted);
    transition: transform .16s var(--ease), color .16s, background .16s;
}
.np-btn:active { transform: scale(.9); background: var(--surface-2); color: #fff; }
.np-btn svg { width: 24px; height: 24px; }
.np-btn--play {
    width: 74px;
    height: 74px;
    color: #fff;
    background: var(--brand);
    box-shadow: 0 14px 34px -12px rgba(255, 0, 122, .8);
    margin: 0 6px;
}
.np-btn--play svg { width: 32px; height: 32px; }
.np-btn--skip svg { width: 28px; height: 28px; }

.np-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
}

/* Lyric preview inside the sheet — the singer holds the phone, so the
   current line has to be readable at a glance. */
.np-lyrics {
    flex: 1;
    min-height: 0;
    display: none;
    flex-direction: column;
    gap: 12px;
    /* A real scroll container: programmatic centring is reliable, and the
       singer can still thumb ahead. Scrollbars are hidden globally. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent);
    padding: 8px 0;
}
.sheet.show-lyrics .np-lyrics { display: flex; }
.sheet.show-lyrics .np-art { display: none; }

.np-lyrics__line {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--muted-2);
    transition: color .3s, transform .3s var(--ease), opacity .3s;
    transform-origin: left center;
}
.np-lyrics__line.is-active {
    color: #fff;
    transform: scale(1.06);
}
.np-lyrics__line.is-past { opacity: .35; }

/* ---------------------------------------------------------------- themes -- */

.themes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.theme {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 8px 12px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    text-align: left;
    transition: border-color .18s, background .18s, transform .16s var(--ease);
}
.theme:active { transform: scale(.97); }
.theme[aria-selected="true"] {
    border-color: rgba(255, 0, 122, .55);
    background: var(--brand-soft), var(--surface);
}

/* Each swatch is a miniature of the scene it selects. */
.theme__art {
    position: relative;
    display: block;
    height: 64px;
    border-radius: 11px;
    overflow: hidden;
    margin-bottom: 8px;
    background: #0A0714;
}

.theme__art--video {
    background:
        linear-gradient(to top, rgba(7, 5, 13, .95) 12%, transparent 52%),
        linear-gradient(125deg, #6B3A5C 0%, #3A2A55 40%, #1B2340 100%);
}
.theme__art--video::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 34%;
    bottom: 12px;
    height: 5px;
    border-radius: 3px;
    background: var(--brand);
}

.theme__art--synthwave {
    background:
        linear-gradient(to bottom, #0B0424 0%, #4B1163 46%, #7A1550 53%, #05010F 56%, #05010F 100%);
}
.theme__art--synthwave::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 12%;
    width: 34px;
    height: 34px;
    margin-left: -17px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #FFE95C, #FF7A2F 45%, #FF007A);
}
.theme__art--synthwave::after {
    content: '';
    position: absolute;
    inset: 56% 0 0 0;
    background-image:
        repeating-linear-gradient(to right, rgba(103, 232, 249, .8) 0 1px, transparent 1px 11px),
        repeating-linear-gradient(to bottom, rgba(255, 0, 122, .75) 0 1px, transparent 1px 7px);
}

.theme__art--canvas {
    background:
        radial-gradient(22px 22px at 24% 32%, rgba(255, 0, 122, .75), transparent 70%),
        radial-gradient(26px 26px at 74% 40%, rgba(112, 0, 255, .8), transparent 70%),
        radial-gradient(20px 20px at 52% 76%, rgba(34, 211, 238, .55), transparent 70%),
        linear-gradient(160deg, #0A0A1E, #12082A 55%, #07070F);
}

.theme__art--joysound {
    background:
        linear-gradient(to top, rgba(2, 6, 20, .96) 22%, transparent 60%),
        linear-gradient(120deg, #2E4A66 0%, #46608A 45%, #1D2C4A 100%);
}
.theme__art--joysound::before {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    top: 26%;
    height: 9px;
    border-radius: 3px;
    background:
        linear-gradient(to right, #7DE3FF 0 22%, rgba(255,255,255,.24) 22% 100%);
}
.theme__art--joysound::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 22%;
    bottom: 13px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, #2F7BFF 0 45%, #FF3DA6 45% 62%, rgba(255,255,255,.32) 62% 100%);
}

.theme__name { font-size: 13.5px; font-weight: 700; }
.theme__desc { font-size: 11.5px; color: var(--muted-2); line-height: 1.35; }

/* ------------------------------------------------------------- cast help -- */

.help { display: flex; flex-direction: column; }

.help__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}
.help__row:last-child { border-bottom: 0; }
.help__row[hidden] { display: none; }
.help__row > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--muted); }
.help__row strong { display: block; font-weight: 600; }
.help__row span { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.help__row b { color: var(--text); font-weight: 600; }
.help__row--warn > svg { color: #FFC46B; }

.about-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13.5px; font-weight: 600; }
.about-links a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.about-links a:hover { text-decoration-color: var(--pink); }

/* Casting can't work in this browser: keep the button, make it quiet. */
.btn.is-unavailable { opacity: .55; filter: saturate(.4); }

/* ------------------------------------------------------------------ sync -- */

.np-sync {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    margin: 4px 0 18px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
}
.sheet.show-sync .np-sync { display: flex; flex: 1; min-height: 0; overflow-y: auto; }
.sheet.show-sync .np-art,
.sheet.show-sync .np-lyrics { display: none; }

.np-sync__head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
}
.np-sync__head span { flex: 1; }

.np-sync__close {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    flex: none;
}

.np-sync__value {
    text-align: center;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.np-sync__scale {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.np-sync input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;
    background: none;
    display: block;
    margin: -4px 0 2px;
}
.np-sync input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    /* Centre-out: the middle of the track is "no change". */
    background: linear-gradient(90deg,
        rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .14) 49.4%,
        var(--purple) 49.4%, var(--purple) 50.6%,
        rgba(255, 255, 255, .14) 50.6%);
}
.np-sync input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .14);
}
.np-sync input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--brand);
    border: 2px solid #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.np-sync input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--pink);
}

.np-sync__nudge { display: flex; gap: 8px; }
.np-sync__nudge .btn { flex: 1; }

.np-sync__hint {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted-2);
    text-align: center;
}
.np-sync__hint.is-warn { color: #FFC46B; }

.np-sync .link-button { align-self: center; padding: 4px; }

/* The whole song, so you can point at the line you can hear. */
.np-sync__pick {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
}
.np-sync__pick > span { flex: 1; }

.np-sync__lines {
    flex: 1;
    min-height: 120px;
    max-height: 38vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 -6px;
    padding: 0 6px;
}

.sync-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 10px;
    text-align: left;
    font-size: 14px;
    line-height: 1.35;
    color: var(--muted);
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.sync-line:active { background: var(--surface-2); }

/* Where the TV thinks we are — the reference point you are correcting. */
.sync-line.is-here {
    background: var(--brand-soft);
    border-color: rgba(255, 0, 122, .42);
    color: #fff;
    font-weight: 600;
}

.sync-line__at {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--muted-2);
    min-width: 38px;
}
.sync-line.is-here .sync-line__at { color: var(--pink); }
.sync-line__text { flex: 1; min-width: 0; }

#syncTapLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip--tap {
    color: #fff;
    border-color: rgba(255, 0, 122, .4);
    background: rgba(255, 0, 122, .16);
}
.chip--grow {
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
    overflow: hidden;
}
.chip--grow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- toasts -- */

.toasts {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--nav-h) + var(--safe-b) + 74px);
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 14px;
    background: rgba(28, 19, 46, .97);
    border: 1px solid var(--border-lit);
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .9);
    font-size: 13.5px;
    font-weight: 600;
    animation: toastIn .3s var(--ease);
}
.toast svg { width: 18px; height: 18px; flex: none; }
.toast--ok svg { color: #35E08B; }
.toast--err svg { color: #FF5E7A; }
.toast.is-out { animation: toastOut .26s var(--ease) both; }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes toastOut {
    to { opacity: 0; transform: translateY(-8px) scale(.97); }
}

/* --------------------------------------------------------- action sheet -- */

.actions {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.actions[hidden] { display: none; }

.actions__scrim {
    position: absolute;
    inset: 0;
    background: rgba(3, 2, 6, .68);
    animation: fadeIn .22s var(--ease);
}

.actions__panel {
    position: relative;
    margin: 0 10px calc(var(--safe-b) + 10px);
    padding: 16px;
    border-radius: 22px;
    background: rgba(22, 15, 37, .99);
    border: 1px solid var(--border-lit);
    box-shadow: 0 -14px 44px -18px rgba(0, 0, 0, .95);
    animation: sheetUp .3s var(--ease);
}

.actions__title {
    padding: 0 6px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

.actions__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 12px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    transition: background .16s;
}
.actions__item:active { background: var(--surface-2); }
.actions__item svg { width: 19px; height: 19px; color: var(--muted); flex: none; }
.actions__item--danger { color: #FF5E7A; }
.actions__item--danger svg { color: #FF5E7A; }
.actions__panel .btn { margin-top: 8px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- services -- */

.services { display: flex; flex-wrap: wrap; gap: 8px; }
.service {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
}
.service svg { width: 15px; height: 15px; }
.service[data-service="spotify"] svg { color: #1DB954; }
.service[data-service="apple"] svg    { color: #FC3C44; }
.service[data-service="deezer"] svg   { color: #A238FF; }
.service[data-service="youtube"] svg  { color: #FF0033; }

/* ----------------------------------------------------------------- misc -- */

.row { display: flex; align-items: center; gap: 10px; }
.row--wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.center { text-align: center; }
.mt { margin-top: 14px; }
.hidden { display: none !important; }

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gradient-text {
    background: var(--brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.link-button {
    color: var(--pink);
    font-weight: 700;
    font-size: 13.5px;
}

@media (min-width: 640px) {
    .app { max-width: 560px; margin: 0 auto; }
    .tabbar, .toasts, .mini {
        left: 50%;
        right: auto;
        width: calc(100% - 20px);
        max-width: 560px;
    }
    .tabbar { width: 100%; }
    .tabbar, .toasts { transform: translateX(-50%); }
    .mini { transform: translate(-50%, 140%); }
    .mini.is-open { transform: translateX(-50%); }
    .sheet { max-width: 560px; left: 50%; margin-left: -280px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ------------------------------------------------------------- languages -- */

/* Settings > About. Plain links, one per language URL, so a crawler finds
   every language from any of them. */
.langs { margin-top: 16px; }
.langs__label { font-size: 12.5px; color: var(--muted-2); margin-bottom: 8px; }
.langs__list { display: flex; flex-wrap: wrap; gap: 6px; }
.langs__list a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(0, 0, 0, .3);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: color .18s, border-color .18s;
}
.langs__list a:hover { color: var(--text); border-color: var(--border-lit); }
.langs__list a[aria-current] { background: var(--brand); border-color: transparent; color: #fff; }