:root {
    --brand:#9146FF; --bg:#0E0E10; --card-bg:#18181B; --primary:#EFEFF1; --secondary:#ADADB8;
    --muted:#2C2C33; --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444;
    --select-arrow-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ADADB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    color-scheme: dark;
    --ui-hover-bg: rgba(145, 70, 255, .12);
    --ui-hover-border: rgba(145, 70, 255, .45);
    --ui-focus-ring: 0 0 0 3px rgba(145, 70, 255, .35);
    --ui-press-scale: .985;

    --font-display: "Plus Jakarta Sans","Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
    --font-sans: "Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
    --font-mono: "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

    --fs--1: clamp(.82rem, .74rem + .2vw, .92rem);
    --fs-0:  clamp(.95rem, .9rem + .25vw, 1.05rem);
    --fs-1:  clamp(1.1rem, 1.02rem + .5vw, 1.25rem);
    --fs-2:  clamp(1.35rem, 1.22rem + .9vw, 1.55rem);
    --fs-3:  clamp(1.6rem, 1.45rem + 1.2vw, 1.95rem);
    --fs-4:  clamp(1.9rem, 1.7rem + 1.6vw, 2.4rem);

    --lh-tight: 1.15;
    --lh-normal: 1.5;
    --w-regular: 450; --w-semibold: 600; --w-bold: 750;
}

body.tg-theme-dark { color-scheme: dark; }

*{ box-sizing:border-box; }
html, body { min-height: 100%; }

body{
    font-family: var(--font-sans);
    font-weight: var(--w-regular);
    font-size: var(--fs-0);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background:var(--bg); color:var(--primary);
    margin:0; padding:env(safe-area-inset-top,1rem) 1rem 1.5rem;
    position: relative;
}

a{ color:var(--brand); text-decoration:underline; }
a:hover{ text-decoration:underline; }

.container{ max-width:920px; margin-inline:auto; display:flex; flex-direction:column; gap:1rem; }

.app-title{
    position: relative; display:flex; align-items:center; justify-content:center; gap:.6rem;
    margin:.6rem 0 .2rem; line-height:1.1; font-weight:800; font-size: var(--fs-4); letter-spacing:.01em; isolation:isolate;
}
.app-title__icon{ font-size:1.15em; filter:drop-shadow(0 4px 16px rgba(145,70,255,.35)); transform:translateY(.5px); }
.app-title__text{
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 92%, white) 0%, color-mix(in srgb, var(--brand) 70%, white) 48%, rgba(56,189,248,1) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow: 0 0 0 rgba(0,0,0,0), 0 6px 22px rgba(145,70,255,.18);
    letter-spacing:.01em;
}
.app-title::after{
    content:""; position:absolute; left:12%; right:12%; bottom:-6px; height:3px; border-radius:999px;
    background: linear-gradient(90deg, transparent, var(--brand), rgba(56,189,248,1), transparent);
    box-shadow: 0 0 22px rgba(145,70,255,.35), 0 0 12px rgba(56,189,248,.25);
    opacity:.9; pointer-events:none;
}
.app-title::before{
    content:""; position:absolute; inset:-26px -40px; z-index:-1;
    background: radial-gradient(60% 60% at 40% 35%, rgba(145,70,255,.20) 0%, transparent 60%), radial-gradient(55% 55% at 65% 60%, rgba(56,189,248,.16) 0%, transparent 65%);
    filter: blur(18px) saturate(115%);
    pointer-events:none; opacity:.9;
}

.tabs{ display:grid; grid-template-columns:repeat(6,1fr); gap:.5rem; margin:.5rem 0 1rem; position:relative; }
.tab{
    text-align:center; padding:.65rem .8rem; border-radius:.75rem; background:var(--card-bg); color:var(--primary); border:1px solid var(--muted);
    font-weight:var(--w-semibold); font-size:.95rem; letter-spacing:.02em;
    position: relative; overflow: hidden;
    transition: background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .06s ease;
}
.tab:hover{ background-color: var(--ui-hover-bg) !important; border-color: var(--ui-hover-border) !important; }
.tab:focus-visible{ outline:none; box-shadow: var(--ui-focus-ring); border-color: var(--ui-hover-border) !important; }
.tab:active{ transform: scale(var(--ui-press-scale)) translateY(.5px); }
.tab.active{ border-color: color-mix(in srgb, var(--brand) 70%, var(--muted)); box-shadow: inset 0 0 0 1px rgba(145,70,255,.25), 0 6px 16px rgba(0,0,0,.25); }
.tab.active::after{ content:""; position:absolute; left:10%; right:10%; bottom:-1px; height:3px; border-radius:999px; background:linear-gradient(90deg, transparent, var(--brand), transparent); opacity:.9; }

