/* Предложка fasoollka — стили. Тема «Волшебная библиотека» (версия 3.0): тёмные своды,
   золото, свечи, летающие книги; окна идей и видео — страницы старинной книги (пергамент).
   Все размеры — в rem: базовый шрифт плавно растёт с шириной экрана (≈16,5 px на телефоне →
   ≈18,4 px на большом мониторе), и вместе с ним растут отступы, кнопки и карточки.
   Цвета — только через переменные: у «пергамента» (.parchment) свой набор, и все блоки внутри
   окон сами становятся «чернильными». У основных элементов управления одна высота (--ctl),
   у маленьких — --ctl-sm. */
:root{
  --bg:#07080f; --bg2:#0c0d17;
  --panel:#16131d; --panel2:#1e1a27; --panel3:#2a2333;
  --surface:rgba(22,18,29,.86); --surface2:rgba(255,232,180,.045); --field-bg:rgba(5,5,10,.55); --hover:rgba(240,198,116,.09);
  --line:rgba(226,184,104,.17); --line2:rgba(226,184,104,.34); --line3:rgba(240,200,120,.62);
  --text:#f3e9d6; --head:#fff5df; --muted:#cfbf9f; --dim:#a39379;
  --accent:#f0c674; --accent2:#ffe2a3; --on-accent:#221505; --link:#ffd78c; --orn:#e2b462;
  --gold-grad:linear-gradient(180deg,#ffe7ad 0%,#f2c873 42%,#cf9139 100%);
  --st-new:#97d5ff; --st-review:#ffd27f; --st-acc:#cbb7ff; --st-plan:#ffa9d0; --st-done:#95efbf; --st-rej:#ffa0a0;
  --ok:#95efbf; --warn:#ffd27f; --err:#ffa0a0; --cat-mix:100%;
  --r-sm:.6rem; --r:.85rem; --r-lg:1.15rem; --r-xl:1.5rem;
  --ctl:2.875rem; --ctl-sm:2.25rem;
  --shadow:0 1.25rem 3.5rem rgba(0,0,0,.55); --shadow-sm:0 .6rem 1.4rem rgba(0,0,0,.38);
  --glow:0 0 1.6rem rgba(240,190,100,.28);
  --head-h:4.6rem; --gutter:clamp(1rem,3vw,2.5rem);
  --font:"Alegreya Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-d:"Cormorant Garamond","Alegreya Sans",Georgia,"Times New Roman",serif;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .25 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
/* Страница старинной книги: окна идей, видео, правил, предложений. */
.parchment{
  --panel:#efe1bf; --panel2:#e6d4ab; --panel3:#dcc595;
  --surface:rgba(255,249,232,.5); --surface2:rgba(120,80,30,.07); --field-bg:rgba(255,251,240,.72); --hover:rgba(120,80,30,.09);
  --line:rgba(98,64,24,.22); --line2:rgba(98,64,24,.42); --line3:rgba(98,64,24,.65);
  --text:#2e2115; --head:#21160b; --muted:#5b4630; --dim:#7a6448;
  --accent:#8b5719; --accent2:#6b3c0c; --link:#8a3d12; --orn:#8f6326;
  --st-new:#1d6890; --st-review:#875800; --st-acc:#5a3ea6; --st-plan:#a1306a; --st-done:#1f7047; --st-rej:#a2282f;
  --ok:#1f7047; --warn:#875800; --err:#a2282f; --cat-mix:55%;
  --shadow-sm:0 .4rem 1rem rgba(80,50,15,.18);
  color-scheme:light;
}
*{box-sizing:border-box}
html{font-size:clamp(103%,88% + .27vw,115%);scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 1rem);-webkit-text-size-adjust:100%;scrollbar-color:rgba(240,198,116,.35) var(--bg);background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);font:500 1.0625rem/1.6 var(--font);background:var(--bg);overflow-x:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{margin:0;line-height:1.2}
p{margin:0}
[hidden]{display:none!important}
html.modal-open{overflow:hidden}
/* Пока открыто окно, страница под ним замирает: иначе ~500 перерисовок в секунду под размытым фоном
   окна — видеокарта занята, окно «лагает». Место под полосу прокрутки занято всегда (scrollbar-gutter),
   поэтому при открытии окна лента не перестраивается на ширину полосы. */
html{scrollbar-gutter:stable}
html.modal-open body>:not(dialog),html.modal-open body>:not(dialog) *,html.modal-open body>:not(dialog) *::before,html.modal-open body>:not(dialog) *::after{animation-play-state:paused!important}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
::selection{background:rgba(240,198,116,.4);color:#fff}
.parchment ::selection{background:rgba(139,87,25,.3);color:var(--head)}
.shell{width:min(84rem,calc(100% - 2 * var(--gutter)));margin-inline:auto;position:relative;z-index:1}
.muted{color:var(--muted)}
.grad-text{font-style:italic;font-weight:700;background:linear-gradient(100deg,#d79a44 0%,#ffe2a3 30%,#f2c873 42%,#fff6dc 50%,#f2c873 58%,#d79a44 75%,#ffe2a3 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 8s ease-in-out infinite;filter:drop-shadow(0 0 1.1rem rgba(240,170,70,.35));padding-right:.08em}
@keyframes sheen{0%,25%{background-position:100% 0}75%,100%{background-position:0 0}}
.skip-link{position:absolute;left:-999px;top:.5rem;z-index:100;background:var(--panel);padding:.5rem .9rem;border-radius:var(--r-sm)}
.skip-link:focus{left:.5rem}

/* ---------- Сцена: библиотека на фоне, лучи света, пыль, летающие книги ---------- */
.bg-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#07080f}
.bg-img{position:absolute;inset:-8% -3%;background:url(img/library.jpg) center 42%/cover no-repeat;opacity:.55;filter:saturate(1.08) brightness(.85) contrast(1.05);transform:translate3d(0,var(--par,0px),0) scale(1.05);will-change:transform}
.bg-rays{position:absolute;left:50%;top:-30%;width:120vmax;height:120vmax;margin-left:-60vmax;background:conic-gradient(from 160deg at 50% 0,transparent 0deg,rgba(255,214,140,.10) 6deg,transparent 11deg,transparent 17deg,rgba(255,214,140,.07) 21deg,transparent 26deg,rgba(255,214,140,.09) 31deg,transparent 37deg,transparent 360deg);filter:blur(10px);mix-blend-mode:screen;transform-origin:50% 0;animation:sway 16s ease-in-out infinite alternate;opacity:.9}
@keyframes sway{from{transform:rotate(-6deg)}to{transform:rotate(7deg)}}
.bg-scene::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 75% 65% at 50% 28%,rgba(7,8,15,.05) 0%,rgba(7,8,15,.55) 62%,rgba(7,8,15,.93) 100%),
  linear-gradient(180deg,rgba(7,8,15,.45) 0%,rgba(7,8,15,.25) 30%,rgba(7,8,15,.7) 75%,rgba(7,8,15,.9) 100%)}
.fx-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#dust{z-index:0}
#sparks{z-index:120}
.sky{position:absolute;inset:0;z-index:1}
.fly{position:absolute;left:0;top:var(--y,20%);width:var(--w,4rem);opacity:var(--o,.75);filter:blur(var(--b,0)) drop-shadow(0 0 .9rem rgba(255,205,120,.45));animation:flyX var(--t,40s) linear var(--delay,0s) infinite;will-change:transform}
.fly>svg{display:block;width:100%;height:auto;overflow:visible;animation:bob var(--bt,3.2s) ease-in-out infinite alternate}
.fly.rev{animation-name:flyXr}
.fly.rev>svg{transform:scaleX(-1)}
@keyframes flyX{from{transform:translate3d(-12vw,0,0) rotate(-4deg)}50%{transform:translate3d(48vw,-6vh,0) rotate(3deg)}to{transform:translate3d(112vw,2vh,0) rotate(-3deg)}}
@keyframes flyXr{from{transform:translate3d(112vw,0,0) rotate(4deg)}50%{transform:translate3d(48vw,-5vh,0) rotate(-3deg)}to{transform:translate3d(-12vw,3vh,0) rotate(3deg)}}
@keyframes bob{from{translate:0 -.5rem}to{translate:0 .6rem}}
.bk-l,.bk-r{transform-box:view-box;transform-origin:50px 40px;animation:var(--ft,.75s) ease-in-out infinite alternate}
.bk-l{animation-name:flapL}
.bk-r{animation-name:flapR}
@keyframes flapL{from{transform:rotate(16deg)}to{transform:rotate(-24deg)}}
@keyframes flapR{from{transform:rotate(-16deg)}to{transform:rotate(24deg)}}
html.fx-off .bg-rays,html.fx-off .sky,html.fx-off .fx-canvas{display:none}

/* Искры (вспышка при голосе, реакции, отправке) */
.spark{position:fixed;left:0;top:0;z-index:300;width:var(--s,.5rem);height:var(--s,.5rem);margin:calc(var(--s,.5rem) / -2) 0 0 calc(var(--s,.5rem) / -2);pointer-events:none;border-radius:50%;background:radial-gradient(circle,#fff 0,var(--c,#ffe2a3) 35%,rgba(240,198,116,0) 70%);animation:spark var(--d,.8s) cubic-bezier(.12,.75,.3,1) forwards}
.spark.star{border-radius:0;background:var(--c,#ffe2a3);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 4px #ffcf6e)}
@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}70%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.25) rotate(var(--rot,90deg))}}
.spark-ring{position:fixed;z-index:300;width:1rem;height:1rem;margin:-.5rem 0 0 -.5rem;border-radius:50%;border:2px solid rgba(255,226,163,.9);box-shadow:0 0 1rem rgba(240,198,116,.8),inset 0 0 .6rem rgba(240,198,116,.6);pointer-events:none;animation:ring .6s ease-out forwards}
@keyframes ring{to{transform:scale(6);opacity:0;border-width:1px}}

/* ---------- Кнопки ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--ctl);border:1px solid transparent;border-radius:var(--r);padding:0 1.3rem;font-size:1.0625rem;font-weight:800;line-height:1.2;letter-spacing:.01em;white-space:nowrap;text-align:center;overflow:hidden;transition:transform .15s,filter .15s,background .15s,border-color .15s,box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.45)}
.btn-grad{color:var(--on-accent);background:var(--gold-grad);border-color:rgba(255,236,190,.55);box-shadow:inset 0 1px rgba(255,255,255,.55),inset 0 -2px rgba(120,70,10,.35),0 .5rem 1.4rem rgba(220,150,50,.25);text-shadow:0 1px rgba(255,240,200,.45)}
.btn-grad::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none}
.btn-grad:hover:not(:disabled){filter:brightness(1.07);box-shadow:inset 0 1px rgba(255,255,255,.55),inset 0 -2px rgba(120,70,10,.35),0 .5rem 1.8rem rgba(240,170,60,.45)}
.btn-grad:hover:not(:disabled)::after{left:130%}
.btn-ghost{background:var(--surface2);border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{border-color:var(--line3);background:var(--hover);box-shadow:var(--glow)}
.btn-sm{min-height:var(--ctl-sm);padding:0 .95rem;font-size:.9375rem;border-radius:var(--r-sm)}
.mini-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:var(--ctl-sm);border:1px solid var(--line2);background:var(--surface2);border-radius:var(--r-sm);padding:0 .8rem;font-size:.9375rem;font-weight:800;line-height:1.2;white-space:nowrap;color:var(--text);transition:border-color .15s,background .15s,box-shadow .2s}
.mini-btn:hover{border-color:var(--line3);background:var(--hover)}
.btn-danger,.mini-btn.btn-danger{background:color-mix(in srgb,var(--err) 12%,transparent);border-color:color-mix(in srgb,var(--err) 42%,transparent);color:var(--err)}
.btn-danger:hover,.mini-btn.btn-danger:hover{background:color-mix(in srgb,var(--err) 22%,transparent);border-color:color-mix(in srgb,var(--err) 65%,transparent)}
.btn-ok,.mini-btn.btn-ok{background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:color-mix(in srgb,var(--ok) 42%,transparent);color:var(--ok)}
.btn-ok:hover,.mini-btn.btn-ok:hover{background:color-mix(in srgb,var(--ok) 20%,transparent);border-color:color-mix(in srgb,var(--ok) 65%,transparent)}
.icon-btn{position:relative;flex:none;display:inline-grid;place-items:center;width:var(--ctl);height:var(--ctl);border-radius:50%;border:1px solid var(--line2);background:rgba(10,9,16,.6);font-size:1.2rem;line-height:1;color:var(--accent);transition:border-color .15s,background .15s,box-shadow .2s,transform .2s}
.icon-btn:hover{border-color:var(--line3);background:var(--hover);box-shadow:var(--glow)}
#randomBtn:hover{transform:rotate(-12deg)}
.icon-btn svg,.search svg{width:1.2rem;height:1.2rem;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.link-btn{background:none;border:0;padding:0;color:inherit;font-weight:700}
.link-btn:hover{color:var(--accent2);text-decoration:underline}
.dot-badge{position:absolute;top:-.3rem;right:-.3rem;min-width:1.3rem;height:1.3rem;padding:0 .35rem;border-radius:99px;background:#c8323f;color:#fff;font-size:.8125rem;font-weight:800;line-height:1.3rem;text-align:center;box-shadow:0 0 0 2px var(--bg),0 0 .8rem rgba(255,80,90,.6)}

/* ---------- Шапка ---------- */
.topbar{position:sticky;top:0;z-index:30;height:var(--head-h);background:linear-gradient(180deg,rgba(8,7,13,.94),rgba(8,7,13,.74));-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(240,198,116,.45) 18%,rgba(255,226,163,.95) 50%,rgba(240,198,116,.45) 82%,transparent)}
.topbar-row{height:100%;display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand-bean{width:2.6rem;height:2.9rem;overflow:visible;filter:drop-shadow(0 0 .7rem rgba(240,190,100,.45))}
.brand-text{display:flex;flex-direction:column;gap:.15rem;font:700 1.65rem/1 var(--font-d);color:var(--head);letter-spacing:.01em}
.brand-text small{font:800 .66rem/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.nav{display:flex;gap:.35rem}
.nav-link{display:inline-flex;align-items:center;gap:.45rem;min-height:var(--ctl);border:0;background:transparent;padding:0 1rem;border-radius:var(--r);font-size:1.0625rem;font-weight:700;color:var(--muted);white-space:nowrap;transition:background .15s,color .15s,box-shadow .2s}
.nav-link:hover{background:var(--hover);color:var(--accent2)}
.nav-link.active{color:var(--accent2);background:rgba(240,198,116,.08);box-shadow:inset 0 -2px var(--accent)}
.nav-video{color:var(--accent2);background:linear-gradient(180deg,rgba(240,198,116,.12),rgba(240,198,116,.04));box-shadow:inset 0 0 0 1px rgba(240,198,116,.55),0 0 1.1rem rgba(240,190,100,.18)}
.nav-video.active{color:var(--on-accent);background:var(--gold-grad);box-shadow:0 .3rem 1.2rem rgba(240,170,60,.4)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.search{display:flex;align-items:center;gap:.6rem;width:17rem;height:var(--ctl);padding:0 .75rem 0 .95rem;border:1px solid var(--line2);border-radius:99px;background:rgba(5,5,10,.6);color:var(--accent);transition:border-color .15s,width .25s,box-shadow .2s}
.search:focus-within{border-color:var(--line3);width:21rem;box-shadow:var(--glow)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);padding:0;font-size:1.0625rem}
.search input::placeholder{color:var(--dim)}
.search input::-webkit-search-cancel-button{filter:sepia(1) saturate(3) hue-rotate(5deg)}
.search kbd{font:700 .8125rem/1 var(--font);border:1px solid var(--line2);border-radius:.4rem;padding:.2rem .45rem;color:var(--dim)}
#searchToggle{display:none}
.btn-donate{padding:0 1.1rem;border-radius:99px}

/* ---------- Объявление ---------- */
.announce{position:relative;z-index:2;background:linear-gradient(90deg,rgba(60,38,10,.85),rgba(110,72,22,.88) 50%,rgba(60,38,10,.85));border-bottom:1px solid rgba(240,198,116,.45);box-shadow:0 .4rem 1.4rem rgba(0,0,0,.35)}
.announce-row{display:flex;align-items:center;gap:.8rem;padding:.8rem 0}
.announce-icon{font-size:1.3rem;filter:drop-shadow(0 0 .4rem rgba(255,210,130,.7))}
.announce-row p{flex:1;font-size:1.125rem;font-weight:700;color:#fff3d6;white-space:pre-line}
.announce-close{flex:none;width:var(--ctl-sm);height:var(--ctl-sm);border:0;border-radius:var(--r-sm);background:transparent;font-size:1.5rem;line-height:1;color:#e9d3a6}
.announce-close:hover{color:#fff;background:rgba(255,255,255,.1)}

/* ---------- Первый экран ---------- */
.page{position:relative;z-index:1;animation:pageIn .6s cubic-bezier(.2,.7,.2,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(1.2rem)}}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,4vw,4.5rem);align-items:center;padding:3.5rem 0 3rem}
body.has-callout #page-ideas .hero{padding-top:calc(var(--callout-h,5rem) + 1.5rem)}
.hero-text{position:relative;min-width:0;display:flex;flex-direction:column}
.hero-title{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.hero-title>div{min-width:0}
.live-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:.6rem;padding:.42rem 1rem .42rem .8rem;border-radius:99px;background:rgba(8,10,12,.55);border:1px solid rgba(126,224,168,.45);color:#aef3cb;font-size:.8125rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 1.2rem rgba(80,220,150,.12)}
.live-pill i{width:.6rem;height:.85rem;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 50% 70%,#eafff3 0,#7ee0a8 45%,#1f9c63 100%);box-shadow:0 0 .7rem #5be59a,0 0 1.4rem rgba(91,229,154,.5);animation:flame 1.6s ease-in-out infinite}
.live-pill.off{border-color:rgba(255,210,127,.45);color:#ffdd9c;box-shadow:none}
.live-pill.off i{background:radial-gradient(circle at 50% 70%,#fff3d6 0,#ffc861 50%,#b06d14 100%);box-shadow:0 0 .5rem rgba(255,190,90,.5);animation:none;opacity:.75}
.live-pill.pink{border-color:rgba(240,198,116,.5);color:var(--accent2)}
.live-pill.pink i{background:radial-gradient(circle at 50% 70%,#fffbe8 0,#ffd47e 45%,#d4801f 100%);box-shadow:0 0 .7rem #ffc35c,0 0 1.4rem rgba(255,180,70,.5)}
@keyframes flame{0%,100%{transform:scale(1) rotate(-2deg)}30%{transform:scale(1.12,.92) rotate(3deg)}60%{transform:scale(.92,1.1) rotate(-3deg)}}
@keyframes pulse{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(2);opacity:0}}
.hero h1{margin:1rem 0 0;font:700 clamp(3.1rem,1.5rem + 4.3vw,5.9rem)/.98 var(--font-d);letter-spacing:-.01em;color:var(--head);text-shadow:0 .2rem 1.6rem rgba(0,0,0,.6)}
.hero h1 .grad-text{display:inline-block}
.lead{max-width:36rem;margin-top:1.1rem;color:var(--muted);font-size:1.25rem;font-weight:500;line-height:1.55;text-shadow:0 1px .6rem rgba(0,0,0,.7)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-top:1.75rem;min-height:5.6rem}
.stat{position:relative;min-width:0;padding:.85rem 1.1rem .9rem;border-radius:var(--r);background:radial-gradient(14rem circle at var(--mx,-50%) var(--my,-50%),rgba(240,198,116,.12),transparent 50%),linear-gradient(180deg,rgba(28,23,34,.86),rgba(14,12,19,.86));border:1px solid var(--line2);outline:1px solid rgba(240,198,116,.08);outline-offset:-.3rem;box-shadow:var(--shadow-sm)}
.stat b{display:block;font:700 2.35rem/1 var(--font-d);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:lining-nums;filter:drop-shadow(0 0 .6rem rgba(240,180,80,.3))}
.stat span{display:block;margin-top:.3rem;font-size:.8125rem;line-height:1.2;color:var(--muted);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:.75rem 0 0;padding:0}
.steps li{display:flex;align-items:center;gap:.75rem;min-width:0;padding:.8rem .95rem;border-radius:var(--r);border:1px solid var(--line);background:rgba(10,9,15,.55);font-weight:800;font-size:1rem;line-height:1.25;color:var(--text)}
.steps li b{flex:none;display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1c8,#f0c674 45%,#a8722a);color:#2a1a05;font:700 1.05rem var(--font-d);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 .9rem rgba(240,198,116,.35)}
.steps small{color:var(--dim);font-weight:600;font-size:.875rem}
.mascot{flex:none;width:clamp(5.5rem,10vw,10rem);overflow:visible;filter:drop-shadow(0 1.1rem 1.9rem rgba(0,0,0,.55));animation:float 5s ease-in-out infinite}
.mascot .m-glow{animation:breathe 3s ease-in-out infinite alternate;transform-origin:center;transform-box:fill-box}
.mascot .m-mote{opacity:0;animation:mote 2.6s ease-in infinite;transform-box:fill-box}
@keyframes float{50%{transform:translateY(-.7rem) rotate(3deg)}}
@keyframes breathe{from{opacity:.55;transform:scale(.92)}to{opacity:1;transform:scale(1.08)}}
@keyframes mote{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-38px)}}

/* ---------- Карточки и формы ---------- */
.card{position:relative;background:radial-gradient(30rem circle at var(--mx,-50%) var(--my,-50%),rgba(240,198,116,.07),transparent 45%),var(--noise),linear-gradient(180deg,rgba(30,25,37,.94),rgba(15,13,20,.95));border:1px solid var(--line2);border-radius:var(--r-xl);box-shadow:var(--shadow),inset 0 1px rgba(255,230,180,.06);outline:1px solid rgba(240,198,116,.1);outline-offset:-.45rem}
.card::before,.card::after,.modal::before,.modal::after{content:"";position:absolute;width:3.4rem;height:3.4rem;pointer-events:none;z-index:2;background:var(--orn);opacity:.85;-webkit-mask:url(img/corner.svg) center/contain no-repeat;mask:url(img/corner.svg) center/contain no-repeat}
.card::before,.modal::before{top:.35rem;left:.35rem}
.card::after,.modal::after{right:.35rem;bottom:.35rem;transform:rotate(180deg)}
.form-card{padding:1.9rem;display:flex;flex-direction:column;gap:1rem}
.card-head h2{font:700 1.85rem/1.15 var(--font-d);color:var(--head);display:flex;gap:.6rem;align-items:center}
.card-head h2 span{font-size:.8em;filter:drop-shadow(0 0 .4rem rgba(240,198,116,.6))}
.seg{display:flex;gap:.25rem;padding:.25rem;border-radius:var(--r);background:var(--field-bg);border:1px solid var(--line)}
.seg button{flex:1;min-height:calc(var(--ctl) - .5rem - 2px);border:1px solid transparent;background:transparent;border-radius:calc(var(--r) - .25rem);padding:0 1rem;font-size:1rem;font-weight:800;color:var(--muted);white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.seg button:hover{color:var(--accent2)}
.seg button.active{background:linear-gradient(180deg,rgba(240,198,116,.2),rgba(240,198,116,.08));border-color:rgba(240,198,116,.5);color:var(--accent2);box-shadow:0 0 1rem rgba(240,190,100,.15)}
/* Поле: подпись слева, счётчик символов справа в той же строке, под ними — само поле. */
.field-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.75rem;row-gap:.4rem;align-items:end;min-width:0}
.field-wrap>.field-label{grid-column:1;grid-row:1}
.field-wrap>.counter{grid-column:2;grid-row:1}
.field-wrap>.field,.field-wrap>.url-field{grid-column:1/-1;grid-row:2}
.field-label{font-size:.875rem;font-weight:800;color:var(--accent);letter-spacing:.1em;text-transform:uppercase}
.field{width:100%;min-height:var(--ctl);border:1px solid var(--line2);border-radius:var(--r);background:var(--field-bg);color:var(--text);padding:.6rem 1rem;font-size:1.0625rem;outline:0;transition:border-color .15s,box-shadow .2s,background .15s}
.field:hover{border-color:var(--line3)}
.field:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent),0 0 1.2rem color-mix(in srgb,var(--accent) 16%,transparent)}
.field::placeholder{color:var(--dim);opacity:1}
.field.invalid{border-color:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 18%,transparent)}
textarea.field{min-height:7rem;padding-block:.75rem;line-height:1.5;resize:vertical}
select.field{appearance:none;-webkit-appearance:none;padding-right:2.6rem;background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);background-position:calc(100% - 1.3rem) 52%,calc(100% - .95rem) 52%;background-size:.35rem .35rem;background-repeat:no-repeat}
select.field option{background:#1e1a27;color:#f3e9d6}
.parchment select.field option{background:#f6ecd2;color:#2e2115}
.counter{font-size:.875rem;font-weight:700;color:var(--dim);text-align:right;white-space:nowrap}
.counter.warn{color:var(--warn)}
.counter.over{color:var(--err)}
.form-row{display:flex;gap:.9rem;align-items:flex-end}
.form-row .grow{flex:1}
.form-row-end{align-items:center;justify-content:space-between;flex-wrap:wrap}
.btn-submit{padding:0 1.6rem;font-size:1.125rem}
.hint{font-size:.9375rem;color:var(--dim);font-weight:600}
.form-msg{display:none;padding:.75rem 1rem;border-radius:var(--r);font-weight:700;font-size:1rem;background:color-mix(in srgb,var(--ok) 10%,transparent);border:1px solid color-mix(in srgb,var(--ok) 38%,transparent);color:var(--ok)}
.form-msg.show{display:block;animation:pop .3s}
.form-msg.err{background:color-mix(in srgb,var(--err) 10%,transparent);border-color:color-mix(in srgb,var(--err) 42%,transparent);color:var(--err)}
.form-msg .mini-btn{margin:.25rem 0 0 .4rem}
.closed-note{padding:.75rem 1rem;border-radius:var(--r);background:color-mix(in srgb,var(--warn) 10%,transparent);border:1px solid color-mix(in srgb,var(--warn) 38%,transparent);color:var(--warn);font-weight:700;font-size:1rem}
form.is-closed .field,form.is-closed .btn-submit{opacity:.5;pointer-events:none}
.stack{display:flex;flex-direction:column;gap:.9rem}
@keyframes pop{from{opacity:0;transform:translateY(.25rem)}}

/* Похожие идеи (подсказка против дублей) */
.similar{padding:.8rem 1rem;border-radius:var(--r);background:rgba(151,213,255,.06);border:1px dashed rgba(151,213,255,.4)}
.similar-title{font-size:.9375rem;font-weight:800;color:var(--st-new);margin-bottom:.4rem}
.similar-item{display:flex;align-items:center;gap:.6rem;padding:.3rem 0;font-size:1rem;font-weight:700}
.similar-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.similar-item small{color:var(--dim);font-weight:700;font-size:.875rem}

/* ---------- Лента ---------- */
.feed{padding:2rem 0 5rem;scroll-margin-top:calc(var(--head-h) + 1rem)}
.ornament{display:flex;align-items:center;gap:1rem;margin:0 auto 1.6rem;color:var(--accent);opacity:.85}
.ornament::before,.ornament::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(240,198,116,.6))}
.ornament::after{background:linear-gradient(90deg,rgba(240,198,116,.6),transparent)}
.ornament span{font-size:1.1rem;letter-spacing:.6em;padding-left:.6em;text-shadow:0 0 .8rem rgba(240,198,116,.7)}
.feed-head{margin-bottom:1.25rem}
.feed-head h2{font:700 clamp(2.1rem,1.2rem + 2vw,3.1rem)/1.1 var(--font-d);color:var(--head);text-shadow:0 .15rem 1rem rgba(0,0,0,.6)}
.feed-head p{color:var(--muted);margin-top:.4rem;font-size:1.125rem;font-weight:500}
.feed-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.25rem;margin-bottom:1rem}
.tabs{display:flex;gap:.5rem;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;display:inline-flex;align-items:center;gap:.5rem;min-height:var(--ctl);border:1px solid var(--line);background:rgba(14,12,20,.72);border-radius:var(--r);padding:0 1.1rem;font-size:1.0625rem;font-weight:800;color:var(--muted);white-space:nowrap;transition:color .15s,background .15s,border-color .15s,box-shadow .2s}
.tab:hover{color:var(--accent2);border-color:var(--line2)}
.tab.active{color:var(--accent2);background:linear-gradient(180deg,rgba(240,198,116,.18),rgba(240,198,116,.05));border-color:rgba(240,198,116,.6);box-shadow:0 0 1.1rem rgba(240,190,100,.18),inset 0 -2px var(--accent)}
.tab em{font-style:normal;font-size:.8125rem;line-height:1.55;min-width:1.6rem;padding:0 .45rem;border-radius:99px;background:rgba(255,235,190,.08);color:var(--muted);text-align:center}
.tab em:empty{display:none}
.tab.active em{background:var(--gold-grad);color:var(--on-accent)}
.seg-sort{flex:none;background:rgba(10,9,15,.72)}
.archive-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.25rem;margin-bottom:1rem;padding:.9rem 1.1rem;border-radius:var(--r);background:rgba(14,12,20,.8);border:1px dashed color-mix(in srgb,var(--warn) 45%,transparent)}
.archive-bar p{flex:1 1 26rem;color:var(--muted);font-size:1rem;line-height:1.45}
.archive-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;min-height:var(--ctl-sm);border:1px solid var(--line);background:rgba(12,10,17,.65);border-radius:99px;padding:0 1rem;font-size:1rem;font-weight:700;color:var(--muted);white-space:nowrap;transition:color .15s,background .15s,border-color .15s,box-shadow .2s}
.chip::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0,var(--cat,var(--muted)) 45%);box-shadow:0 0 .5rem var(--cat,transparent)}
.chip.all::before{display:none}
.chip:hover{color:var(--head);border-color:var(--line2)}
.chip.active{color:var(--head);border-color:var(--cat,var(--accent));background:color-mix(in srgb,var(--cat,var(--accent)) 16%,rgba(12,10,17,.7));box-shadow:0 0 1rem color-mix(in srgb,var(--cat,var(--accent)) 25%,transparent)}
.chip .n{font-size:.8125rem;font-weight:800;line-height:1.35rem;min-width:1.35rem;padding:0 .35rem;border-radius:99px;background:var(--gold-grad);color:var(--on-accent);text-align:center}
#videoChips .chip.active{box-shadow:none;background:var(--panel2);border-color:var(--muted);text-decoration:none}
#videoChips .chip.has-new{color:var(--on-accent);border-color:var(--accent2);box-shadow:var(--glow);background:var(--gold-grad)}
#videoChips .chip.active:not(.all){border-color:var(--cat);box-shadow:0 0 0 1px var(--cat),0 0 .8rem color-mix(in srgb,var(--cat) 40%,transparent)}
#videoChips .chip:not(.has-new)::before{box-shadow:none}
#videoChips .chip .n{background:transparent;color:var(--head);box-shadow:none;font-size:1.0625rem;font-weight:900;line-height:1.5;min-width:1.5rem;font-variant-numeric:tabular-nums}
#videoChips .chip.has-new .n,#videoChips .chip.has-new .category-new{color:var(--on-accent)}
.category-new{font-size:.7rem;font-weight:800;color:var(--accent2);text-decoration:none}

