/* Кадр — личный кинозал.
   Тёмный орех стенных панелей, свет экрана и латунь номерков. Смелый элемент один: экран 2.39:1 на главной. */

@font-face{font-family:'Alumni Sans';src:url(./fonts/alumni-cyr.woff2) format('woff2');font-weight:300 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Alumni Sans';src:url(./fonts/alumni-lat.woff2) format('woff2');font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';src:url(./fonts/onest-cyr.woff2) format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';src:url(./fonts/onest-lat.woff2) format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:dark;
  --wood:#1E1712;        /* фон: тёмный орех */
  --wood-deep:#16110D;   /* шапка, нижняя панель */
  --wood-raised:#2B2119; /* поля, кнопки */
  --line:#3E3026;
  --light:#F1E7D8;         /* свет экрана: основной текст */
  --dim:#D3C4B0;           /* второстепенный текст */
  --faint:#A8957F;         /* подписи */
  --brass:#D9A646;         /* номерки: оценки, главная кнопка */
  --brass-hi:#E8BC62;
  --brass-ink:#2B1B06;
  --display:'Alumni Sans','Arial Narrow',sans-serif;
  --text:'Onest',system-ui,'Segoe UI',sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --r-sm:4px;--r-md:8px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;
  background-color:var(--wood);
  /* плотная ткань: лёгкое зерно поверх цвета */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color:var(--light);font:400 15px/1.55 var(--text);
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation}
button:disabled{opacity:.5;cursor:wait}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:var(--r-sm)}
[hidden]{display:none!important}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--dim);font-size:14px;line-height:1.6}
h1,h2,h3,h4{margin:0;font-weight:600}

/* ——— Шапка ——— */
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  height:64px;padding:0 var(--gutter);
  background:color-mix(in srgb,var(--wood-deep) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.brand{font:600 34px/1 var(--display);letter-spacing:.01em;color:var(--light)}
.nav-main{display:flex;gap:4px}
.nav{position:relative;padding:8px 12px;border-radius:var(--r-sm);color:var(--dim);font-size:14px;white-space:nowrap;transition:color .15s}
.nav b{font-weight:400;color:var(--faint);font-size:12px;margin-left:4px;font-variant-numeric:tabular-nums}
.nav:hover{color:var(--light)}
.nav.active{color:var(--light)}
.nav.active::after{content:'';position:absolute;left:12px;right:12px;bottom:-13px;height:2px;background:var(--brass);border-radius:2px}
.search-wrap{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  width:min(320px,34vw);height:38px;padding:0 10px 0 12px;
  background:var(--wood-raised);border:1px solid transparent;border-radius:var(--r-md);color:var(--faint);
}
.search-wrap:focus-within{border-color:var(--brass)}
.search-wrap input{flex:1;min-width:0;border:0;background:transparent;color:var(--light);font-size:14px;outline:0}
.search-wrap input::placeholder{color:var(--faint)}
.search-wrap input::-webkit-search-cancel-button{filter:invert(.8)}
.search-wrap kbd{border:1px solid var(--line);border-radius:3px;padding:0 6px;font:12px/18px var(--text);color:var(--faint)}
.icon-button{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-md);color:var(--dim)}
.icon-button:hover{background:var(--wood-raised);color:var(--light)}

/* ——— Контент ——— */
.content{max-width:1440px;margin:0 auto;padding:clamp(28px,4vw,48px) var(--gutter) 0}

.greeting{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,32px)}
.greeting h1{font:600 clamp(44px,6.4vw,88px)/.92 var(--display);letter-spacing:-.005em}
.stats{margin:0;max-width:34ch;color:var(--dim);font-size:15px}
.stats b{color:var(--light);font-weight:600;font-variant-numeric:tabular-nums}