.filters{
    background:var(--card-bg); border:1px solid color-mix(in srgb, var(--muted) 80%, var(--brand)); border-radius:.9rem; padding:.75rem;
    display:grid; grid-template-columns:1.2fr .9fr .9fr .9fr 1fr auto auto; gap:.5rem; align-items:stretch;
    position: sticky; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 20;
    backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.00)), var(--card-bg);
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.filters input,.filters select,.filters button{
    width:100%; height:40px; padding:.55rem .7rem; border-radius:.65rem; background:var(--card-bg); color:var(--primary); border:1px solid var(--muted);
    outline:none; transition:border-color .15s, box-shadow .15s, filter .15s; line-height:normal;
    font-weight: var(--w-semibold); font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "tnum" 1, "zero" 1;
}
.filters input:hover,.filters select:hover,.filters button:hover{ filter:brightness(1.04); }
.filters input:focus,.filters select:focus,.filters button:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(145,70,255,.25); }
.filters button[type="submit"], .btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand); }
.filters button[type="submit"]:hover, .btn.primary:hover{ filter:brightness(1.06); }
.filters button:active{ transform:translateY(1px); }
.filters select{ appearance:none; padding-right:2.2rem; background-image:var(--select-arrow-url); background-repeat:no-repeat; background-position:right .7rem center; background-size:14px 14px; }
.filters select option{ background-color:var(--card-bg); color:var(--primary); }
.filters .btn.icon{ padding:0; aspect-ratio:1/1; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; }
.filters .btn.icon svg{ width:20px; height:20px; transition:transform .2s; pointer-events:none; }

.stack{ display:flex; flex-direction:column; gap: 1.6rem; }

.card{
    position:relative; background:var(--card-bg); border-radius:1rem; padding:1.1rem 1.1rem .9rem; border:1px solid var(--muted);
    display:flex; flex-direction:column; gap:.8rem; box-shadow:0 8px 20px rgba(0,0,0,.25); padding-bottom:4.5rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.35); border-color: color-mix(in srgb, var(--brand) 38%, var(--muted)); }
.card.empty{ align-items:center; text-align:center; gap:.4rem; padding:1.4rem; border-style:dashed; color:var(--secondary); background:rgba(255,255,255,.02); }
.card.empty::before{ content:"🌙"; font-size:1.3rem; opacity:.8; display:block; margin-bottom:.2rem; }

.header{ display:flex; flex-direction:column; gap:.25rem; }
.header h2{ margin:0; font-size: var(--fs-2); font-weight: var(--w-bold); }

.meta{ color:var(--secondary); font-size: var(--fs--1); display:flex; gap:.8rem; flex-wrap:wrap; font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "tnum" 1, "zero" 1; }