/* Карточка идеи — книга: цветной корешок с золотыми полосками, кнопка-«арка» для голоса. */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.idea-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));gap:1.25rem}
.idea{position:relative;display:flex;gap:1.1rem;padding:1.3rem 1.3rem 1.15rem 1.85rem;border-radius:.45rem var(--r-lg) var(--r-lg) .45rem;background:radial-gradient(22rem circle at var(--mx,-50%) var(--my,-50%),rgba(240,198,116,.1),transparent 45%),var(--noise),linear-gradient(165deg,rgba(33,27,40,.95) 0%,rgba(21,17,27,.95) 55%,rgba(16,13,21,.96) 100%);border:1px solid var(--line);box-shadow:0 .7rem 1.5rem rgba(0,0,0,.38),inset 0 1px rgba(255,230,180,.05);cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .25s;content-visibility:auto;contain-intrinsic-size:auto 13rem}
.idea::before{content:"";position:absolute;inset:0 auto 0 0;width:.6rem;border-radius:.45rem 0 0 .45rem;background:linear-gradient(180deg,transparent .85rem,rgba(255,226,163,.75) .85rem,rgba(255,226,163,.75) 1rem,transparent 1rem,transparent 1.25rem,rgba(255,226,163,.5) 1.25rem,rgba(255,226,163,.5) 1.32rem,transparent 1.32rem,transparent calc(100% - 1.32rem),rgba(255,226,163,.5) calc(100% - 1.32rem),rgba(255,226,163,.5) calc(100% - 1.25rem),transparent calc(100% - 1.25rem),transparent calc(100% - 1rem),rgba(255,226,163,.75) calc(100% - 1rem),rgba(255,226,163,.75) calc(100% - .85rem),transparent calc(100% - .85rem)),linear-gradient(90deg,color-mix(in srgb,var(--cat,#a78bff) 55%,#000),var(--cat,#a78bff) 55%,color-mix(in srgb,var(--cat,#a78bff) 50%,#000));box-shadow:1px 0 0 rgba(0,0,0,.5)}
.idea:hover{transform:translateY(-4px);border-color:rgba(240,198,116,.42);box-shadow:0 1.1rem 2.2rem rgba(0,0,0,.5),0 0 1.6rem rgba(240,190,100,.13)}
.idea.unseen::after,.vcard.unseen::after,.featured.unseen .poster::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 55%,rgba(255,226,163,.95) 72%,#fff6dc 76%,rgba(255,170,90,.8) 82%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spin 4.5s linear infinite;pointer-events:none;z-index:2}
.idea.unseen{border-color:rgba(240,198,116,.3)}
@keyframes spin{to{--ang:360deg}}
.idea.mine{background:radial-gradient(22rem circle at var(--mx,-50%) var(--my,-50%),rgba(240,198,116,.1),transparent 45%),var(--noise),linear-gradient(165deg,rgba(44,34,40,.96),rgba(24,18,24,.96))}
.vote{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;width:3.9rem;height:4.6rem;border-radius:2rem 2rem .8rem .8rem;border:1px solid var(--line2);background:linear-gradient(180deg,rgba(240,198,116,.1),rgba(0,0,0,.35));color:var(--accent);font-weight:800;box-shadow:inset 0 1px rgba(255,230,180,.08);transition:background .2s,border-color .2s,color .2s,box-shadow .25s,transform .15s}
.vote svg{width:1.3rem;height:1.3rem;fill:currentColor;transition:transform .25s}
.vote b{font:700 1.5rem/1 var(--font-d);color:var(--head);font-variant-numeric:lining-nums}
.vote:hover{border-color:var(--accent);color:var(--accent2);background:linear-gradient(180deg,rgba(240,198,116,.2),rgba(0,0,0,.3));box-shadow:0 0 1.2rem rgba(240,190,100,.3)}
.vote:hover svg{transform:translateY(-3px)}
.vote:active{transform:scale(.95)}
.vote.on{background:var(--gold-grad);border-color:rgba(255,236,190,.7);color:var(--on-accent);box-shadow:0 0 1.5rem rgba(240,180,70,.5),inset 0 1px rgba(255,255,255,.6)}
.vote.on b{color:var(--on-accent)}
.vote.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.15)}}
.idea-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5rem}
.idea-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.idea.ranked .idea-meta{padding-right:2.4rem}
.cat{display:inline-flex;align-items:center;gap:.35rem;font-size:.875rem;font-weight:800;line-height:1.4;padding:.15rem .65rem;border-radius:99px;color:color-mix(in srgb,var(--cat,var(--muted)) var(--cat-mix),var(--text));background:color-mix(in srgb,var(--cat,var(--muted)) 13%,transparent);border:1px solid color-mix(in srgb,var(--cat,var(--muted)) 32%,transparent)}
.status{--st:var(--st-new);display:inline-flex;align-items:center;gap:.35rem;font-size:.875rem;font-weight:800;line-height:1.4;padding:.15rem .65rem;border-radius:99px;white-space:nowrap;color:var(--st);background:color-mix(in srgb,var(--st) 13%,transparent);border:1px solid color-mix(in srgb,var(--st) 30%,transparent)}
.status::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:currentColor;box-shadow:0 0 .4rem currentColor}
.s-new{--st:var(--st-new)}.s-review{--st:var(--st-review)}.s-accepted{--st:var(--st-acc)}.s-planned{--st:var(--st-plan)}.s-done{--st:var(--st-done)}.s-rejected{--st:var(--st-rej)}
.new-badge{font-size:.8125rem;font-weight:800;line-height:1.4;padding:.12rem .6rem;border-radius:99px;background:var(--gold-grad);color:var(--on-accent);letter-spacing:.03em;animation:glow 2.4s ease-in-out infinite}
.new-badge::before{content:"✦ "}
@keyframes glow{50%{box-shadow:0 0 .9rem rgba(255,210,120,.8)}}
.mine-badge{font-size:.8125rem;font-weight:800;line-height:1.4;padding:.12rem .6rem;border-radius:99px;background:rgba(255,169,208,.12);border:1px solid rgba(255,169,208,.35);color:#ffc2dd}
.mine-badge::before{content:"🔖 "}
.parchment .mine-badge{background:rgba(161,48,106,.1);border-color:rgba(161,48,106,.35);color:#8d2a5c}
.idea h3{font:700 1.5rem/1.15 var(--font-d);color:var(--head);overflow-wrap:anywhere}
.idea-desc{color:var(--muted);font-size:1rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;white-space:pre-line}
.idea-foot{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:auto;padding-top:.45rem;border-top:1px dashed var(--line);font-size:.9375rem;color:var(--dim);font-weight:700}
.idea-foot .author{color:var(--accent2)}
.idea-foot .author::before{content:"✦ ";color:var(--accent)}
.idea-foot .right{margin-left:auto;display:inline-flex;gap:.6rem}
.rank{position:absolute;top:.75rem;right:.85rem;width:2.15rem;height:2.15rem;border-radius:50%;display:grid;place-items:center;font:700 1.05rem/1 var(--font-d);color:#2a1a05;background:radial-gradient(circle at 35% 30%,#fff3cc,#f0c674 45%,#a5701f);box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 1.1rem rgba(240,198,116,.55);z-index:3}
.rank.r2{background:radial-gradient(circle at 35% 30%,#ffffff,#d5dce6 45%,#7f8b9c);box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 1rem rgba(210,220,235,.45)}
.rank.r3{background:radial-gradient(circle at 35% 30%,#ffe0c4,#d69a63 45%,#8a4f22);box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 1rem rgba(214,154,99,.45)}
mark{background:rgba(240,198,116,.32);color:inherit;border-radius:3px;padding:0 1px}
.parchment mark{background:rgba(240,180,60,.45)}
.inline-link{color:var(--link);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--link) 45%,transparent);text-underline-offset:2px;word-break:break-all}
.inline-link:hover{color:var(--accent2)}
.link-preview{display:flex;gap:.75rem;align-items:stretch;margin-top:.4rem;padding:.55rem;border-radius:var(--r);background:var(--surface2);border:1px solid var(--line);font-size:.9375rem;max-width:36rem;overflow:hidden;color:var(--text)}
.link-preview:hover{border-color:var(--line2)}
.link-preview.loading{color:var(--dim);font-weight:700;padding:.6rem .8rem}
.link-preview img{width:6rem;height:4rem;flex:none;object-fit:cover;border-radius:var(--r-sm);background:var(--panel2)}
.lp-body{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.lp-site{font-size:.8125rem;color:var(--dim);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.lp-title{font-weight:800;color:var(--head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-desc{color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.empty{padding:3rem 1.25rem;text-align:center;color:var(--muted);font-size:1.125rem;font-weight:700;border:1px dashed var(--line2);border-radius:var(--r-lg);background:rgba(10,9,15,.55)}
.empty b{display:block;font-size:2.4rem;margin-bottom:.4rem;filter:drop-shadow(0 0 .8rem rgba(240,198,116,.5))}
.more-wrap{display:flex;justify-content:center;margin-top:1.75rem}
.more-wrap .btn{min-width:15rem}
.skeleton{height:10rem;border-radius:var(--r-lg);background:linear-gradient(100deg,rgba(255,230,180,.03) 30%,rgba(255,220,150,.09) 50%,rgba(255,230,180,.03) 70%);background-size:300% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{to{background-position:-100% 0}}
/* Появление карточек по очереди (первый показ, вкладки, категории, сортировка, «Показать ещё») */
.idea.rise,.vcard.rise{animation:rise .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:min(calc(var(--i,0) * 45ms),700ms)}
@keyframes rise{from{opacity:0;transform:translateY(1.2rem) scale(.98)}}

/* ---------- Видео ---------- */
.hero-videos{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
.hero-videos .form-card{margin-top:1.75rem}
.url-field{position:relative;display:block}
.url-field .yt-ico{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:1.75rem;height:1.25rem;border-radius:.4rem;background:#e0333f;color:#fff;font-size:.65rem;display:grid;place-items:center}
.url-field .field{padding-left:3.25rem}
.url-field.ok .field{border-color:color-mix(in srgb,var(--ok) 60%,transparent)}
.url-field.bad .field{border-color:color-mix(in srgb,var(--err) 60%,transparent)}
.url-check{display:flex;gap:.85rem;align-items:center;padding:.65rem;border-radius:var(--r);background:color-mix(in srgb,var(--ok) 7%,transparent);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);font-size:1rem;font-weight:700}
.url-check.warn{background:color-mix(in srgb,var(--err) 7%,transparent);border-color:color-mix(in srgb,var(--err) 35%,transparent)}
.url-check img{width:7rem;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);flex:none}
.url-check .ok{color:var(--ok)}
.limit-line{font-size:1rem;font-weight:700;color:var(--muted)}
.limit-line.warn{color:var(--warn)}
.featured{padding:1.6rem;display:flex;flex-direction:column;gap:.85rem;position:sticky;top:calc(var(--head-h) + 1.25rem);animation:aura 5s ease-in-out infinite}
@keyframes aura{50%{box-shadow:var(--shadow),0 0 2.6rem rgba(240,190,100,.22)}}
.featured-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding-left:1.4rem}
.featured-head strong{font:700 1.7rem/1.15 var(--font-d);color:var(--head)}
.featured .poster{border-radius:var(--r)}
.badge{font-size:.875rem;font-weight:800;padding:.3rem .75rem;border-radius:99px;background:rgba(240,198,116,.14);border:1px solid rgba(240,198,116,.4);color:var(--accent2);white-space:nowrap}
.featured-title{font:700 1.6rem/1.2 var(--font-d);color:var(--head)}
.featured-empty{display:grid;place-items:center;text-align:center;min-height:18rem;color:var(--muted);font-size:1.0625rem;font-weight:700;border:1px dashed var(--line2);border-radius:var(--r-lg);padding:1.25rem}
.featured-empty .big{font-size:2.6rem;line-height:1.3}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.vcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);background:radial-gradient(22rem circle at var(--mx,-50%) var(--my,-50%),rgba(240,198,116,.09),transparent 45%),var(--noise),linear-gradient(170deg,rgba(32,26,39,.95),rgba(16,13,21,.96));border:1px solid var(--line);box-shadow:0 .7rem 1.5rem rgba(0,0,0,.38);cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .25s;content-visibility:auto;contain-intrinsic-size:auto 24rem}
.vcard:hover{transform:translateY(-4px);border-color:rgba(240,198,116,.42);box-shadow:0 1.1rem 2.2rem rgba(0,0,0,.5),0 0 1.6rem rgba(240,190,100,.13)}
.vcard.voting{border-color:var(--accent);box-shadow:0 0 0 2px rgba(240,198,116,.45),0 0 2rem rgba(240,190,100,.3)}
.vcard.fresh,.idea.fresh{animation:fresh 1.8s ease}
@keyframes fresh{0%{box-shadow:0 0 0 0 rgba(255,214,130,.95)}100%{box-shadow:0 0 0 1.3rem rgba(255,214,130,0)}}
.poster{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#06060b;overflow:hidden;border:0;padding:0;border-radius:var(--r-lg) var(--r-lg) 0 0}
.poster::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(240,198,116,.25),inset 0 0 2.5rem rgba(0,0,0,.55);border-radius:inherit}
.poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s}
.vcard:hover .poster img,.featured .poster:hover img{transform:scale(1.06);filter:brightness(1.08) saturate(1.1)}
.poster .play{position:absolute;inset:0;z-index:2;margin:auto;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--gold-grad);color:var(--on-accent);display:grid;place-items:center;font-size:1.15rem;padding-left:.2rem;opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s;box-shadow:0 0 0 .4rem rgba(240,198,116,.18),0 0 2rem rgba(240,180,70,.6)}
.vcard:hover .play,.featured .poster:hover .play,.poster:focus-visible .play{opacity:1;transform:scale(1)}
.poster .dur{position:absolute;right:.5rem;bottom:.5rem;z-index:2;padding:.1rem .5rem;border-radius:.45rem;background:rgba(5,4,8,.82);border:1px solid rgba(240,198,116,.3);color:#fff2d4;font-size:.875rem;font-weight:800}
.poster .new-badge{position:absolute;left:.55rem;top:.55rem;z-index:2}
.poster .fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:2.5rem;background:radial-gradient(circle,#3a2a18,#120d08)}
.vcard-body{padding:1rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.vcard-top{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.vstatus{font-size:.875rem;font-weight:800;line-height:1.4;padding:.15rem .6rem;border-radius:99px;background:color-mix(in srgb,var(--st-new) 12%,transparent);border:1px solid color-mix(in srgb,var(--st-new) 30%,transparent);color:var(--st-new)}
.vstatus.shown{background:color-mix(in srgb,var(--st-done) 12%,transparent);border-color:color-mix(in srgb,var(--st-done) 30%,transparent);color:var(--st-done)}
.vstatus.in-archive{background:color-mix(in srgb,var(--muted) 12%,transparent);border-color:color-mix(in srgb,var(--muted) 35%,transparent);color:var(--muted)}
.yt-link{margin-left:auto;font-size:.875rem;font-weight:800;line-height:1.4;color:#ffa4ac;padding:.15rem .6rem;border-radius:.5rem;border:1px solid rgba(255,80,95,.35)}
.yt-link:hover{background:rgba(255,60,80,.15);color:#fff}
.parchment .yt-link{color:#a3222c;border-color:rgba(163,34,44,.35)}
.vcard h3{font:700 1.4rem/1.15 var(--font-d);color:var(--head);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.byline{font-size:.9375rem;color:var(--dim);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.byline b{color:var(--accent2);font-weight:800}
.caption{position:relative;padding:.6rem .85rem .6rem 2rem;border-radius:var(--r-sm);background:var(--surface2);border:1px solid var(--line);font:italic 500 1.0625rem/1.45 var(--font);color:var(--text);overflow-wrap:anywhere}
.caption::before{content:"❝";position:absolute;left:.6rem;top:.3rem;color:var(--accent);font:700 1.3rem/1 var(--font-d)}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vcard-foot{margin-top:auto;display:flex;flex-direction:column;gap:.6rem}
.reactions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:auto}
.react{display:inline-flex;align-items:center;gap:.3rem;min-height:var(--ctl-sm);border:1px solid var(--line);background:var(--surface2);border-radius:99px;padding:0 .75rem;font-size:1rem;font-weight:800;color:var(--text);transition:transform .15s,background .15s,border-color .15s,box-shadow .2s}
.react:hover{border-color:var(--line2);transform:translateY(-2px)}
.react.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:0 0 .9rem color-mix(in srgb,var(--accent) 30%,transparent)}
.react.pop .emo{animation:bump .4s}
.react .emo{display:inline-block}
.react .cnt{min-width:.5rem}
.ccount{margin-left:auto;font-size:.9375rem;font-weight:800;color:var(--dim)}
.reactions.big .react{min-height:var(--ctl);padding:0 1.05rem;font-size:1.125rem}
.list-btn{align-self:flex-start;min-height:2rem;border:1px dashed var(--line2);background:transparent;border-radius:var(--r-sm);padding:0 .75rem;font-size:.875rem;font-weight:800;color:var(--muted)}
.list-btn.on{border-style:solid;border-color:var(--warn);color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.list-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.list-actions .list-btn{align-self:auto}
.vcard.watched{opacity:.6;transition:opacity .2s,transform .25s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .25s}
.vcard.watched:hover,.vcard.watched:focus-within{opacity:1}
.vote-box{display:flex;flex-direction:column;gap:.5rem}
.vote-box:empty{display:none}
.vote-result{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:var(--r-sm);font-size:1rem;font-weight:800}
.vote-result.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}
.vote-result.skip{background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent)}
.vote-result span{font-weight:700;opacity:.85}
.vote-result .x{margin-left:auto;border:0;background:transparent;color:inherit;font-size:1rem;padding:0 .2rem;opacity:.7}
.vote-start{min-height:var(--ctl-sm);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--warn);border-radius:var(--r-sm);padding:0 .8rem;font-weight:800;font-size:.9375rem}
.vote-start:hover:not(:disabled){background:color-mix(in srgb,var(--warn) 20%,transparent)}
.vote-start:disabled{opacity:.5;cursor:not-allowed}
.vote-live{padding:.75rem .85rem;border-radius:var(--r);background:color-mix(in srgb,var(--warn) 8%,transparent);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);display:flex;flex-direction:column;gap:.5rem}
.vote-live-head{display:flex;align-items:center;gap:.5rem;font-weight:800}
.vote-live-head .dotlive{width:.55rem;height:.55rem;border-radius:50%;background:#ff5a64;box-shadow:0 0 .6rem #ff5a64;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.35}}
.vote-live-head .timer{margin-left:auto;font:700 1.35rem var(--font-d);color:var(--warn)}
.vote-hint{font-size:.9375rem;color:var(--muted);font-weight:700}
.vote-bar{height:.65rem;border-radius:99px;background:color-mix(in srgb,var(--err) 55%,transparent);overflow:hidden}
.vote-bar span{display:block;height:100%;background:var(--ok);transition:width .3s}
.vote-counts{display:flex;justify-content:space-between;font-weight:800;font-size:1rem}

/* ---------- Окна ---------- */
.modal{position:fixed;width:min(54rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);padding:0;border:1px solid var(--line2);border-radius:var(--r-xl);background:var(--noise),linear-gradient(180deg,#1e1926,#110e17);color:var(--text);box-shadow:0 2rem 5.5rem rgba(0,0,0,.7),0 0 3rem rgba(240,190,100,.12);overflow:hidden}
.modal[open]{animation:modalIn .3s cubic-bezier(.2,.8,.2,1)}
.modal::backdrop{background:radial-gradient(ellipse at center,rgba(20,14,6,.55),rgba(3,3,8,.86));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@keyframes modalIn{from{opacity:0;transform:translateY(1rem) scale(.97)}}
/* Пергамент: страница книги с потемневшими краями. */
.modal.parchment{border:1px solid #9c7a43;background:var(--noise),radial-gradient(ellipse 85% 75% at 50% 42%,#f6ebcf 0%,#ecdcb5 55%,#d6bb85 100%);box-shadow:inset 0 0 3.5rem rgba(115,72,20,.42),inset 0 0 0 1px rgba(255,248,225,.45),0 2rem 5.5rem rgba(0,0,0,.75),0 0 4rem rgba(240,190,100,.18)}
.modal.parchment[open]{animation:bookOpen .5s cubic-bezier(.2,.8,.2,1)}
@keyframes bookOpen{from{opacity:0;transform:perspective(1400px) rotateX(16deg) translateY(1.5rem) scale(.95)}}
.modal.parchment::before,.modal.parchment::after{opacity:.75}
.modal-sm{width:min(38rem,calc(100vw - 2rem))}
/* will-change:scroll-position — прокрутка окна на видеокарте: без него Chrome на каждом кадре заново
   рисует всё окно-пергамент (шум, тени) — растеризация ×5, видеокарта ~50%. */
.modal-inner{position:relative;z-index:1;max-height:calc(100dvh - 2rem - 2px);overflow:auto;padding:1.6rem 1.9rem 1.9rem;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line2) transparent;will-change:scroll-position}
.modal-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.modal-head h2{font:700 1.9rem/1.15 var(--font-d);color:var(--head);flex:1}
.close-btn{flex:none;width:var(--ctl);height:var(--ctl);border-radius:50%;border:1px solid var(--line2);background:var(--surface2);color:var(--text);font-size:1.4rem;line-height:1;display:grid;place-items:center;transition:border-color .15s,background .15s,transform .2s}
.close-btn:hover{border-color:var(--line3);background:var(--hover);transform:rotate(8deg)}
.modal-tools{display:flex;gap:.5rem;margin-left:auto}
.modal-lead{margin-bottom:1.1rem;font-size:1.0625rem}
.m-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-bottom:.6rem}
.m-title{font:700 clamp(1.9rem,1.3rem + 1.6vw,2.8rem)/1.08 var(--font-d);color:var(--head);overflow-wrap:anywhere;margin-bottom:.5rem}
.m-author{color:var(--dim);font-weight:700;font-size:1rem}
.m-author b{color:var(--accent)}
.m-desc{margin:1.1rem 0;font-size:1.1875rem;line-height:1.7;white-space:pre-line;overflow-wrap:anywhere;color:var(--text)}
.parchment .m-desc{display:flow-root}
.parchment .m-desc::first-letter{float:left;font:700 3.6em/.8 var(--font-d);color:#8a2b1a;padding:.08em .1em 0 0;text-shadow:0 1px rgba(255,240,200,.6)}
.m-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1rem 0 .4rem}
.vote-big{position:relative;display:inline-flex;align-items:center;gap:.6rem;min-height:3.4rem;border:1px solid rgba(240,198,116,.5);background:rgba(240,198,116,.12);color:var(--text);border-radius:99px;padding:0 1.6rem;font-weight:800;font-size:1.125rem;transition:background .2s,border-color .2s,box-shadow .25s,transform .15s}
.vote-big svg{width:1.25rem;height:1.25rem;fill:currentColor}
.vote-big b{font:700 1.4rem/1 var(--font-d);font-variant-numeric:lining-nums}
.vote-big:hover{border-color:var(--accent);box-shadow:var(--glow)}
.vote-big:active{transform:scale(.97)}
.vote-big.on{background:var(--gold-grad);border-color:transparent;color:var(--on-accent)}
/* На пергаменте «Поддержать» — сургучная печать. */
.parchment .vote-big{background:radial-gradient(circle at 30% 25%,#c4434a,#8e1f27 60%,#6a1219);border-color:#5a0f15;color:#ffe9c2;box-shadow:0 .35rem 1rem rgba(110,20,25,.35),inset 0 1px rgba(255,200,180,.35),inset 0 -2px rgba(0,0,0,.3)}
.parchment .vote-big:hover{box-shadow:0 .5rem 1.4rem rgba(110,20,25,.45),inset 0 1px rgba(255,200,180,.35)}
.parchment .vote-big.on{background:var(--gold-grad);border-color:#9c6b25;color:#2a1a05;box-shadow:0 .35rem 1rem rgba(160,110,30,.35),inset 0 1px rgba(255,255,255,.6)}
.progress{display:flex;align-items:center;margin:1.1rem 0 .5rem;padding:.95rem 1rem;border-radius:var(--r);background:var(--surface2);border:1px solid var(--line);overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.pstep{flex:1;min-width:5.5rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:.875rem;font-weight:800;color:var(--dim);text-align:center;position:relative}
.pstep i{width:1.05rem;height:1.05rem;border-radius:50%;border:2px solid var(--line2);background:var(--panel);position:relative;z-index:1;transform:rotate(45deg);border-radius:.2rem}
.pstep:not(:first-child)::before{content:"";position:absolute;top:calc(.525rem - 1px);right:50%;width:100%;height:2px;background:var(--line2)}
.pstep.done{color:var(--accent)}
.pstep.done i{background:var(--accent);border-color:var(--accent)}
.pstep.done::before{background:var(--accent)!important}
.pstep.cur{color:var(--head)}
.pstep.cur i{background:var(--gold-grad);border-color:#b07a2c;box-shadow:0 0 0 .25rem color-mix(in srgb,var(--accent) 25%,transparent),0 0 1rem rgba(240,180,70,.6)}
/* Пульс — кольцо растёт и тает, 3 раза при открытии окна: бесконечная анимация в окне заставляла бы
   браузер перерисовывать кадр за кадром вместе с размытым фоном под окном. */
.pstep.cur i::after{content:"";position:absolute;inset:-2px;border:2px solid var(--accent);border-radius:inherit;pointer-events:none;opacity:0;animation:pulse 2s ease-out 3}
.pstep.cur::before{background:var(--accent)!important}
.progress.rejected{justify-content:center;gap:.5rem;color:var(--err);font-weight:800}
.admin-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.9rem;padding:.75rem .9rem;border-radius:var(--r);background:color-mix(in srgb,var(--warn) 6%,transparent);border:1px dashed color-mix(in srgb,var(--warn) 45%,transparent)}
.admin-bar .lbl{font-size:.9375rem;font-weight:800;color:var(--warn);margin-right:.25rem}
.admin-bar select.field,.adm-selects select.field{width:auto;min-height:var(--ctl-sm);padding:0 2.4rem 0 .8rem;font-size:1rem;border-radius:var(--r-sm)}
.edit-form{display:flex;flex-direction:column;gap:.6rem;margin-top:.75rem}
.comments{margin-top:1.5rem;border-top:1px solid var(--line);padding-top:1.25rem}
.comments h3{font:700 1.55rem var(--font-d);color:var(--head);margin-bottom:.9rem}
.comment-list{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}
.comment{position:relative;padding:.8rem 1rem .8rem 1.1rem;border-radius:var(--r);background:var(--surface2);border:1px solid var(--line);border-left:3px solid color-mix(in srgb,var(--accent) 55%,transparent);font-size:1.0625rem}
.comment.mine{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.comment-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.2rem;font-size:1rem}
.comment-head b{color:var(--accent)}
.comment-head time{color:var(--dim);font-weight:700;font-size:.875rem}
.comment-head .del{margin-left:auto;border:0;background:transparent;color:var(--dim);font-size:.875rem;font-weight:800;padding:.2rem .5rem;border-radius:.45rem}
.comment-head .del:hover{color:var(--err);background:color-mix(in srgb,var(--err) 12%,transparent)}
.comment-text{white-space:pre-line;overflow-wrap:anywhere;color:var(--text)}
.comment-empty{color:var(--dim);font-weight:700;font-size:1rem;padding:.4rem .1rem;font-style:italic}
.comment-form{display:grid;grid-template-columns:11rem minmax(0,1fr) auto;gap:.6rem;align-items:start}
.comment-form .btn{min-height:var(--ctl);padding:0 1.1rem;font-size:1rem;border-radius:var(--r)}
.player{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#000;margin-bottom:1rem;box-shadow:0 0 0 1px rgba(110,70,20,.5),0 0 0 .4rem rgba(120,80,30,.15),0 .8rem 2rem rgba(60,35,10,.35)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .poster{height:100%;cursor:pointer;border-radius:0}
.player .poster .play{opacity:1;transform:none;width:4.6rem;height:4.6rem;font-size:1.5rem}
.v-modal-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin:.9rem 0}
.vm-vote{margin-top:.75rem}
.rules{display:flex;flex-direction:column;gap:.75rem}
.rule{padding:.9rem 1.1rem;border-radius:var(--r);background:var(--surface2);border:1px solid var(--line)}
.rule b{display:block;margin-bottom:.3rem;font:700 1.35rem/1.2 var(--font-d);color:var(--head)}
.rule p{color:var(--muted);font-size:1.0625rem}
.status-legend{list-style:none;padding:0;margin:.4rem 0 0;display:grid;gap:.45rem;font-size:1rem;color:var(--muted)}
.status-legend .status{margin-right:.4rem}

/* ---------- Админка ---------- */
.modal-admin{width:min(86rem,calc(100vw - 2rem));height:min(60rem,calc(100dvh - 2rem))}
.modal-admin .modal-inner{height:100%;max-height:none;padding:0;display:flex;flex-direction:column}
.modal-admin::before,.modal-admin::after{display:none}
.modal-admin.is-login{width:min(30rem,calc(100vw - 2rem));height:fit-content}
.modal-admin.is-login::before,.modal-admin.is-login::after{display:block}
.modal-admin.is-login .modal-inner{height:auto;max-height:calc(100dvh - 2rem - 2px)}
.login-head{padding:1.25rem 1.5rem 0}
.login-box{width:100%;max-width:26rem;margin:auto;padding:.5rem 1.5rem 2rem;display:flex;flex-direction:column;gap:.9rem;text-align:center}
.login-box h2{font:700 1.9rem/1.2 var(--font-d);color:var(--head)}
.login-icon{font-size:3rem;line-height:1;filter:drop-shadow(0 0 1rem rgba(240,198,116,.6))}
.adm{display:grid;grid-template-columns:16.5rem minmax(0,1fr);height:100%;min-height:0}
.adm-menu{display:flex;flex-direction:column;gap:.3rem;padding:1.25rem .85rem;border-right:1px solid var(--line);background:rgba(5,4,9,.4);overflow:auto}
.adm-menu .adm-title{font:700 1.6rem var(--font-d);color:var(--head);padding:.3rem .75rem 1rem}
.adm-menu button{display:flex;align-items:center;gap:.6rem;min-height:var(--ctl);border:0;background:transparent;border-radius:var(--r);padding:0 .9rem;font-size:1.0625rem;font-weight:800;color:var(--muted);text-align:left;white-space:nowrap}
.adm-menu button:hover{color:var(--accent2);background:var(--hover)}
.adm-menu button.active{color:var(--accent2);background:rgba(240,198,116,.1);box-shadow:inset 3px 0 var(--accent)}
.adm-menu button .n{margin-left:auto;font-size:.8125rem;line-height:1.5;min-width:1.5rem;padding:0 .4rem;border-radius:99px;background:#c8323f;color:#fff;text-align:center}
.adm-menu .sep{flex:1}
.adm-main{min-width:0;overflow:auto;padding:1.75rem 2rem 2.5rem;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.adm-main h3{font:700 2rem/1.15 var(--font-d);color:var(--head);margin-bottom:.4rem}
.adm-hint{color:var(--muted);font-size:1.0625rem;font-weight:500;margin-bottom:1.1rem}
.adm-toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1rem}
.adm-toolbar .field{max-width:20rem}
.adm-list{display:flex;flex-direction:column;gap:.75rem}
.adm-item{padding:1.1rem 1.25rem;border-radius:var(--r-lg);background:var(--surface2);border:1px solid var(--line)}
.adm-item.unread{border-color:rgba(240,198,116,.55);box-shadow:0 0 1rem rgba(240,190,100,.12)}
.adm-item.archived{opacity:.6}
.adm-item-head{display:flex;gap:.9rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.adm-item h4{font-size:1.125rem;font-weight:800;color:var(--head);overflow-wrap:anywhere}
.adm-sub{font-size:.9375rem;color:var(--dim);font-weight:700;margin-top:.2rem}
.adm-text{margin-top:.6rem;color:var(--text);font-size:1.0625rem;white-space:pre-line;overflow-wrap:anywhere}
.adm-actions{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.85rem}
.adm-selects{display:flex;gap:.45rem;flex-wrap:wrap}
.adm-selects select.field{min-width:10rem}
.adm-video{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:1.1rem}
.adm-video img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);background:var(--panel)}
.adm-empty{padding:2rem;text-align:center;color:var(--dim);font-weight:700;border:1px dashed var(--line2);border-radius:var(--r)}
.adm-card{display:block;padding:1.25rem 1.4rem;border-radius:var(--r-lg);background:var(--surface2);border:1px solid var(--line);margin-bottom:.9rem}
.adm-card h4{font-size:1.125rem;font-weight:800;color:var(--head);margin-bottom:.3rem}
.adm-card small{display:block;color:var(--muted);font-weight:500;font-size:.9375rem;margin-bottom:.9rem}
.adm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.9rem}
.adm-grid label{display:flex;flex-direction:column;gap:.4rem;font-size:.9375rem;font-weight:800;color:var(--muted)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.toggle-row b{font-size:1.125rem}
.toggle-row small{margin-top:.2rem}
.toggle-row.closed b{color:var(--warn)}
.cat-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.cat-chip{display:inline-flex;align-items:center;gap:.45rem;min-height:var(--ctl-sm);padding:0 .35rem 0 .9rem;border-radius:99px;background:var(--panel2);border:1px solid var(--line2);font-weight:700;font-size:1rem}
.cat-chip::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--cat,var(--muted))}
.cat-chip button{display:grid;place-items:center;border:0;background:color-mix(in srgb,var(--err) 15%,transparent);color:var(--err);width:1.6rem;height:1.6rem;border-radius:50%;font-size:.8rem;line-height:1}
.cat-chip button:hover{background:color-mix(in srgb,var(--err) 30%,transparent)}
.cat-chip.locked{padding-right:.9rem;opacity:.75}
.inline-form{display:flex;gap:.6rem;flex-wrap:wrap}
.inline-form .field{flex:1;min-width:10rem}
.inline-form .btn{min-height:var(--ctl);border-radius:var(--r)}
.user-row{display:grid;grid-template-columns:minmax(0,1fr) 7rem auto auto;gap:.6rem;align-items:center;padding:.6rem 0;border-top:1px solid var(--line)}
.user-row .field{min-height:var(--ctl-sm);padding:0 .7rem;border-radius:var(--r-sm)}
.user-row small{display:block;color:var(--dim);font-weight:700;font-size:.875rem;margin:0}
.user-row.blocked b{color:var(--err);text-decoration:line-through}
.twitch-line{font-size:1rem;font-weight:700;margin-top:.75rem}

/* ---------- Подвал, нижняя панель, подсказка, тост ---------- */
.footer{position:relative;z-index:1;padding:0 0 2rem;color:var(--muted);font-size:1rem;font-weight:600;background:linear-gradient(180deg,transparent,rgba(5,5,9,.85) 40%)}
.footer .ornament{width:min(84rem,calc(100% - 2 * var(--gutter)));margin-bottom:1.4rem}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer-brand{font:italic 600 1.2rem var(--font-d);color:var(--accent2)}
.footer-links{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center}
.footer-links a:hover{color:var(--accent2);text-decoration:underline}
.footer-donate{color:#ffb8d8!important}
.tabbar{display:none}
.video-callout{position:absolute;z-index:25;display:flex;flex-direction:column;align-items:center;gap:.15rem;transform:translateX(-50%);animation:bobC 1.7s ease-in-out infinite}
.vc-arrow{width:1.9rem;height:2.25rem;transform:translateX(var(--shift,0));filter:drop-shadow(0 0 .6rem rgba(255,200,110,.85))}
.vc-bubble{position:relative;display:block;max-width:calc(100vw - 1.5rem);white-space:nowrap;padding:.65rem 2.4rem .65rem 1.2rem;border-radius:99px;background:var(--gold-grad);border:1px solid rgba(255,240,200,.6);font-weight:800;font-size:1.03rem;line-height:1.3;text-align:center;color:var(--on-accent);box-shadow:0 .75rem 1.9rem rgba(220,150,50,.4),0 0 1.5rem rgba(240,190,100,.4)}
.vc-close{position:absolute;right:.55rem;top:50%;margin-top:-.675rem;width:1.35rem;height:1.35rem;border:0;border-radius:50%;background:rgba(60,35,5,.22);color:var(--on-accent);font-size:.85rem;line-height:1;display:grid;place-items:center}
@keyframes bobC{50%{translate:0 .4rem}}
.toast{position:fixed;left:50%;bottom:1.75rem;z-index:200;transform:translate(-50%,1.25rem);opacity:0;pointer-events:none;max-width:calc(100vw - 2rem);padding:.8rem 1.3rem;border-radius:99px;background:var(--noise),linear-gradient(180deg,#2a2130,#17121c);border:1px solid rgba(240,198,116,.55);color:var(--head);box-shadow:var(--shadow),0 0 1.6rem rgba(240,190,100,.25);font-size:1.0625rem;font-weight:800;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Адаптив ---------- */
.video-list-dock{position:fixed;right:calc(1rem + env(safe-area-inset-right));bottom:calc(1.25rem + env(safe-area-inset-bottom));z-index:25}
.video-list-float{display:flex;align-items:center;gap:.65rem;min-height:3.3rem;padding:.65rem 1.2rem;border:2px solid var(--accent2);border-radius:99px;background:var(--gold-grad);color:var(--on-accent);font-weight:800;box-shadow:var(--shadow-sm),var(--glow);transition:transform .2s}
.video-list-preview{position:absolute;right:0;bottom:calc(100% + .6rem);width:min(23rem,calc(100vw - 2rem - env(safe-area-inset-right)));padding:1rem;background:var(--panel);border:1px solid var(--accent);border-radius:var(--r-lg);box-shadow:var(--shadow),var(--glow)}
.video-list-preview::after{content:"";position:absolute;top:100%;left:0;right:0;height:.7rem}
.video-list-preview>strong{display:block;color:var(--accent2);margin-bottom:.65rem}
.video-list-preview-items{max-height:min(25rem,calc(100dvh - 16rem));overflow-y:auto;overscroll-behavior:contain}
.video-list-preview-items p{color:var(--muted);font-size:.95rem}
.video-list-preview-row{display:flex;align-items:center;gap:.2rem}
.video-list-preview-row .video-list-preview-item{flex:1;min-width:0}
.video-list-preview-remove{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;padding:0;border:1px solid var(--line2);border-radius:var(--r-sm);background:transparent;color:var(--muted);font-size:1.5rem;line-height:1}
.video-list-preview-remove:hover,.video-list-preview-remove:focus-visible{color:var(--err);border-color:var(--err);background:var(--hover)}
.video-list-preview-item{display:flex;align-items:center;gap:.65rem;width:100%;padding:.6rem;border:0;border-radius:var(--r-sm);background:transparent;text-align:left}
.video-list-preview-item:hover,.video-list-preview-item:focus-visible{background:var(--hover)}
.video-list-preview-item img{width:5rem;aspect-ratio:16/9;object-fit:cover;border-radius:.35rem;flex:none}
.video-list-preview-item>span{min-width:0}
.video-list-preview-item b{display:block;font-size:.95rem;line-height:1.3;overflow-wrap:anywhere}
.video-list-preview-item small{display:block;margin-top:.2rem;color:var(--muted);font-size:.8rem;overflow-wrap:anywhere}
.video-list-float span{min-width:1.65rem;padding:.05rem .4rem;border-radius:99px;background:var(--on-accent);color:var(--accent2);text-align:center;font-size:.9rem}
.video-list-float[aria-pressed="true"]{border-color:var(--on-accent);outline:2px solid var(--accent2)}
html.modal-open .video-list-dock{visibility:hidden}
#page-videos:has(.video-list-float:not([hidden])){padding-bottom:5rem}
@media (max-width:760px){
  .video-list-dock{bottom:calc(5.5rem + env(safe-area-inset-bottom))}
  .video-list-float{padding:.55rem 1rem;min-height:3rem}
}
@media (max-width:1180px){
  .search{width:13rem}.search:focus-within{width:16rem}
  .btn-donate span{display:none}
  .btn-donate{width:var(--ctl);padding:0}
}
@media (max-width:1100px){
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .hero,.hero-videos{grid-template-columns:1fr;gap:1.75rem;padding-top:2rem}
  .featured{position:static}
  .nav button.nav-link{display:none}
}
@media (max-width:760px){
  :root{--head-h:3.85rem;--ctl:2.75rem}
  body{padding-bottom:calc(4.75rem + env(safe-area-inset-bottom))}
  .topbar-row{gap:.6rem}
  .nav,.btn-donate,#randomBtn{display:none}
  .search{display:none;position:absolute;left:0;right:0;top:calc(var(--head-h) + .4rem);width:auto;background:rgba(8,7,13,.96)}
  .search.open{display:flex}
  .search.open:focus-within{width:auto}
  .search kbd{display:none}
  #searchToggle{display:inline-grid}
  .brand-bean{width:2.2rem;height:2.5rem}
  .brand-text{font-size:1.4rem}
  .hero{padding:1.5rem 0}
  .hero h1{font-size:clamp(2.6rem,10vw,3.4rem)}
  .lead{font-size:1.125rem;margin-top:.8rem}
  .stats{gap:.5rem;margin-top:1.25rem;min-height:4.8rem}
  .stat{padding:.65rem .5rem;text-align:center;outline-offset:-.22rem}
  .stat b{font-size:1.75rem}
  .stat span{font-size:.6875rem;letter-spacing:.04em}
  .steps{display:none}
  .form-card{padding:1.3rem 1.15rem;border-radius:var(--r-lg)}
  .card::before,.card::after{width:2.4rem;height:2.4rem}
  .card-head h2{font-size:1.6rem}
  .form-row{flex-wrap:wrap}
  .form-row .btn-submit{width:100%}
  .idea-grid,.video-grid{grid-template-columns:minmax(0,1fr);gap:1rem}
  .idea{padding:1rem 1rem .95rem 1.45rem;gap:.9rem}
  .idea::before{width:.48rem}
  .vote{width:3.5rem;height:4.2rem}
  .idea h3{font-size:1.4rem}
  .feed{padding-top:1.25rem}
  .feed-bar{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .tabs{max-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .seg-sort{width:100%;overflow-x:auto;scrollbar-width:none}
  .seg-sort::-webkit-scrollbar{display:none}
  .seg.seg-sort button{flex:1 0 auto;padding:0 .45rem;font-size:.875rem}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .modal{width:100vw;max-width:100vw;max-height:94dvh;margin:auto 0 0;border-radius:1.4rem 1.4rem 0 0;border-bottom:0}
  .modal[open],.modal.parchment[open]{animation:sheetIn .3s ease}
  @keyframes sheetIn{from{transform:translateY(2.5rem);opacity:0}}
  .modal::before,.modal::after{width:2.4rem;height:2.4rem}
  .modal-inner{max-height:94dvh;padding:1.2rem 1.05rem calc(1.25rem + env(safe-area-inset-bottom))}
  .modal-admin{height:94dvh}
  .modal-admin.is-login{width:100vw}
  .comment-form{grid-template-columns:1fr}
  .adm{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .adm-menu{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:.6rem}
  .adm-menu .adm-title,.adm-menu .sep{display:none}
  .adm-menu button{flex:none;padding:0 .8rem}
  .adm-menu button.active{box-shadow:inset 0 -3px var(--accent)}
  .adm-main{padding:1.1rem 1rem 1.75rem}
  .adm-video{grid-template-columns:6.5rem minmax(0,1fr)}
  .user-row{grid-template-columns:minmax(0,1fr) auto auto}
  .user-row>span:empty{display:none}
  .user-row .field{width:5.5rem}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;padding:.4rem .4rem calc(.4rem + env(safe-area-inset-bottom));background:rgba(9,8,14,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(240,198,116,.4);box-shadow:0 -.5rem 1.5rem rgba(0,0,0,.4)}
  .tb-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-height:3.25rem;border:0;background:transparent;padding:.3rem .15rem;border-radius:var(--r);font-size:.8125rem;font-weight:800;color:var(--muted)}
  .tb-item span{font-size:1.3rem;line-height:1.2}
  .tb-item.active{color:var(--accent2);background:rgba(240,198,116,.1)}
  .tb-add{align-self:center;justify-self:center;width:3.5rem;height:3.5rem;margin-top:-1.5rem;border-radius:50%;background:var(--gold-grad);color:var(--on-accent);border:1px solid rgba(255,240,200,.6);box-shadow:0 .5rem 1.4rem rgba(220,150,50,.45),0 0 0 .3rem rgba(9,8,14,.95);animation:orb 3s ease-in-out infinite}
  .tb-add span{font-size:1.8rem;font-weight:600}
  @keyframes orb{50%{box-shadow:0 .5rem 1.8rem rgba(240,170,60,.7),0 0 0 .3rem rgba(9,8,14,.95)}}
  .toast{bottom:calc(5.5rem + env(safe-area-inset-bottom))}
  .video-callout{display:none!important}
  .featured-head{padding-left:1rem}
  .bg-img{background-position:center 30%;opacity:.5}
}
@media (max-width:420px){
  .seg button{padding:0 .5rem;font-size:.9375rem}
  .stat span{font-size:.625rem}
  .tab{padding:0 .85rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Эффекты выключены кнопкой «✨ Эффекты» — убираем постоянную анимацию. */
html.fx-off *,html.fx-off *::before,html.fx-off *::after{animation-iteration-count:1!important}
html.fx-off .grad-text,html.fx-off .featured,html.fx-off .mascot,html.fx-off .idea.unseen::after,html.fx-off .vcard.unseen::after{animation:none!important}

/* Twitch identity and private conversations */
.twitch-account { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.75rem; }
#privateFeedback { margin:.75rem 0 1rem; padding:1.1rem; border:2px solid var(--accent); border-radius:.75rem; background:linear-gradient(135deg,rgba(240,198,116,.18),rgba(240,198,116,.06)); color:var(--head); font-size:1rem; line-height:1.5; box-shadow:0 0 1.25rem rgba(240,198,116,.12); }
#privateFeedback .feedback-title { display:block; font-size:1.15rem; line-height:1.4; font-weight:800; color:var(--accent2); }
#privateFeedback .feedback-login { margin:.85rem 0; width:100%; white-space:normal; text-align:center; }
#privateFeedback .feedback-note { margin:0; color:var(--head); font-weight:600; }
.conversation-dialog { width:min(42rem, calc(100vw - 2rem)); max-height:85dvh; overflow:auto; padding:1.25rem; border:1px solid var(--gold); border-radius:1rem; background:#211b20; color:#f7ead3; }
.conversation-dialog::backdrop { background:#000a; }
.conversation-dialog h2, .conversation-dialog h3 { overflow-wrap:anywhere; }
.conversation-entry { display:flex; width:100%; flex-direction:column; align-items:flex-start; margin:.6rem 0; white-space:normal; overflow-wrap:anywhere; height:auto; }
.conversation-message { padding:.8rem; margin:.75rem 0; border-radius:.6rem; background:#ffffff09; overflow-wrap:anywhere; }
.conversation-message.from-admin { border-left:3px solid #c9a35d; background:#c9a35d12; }
.conversation-message small { display:block; opacity:.7; }
.conversation-message p { white-space:pre-wrap; margin:.4rem 0 0; }
#conversationStatus { min-height:1.5em; }

/* Direct Telegram contact: full label remains visible on narrow screens. */
.topbar .admin-contact { flex-shrink:0; white-space:nowrap; }
@media (max-width:1400px) {
  :root { --head-h:7.6rem; }
  .topbar-row { flex-wrap:wrap; align-content:center; column-gap:.6rem; row-gap:.3rem; }
  .topbar .admin-contact { order:3; flex-basis:100%; min-height:2.3rem; height:2.3rem; }
}