/* ——— Экран ——— */
.screen-wrap{position:relative;margin-bottom:clamp(48px,7vw,88px)}
/* свет экрана, падающий на бархат */
.screen-wrap::after{
  content:'';position:absolute;left:8%;right:8%;top:100%;height:90px;pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%,rgba(241,231,216,.13),transparent 70%);
}
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:2.39/1;min-height:300px;
  display:flex;align-items:center;gap:clamp(20px,4vw,56px);
  padding:clamp(20px,3.5vw,48px);
  background:#0B0806;border-radius:var(--r-sm);
  box-shadow:0 0 0 1px rgba(241,231,216,.1),0 24px 90px -30px rgba(241,231,216,.35);
  animation:power-on 1.6s ease-out both;
}
.screen-backdrop{position:absolute;inset:-40px;z-index:-2;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(36px) saturate(1.3) brightness(.55)}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,8,6,.2),rgba(11,8,6,.65) 55%,rgba(11,8,6,.85))}
.screen-poster{height:100%;max-height:420px;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-sm);box-shadow:0 18px 50px rgba(0,0,0,.55);flex:none}
.screen-poster.failed{visibility:hidden}
.screen-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:56ch}
.screen-note{margin:0 0 10px;color:var(--brass);font-size:14px}
.hero h2{font:600 clamp(40px,5.6vw,84px)/.92 var(--display);letter-spacing:-.005em;text-wrap:balance}
.screen-meta{margin:12px 0 0;color:var(--dim);font-size:15px}
.screen-reason{margin:6px 0 0;color:var(--dim);font-size:14px;max-width:46ch}
.screen-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(18px,2.4vw,28px)}
.hero-empty{max-width:48ch}
.hero-empty h2{font-size:clamp(36px,4.4vw,60px)}
@keyframes power-on{
  0%{filter:brightness(0)}
  10%{filter:brightness(.7)}
  16%{filter:brightness(.25)}
  40%,100%{filter:brightness(1)}
}

/* ——— Кнопки ——— */
.primary,.secondary,.ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 18px;border-radius:var(--r-md);
  font-size:14px;font-weight:600;white-space:nowrap;transition:background-color .15s,border-color .15s;
}
.primary{background:var(--brass);color:var(--brass-ink)}
.primary:hover{background:var(--brass-hi)}
.secondary{background:var(--wood-raised);color:var(--light);border:1px solid var(--line)}
.secondary:hover{border-color:var(--faint)}
.ghost{color:var(--light);border:1px solid rgba(241,231,216,.3)}
.ghost:hover{border-color:var(--light)}
.link-button{display:inline-flex}