.btn{
    display:inline-flex; align-items:center; gap:.35rem; background:var(--card-bg); border:1px solid var(--muted); color:var(--primary);
    padding:.5rem .75rem; border-radius:.7rem; font-weight:var(--w-semibold); cursor:pointer; transition: background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .06s ease;
    font-size: var(--fs--1);
}
.btn:hover{ background-color: var(--ui-hover-bg) !important; border-color: var(--ui-hover-border) !important; text-decoration:none; }
.btn:focus-visible{ outline:none; box-shadow: var(--ui-focus-ring); border-color: var(--ui-hover-border) !important; }
.btn:active{ transform: scale(var(--ui-press-scale)) translateY(.5px); }
.btn.danger{ background:var(--danger); border-color:var(--danger); color:#fff; }

.actions-floating{ pointer-events:none; }
.actions-floating .top-right,
.actions-floating .bottom-left,
.actions-floating .bottom-right{ position:absolute; z-index:5; pointer-events:auto; }
.actions-floating .top-right{ top:.6rem; right:.6rem; }
.actions-floating .bottom-left,
.actions-floating .bottom-right{ bottom:.6rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.actions-floating .bottom-left{ left:.6rem; }
.actions-floating .bottom-right{ right:.6rem; }
.actions-floating .btn{ box-shadow:0 6px 14px rgba(0,0,0,.25); backdrop-filter:saturate(110%); }

.film-card{ --poster-w:clamp(140px,18vw,220px); display:grid; grid-template-columns:var(--poster-w) 1fr; gap:1rem; align-items:start; }
.poster{ position:relative; width:100%; aspect-ratio:2/3; border-radius:.8rem; overflow:hidden; border:1px solid var(--muted); background:var(--card-bg); }
.poster img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .25s ease; }
.poster.placeholder{ background:linear-gradient(135deg, #242429 0%, #3A2A52 100%); }
.poster .poster-year{ position:absolute; left:.5rem; bottom:.5rem; background:rgba(0,0,0,.55); color:#fff; font-weight:700; font-size:.85rem; padding:.2rem .45rem; border-radius:.5rem; }
.card:hover .poster img{ transform: scale(1.02); }

.film-info{ display:flex; flex-direction:column; gap:.7rem; }
.topline{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.1rem; }

.rating-badge{
    display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .5rem; border-radius:.6rem; font-weight:800; border:1px solid var(--muted); background:rgba(255,255,255,.02);
    position:relative; overflow:hidden; color:inherit; text-decoration:none; transition: filter .15s ease, border-color .15s ease, background .15s ease;
}
.rating-badge.kp{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); }
.rating-badge.imdb{ background:rgba(245,197,24,.12); border-color:rgba(245,197,24,.38); }
.rating-badge .src{ font-size:.72rem; font-weight:900; letter-spacing:.02em; opacity:.85; padding:0 .3rem; border-radius:.35rem; background:rgba(255,255,255,.06); }
.rating-badge .value{ font-variant-numeric:tabular-nums; }
.rating-badge::before{ content:""; position:absolute; inset:0; width: var(--p, 0%); background: linear-gradient(90deg, rgba(255,255,255,.00), rgba(255,255,255,.15)); opacity:.25; pointer-events:none; }
.topline a.rating-badge:hover{ filter: brightness(1.05); text-decoration:none; }

.verdict-badge{align-items:center; padding:.25rem .5rem; border-radius:.6rem; border:1px solid var(--muted); font-weight:700; font-size: var(--fs--1); text-transform: uppercase; letter-spacing:.06em; }
.verdict-badge.ok{ background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.38); }
.verdict-badge.no{ background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.38); }
.verdict-badge.warn{ background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.38); }

.chips{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.1rem; }
.chip{
    display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .55rem; border-radius:999px; font-size: var(--fs--1);
    background: rgba(255,255,255,.02); border:1px solid color-mix(in srgb, var(--brand) 22%, var(--muted)); color:inherit; text-decoration:none;
    transition: filter .15s ease, border-color .15s ease, background .15s ease;
    font-weight: var(--w-semibold); letter-spacing:.02em;
}
.chips .chip:hover{ filter: brightness(1.06); border-color: color-mix(in srgb, var(--brand) 35%, var(--muted)); }
.chips .chip.active{ background: color-mix(in srgb, var(--brand) 18%, var(--card-bg)); border-color: color-mix(in srgb, var(--brand) 55%, var(--muted)); box-shadow: 0 0 0 3px rgba(145,70,255,.16); }

.kv{ display:grid; gap:.5rem .75rem; }
.kv.kv-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.kv .cell{ border:1px solid var(--muted); border-radius:.6rem; padding:.55rem .65rem; background:var(--card-bg); }
.kv .label{ color:var(--secondary); font-size:.8rem; display:block; margin-bottom:.2rem; font-weight:600; text-transform: uppercase; letter-spacing:.06em; }
.kv .value{ font-weight:700; font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "tnum" 1, "zero" 1; }

.link-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.link-btn{ display:inline-flex; align-items:center; gap:.35rem; padding:.42rem .6rem; border-radius:.6rem; border:1px solid var(--muted); background:var(--card-bg); color:var(--primary); font-weight:700; font-size: var(--fs--1); text-decoration:none; }
.link-btn:hover{ filter:brightness(1.08); text-decoration:none; }

.flags{ display:flex; flex-wrap:wrap; gap:.4rem; position:relative; }
.badge{ padding:.25rem .5rem; border-radius:.6rem; border:1px solid var(--muted); font-weight:700; font-size: var(--fs--1); text-transform: uppercase; letter-spacing:.06em; font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "tnum" 1, "zero" 1; }
.badge.ok{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35); }
.badge.warn{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); }
.badge.no{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); }


