/* ПОП-УТКА / EDITORIAL EDITION 02
   Presentation-only layer. API, D1, Telegram identity and poster uploads are untouched. */
:root {
  --bg:#0b1110;
  --panel:#121d18;
  --panel2:#18261e;
  --line:#334638;
  --ink:#f1f0e4;
  --muted:#9cab9d;
  --lime:#e3f394;
  --lime2:#c5dc83;
  --danger:#f0a39a;
  --font:-apple-system,BlinkMacSystemFont,'Manrope','DM Sans','Segoe UI',sans-serif;
}
html { scroll-padding-top:22px; }
body { background:#0b1110; letter-spacing:-.012em; }
body::before { opacity:.16; }
::selection { background:#d7f08c; color:#0b1610; }
button,select,input,textarea { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
.container { max-width:1220px; }
/* Brand as a small independent masthead instead of a dashboard chrome. */
.masthead { background:#0b1110f5; border-bottom:1px solid #29362d; }
.header-inner { max-width:1220px; min-height:76px; }
.brandmark { background:var(--lime); border-radius:50%; box-shadow:none; transform:none; }
.brandmark svg { transform:none; }
.brandtext b { font-size:19px; letter-spacing:-.055em; }
.brandtext small { color:#9baa9b; font-size:9px; letter-spacing:.18em; }
.telegram-link { border-radius:99px; }
.round-add { border-radius:50%; background:#dff198; color:#172419; border:0; font-weight:500; }
.navlink { border-radius:99px; }
.navlink.active { background:#e2f293; }
.tg-banner { display:flex; align-items:center; min-height:38px; margin:14px 0 0; border:0; border-left:3px solid #a9c66f; border-radius:0 7px 7px 0; background:#19261e; color:#b5c8b4; padding:8px 12px; font-size:10px; line-height:1.45; }
.upper-eyebrow { margin:25px 0 12px; font-size:10px; color:#d7e8a1; }
.live-dot { width:5px; height:5px; box-shadow:none; }
/* Issue cover with subtle halftone texture. */
.hero { min-height:350px; border:1px solid #354739; border-radius:14px; background:radial-gradient(ellipse at 82% 28%,#304a32 0%,#192a1f 40%,#14221a 80%); }
.hero:before { content:'ПОП-УТКА · 2026'; position:absolute; right:18px; top:19px; color:#c9dfad; opacity:.75; font-size:10px; letter-spacing:.22em; font-weight:800; }
.hero-copy { padding:42px 20px 39px 41px; }
.hero-index { color:#b8cba9; font-size:10px; letter-spacing:.25em; font-weight:750; }
.hero h1 { font-size:clamp(40px,5.2vw,72px); letter-spacing:-.074em; line-height:1.04; font-weight:860; max-width:730px; }
.hero h1 i { font-family:Georgia,'Times New Roman',serif; font-weight:400; color:#d9ea9a; }
.hero-copy>p { color:#b9c7bb; line-height:1.7; max-width:470px; }
.cta { border-radius:99px; padding:15px 22px; font-size:12px; background:var(--lime); }
.hero-hint { letter-spacing:.15em; }
.hero-art { background:radial-gradient(circle at 50% 44%,#3b5035a0,transparent 65%); }
.art-circle { border-color:#b6d28338; }
.hero-stamp { opacity:.75; }
/* Magazine folio stats: light and quiet. */
.dashboard { min-height:0; margin:17px 0 48px; background:transparent; border:0; border-top:1px solid #3b493b; border-bottom:1px solid #3b493b; border-radius:0; }
.dash-label { background:#142019; }
.dash-stat { border-color:#28382c; padding:22px 15px; }
.dash-stat strong { font-family:Georgia,serif; font-size:34px; font-weight:400; letter-spacing:-.055em; color:#f7f4e5; }
.dash-stat small { letter-spacing:.12em; color:#97a99b; font-size:9px; }
/* Content hierarchy: bookish headline, clean controls. */
.section-heading { margin-bottom:18px; }
.section-kicker { color:#c7e180; }
.section-heading h2,.stats-head h2 { font-family:Georgia,'Times New Roman',serif; font-style:normal; font-size:clamp(33px,4.5vw,51px); font-weight:400; letter-spacing:-.065em; }
.section-heading p { color:#99aa9b; line-height:1.6; }
.new-record { border-radius:999px; background:#e3f394; }
.library-toolbar { background:transparent; border:0; padding:0; margin-bottom:11px; gap:10px; }
.search-field { border:1px solid #3b4d3e; background:#142019; border-radius:12px; min-height:47px; }
.search-field input { font-size:13px; }
.filter-chips { gap:5px; }
.chip { border-radius:99px; padding:10px 15px; font-size:11px; background:#1a291e; border-color:#304332; }
.chip.selected { background:#e2f293; border-color:#e2f293; color:#162218; }
.sort-label { border:1px solid #304332; border-radius:10px; min-width:130px; padding:7px 10px; }
.list-meta { color:#91a28f; }
.list-meta span:last-child { color:#adce91; }
.view-mode { border:0; border-radius:99px; padding:3px; background:#1b2a20; margin:13px 0; }
.view-mode button { border-radius:99px; }
.view-mode button.active { background:#dbe98f; }
/* Gallery: real posters do the talking, not thick boxes. */
.card-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:25px 16px; }
.media-card { background:transparent; border:0; border-radius:0; overflow:visible; transition:none; }
.media-card:hover { border:0; }
.media-card.editing { background:#17261c; border:1px solid #6f9565; border-radius:13px; overflow:hidden; }
.cover { border-radius:10px; box-shadow:0 14px 20px #0005, 0 0 0 1px #f7f2d516; padding:15px; transition:transform .2s,box-shadow .2s; }
.media-card:not(.editing) .cover:active { transform:scale(.985); }
.cover .cover-grid { opacity:.10; background-size:26px 26px; transform:rotate(18deg); }
.cover-ring { width:81%; border-width:1.5px; top:22%; left:18%; opacity:.42; box-shadow:0 0 0 36px #ffffff0d; }
.cover-symbol { font-family:Georgia,serif; font-weight:400; top:17%; left:12%; opacity:.48; transform:rotate(-12deg); }
.cover:after { background:linear-gradient(0deg,#07100ee8 0%, #0b171440 42%, #07100e10 85%); }
.cover-title { font-family:Georgia,serif; letter-spacing:-.045em; line-height:1.09; font-weight:600; text-shadow:0 2px 12px #0009; }
.cover-title small { text-transform:uppercase; font-size:9px; letter-spacing:.15em; color:#f2efdbbb; }
.type-tag { font-size:9px; background:#10191177; border:1px solid #e7efd266; padding:5px 9px; letter-spacing:.12em; }
.cover.photo:after { background:linear-gradient(0deg,#0813108f,transparent 40%,#08131077); }
.cover-upload { background:#dff28e; color:#122118; box-shadow:0 4px 13px #0008; border-radius:30px; font-size:9px; padding:8px 12px; max-width:84%; }
.media-content { padding:12px 2px 0; }
.film-title { color:#eeeedd; font-size:15px; font-weight:800; line-height:1.3; letter-spacing:-.035em; }
.film-meta { color:#93a696; margin-top:5px; font-size:10px; }
.film-note { color:#b3c0b0; line-height:1.6; }
.poster-first .media-card:not(.editing) .cover { aspect-ratio:2/3; }
.poster-first .media-card:not(.editing) .media-content { padding:11px 2px 0; }
.poster-first .media-card:not(.editing) .film-title { min-height:36px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.poster-first .media-card:not(.editing) .film-meta { margin-bottom:8px; }
.poster-first .media-card:not(.editing) .quick-stars { margin:7px 0 8px; }
.quick-stars button { color:#596e60; }
.quick-stars button.filled { color:#e6f1a0; }
.score-text { color:#a7b69f; }
.status-row { padding-top:6px; border-top:1px solid #2b392d; margin-top:7px; }
.quick-status { border-color:#3d5440; border-radius:7px; color:#b5cdb5; background:#1b2a20; }
.edit-btn { color:#d9ef96; }
.inline-editor { border-top:1px solid #466644; }
/* Entry sheet now feels like a printed review page. */
.entry-dialog { background:#121c17; border:1px solid #586e4d; border-radius:19px 19px 0 0; }
.detail-headlines h2 { font-family:Georgia,serif; font-weight:400; letter-spacing:-.045em; }
.detail-note { font-size:15px; line-height:1.85; color:#d6ded0; }
.detail-link,.detail-edit { border-radius:99px; }
.ending-note { background:transparent; border:1px solid #384c3b; border-radius:12px; }
.footer { background:transparent; }
/* A more native-looking Telegram bottom bar. */
.mobile-tabs { background:#101b14f9; backdrop-filter:blur(22px); border-top:1px solid #304433; }
.mobile-tabs button.active { color:#e2f293; }
@media (max-width:800px) {
  .hero { min-height:0; }
  .hero-copy { padding:32px; }
  .hero-art { min-height:165px; }
  .dashboard { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .dashboard .dash-label { display:none; }
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .container,.header-inner { padding-left:18px; padding-right:18px; }
  .header-inner { min-height:71px; }
  .masthead { position:relative; }
  .brand { gap:10px; }
  .brandmark { width:40px; height:40px; }
  .brandmark svg { width:32px; }
  .brandtext b { font-size:18px; }
  .brandtext small { font-size:8px; letter-spacing:.12em; }
  .upper-eyebrow { display:none; }
  .tg-banner { font-size:10px; margin:10px 0 15px; background:#18281e; color:#afc8b0; padding:9px 12px; min-height:0; }
  .hero { min-height:0; border-radius:12px; background:linear-gradient(130deg,#223829,#122319 70%); }
  .hero:before { font-size:8px; top:15px; right:15px; }
  .hero-copy { padding:24px 20px 22px; }
  .hero-index { font-size:9px; }
  .hero h1 { font-size:clamp(31px,9vw,43px); line-height:1.03; letter-spacing:-.064em; margin:12px 0 10px; max-width:100%; }
  .hero-copy>p { max-width:330px; font-size:11px; line-height:1.52; margin:0 0 14px; }
  .hero-actions { gap:10px; }
  .hero-hint { display:none; }
  .cta { min-height:40px; padding:11px 16px; font-size:11px; }
  .hero-art { display:none; }
  .dashboard { display:flex; gap:0; margin:11px 0 27px; border-top:0; border-bottom:1px solid #354a37; overflow:auto; scroll-snap-type:x mandatory; }
  .dash-label { display:none!important; }
  .dash-stat { flex:1 0 24%; min-width:0; padding:10px 7px 11px; border:0; scroll-snap-align:start; }
  .dash-stat + .dash-stat { border-left:1px solid #304032; }
  .dash-stat strong { font-size:24px; line-height:1; }
  .dash-stat small { font-size:7px; line-height:1.3; letter-spacing:.025em; text-transform:uppercase; }
  .section-heading { gap:12px; align-items:center; margin-bottom:15px; }
  .section-kicker { font-size:8px; letter-spacing:.17em; }
  .section-heading h2 { font-size:29px; line-height:1.08; margin:7px 0 4px; }
  .section-heading p { font-size:10px; max-width:250px; }
  .new-record { font-size:10px; padding:10px 11px; min-width:74px; max-width:98px; border-radius:99px; }
  .library-toolbar { gap:8px; margin-bottom:8px; padding:0; }
  .search-field { flex-basis:100%; height:43px; min-height:43px; }
  .filter-chips { flex-basis:100%; overflow-x:auto; gap:6px; padding:0 0 4px; }
  .chip { font-size:10px; padding:8px 13px; }
  .sort-label { min-width:0; max-width:none; flex:1; border:none; flex-direction:row; gap:10px; align-items:center; padding:3px 0; font-size:8px; }
  .sort-label select { font-size:10px; }
  .view-mode { margin:8px 0 10px; }
  .view-mode button { padding:8px 13px; font-size:10px; }
  .list-meta { font-size:8px; margin:8px 0 14px; flex-wrap:wrap; gap:3px; }
  .list-meta span:last-child { max-width:160px; }
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px 12px; }
  .media-card { min-width:0; }
  .media-card.editing { grid-column:1/-1; }
  .poster-first .media-card:not(.editing) .cover { aspect-ratio:2/3; }
  .cover { padding:10px; border-radius:10px; }
  .cover-ring { width:88%; left:16%; top:29%; }
  .cover-symbol { font-size:clamp(66px,20vw,104px); }
  .cover-title { font-size:clamp(20px,5.4vw,29px); }
  .type-tag { font-size:8px; padding:4px 6px; }
  .cover-upload { top:6px; right:6px; font-size:8px; padding:7px 7px; }
  .media-content { padding:9px 1px 0; }
  .film-title { font-size:13px; line-height:1.3; }
  .poster-first .media-card:not(.editing) .film-title { min-height:34px; }
  .film-meta { font-size:9px; }
  .quick-stars { gap:0; }
  .quick-stars button { font-size:21px; min-width:19px; padding:2px 1px 2px 0; }
  .score-text { font-size:8px; margin-left:4px; }
  .poster-first .media-card:not(.editing) .status-row { flex-wrap:wrap; padding-top:8px; gap:5px; }
  .quick-status { font-size:9px; max-width:98px; padding:8px 3px; }
  .edit-btn { font-size:10px; padding:6px 0; }
  .mobile-tabs { box-shadow:0 -5px 25px #0005; padding-top:7px; }
  .mobile-tabs button { font-size:10px; }
  .mobile-tabs button>span { font-size:22px; }
  .entry-dialog { padding:22px 18px calc(32px + env(safe-area-inset-bottom)); }
  .detail-header { align-items:center; }
  .detail-headlines h2 { font-size:25px; }
  .detail-note { font-size:13px; line-height:1.75; }
}