/* ——— Подборка ——— */
.collection-header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin-bottom:16px}
.collection-header h2{font:600 clamp(34px,4vw,52px)/1 var(--display)}
.collection-header .muted{margin:8px 0 0;max-width:60ch}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.count{color:var(--faint);font-size:13px;margin-right:6px;font-variant-numeric:tabular-nums}
select{
  appearance:none;-webkit-appearance:none;
  height:38px;padding:0 34px 0 12px;max-width:190px;
  background:var(--wood-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D3C4B0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center/16px;
  border:1px solid var(--line);border-radius:var(--r-md);color:var(--light);font-size:14px;
}
select:hover{border-color:var(--faint)}
option{background:var(--wood-deep)}

.filter-strip{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 28px}
.chip{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;font-size:13px;color:var(--dim);border:1px solid var(--line)}
button.chip{color:var(--light);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px;border-color:transparent}
button.chip:hover{text-decoration-color:var(--light)}

/* ——— Сетка постеров ——— */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:36px clamp(14px,1.6vw,24px)}
.movie{min-width:0;display:flex;flex-direction:column}
.poster-wrap{position:relative;aspect-ratio:2/3;border-radius:var(--r-sm);overflow:hidden;background:var(--wood-raised)}
.poster-button{position:relative;z-index:1;display:block;width:100%;height:100%}
.poster-button img{display:block;width:100%;height:100%;object-fit:cover}
.poster-button img.failed{visibility:hidden}
.poster-button:hover img{filter:brightness(1.08)}
.poster-wrap:hover{box-shadow:0 0 0 1px rgba(241,231,216,.35)}
.poster-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:16px;font:600 26px/1 var(--display);color:var(--faint);text-align:center}
.rating-badge{
  position:absolute;z-index:2;top:8px;right:8px;
  min-width:30px;height:30px;padding:0 6px;display:grid;place-items:center;
  background:var(--brass);color:var(--brass-ink);border-radius:999px;
  font:700 18px/1 var(--display);font-variant-numeric:tabular-nums;
}
.watched-badge{
  position:absolute;z-index:2;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px 3px 6px;border-radius:999px;font-size:12px;
  background:rgba(18,13,9,.78);backdrop-filter:blur(6px);color:var(--light);
}
.watched-badge svg{width:14px;height:14px;stroke-width:2.2}
.card-title{display:block;width:100%;margin-top:12px;text-align:left;font-size:15px;font-weight:600;line-height:1.3;color:var(--light)}
.card-title:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint)}
.card-meta{margin:4px 0 0;font-size:13px;color:var(--faint)}
.card-reason{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.card-actions button{min-height:32px;padding:0 9px;white-space:nowrap;border-radius:var(--r-sm);font-size:13px;color:var(--dim);border:1px solid var(--line)}
.card-actions button:hover{color:var(--light);border-color:var(--faint)}
.card-actions button[aria-pressed="true"]{color:var(--brass);border-color:color-mix(in srgb,var(--brass) 45%,transparent)}
.empty{grid-column:1/-1;padding:56px 24px;text-align:center;color:var(--dim);border:1px dashed var(--line);border-radius:var(--r-md)}
.empty strong{display:block;font:600 32px/1.1 var(--display);color:var(--light);margin-bottom:6px}
.more{display:flex;margin:40px auto 0;min-height:42px;align-items:center;padding:0 24px;border:1px solid var(--line);border-radius:var(--r-md);color:var(--light);font-size:14px}
.more:hover{border-color:var(--faint)}

/* ——— Настройки ——— */
.settings{max-width:780px;display:grid;gap:12px}
.settings-head h2{font:600 clamp(40px,5vw,64px)/1 var(--display)}
.settings-head .muted{margin:8px 0 12px}
.setting-panel{padding:28px 0;border-top:1px solid var(--line)}
.setting-panel h3{font:600 30px/1.1 var(--display);margin-bottom:6px}
.setting-panel h4{font-size:15px;margin:28px 0 12px}
.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);cursor:pointer}
.toggle-row strong{display:block;font-size:15px;font-weight:500}
.toggle-row small{display:block;margin-top:2px;font-size:13px;color:var(--faint)}
input[role=switch]{
  appearance:none;-webkit-appearance:none;flex:none;cursor:pointer;
  width:44px;height:26px;margin:0;border-radius:999px;position:relative;
  background:var(--wood-raised);border:1px solid var(--line);transition:background-color .15s;
}
input[role=switch]::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--faint);transition:transform .15s,background-color .15s}
input[role=switch]:checked{background:var(--brass);border-color:var(--brass)}
input[role=switch]:checked::after{transform:translateX(18px);background:var(--brass-ink)}
.genre-exclusions{display:flex;flex-wrap:wrap;gap:8px}
.genre-exclusions label{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--dim);cursor:pointer}
.genre-exclusions label:has(input:checked){border-color:var(--brass);color:var(--light);background:color-mix(in srgb,var(--brass) 12%,transparent)}
.genre-exclusions input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.genre-exclusions label:has(input:focus-visible){outline:2px solid var(--brass);outline-offset:2px}
.genre-exclusions label:has(input:checked)::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--brass)}
.sync-summary{font-size:14px;color:var(--light)}
.button-row{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.pair-result label{display:block;font-size:13px;color:var(--dim)}
.pair-result input{display:block;width:100%;max-width:460px;margin-top:6px;padding:12px;background:var(--wood-deep);border:1px solid var(--line);border-radius:var(--r-md);color:var(--light);font:14px/1.4 ui-monospace,Consolas,monospace}
.job{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.job strong{font-weight:500}
.job span{color:var(--brass);text-align:right}

footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:72px;padding:28px 0 36px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}
footer b{font:600 22px/1 var(--display);color:var(--light);margin-right:6px}
footer .muted{font-size:13px}

/* ——— Карточка фильма ——— */
dialog{
  width:min(820px,calc(100vw - 32px));max-height:calc(100dvh - 32px);
  padding:clamp(20px,3vw,36px);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--wood-deep);color:var(--light);
  box-shadow:0 30px 120px rgba(0,0,0,.6);
}
dialog[open]{animation:rise .22s ease-out}
dialog::backdrop{background:rgba(10,7,5,.72);backdrop-filter:blur(6px)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.dialog-close{position:absolute;top:10px;right:10px;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-md);color:var(--dim)}
.dialog-close:hover{background:var(--wood-raised);color:var(--light)}
.detail-content{display:grid;grid-template-columns:200px 1fr;gap:clamp(18px,3vw,32px)}
.detail-content > img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-sm);box-shadow:0 16px 60px -12px rgba(241,231,216,.25)}
.detail-kind{margin:0 0 6px;color:var(--faint);font-size:13px}
.detail-content h2{font:600 clamp(36px,4.4vw,56px)/.95 var(--display);padding-right:36px;text-wrap:balance}
.detail-content .muted{margin:10px 0 0}
.rate{margin:24px 0 0;padding:0;border:0}
.rate legend{padding:0;margin-bottom:10px;font-size:14px;color:var(--dim)}
.rate-row{display:flex;gap:4px;flex-wrap:wrap}
.rate-row button{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);font:600 19px/1 var(--display);color:var(--dim);font-variant-numeric:tabular-nums}
.rate-row button:hover{border-color:var(--brass);color:var(--light)}
.rate-row button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:var(--brass-ink)}
.rate-clear{margin-top:8px;font-size:13px;color:var(--faint);text-decoration:underline;text-underline-offset:3px}
.detail-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 16px}
.detail-sync{margin:0;font-size:13px;color:var(--faint)}
.detail-source{display:inline-block;margin-top:12px;font-size:14px;color:var(--brass);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--brass) 45%,transparent)}