/* Tooltips for .tip[data-tip] */
.tip{ position:relative; outline:none; }
.tip[tabindex]{ cursor:help; }

.tip[data-tip]:not([data-tip=""])::after,
.tip[data-tip]:not([data-tip=""])::before{
    position:absolute; left:50%; top:calc(100% + 8px);
    opacity:0; visibility:hidden; transform:translate(-50%, -6px) scale(.98);
    pointer-events:none; transition:opacity .16s ease, visibility 0s linear .16s, transform .16s ease;
    content:""; z-index:60;
}
.tip[data-tip]:not([data-tip=""])::after{
    content:attr(data-tip);
    inline-size: clamp(320px, 56vw, 620px);
    max-height: min(48vh, 560px);
    overflow:auto; padding:.85rem 1rem; line-height:1.5; font-size:.95rem; font-weight:500;
    color: color-mix(in srgb, var(--primary) 88%, #000 12%);
    white-space:normal; word-break:break-word; user-select:text;
    background: rgba(18, 18, 22, .96);
    border:1px solid color-mix(in srgb, var(--brand) 28%, var(--muted));
    box-shadow: 0 16px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(145,70,255,.10) inset;
    backdrop-filter: saturate(115%) blur(18px);
    border-radius:.9rem;
}
.tip[data-tip]:not([data-tip=""])::before{
    width:12px; height:12px; transform: translate(-50%, -6px) rotate(45deg);
    background: rgba(18, 18, 22, .96);
    border-left:1px solid color-mix(in srgb, var(--brand) 28%, var(--muted));
    border-top: 1px solid color-mix(in srgb, var(--brand) 28%, var(--muted));
    box-shadow: 0 0 0 1px rgba(145,70,255,.10) inset;
    z-index:59;
}
.tip:hover[data-tip]:not([data-tip=""])::after,
.tip:focus-visible[data-tip]:not([data-tip=""])::after,
.tip:hover[data-tip]:not([data-tip=""])::before,
.tip:focus-visible[data-tip]:not([data-tip=""])::before{
    opacity:1; visibility:visible; pointer-events:auto; transform: translate(-50%, 0) rotate(0) scale(1);
    transition:opacity .16s ease, transform .16s ease;
}
.flags{ position:relative; }
@media (max-width:600px){
    .tip[data-tip]:not([data-tip=""])::after{ inline-size: min(92vw, 680px); }
}
.rights-note{ display:flex; gap:.6rem; align-items:flex-start; margin-top:.2rem; padding:.6rem .75rem; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18)); border:1px solid var(--muted); border-radius:.65rem; }
.rights-icon{ flex:0 0 auto; width:24px; height:24px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:var(--secondary); background:rgba(255,255,255,.06); }
.rights-text{ min-width:0; }
.rights-kicker{ display:block; color:var(--secondary); font-weight:800; font-size:.78rem; letter-spacing:.02em; text-transform:uppercase; margin-bottom:.15rem; }
.rights-value{ display:block; font-weight:600; line-height:1.45; overflow-wrap:anywhere; }

.textblock{ border-top:1px dashed var(--muted); padding-top:.5rem; margin-top:.5rem; }
.mono p{ font-family: var(--font-mono); font-size: var(--fs--1); line-height:1.55; letter-spacing:.005em; white-space:pre-wrap; }

.clamp{ position:relative; overflow:hidden; }
.clamp[data-lines]{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--lines,6); }
.clamp[data-lines]::after{ content:''; position:absolute; inset:auto 0 0 0; height:1.4rem; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--card-bg) 92%); }
.clamp.expanded{ -webkit-line-clamp:unset; overflow:visible; }

