:root{color-scheme:dark;--bg:#101312;--panel:#1a1e1c;--muted:#929c96;--mint:#c7f283;--border:#303832}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f1f3ee;font-family:system-ui,-apple-system,sans-serif}header,main{max-width:1160px;margin:auto;padding:28px 36px}header{display:flex;align-items:center;gap:26px;border-bottom:1px solid var(--border)}.brand{color:var(--mint);font-size:30px;text-decoration:none;font-weight:800;letter-spacing:-1px}.brand span{color:#f1f3ee}.eyebrow{font-size:10px;letter-spacing:2.1px;font-weight:650;color:var(--muted)}header .quiet{margin-left:auto}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid transparent;background:var(--mint);color:#182014;border-radius:9px;padding:12px 18px;font-weight:650}button:hover{filter:brightness(1.1)}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--mint);outline-offset:4px}.quiet{background:transparent;color:#e6eae5;border-color:var(--border)}.intro{display:flex;align-items:center;justify-content:space-between;padding:40px 0 60px}.mint{color:var(--mint)}h1{font-size:clamp(34px,5vw,56px);line-height:1.12;letter-spacing:-2px;margin:22px 0}h1 span{color:var(--muted)}.muted{color:var(--muted);line-height:1.7}.ticket{width:245px;padding:28px;background:#20271f;border:1px solid #43513a;border-radius:16px;transform:rotate(4deg);display:flex;flex-direction:column;gap:12px;color:#d8e9c9}.ticket>span:first-child,.ticket small{font-size:10px;letter-spacing:1.6px}.ticket strong{font-size:64px;font-weight:450;line-height:1}.ticket>span{font-size:12px}.ticket-line{border-top:1px dashed #59654f;margin:8px -28px}.toolbar{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--border);padding-bottom:18px}nav{display:flex;gap:6px;flex-wrap:wrap}nav button{background:transparent;color:var(--muted);font-size:13px;padding:10px 12px}nav .active{color:var(--mint);background:#263020}.search-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:24px 0;font-size:12px}.search-row input{max-width:320px;margin:0}input,select,textarea{width:100%;padding:12px 14px;background:#131714;color:#f1f3ee;border:1px solid var(--border);border-radius:8px;margin:8px 0 18px}textarea{min-height:80px}label{font-size:13px;color:#b8c1b9;display:block}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;color:inherit;padding:0;font-weight:400}.card-art{height:130px;background:radial-gradient(ellipse at 80% 10%,#455a38,transparent 70%),linear-gradient(135deg,#242d27,#171e1e);padding:20px;display:flex;align-items:flex-end;justify-content:space-between}.card-art .initial{font-size:48px;color:#c7f28366;font-family:Georgia,serif}.badge{font-size:10px;color:#d5e4ce;border:1px solid #ffffff24;border-radius:5px;padding:5px 7px;background:#10181077}.card-body{padding:20px}.card h3{font-size:19px;margin:0 0 10px}.card p{font-size:12px;color:var(--muted);margin:9px 0}.progress{display:block;width:100%;border:0;appearance:none;height:3px;background:#394135;border-radius:2px;margin:15px 0}.progress::-webkit-progress-bar{background:#394135}.progress::-webkit-progress-value{background:var(--mint)}.progress::-moz-progress-bar{background:var(--mint)}.empty{text-align:center;padding:55px 15px 75px;border:1px dashed var(--border);border-radius:14px}.empty-icon{font-size:36px;color:var(--mint)}.empty h2{font-size:22px}.empty p{color:var(--muted);font-size:14px;line-height:1.8}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--border);padding:25px 0 0;margin-top:55px;color:var(--muted);font-size:10px;letter-spacing:1px}dialog{background:var(--panel);color:#f1f3ee;border:1px solid #475242;border-radius:18px;padding:28px;width:min(560px,calc(100% - 24px));max-height:90vh}dialog::backdrop{background:#060a08cc;backdrop-filter:blur(6px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px}.dialog-head h2{margin:0}.dialog-head button{padding:8px 12px}.small{font-size:12px}#notice:not(:empty){background:#283421;border:1px solid #526a3d;border-radius:9px;padding:14px;margin-bottom:22px;font-size:14px}#notice button{margin:8px}.episode{border-top:1px solid var(--border);padding:14px 0}.episode .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.episode strong{flex:1}.episode button,.episode a{font-size:12px}.episode a{color:var(--mint)}.panel{padding:25px;border:1px solid var(--border);border-radius:12px}details{border-top:1px solid var(--border);padding:18px 0}summary{cursor:pointer;color:var(--mint);margin-bottom:14px}.device{display:flex;justify-content:space-between;align-items:center;margin:10px 0}.device button{font-size:12px}.row{display:flex;gap:12px}.row label{flex:1}[hidden]{display:none!important}@media(max-width:700px){header,main{padding:20px}header .eyebrow{display:none}header .quiet{font-size:11px;padding:9px}.intro{padding:22px 0 35px}.ticket{width:145px;padding:18px;margin-left:18px;flex-shrink:0}.ticket strong{font-size:44px}.ticket-line{margin:4px -18px}.ticket small{font-size:8px}.ticket>span{font-size:10px}h1{font-size:34px;letter-spacing:-1px}.intro .muted{font-size:12px}.cards{grid-template-columns:repeat(2,1fr);gap:12px}.toolbar{flex-direction:column}.toolbar>button{align-self:flex-start}.search-row>span{display:none}.card-art{height:100px}.card-body{padding:14px}.card h3{font-size:16px}nav button{padding:9px 8px;font-size:12px}footer{font-size:8px}}@media(max-width:390px){.ticket{display:none}.cards{grid-template-columns:1fr}}

.catalog-result{padding:20px 0;border-top:1px solid var(--border)}.catalog-result h3{margin:0 0 8px}.catalog-result button{display:block;margin-top:16px;width:100%}dialog a{color:var(--mint)}#catalog-message:not(:empty){font-size:14px;line-height:1.6;padding:12px;background:#263020;border-radius:8px}#catalog-form button{width:100%}

/* Poster tiles keep a consistent portrait ratio, including while images load. */
.cards{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.card{transition:transform .18s ease,border-color .18s ease;min-width:0}
.card:hover{transform:translateY(-3px);border-color:#6f845a;filter:none}
.card-art{position:relative;height:auto;aspect-ratio:2/3;padding:0;display:block;overflow:hidden}
.card-art .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.card-art .initial{position:absolute;inset:0;display:grid;place-items:center;font-size:80px;font-style:italic;color:#c7f28370}
.card-art.has-poster .initial{visibility:hidden}
.card-art::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#080e0bd9);pointer-events:none}
.card-art>.badge{position:absolute;bottom:12px;left:12px;z-index:1;max-width:calc(100% - 24px);background:#101810bd;backdrop-filter:blur(8px)}
.card-body{padding:16px}
.card h3{line-height:1.3;overflow-wrap:anywhere}
.catalog-poster{width:92px;aspect-ratio:2/3;object-fit:cover;border-radius:8px;float:left;margin:0 16px 12px 0;background:#131714}
.catalog-result{display:flow-root}
.catalog-result>button{clear:both}
@media(max-width:950px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card-body{padding:13px}.card-art>.badge{font-size:9px;bottom:10px;left:10px;max-width:calc(100% - 20px)}.card p{font-size:11px}}
@media(max-width:320px){.cards{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}

/* Keep episode names in their own column; controls cannot push them onto a new row. */
.episode-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.episode-info{min-width:0;font-size:16px}
.episode-meta{display:block;font-size:12px;line-height:1.5;color:var(--muted);font-weight:400;margin-bottom:3px}
.episode-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-size:16px;line-height:1.4;font-weight:600}
.episode-watch{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;white-space:nowrap;font-size:12px;min-height:44px}
.episode-watch.quiet{color:var(--muted)}
.episode-watch.is-watched{color:#182014;background:var(--mint)}
.watch-icon{font-size:17px;line-height:1}
.episode-link{margin-top:9px;line-height:1.5;font-size:12px}
.episode details{margin-top:12px;padding-bottom:0}
@media(max-width:420px){.episode-header{gap:10px}.episode-watch{width:44px;padding:8px}.episode-watch .watch-label{display:none}}
.card h3,.dialog-head h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.dialog-head h2{min-width:0}
.dialog-head>button{flex-shrink:0}
.episode-legend{font-size:12px}

.episode-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
.episode-controls .episode-watch,.episode-edit-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:10px;border-radius:9px;flex-shrink:0}
.episode-controls svg{display:block;width:21px;height:21px}
.episode-controls .watch-icon{display:flex;align-items:center;justify-content:center}
.episode-edit-button{color:var(--muted)}
.episode-edit-button[aria-expanded="true"]{color:var(--mint);border-color:#6f845a;background:#263020}
.episode-editor{padding:16px;margin-top:14px;background:#131714;border:1px solid var(--border);border-radius:10px}
.episode-editor input{margin-bottom:12px}
.episode-editor .row{flex-wrap:wrap;gap:8px}
.episode-legend{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.legend-eye{display:inline-flex;color:var(--muted)}
.legend-eye svg{width:17px;height:17px}

/* 1.2: constrained columns and stable narrow-screen controls. */
main,section,form,.row>label,.catalog-result{min-width:0;max-width:100%}
body{overflow-wrap:anywhere}.top-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-bottom:12px}.top-search input{margin:0}.filter-label{max-width:230px}.intro{padding:20px 0}.intro h1{font-size:clamp(26px,4vw,40px);margin:12px 0}.ticket{transform:none}.card h3{min-height:2.6em}.cards{align-items:stretch}.card{height:100%}.toolbar{margin-bottom:20px}.season-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.season-heading h3{margin:12px 0}.season-heading small{color:var(--muted);font-size:12px;font-weight:400}.season-watch{font-size:12px;min-height:44px}.season{border-top:1px solid var(--border);padding:8px 0}.season-episodes{border:0;padding:8px 0}.episode-link a{overflow-wrap:anywhere}.row label{min-width:0}dialog{overflow-x:hidden}header{flex-wrap:wrap}.dialog-head{align-items:flex-start}
@media(max-width:420px){header,main{padding:16px}.ticket{display:none}.row{flex-wrap:wrap}.row label{flex:1 1 130px}.season-heading{display:block}.season-watch{width:100%}.intro .muted{display:none}.episode-controls{gap:4px}.episode-header{gap:6px}}

.top-search{grid-template-columns:minmax(0,1fr) auto auto;margin-top:8px}.top-search button{padding:12px}.source-info{font-size:11px;padding:8px 0;border:0}.source-info summary{color:var(--muted);margin:0}.source-info p{margin-bottom:0}#catalog-form .row button{width:auto;flex:1;min-width:0}#catalog-clear{flex:0 1 auto}input[type=search]{min-width:0}

header{gap:12px}.app-version{font-size:11px;color:var(--muted);flex-shrink:0;letter-spacing:.02em}.brand{white-space:nowrap}@media(max-width:420px){header{gap:8px}.brand{font-size:26px}header .quiet{padding:8px;font-size:10px}.app-version{font-size:10px}}

/* Полка 1.3 */
.library-title{font-size:24px;letter-spacing:-.5px;line-height:1.3;margin:8px 0 18px}.add-to-shelf{display:block;width:100%;text-align:left;margin:0 0 20px;padding:16px 18px}.card{position:relative}.card-open{display:block;width:100%;height:100%;padding:0;background:transparent;color:inherit;text-align:left;font-weight:400;border:0;border-radius:14px}.card-open:hover{filter:none}.pin-button{position:absolute;top:9px;right:9px;width:44px;height:44px;padding:0;display:grid;place-items:center;border:1px solid #ffffff35;background:#101312dc;color:#c3c7c1;font-size:29px;border-radius:50%;z-index:2}.pin-button.is-pinned{color:var(--mint);border-color:var(--mint)}.card-year{margin:0 0 12px!important;color:var(--muted);font-size:12px}.card h3{margin-bottom:4px}.detail-year{margin:0 0 12px}.brand{display:inline-flex;align-items:center;gap:8px}header .eyebrow{margin-left:auto}

.pin-button{width:36px;height:36px;top:8px;right:8px;background:#101312c9;border:0}.pin-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}.pin-button.is-pinned svg{fill:currentColor}.query-field{position:relative}.query-field input{padding-right:46px}.query-field>button{position:absolute;right:5px;top:12px;width:36px;height:36px;padding:0;border:0;color:var(--muted)}.query-field input::-webkit-search-cancel-button{-webkit-appearance:none}.app-credits{margin-top:20px}#catalog-submit{width:100%}

.delete-tile{position:absolute;top:8px;left:8px;width:36px;height:36px;display:grid;place-items:center;padding:8px;background:#101312c9;color:#f28080;border:0;border-radius:50%;z-index:2}.delete-tile svg{width:18px;height:18px}.delete-item{display:block;width:100%;margin-top:24px;background:#b72e39;color:#fff;border:1px solid #d44b55}.delete-item:hover{background:#cb3541}

/* Responsive sizing uses the actual app viewport, including desktop Telegram windows. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root{--page-gutter:clamp(12px,3vw,36px);--app-gap:clamp(10px,1.6vw,18px)}
body{min-width:0;min-height:100vh;min-height:100svh;font-size:clamp(14px,.8vw + 11px,16px);line-height:1.45}
header,main{width:100%;max-width:1160px;padding:clamp(16px,2.5vw,28px) var(--page-gutter)}
header{padding-top:max(16px,env(safe-area-inset-top,0px),var(--tg-content-safe-area-inset-top,0px));padding-left:max(var(--page-gutter),env(safe-area-inset-left,0px));padding-right:max(var(--page-gutter),env(safe-area-inset-right,0px));flex-wrap:nowrap}
main{padding-left:max(var(--page-gutter),env(safe-area-inset-left,0px));padding-right:max(var(--page-gutter),env(safe-area-inset-right,0px));padding-bottom:max(24px,env(safe-area-inset-bottom,0px),var(--tg-content-safe-area-inset-bottom,0px))}
.brand{font-size:clamp(24px,3vw,30px)}
.library-title{font-size:clamp(20px,2.5vw,28px)}
.cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:var(--app-gap);align-items:stretch}
.card-art{height:auto;aspect-ratio:2/3}
.card-body{padding:clamp(10px,1.5vw,16px)}
.card h3{font-size:clamp(14px,1.4vw,18px);line-height:1.35;min-height:2.7em}
.card p,.card-year{font-size:clamp(11px,1vw,12px)}
.card-art>.badge{font-size:clamp(8px,.8vw,10px);left:8px;bottom:8px;max-width:calc(100% - 16px);overflow-wrap:anywhere}
.card-open{min-width:0}
.toolbar{display:block}
#tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%}
#tabs button{min-width:0;min-height:44px;padding:9px 6px;font-size:clamp(11px,1.2vw,13px);line-height:1.3;overflow-wrap:normal}
.add-to-shelf{min-height:48px;font-size:clamp(14px,1.4vw,16px)}
input,select,textarea{font-size:16px;min-width:0;max-width:100%}
input,select{min-height:44px}
button{touch-action:manipulation}
footer{flex-wrap:wrap;gap:8px;font-size:10px;letter-spacing:.5px;margin-top:32px}
dialog{width:min(600px,calc(100vw - 24px));max-width:calc(100vw - 24px);padding:clamp(16px,3vw,28px);max-height:calc(100vh - 24px);max-height:min(calc(100dvh - 24px),calc(var(--app-viewport-height,100dvh) - 24px));overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.dialog-head{gap:10px}.dialog-head h2{font-size:clamp(19px,2.5vw,25px);line-height:1.3}
.dialog-head>button{width:44px;height:44px;padding:8px;display:grid;place-items:center}
.episode-title{font-size:clamp(14px,1.5vw,16px)}.episode-meta{font-size:12px}
.episode-header{grid-template-columns:minmax(0,1fr) auto;gap:8px}
.row{flex-wrap:wrap}.row>label{flex:1 1 140px}
.catalog-poster{width:clamp(64px,16vw,92px);max-width:30%}
.catalog-result h3{font-size:clamp(16px,2vw,20px)}
.query-field>button{top:12px;min-width:36px;min-height:36px}
.pin-button,.delete-tile{width:40px;height:40px}.pin-button svg,.delete-tile svg{width:18px;height:18px}
@media(max-width:359px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card-body{padding:9px}#tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.episode-controls{gap:2px}}
@media(max-width:279px){.cards{grid-template-columns:1fr}.episode-header{grid-template-columns:1fr}.episode-controls{justify-content:flex-end}}
@media(min-width:360px) and (max-width:600px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(hover:none){.card:hover{transform:none}.pin-button,.delete-tile{width:44px;height:44px}}
@media(max-height:500px){dialog{padding:12px 16px}.dialog-head{margin-bottom:8px}header,main{padding-top:12px;padding-bottom:12px}}

/* Keep the clear control compact despite the search form's full-width buttons. */
#catalog-form .query-field{position:relative}
#catalog-form .query-field>input{padding-right:48px}
#catalog-form .query-field>#catalog-clear{position:absolute;inset-inline-end:6px;right:6px;left:auto;top:12px;width:36px;min-width:36px;max-width:36px;height:36px;min-height:36px;margin:0;padding:0;display:grid;place-items:center}

.content-guide{padding:14px 0;border-block:1px solid var(--border);margin:12px 0 18px}.content-guide h3{font-size:14px;margin:0 0 12px}.content-guide dl{margin:0}.content-guide dl>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:5px 0;font-size:12px}.content-guide dd{margin:0}.content-guide a{font-size:12px}.content-guide>p{margin-bottom:0}

.content-review{margin:8px 0 18px;font-size:12px;line-height:1.5}.content-review a{color:var(--mint)}