#toast{position:fixed;z-index:30;left:50%;bottom:24px;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:12px 18px;border-radius:var(--r-md);background:var(--light);color:var(--wood);font-size:14px;font-weight:500;box-shadow:0 10px 40px rgba(0,0,0,.45)}

/* ——— Вход ——— */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;position:relative;overflow:hidden}
.login-screen{position:absolute;top:8vh;left:50%;transform:translateX(-50%);width:min(900px,120vw);aspect-ratio:2.39/1;border-radius:var(--r-sm);background:radial-gradient(120% 100% at 50% 40%,rgba(241,231,216,.16),rgba(241,231,216,.03) 70%);box-shadow:0 30px 140px -20px rgba(241,231,216,.22);animation:power-on 2s ease-out both}
.login-card{position:relative;width:min(360px,100%)}
.login .brand{display:block;margin:0 0 28px}
.login h1{font:600 clamp(48px,10vw,72px)/.92 var(--display);margin-bottom:12px}
.login label{display:block;margin-top:24px;font-size:14px;color:var(--dim)}
.login input{display:block;width:100%;height:48px;margin:8px 0 16px;padding:0 14px;background:var(--wood-raised);border:1px solid var(--line);border-radius:var(--r-md);color:var(--light)}
.login input:focus{outline:0;border-color:var(--brass)}
.login .primary{width:100%;min-height:48px}
#login-error{min-height:20px;color:#F2A38F;font-size:14px}

/* ——— Нижняя панель (телефон) ——— */
.tabbar{display:none}

@media (max-width:980px){
  .nav-main{display:none}
  .search-wrap{width:auto;flex:1;max-width:420px}
}
@media (max-width:760px){
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .topbar{height:58px;gap:12px}
  .brand{font-size:30px}
  .search-wrap kbd,#settings-button{display:none}
  .search-wrap{margin-left:auto;max-width:none}
  .tabbar{
    position:fixed;z-index:10;left:0;right:0;bottom:0;
    display:grid;grid-template-columns:repeat(5,1fr);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--wood-deep) 92%,transparent);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
  }
  .tab{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;justify-content:center;font-size:11px;color:var(--faint);border-radius:var(--r-md)}
  .tab svg{width:22px;height:22px}
  .tab.active{color:var(--brass)}
  .greeting{flex-direction:column;gap:10px}
  .hero{aspect-ratio:auto;min-height:0;align-items:flex-start;gap:16px;padding:18px}
  .screen-poster{width:96px;height:auto;max-height:none}
  .hero h2{font-size:clamp(34px,10vw,48px)}
  .screen-reason{font-size:13px}
  .screen-actions{margin-top:16px}
  .screen-actions .primary,.screen-actions .ghost{min-height:40px;padding:0 14px}
  .collection-header{align-items:flex-start}
  .toolbar{width:100%}
  .toolbar select{flex:1;max-width:none}
  .count{width:100%;margin:0 0 2px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:28px 14px}
  .card-title{font-size:14px}
  .card-actions button{flex:1 1 auto}
  .detail-content{grid-template-columns:1fr}
  .detail-content > img{width:120px}
  #toast{bottom:calc(80px + env(safe-area-inset-bottom))}
  footer{margin-top:48px}
}
@media (max-width:400px){
  .screen-poster{width:80px}
  .rate-row button{width:34px;height:34px}
}

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