@media (max-width:840px){ .filters{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:600px){
    .tabs{ grid-template-columns:repeat(3,1fr); }
    .filters{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){ .film-card{ grid-template-columns:100px 1fr; } }
@media (max-width:560px){
    .card{ padding-bottom:7rem; }
    .actions-floating .bottom-left, .actions-floating .bottom-right{ left:.6rem; right:.6rem; justify-content:center; gap:.4rem .5rem; }
    .actions-floating .bottom-right{ bottom:.6rem; }
    .actions-floating .bottom-left{ bottom:3.6rem; }
}

body::before{
    content:""; position:fixed; inset:-20% -15% -20% -15%; z-index:-1; pointer-events:none;
    background:
            radial-gradient(1600px 900px at 10% 0%,   rgba(145, 70, 255, .35) 0%, transparent 70%),
            radial-gradient(1400px 800px at 90% 10%,  rgba( 56,189,248, .28) 0%, transparent 70%),
            radial-gradient(1200px 700px at 20% 100%, rgba( 34,197, 94, .25) 0%, transparent 75%),
            radial-gradient(1000px 600px at 85% 95%,  rgba(244, 63,  94, .22) 0%, transparent 70%),
            linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.15)), var(--bg);
    filter: blur(55px) saturate(115%);
}
body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.07;
    background-image: linear-gradient(0deg,  rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 4px 4px; }

*::-webkit-scrollbar{ height:10px; width:10px; }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.18); }
*::-webkit-scrollbar-track{ background: transparent; }
*{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
/* Missing helpful typography and group title styles */
h1,h2,h3{ font-family: var(--font-display); letter-spacing:.005em; line-height: var(--lh-tight); margin:.4rem 0 .2rem; font-weight: var(--w-bold); }
h1{ font-size: var(--fs-4); }
h2{ font-size: var(--fs-3); }
h3{ font-size: var(--fs-2); }

.genre-title{
    margin: 1.2rem 0 .6rem;
    font-size: 1.05rem;
    letter-spacing: .02em;
    font-weight: 800;
    color: color-mix(in srgb, var(--primary) 85%, var(--secondary));
    text-transform: uppercase;
    opacity: .9;
}

/* Visual affordance when badge has tooltip */
.tip:hover, .tip:focus-visible{
    border-color: color-mix(in srgb, var(--brand) 45%, var(--muted)) !important;
    box-shadow: 0 0 0 3px rgba(145,70,255,.18);
}

/* Modal (native <dialog>) */
#confirmDelete {
    border: none;
    padding: 0;
    background: transparent;
}

#confirmDelete::backdrop {
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
}

.modal{
    min-width: min(520px, 92vw);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)), var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--muted) 80%, var(--brand));
    box-shadow: 0 22px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(145,70,255,.10) inset;
    border-radius: .9rem;
    padding: 1rem;
    color: var(--primary);
}

.modal__header{
    display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem;
}
.modal__icon{
    display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center;
    border-radius:999px; background: rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.35);
}
.modal__title{
    margin:0; font-size: var(--fs-2); font-weight: var(--w-bold);
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 90%, white), rgba(239,68,68,1));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}

.modal__text{ margin: .4rem 0 .9rem; color: var(--secondary); }
.modal__text .hl{ color: var(--primary); font-weight: var(--w-semibold); }

.modal__actions{
    display:flex; justify-content:flex-end; gap:.5rem;
}
.paginator{
    margin: .6rem 0 0;
    padding: .6rem;
    display: flex; align-items: center; justify-content: center; gap: .6rem 1rem; flex-wrap: wrap;
    background: var(--card-bg);
    border: 1px solid var(--muted);
    border-radius: .8rem;
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.paginator .page-btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-width: 110px; padding:.5rem .8rem; border-radius:.65rem;
    background:var(--card-bg); color:var(--primary); border:1px solid var(--muted);
    font-weight: var(--w-semibold); text-decoration: none;
    transition: background-color .15s ease,border-color .15s ease,transform .06s ease;
}
.paginator .page-btn:hover{ background-color: var(--ui-hover-bg); border-color: var(--ui-hover-border); }
.paginator .page-btn:active{ transform: scale(var(--ui-press-scale)) translateY(.5px); }
.paginator .page-btn.disabled{ opacity:.55; pointer-events:none; }
.paginator .page-info{ color: var(--secondary); font-weight: var(--w-semibold); }
.paginator .page-info b{ color: var(--primary); }
.paginator .muted{ color: var(--secondary); font-weight: var(--w-regular); }

/* === Poll Drawer === */
.poll-drawer{
    position: fixed; right: 1rem; top: calc(env(safe-area-inset-top,0px) + 1rem);
    width: min(420px, 92vw); max-height: calc(100vh - 2rem); overflow: auto;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)), var(--card-bg);
    border:1px solid color-mix(in srgb, var(--muted) 80%, var(--brand));
    box-shadow: 0 22px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(145,70,255,.10) inset;
    border-radius:.9rem; padding: .85rem; color: var(--primary); z-index: 50;
    transform: translateX(calc(100% + 1rem)); opacity: 0; pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
    backdrop-filter: blur(8px) saturate(120%);
}
.poll-drawer.open{ transform: translateX(0); opacity: 1; pointer-events: auto; }

