/* ===== Filmradar - mozivászon (cinematic poster-wall) ===== */
:root{
  --bg:#0a0c11; --bg2:#070809;
  --card:#141823; --card2:#1b2030;
  --text:#eef0f5; --muted:#98a0b3; --dim:#5b637a;
  --gold:#f5b301; --gold2:#ffd45e;
  --red:#ef5b6b; --green:#46d27f;
  --border:rgba(255,255,255,.08);
  --surface:rgba(255,255,255,.05);
  --radius:16px;
  --glow:rgba(245,179,1,.30);
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1280px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--text);
  background:linear-gradient(180deg,#0d1017 0%, var(--bg) 32%, var(--bg2) 100%) no-repeat;
  background-attachment:fixed; min-height:100dvh;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
img{max-width:100%; display:block}
code{background:#0006; padding:1px 6px; border-radius:5px; font-size:.85em}
.muted{color:var(--muted)}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:8px}
button:focus-visible{outline-offset:2px}

/* ---- top bar ---- */
.topbar{max-width:var(--maxw); margin:0 auto; padding:22px 18px 4px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.brand{margin:0; font-size:24px; font-weight:800; letter-spacing:-.015em; display:flex; align-items:center; gap:9px}
.brand .dot{color:var(--gold)}
.brand a{text-decoration:none}
.topbar .sub{color:var(--muted); font-size:13px}
.topbar .sub a{color:var(--gold2); text-decoration:none}
.topbar .sub a:hover{text-decoration:underline}
.refresh-btn{display:inline-flex; align-items:center; gap:6px; margin:0 2px; padding:6px 12px; vertical-align:middle; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; transition:color .15s,border-color .15s,background .15s}
.refresh-btn:hover{color:var(--text); border-color:var(--dim)}
.refresh-btn:disabled{opacity:.75; cursor:default}
.refresh-btn svg{display:block; flex:none}
.refresh-btn.spinning svg{animation:spin 1s linear infinite; transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}

.notice{max-width:var(--maxw); margin:12px auto; padding:13px 16px; background:var(--surface); border:1px solid var(--border); border-radius:12px; color:var(--muted); font-size:13px}
.notice code{color:var(--gold2)}

/* ---- HERO ---- */
.hero{position:relative; max-width:var(--maxw); margin:14px auto 6px; border-radius:22px; overflow:hidden; min-height:360px; display:flex; align-items:flex-end; isolation:isolate; border:1px solid var(--border)}
.hero[data-noposter]{background:radial-gradient(120% 140% at 80% 0%, #1d2435 0%, #0c0f16 60%)}
.hero-bg{position:absolute; inset:0; z-index:-2; transition:opacity .55s var(--ease); will-change:transform}   /* parallax-réteg (transform JS-ből) */
.hero-bg.fading{opacity:0}
.hero-bg-img{position:absolute; inset:-12%; background-size:cover; background-position:center 18%; filter:saturate(1.12) contrast(1.02); transform-origin:60% 40%; animation:kenburns 22s ease-in-out infinite alternate; will-change:transform}   /* Ken Burns zoom külön rétegen; inset:-12% a parallax-tartalék */
@keyframes kenburns{from{transform:scale(1.04)} to{transform:scale(1.16)}}
.hero-content{transition:opacity .4s var(--ease)}
.hero-content.fading{opacity:0; transform:translateY(6px)}
.hero-dots{position:absolute; bottom:14px; right:18px; z-index:2; display:flex; gap:7px}
.hdot{width:8px; height:8px; padding:0; border-radius:50%; border:none; background:rgba(255,255,255,.32); cursor:pointer; transition:background .25s var(--ease), width .25s var(--ease)}
.hdot:hover{background:rgba(255,255,255,.6)}
.hdot.on{background:var(--gold); width:22px; border-radius:5px}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(7,8,9,.97) 0%, rgba(7,8,9,.84) 36%, rgba(7,8,9,.34) 74%, rgba(7,8,9,.6) 100%),
             linear-gradient(0deg, rgba(7,8,9,.92) 0%, transparent 46%)}
.hero-inner{padding:30px 32px; max-width:660px}
.eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--gold2); letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px}
.hero h2{margin:0 0 6px; font-size:clamp(1.95rem,5vw,3.4rem); font-weight:800; letter-spacing:-.025em; line-height:1.04; text-wrap:balance}
.horig{color:var(--muted); font-size:15px; margin-bottom:14px; font-style:italic}
.hbadges{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.hmeta{color:#c6ccd9; font-size:14px; margin-bottom:20px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.hmeta .sep{opacity:.45}
.hero-cta{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.btn-primary{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:13px; border:none; cursor:pointer; font:inherit; font-weight:700; font-size:15px; color:#1a1205; background:linear-gradient(180deg,var(--gold2),var(--gold)); box-shadow:0 8px 28px -8px var(--glow); transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 34px -8px var(--glow)}
.btn-primary:active{transform:translateY(0)}

/* ---- filters (sticky) ---- */
.filters{position:sticky; top:0; z-index:30; max-width:var(--maxw); margin:10px auto 0; padding:12px 18px; background:rgba(9,11,16,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tab{padding:8px 14px; border-radius:10px; border:1px solid transparent; background:var(--surface); color:var(--muted); cursor:pointer; font:inherit; font-size:13px; font-weight:600; transition:background .15s,color .15s}
.tab:hover{color:var(--text)}
.tab.on{background:linear-gradient(180deg,var(--gold2),var(--gold)); color:#1a1205}
.selects{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-left:auto}
.selects label{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); cursor:pointer}
.selects input[type=checkbox]{accent-color:var(--gold); width:16px; height:16px}
.selects select{min-height:44px; padding:8px 11px; border-radius:10px; background:var(--card); color:var(--text); border:1px solid var(--border); font:inherit; font-size:13px; cursor:pointer; transition:border-color .15s}
.selects select:hover{border-color:var(--dim)}
.selects select:focus-visible{outline:none; border-color:var(--gold); box-shadow:0 0 0 2px #f5b30155}
.toggle-btn{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; font:inherit; font-size:13px; font-weight:600; transition:background .15s,color .15s,border-color .15s}
.toggle-btn:hover{color:var(--text)}
.toggle-btn .dot{width:9px; height:9px; border-radius:50%; background:var(--dim); transition:background .18s, box-shadow .18s}
.toggle-btn.on{color:#1a1205; background:linear-gradient(180deg,var(--gold2),var(--gold)); border-color:transparent}
.toggle-btn.on .dot{background:#1a1205}

/* ---- poster grid ---- */
.grid{max-width:var(--maxw); margin:0 auto; padding:22px 18px 64px; display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:22px 16px}
.empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:64px 0}

.tile{position:relative; display:flex; flex-direction:column; gap:10px}
.tile-poster{position:relative; aspect-ratio:2/3; border-radius:14px; overflow:hidden; background:var(--card2); box-shadow:0 8px 22px -12px rgba(0,0,0,.75); transition:transform .28s var(--ease), box-shadow .28s var(--ease)}
.tile-poster img{width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease)}
.tile-poster .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:42px; opacity:.35}
@media (hover:hover){
  .tile:hover .tile-poster{transform:translateY(-6px); box-shadow:0 20px 38px -14px rgba(0,0,0,.85), 0 0 0 1px var(--border)}
  .tile:hover .tile-poster img{transform:scale(1.07)}
  .tile.feat:hover .tile-poster{box-shadow:0 20px 42px -14px rgba(0,0,0,.85), 0 0 24px -4px var(--glow)}
}
.tile-open{position:absolute; inset:0; z-index:2; border:none; background:transparent; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent}
.tile-grad{position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg, rgba(7,8,9,.82) 0%, rgba(7,8,9,.12) 34%, transparent 50%)}
.tile-pills{position:absolute; top:8px; left:8px; z-index:3; pointer-events:none; display:flex; flex-direction:column; gap:5px; align-items:flex-start; max-width:calc(100% - 50px)}
.tile-stream{display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:3px 9px; border-radius:999px; font-size:10.5px; font-weight:700; color:#7be0a3; background:rgba(7,8,9,.74); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border:1px solid #46d27f44; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile-score{position:absolute; bottom:8px; left:8px; z-index:3; pointer-events:none; display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; background:rgba(7,8,9,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border:1px solid #f5b30166; color:var(--gold2); font-weight:700; font-size:13px}
.tile-quick{position:absolute; top:7px; right:7px; z-index:4; display:flex; flex-direction:column; gap:6px; opacity:0; transform:translateX(6px); transition:opacity .2s var(--ease), transform .2s var(--ease)}
@media (hover:hover){ .tile:hover .tile-quick, .tile:focus-within .tile-quick{opacity:1; transform:none} }
@media (hover:none){ .tile-quick{opacity:1; transform:none} }
.q-btn{width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; border:none; cursor:pointer; background:rgba(7,8,9,.64); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#e3e7ef; transition:background .15s,color .15s,transform .15s}
.q-btn svg{display:block; pointer-events:none}
.q-btn:hover{background:rgba(7,8,9,.88)}
.q-heart.on{color:var(--red)} .q-heart.on svg{fill:currentColor}
.q-hide.on{color:var(--red)}
.q-btn:active{transform:scale(1.14)}

/* sorozat-haladás: sáv a poszter alján + darabszám a csempe szövegében */
.tile-prog{position:absolute; left:0; right:0; bottom:0; z-index:3; height:4px; pointer-events:none; background:rgba(7,8,9,.72)}
.tile-prog span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold2)); transition:width .35s var(--ease)}
.tile-eps{color:var(--gold2); font-weight:600}

.tile.is-watched .tile-poster img{filter:grayscale(.5) brightness(.55)}
.tile.is-watched .tile-poster::after{content:"✓ Megnézve"; position:absolute; inset:auto 0 0 0; z-index:3; pointer-events:none; padding:8px; text-align:center; background:linear-gradient(0deg,rgba(31,93,58,.96),rgba(31,93,58,0)); color:#eafff2; font-weight:700; font-size:13px}

.tile-body{display:flex; flex-direction:column; gap:3px}
.tile-title{margin:0; font-size:15px; font-weight:600; line-height:1.28; text-wrap:balance}
.tile-sub{color:var(--muted); font-size:12.5px}
.tile-sub .leaving{color:var(--gold2); font-weight:600}

/* status pill */
.st{display:inline-block; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em; background:rgba(7,8,9,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#cfd5e2; border:1px solid var(--border)}
.st-in_cinema{color:#7be0a3; border-color:#46d27f55}
.st-upcoming_hu{color:var(--gold2); border-color:#f5b30155}
.st-abroad_only{color:#9fb4ff; border-color:#7b8cff55}
.st-archive{color:#c3a7e8; border-color:#a07be055}   /* kézzel hozzáadott, nem fut moziban */
.st-series{color:#8fe3d8; border-color:#3fd0c055}    /* sorozat: a státusz helyett a típus a pill */

/* badges */
.badge{display:inline-block; padding:4px 10px; border-radius:8px; font-size:12.5px; font-weight:700; background:var(--surface); border:1px solid var(--border); color:var(--text)}
.b-green{color:#7be0a3; border-color:#46d27f55}
.b-yellow{color:var(--gold2); border-color:#f5b30155}
.b-red{color:#ff8a96; border-color:#ef5b6b55}
.b-imdb{color:#f5d76b; border-color:#f5d76b44}

/* ---- detail sheet (dialog) ---- */
.sheet{width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:20px; border:none; background:transparent; color:var(--text); display:grid; place-items:center; overflow:hidden}
dialog.sheet:not([open]){display:none}   /* natív dialog: zárva NE látszódjon (a display:grid felülírná) */
.sheet::backdrop{background:rgba(4,5,7,.74); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.sheet-card{position:relative; width:min(880px,100%); max-height:calc(100dvh - 40px); display:grid; grid-template-columns:300px 1fr; background:linear-gradient(180deg,#171c28,#0f131b); border:1px solid var(--border); border-radius:20px; overflow:hidden}
.sheet-poster{position:relative; background:var(--card2); min-height:100%}
.sheet-poster img{width:100%; height:100%; object-fit:cover}
.sheet-poster .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:54px; opacity:.35}
.sheet-main{padding:28px 30px; overflow-y:auto}
.sheet-close{position:absolute; top:12px; right:12px; z-index:5; width:38px; height:38px; border-radius:11px; border:none; background:rgba(7,8,9,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; cursor:pointer; font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .15s}
.sheet-close:hover{background:rgba(7,8,9,.9)}
.sheet h2{margin:6px 0 2px; font-size:clamp(1.4rem,3vw,2rem); font-weight:800; letter-spacing:-.015em; line-height:1.1; text-wrap:balance}
.s-orig{color:var(--muted); font-style:italic; margin-bottom:10px}
.s-badges{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0}
.s-meta{color:#c6ccd9; font-size:14px; margin-bottom:4px}
.s-genres{color:var(--muted); font-size:13px}
.s-block{margin-top:16px; padding-top:16px; border-top:1px solid var(--border)}
.s-lbl{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); margin-bottom:7px; font-weight:700}
.s-mozi{font-size:14px; line-height:1.6}
.s-stream{color:#7bd6a3; font-size:14px; margin-top:6px}
.s-synopsis{margin:0; color:#c6ccd9; font-size:14px; line-height:1.6}

/* epizód-lista a részletpanelben */
.s-epcount{margin-left:8px; text-transform:none; letter-spacing:0; color:var(--gold2); font-size:12px}
.s-prog{height:6px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; margin-bottom:12px}
.s-prog span{display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--gold),var(--gold2)); transition:width .35s var(--ease)}
.s-seasons{display:flex; flex-direction:column; gap:8px}
.season{border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden}
.season>summary{display:flex; align-items:center; gap:10px; min-height:46px; padding:10px 14px; cursor:pointer; font-weight:700; font-size:14px; list-style:none}
.season>summary::-webkit-details-marker{display:none}
.season>summary::before{content:"▸"; color:var(--dim); font-size:12px; transition:transform .2s var(--ease)}
.season[open]>summary::before{transform:rotate(90deg)}
.se-title{flex:1 1 auto}
.se-count{color:var(--gold2); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums}
.se-all-btn{display:inline-flex; align-items:center; min-height:32px; padding:5px 12px; border-radius:9px; border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--muted); font-size:12px; font-weight:600; cursor:pointer}
.se-all-btn:hover{color:var(--text); border-color:#f5b30166}
.ep-list{display:flex; flex-direction:column; padding:4px 6px 8px; gap:2px}
.ep{display:flex; align-items:center; gap:11px; width:100%; min-height:44px; padding:7px 10px; border:none; border-radius:9px; background:transparent; color:var(--text); text-align:left; cursor:pointer; font:inherit; transition:background .15s}
.ep:hover{background:rgba(255,255,255,.05)}
.ep-tick{flex:0 0 auto; width:21px; height:21px; border-radius:7px; border:1.5px solid var(--dim); position:relative; transition:border-color .15s, background .15s}
.ep.on .ep-tick{background:var(--green); border-color:var(--green)}
.ep.on .ep-tick::after{content:""; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid #08130c; border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}
.ep-txt{min-width:0; display:flex; flex-direction:column; gap:1px}
.ep-title{font-size:14px; line-height:1.35}
.ep.on .ep-title{color:var(--muted)}
.ep-meta{color:var(--dim); font-size:12px; font-variant-numeric:tabular-nums}
.ep-loading{color:var(--muted); font-size:13.5px; padding:6px 2px}
.s-spoiler{margin-left:6px; padding:1px 7px; border-radius:999px; background:rgba(70,210,127,.13); border:1px solid #46d27f44; color:#7be0a3; font-size:9px; font-weight:700; letter-spacing:.04em; vertical-align:middle}
.sheet-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:4px 0 10px}
.btn-watched{padding:11px 18px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; font-weight:700; cursor:pointer; transition:background .15s,border-color .15s,color .15s}
.btn-watched.on{background:linear-gradient(180deg,#2c7a4e,#1f5d3a); border-color:transparent; color:#eafff2}
.stars{display:inline-flex; gap:1px}
.star{width:36px; height:42px; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; color:var(--dim); cursor:pointer; font-size:23px; line-height:1; transition:color .12s,transform .12s}
.star.on{color:var(--gold)} .star:hover{color:var(--gold2)} .star:active{transform:scale(1.22)}
.secondary-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.btn-ghost{display:inline-flex; align-items:center; gap:7px; padding:10px 15px; border-radius:11px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-size:13px; font-weight:600; transition:color .15s,border-color .15s,background .15s}
.btn-ghost svg{display:block; pointer-events:none}
.btn-ghost:hover{color:var(--text)}
.btn-ghost.on{color:var(--red); border-color:#ef5b6b66}
.btn-ghost.on svg{fill:currentColor}
.note{width:100%; margin-top:14px; padding:12px 14px; border-radius:12px; background:var(--card); border:1px solid var(--border); color:var(--text); font:inherit; font-size:14px; resize:vertical; min-height:46px}
.note::placeholder{color:#878ea5}
.note:focus-visible{outline:none; border-color:var(--gold); box-shadow:0 0 0 2px #f5b30155}

.sheet[open]{animation:sheetIn .32s var(--ease)}
@keyframes sheetIn{from{opacity:0} to{opacity:1}}
.sheet[open] .sheet-card{animation:cardIn .34s var(--ease)}
@keyframes cardIn{from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none}}

/* ---- cinemas page ---- */
.cin-wrap{max-width:760px; margin:0 auto; padding:10px 18px 64px}
.cin-city{color:var(--gold2); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:24px 0 11px; padding-bottom:9px; border-bottom:1px solid var(--border)}
.cin-list{display:flex; flex-direction:column; gap:8px}
.cin-row{display:flex; align-items:center; gap:12px; padding:13px 15px; background:var(--card); border:1px solid var(--border); border-radius:13px; transition:border-color .15s,transform .15s}
.cin-row:hover{border-color:var(--dim)}
.cin-name{font-weight:600}
.cin-count{margin-left:auto; color:var(--muted); font-size:13px}
.heart{display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; background:none; border:none; cursor:pointer; color:var(--dim); line-height:0; padding:0; transition:color .15s,transform .15s}
.heart svg{display:block; pointer-events:none}
.heart:hover{color:#8a93a8} .heart.on{color:var(--red)} .heart.on svg{fill:currentColor} .heart:active{transform:scale(1.18)}

/* ---- film hozzáadása (kereső) ---- */
.add-wrap{max-width:760px; margin:0 auto; padding:14px 18px 64px}
.add-search{display:flex; flex-direction:column; gap:8px}
.add-label{font-size:13px; font-weight:600; color:var(--muted)}
.add-row{display:flex; gap:10px; flex-wrap:wrap}
.add-row input{flex:1 1 240px; min-width:0; padding:13px 15px; border-radius:12px; border:1px solid var(--border); background:var(--card); color:var(--text); font:inherit; font-size:16px}
.add-row input::placeholder{color:var(--dim)}
.add-row input:focus-visible{outline:none; border-color:var(--gold); box-shadow:0 0 0 2px #f5b30155}
.add-hint{margin:0; color:var(--dim); font-size:12.5px}
.add-status{margin:16px 0 0; padding:11px 14px; border-radius:11px; border:1px solid var(--border); background:var(--card); font-size:14px; color:var(--muted)}
.add-status.is-ok{border-color:#46d27f55; color:#9ef0c0}
.add-status.is-error{border-color:#ef5b6b55; color:#ffb9c1}
.add-status.is-warn{border-color:#f5b30155; color:var(--gold2)}
.add-results{display:flex; flex-direction:column; gap:10px; margin-top:16px}
.add-card{display:flex; align-items:center; gap:14px; padding:12px 14px; background:var(--card); border:1px solid var(--border); border-radius:14px; transition:border-color .15s, opacity .2s}
.add-card:hover{border-color:var(--dim)}
.add-card.is-busy{opacity:.6}
.add-card.is-done{border-color:#46d27f55}
.add-poster{width:54px; height:81px; flex:0 0 auto; object-fit:cover; border-radius:8px; background:var(--surface)}
.add-poster-empty{display:grid; place-items:center; font-size:22px}
.add-info{min-width:0; flex:1 1 auto}
.add-info h2{margin:0 0 3px; font-size:16px; font-weight:700; line-height:1.25}
.add-kind{display:inline-block; vertical-align:middle; margin-left:6px; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em; color:#cfd5e2; background:var(--surface); border:1px solid var(--border)}
.add-kind.is-series{color:#8fe3d8; border-color:#3fd0c055}
.add-meta{color:var(--muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.add-action{flex:0 0 auto; margin-left:auto}
.add-action .btn-primary,.add-action .btn-ghost{min-height:44px; padding:11px 18px; font-size:14px}   /* 44px touch-target */
@media (max-width:520px){
  .add-card{flex-wrap:wrap}
  .add-action{width:100%; margin-left:0}
  .add-action .btn-primary,.add-action .btn-ghost{width:100%; justify-content:center}
}

/* ----- auth (login) + felhasználók ----- */
.auth-body{min-height:100dvh; display:grid; place-items:center; padding:24px}
.auth-card{width:100%; max-width:340px; display:flex; flex-direction:column; gap:12px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:28px 24px; box-shadow:0 24px 60px rgba(0,0,0,.45)}
.auth-brand{font-weight:800; font-size:1.5rem; letter-spacing:.3px}
.auth-brand .dot{color:var(--gold)}
.auth-sub{color:var(--muted); font-size:13px; margin:-4px 0 6px}
.auth-input{padding:11px 13px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font:inherit; font-size:15px}
.auth-input::placeholder{color:var(--dim)}
.auth-input:focus-visible{outline:none; border-color:var(--gold); box-shadow:0 0 0 2px #f5b30155}
.auth-err{background:#ef5b6b22; border:1px solid #ef5b6b55; color:#ffb9c1; padding:8px 11px; border-radius:9px; font-size:13px}
.auth-card .btn-primary{margin-top:4px; justify-content:center}
.notice.ok{border-color:#46d27f55; color:#9ef0c0}
.notice.bad{border-color:#ef5b6b55; color:#ffb9c1}
.u-list{display:flex; flex-direction:column; gap:10px; margin-bottom:26px}
.u-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 14px}
.u-main{display:flex; flex-direction:column; gap:2px; margin-right:auto; min-width:200px}
.u-name{font-weight:600; display:flex; align-items:center; gap:8px}
.u-badge{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#1a1205; background:linear-gradient(180deg,var(--gold2),var(--gold)); padding:2px 7px; border-radius:999px}
.u-email{color:var(--muted); font-size:13px}
.u-meta{color:var(--dim); font-size:12px}
.u-pw{display:flex; gap:6px}
.u-pw .auth-input{font-size:13px; padding:7px 10px; max-width:130px}
.u-del{color:var(--red)}
.u-new{display:flex; flex-direction:column; gap:10px; max-width:340px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px}
.u-new h3{margin:0 0 2px}

/* responsive */
@media (max-width:680px){
  .hero{min-height:320px; margin:12px 14px 4px; border-radius:18px}
  .hero-inner{padding:24px 20px}
  .hero::after{background:linear-gradient(0deg, rgba(7,8,9,.96) 0%, rgba(7,8,9,.7) 42%, rgba(7,8,9,.3) 100%)}
  .filters{padding:11px 14px}
  .selects{margin-left:0; width:100%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:18px 12px; padding:18px 14px 52px}
  .topbar{padding:18px 16px 2px}
  .sheet{padding:0}
  .sheet-card{grid-template-columns:1fr; width:100%; max-height:100dvh; height:100dvh; border-radius:0; overflow-y:auto}
  .sheet-poster{height:46vh; min-height:auto}
}
@media (max-width:380px){ .grid{grid-template-columns:repeat(2,1fr)} }

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  .hero-bg{transform:none}
  .tile:hover .tile-poster, .tile:hover .tile-poster img{transform:none}
}