.poll-drawer__header{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.4rem; }
.poll-drawer__title{ font-size: var(--fs-2); font-weight: var(--w-bold); }
.poll-drawer__close{ line-height:1; }

.poll-drawer__body{ display:flex; flex-direction:column; gap:.6rem; }
.poll-field input{
    width:100%; height:42px; padding:.55rem .7rem; border-radius:.65rem; background:var(--card-bg); color:var(--primary);
    border:1px solid var(--muted); font-weight: var(--w-semibold);
}
.poll-field input:focus{ border-color:var(--brand); box-shadow: var(--ui-focus-ring); outline:none; }

.poll-label{ color: var(--secondary); font-size:.85rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; display:block; margin: .1rem 0 .25rem; }

.poll-choices__head{ display:flex; align-items:center; justify-content:space-between; }
.poll-hint{ color: var(--secondary); font-weight: var(--w-semibold); font-size:.9rem; }

.poll-choices__list{ list-style:none; margin:.2rem 0 .2rem; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.poll-choice{
    display:flex; align-items:center; gap:.5rem; padding:.5rem .6rem; border:1px solid var(--muted); border-radius:.65rem; background: var(--card-bg);
}
.poll-choice__text{ font-weight: var(--w-semibold); flex: 1 1 auto; }
.poll-choice__remove{ min-width:32px; height:32px; border-radius:.6rem; }

.poll-error{ color: var(--danger); font-weight: var(--w-semibold); min-height:1.2em; }
.poll-drawer__footer{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.6rem; }

@media (max-width: 660px){
    .poll-drawer{ right:.6rem; left:.6rem; width:auto; }
}
.actions-floating .top-right{
    display:flex; gap:.5rem; align-items:center;
}
/* === Акцентные переменные для вкладок — по href ?tab=... === */
.tabs .tab{
    /* дефолт (предложения) */
    --accent: var(--brand);
    --accent-bg: color-mix(in srgb, var(--accent) 14%, transparent);
    --accent-brd: color-mix(in srgb, var(--accent) 45%, var(--muted));
    --accent-glow: color-mix(in srgb, var(--accent) 30%, black);
}

/* suggestions */
.tabs .tab[href*="tab=suggestions"]{
    --accent: var(--brand);
}

/* favorites — золото */
.tabs .tab[href*="tab=favorites"]{
    --accent: #f6c657;
    --accent-bg: color-mix(in srgb, #f6c657 18%, transparent);
    --accent-brd: color-mix(in srgb, #f6c657 55%, var(--muted));
    --accent-glow: rgba(246,198,87,.25);
}

/* planned — бирюзовый */
.tabs .tab[href*="tab=planned"]{
    --accent: #8a11e9;
}

/* watched — изумруд */
.tabs .tab[href*="tab=watched"]{
    --accent: #22c55e;
}

/* rejected — мягкий красный */
.tabs .tab[href*="tab=rejected"]{
    --accent: #ef4444;
}

/* stats — небесно-голубой */
.tabs .tab[href*="tab=stats"]{
    --accent: #38bdf8;
}

/* — Поведение (использует переменные выше) — */
.tabs .tab:hover{
    background: var(--accent-bg) !important;
    border-color: var(--accent-brd) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

.tabs .tab.active{
    border-color: var(--accent-brd) !important;
    box-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
            0 10px 24px rgba(0,0,0,.28);
    background:
            linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent),
            var(--card-bg);
    color: color-mix(in srgb, var(--primary) 92%, white);
}

.tabs .tab.active::after{
    background: linear-gradient(90deg, transparent, var(--accent), transparent) !important;
    opacity:.95;
}

/* лёгкий «глянец» у активной */
.tabs .tab.active::before{
    content:"";
    position:absolute; inset:0 0 auto 0; height:40%;
    background: radial-gradient(120% 100% at 50% -40%, color-mix(in srgb, var(--accent) 22%, white) 0%, transparent 60%);
    mix-blend-mode: screen;
    opacity:.35; pointer-events:none; z-index:-1;
    animation: tab-sheen 2600ms ease-in-out infinite;
}
@keyframes tab-sheen{
    0%,100%{ transform: translateY(0); opacity:.28; }
    50%    { transform: translateY(-4px); opacity:.42; }
}

/* чуть более «дорого» только для активного favorites */
.tabs .tab[href*="tab=favorites"].active{
    box-shadow:
            inset 0 0 0 1px color-mix(in srgb, #f6c657 40%, transparent),
            0 12px 28px rgba(0,0,0,.32),
            0 0 22px var(--accent-glow);
}

/* фокус под акцент */
.tabs .tab:focus-visible{
    box-shadow:
            0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent),
            0 10px 24px rgba(0,0,0,.2) !important;
    border-color: var(--accent-brd) !important;
}

/* уважение reduced motion */
@media (prefers-reduced-motion: reduce){
    .tabs .tab.active::before{ animation:none; opacity:.3; }
}
.analyze-form{
    display:grid; grid-template-columns:1fr auto; gap:.5rem; margin-top:.4rem;
}
.analyze-form input{
    height:42px; padding:.55rem .7rem; border-radius:.65rem;
    background:var(--card-bg); color:var(--primary); border:1px solid var(--muted);
    font-weight:var(--w-semibold);
}
.analyze-form input:focus{ border-color:var(--brand); box-shadow:var(--ui-focus-ring); outline:none; }

.jobs-list{ display:flex; flex-direction:column; gap:.8rem; }

.job{
    position:relative; border:1px solid var(--muted); border-radius:.75rem; background:var(--card-bg);
    padding:.75rem .8rem .75rem 2.6rem; display:grid; gap:.25rem;
}
.job__title{ font-weight:var(--w-bold); }
.job__meta{ color:var(--secondary); font-size:var(--fs--1); }

.job::before{
    content:""; position:absolute; left:.8rem; top:50%; transform:translateY(-50%);
    width:22px; height:22px; border-radius:999px;
    border:2px solid color-mix(in srgb, var(--primary) 20%, transparent);
    border-top-color:var(--brand);
    animation:job-spin .9s linear infinite;
}
@keyframes job-spin{ to{ transform:translateY(-50%) rotate(360deg); } }

/* статус-бейдж */
.job__badge{
    position:absolute; right:.6rem; top:.5rem;
    font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    padding:.18rem .46rem; border-radius:.5rem; border:1px solid var(--muted);
    background:rgba(255,255,255,.03);
}
.job[data-state="running"] .job__badge{ border-color:color-mix(in srgb, var(--brand) 40%, var(--muted)); background:var(--ui-hover-bg); }
.job[data-state="done"]    .job__badge{ border-color:rgba(34,197,94,.45); background:rgba(34,197,94,.14); }
.job[data-state="error"]   .job__badge{ border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.14); }

/* когда операция завершилась — глушим спиннер */
.job[data-state="done"]::before,
.job[data-state="error"]::before{
    display:none;
}
/* Stats */
#stats-card:not([hidden]){ display:block; }
.stats-body{ display:grid; gap:1.5rem; }
.stats-grid{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.5rem;
}
.stats-chip{
    padding:.8rem .6rem; border:1px solid var(--muted); border-radius:.65rem;
    background:var(--card-bg); font-weight:700; display:flex; justify-content:space-between;
}

/* Jobs */
#jobs-card:not([hidden]){ display:block; }
.jobs-list{ display:flex; flex-direction:column; gap:.5rem; }
.job{
    border:1px solid var(--muted); border-radius:.65rem; padding:.55rem .65rem; background:var(--card-bg);
    display:grid; gap:.35rem;
}
.job-top{ display:flex; justify-content:space-between; gap:.5rem; }
.job-title{ font-weight:800; }
.job-meta{ color:var(--secondary); font-weight:600; }
.job-status{ font-weight:800; }
.job-status.progress{ color:#f59e0b; }
.job-status.done{ color:#22c55e; }
.job-status.fail{ color:#ef4444; }
.film-card .film-info .kv .cell .value.votes {
    color: #ff009e;
    font-weight: 600;
}
.film-card .rights-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.film-card .rights-value {
    display: flex;
    flex-direction: column;
    margin-top: 0.25rem;
}

.film-card .rights-value div {
    line-height: 1.3;
    white-space: pre-line;
}