:root{--bg:#cbd9ec;--surface:#e6eef9;--ink:#0f1a36;--muted:#43547a;--line:#b0c2dd;--accent:#2a59d6;--accent-ink:#fff;--btn:linear-gradient(135deg,#244cbd,#3567d9);--warm:#eec58f;--warm-ink:#4c300d;--glow1:#a6c3ef;--glow2:#e8cdae;--shadow:0 14px 34px -14px rgba(15,40,100,.55);--danger:#ae2b19;--ok:#136a3b;--head:"Unbounded","Onest",system-ui,sans-serif;--body:"Onest",system-ui,sans-serif}
--head:"Unbounded","Onest",system-ui,sans-serif;--body:"Onest",system-ui,sans-serif}
@media(prefers-color-scheme:dark){:root{--bg:#050b18;--surface:#0a1430;--ink:#e3ebff;--muted:#8aa0c8;--line:#172a52;--accent:#7ea3ff;--accent-ink:#050b18;--btn:linear-gradient(135deg,#97b5ff,#6f99ff);--warm:#eebf84;--warm-ink:#3d2608;--glow1:#0e2a62;--glow2:#201a22;--shadow:0 14px 34px -14px rgba(0,0,0,.8);--danger:#ff7a63;--ok:#5fd39a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
main{max-width:1180px;margin:0 auto;padding:2rem 1.25rem 4rem}
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;max-width:1180px;margin:0 auto;border-bottom:2px solid var(--ink)}
.logo{font:700 1.6rem/1 var(--head);text-decoration:none;letter-spacing:-.03em}
nav{display:flex;align-items:center;gap:1.1rem;font-weight:500}nav a{text-decoration:none}nav a:hover{color:var(--accent)}
nav form{margin:0}.who{color:var(--muted)}
.link{background:none;border:0;font:inherit;font-weight:500;color:inherit;cursor:pointer;padding:0}.link:hover{color:var(--accent)}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);border:2px solid var(--accent);border-radius:999px;padding:.7rem 1.4rem;font:600 1rem var(--body);cursor:pointer;text-decoration:none;transition:transform .15s}
.btn:active{transform:scale(.97)}.btn.small{padding:.4rem 1rem;font-size:.9rem}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}.btn.ghost:hover{border-color:var(--ink)}
.btn.danger{background:transparent;color:var(--danger);border-color:var(--danger)}
nav .btn{color:var(--accent-ink)}nav .btn:hover{color:var(--accent-ink)}
.flash{max-width:1180px;margin:1rem auto 0;padding:.8rem 1.25rem;border-left:4px solid var(--accent);background:var(--surface)}
.flash.error{border-color:var(--danger)}.flash.ok{border-color:var(--ok)}
time{color:var(--muted);font-size:.9rem}
h1,h2,h3{font-family:var(--head);line-height:1.15;letter-spacing:-.02em;margin:0}
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:2.5rem;align-items:center;text-decoration:none;margin-bottom:3.5rem}
.hero-img{aspect-ratio:4/3;overflow:hidden;border-radius:6px}.hero-img img,.hero-img .ph{width:100%;height:100%;object-fit:cover}
.hero-txt h1{font-size:clamp(1.8rem,3.4vw,2.9rem);margin:.7rem 0 1rem}.hero:hover h1{color:var(--accent)}
.hero-txt p{color:var(--muted);margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2.2rem 1.8rem}
.card{text-decoration:none;display:block}.card h2{font-size:1.15rem;margin-top:.4rem}.card:hover h2{color:var(--accent)}
.thumb{aspect-ratio:3/2;overflow:hidden;border-radius:6px;margin-bottom:.9rem;background:var(--line)}
.thumb img,.thumb .ph{width:100%;height:100%;object-fit:cover}
.ph{background:linear-gradient(135deg,var(--accent),#0f1b2d);opacity:.85;min-height:100%}
.full{grid-column:1/-1;font-size:1.2rem;border-top:2px solid var(--ink);padding-top:1.2rem}
.more{margin-top:4rem}
.article{max-width:720px;margin:0 auto}.article h1{font-size:clamp(1.8rem,4vw,2.7rem);margin:.6rem 0 1.6rem}
.article p{font-size:1.15rem;line-height:1.8;margin:0 0 1.3rem}
.cover{width:100%;border-radius:6px;margin-bottom:2rem}
.empty{text-align:center;padding:5rem 0}.empty h1{font-size:2rem;margin-bottom:1rem}.empty p{color:var(--muted)}
.auth{max-width:420px;margin:2rem auto}.auth h1{font-size:1.8rem;margin-bottom:1.5rem}
form label{display:block;font-weight:500;margin-bottom:1.1rem}
input:not([type=checkbox]),textarea{display:block;width:100%;margin-top:.35rem;padding:.75rem .9rem;font:inherit;color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:8px}
input:focus,textarea:focus{border-color:var(--accent);outline:0}
small{display:block;color:var(--muted);font-weight:400;margin-top:.3rem}
.alt{color:var(--muted);margin-top:1.2rem}.alt a{color:var(--accent);font-weight:500}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.panel h1{font-size:1.8rem}.sub{font-size:1.3rem;margin:3rem 0 1rem}.narrow{max-width:760px;margin:0 auto}.narrow h1{margin-bottom:1.5rem}
.rows{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.rows li{display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line)}.rows li:last-child{border:0}
.mini{width:72px;height:54px;flex:none;border-radius:5px;overflow:hidden}.mini img,.mini .ph{width:100%;height:100%;object-fit:cover}
.meta{flex:1;min-width:0}.meta a{text-decoration:none}.meta span{display:block;color:var(--muted);font-size:.9rem}
.acts{display:flex;align-items:center;gap:.5rem}.acts form{margin:0}
.tag{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:.15rem .7rem;font-size:.82rem;font-weight:600}
.check{display:flex;align-items:center;gap:.6rem;font-weight:500}.check input{width:auto;margin:0;accent-color:var(--accent)}
.current{display:flex;gap:1rem;align-items:center;margin:-.4rem 0 1.1rem}.current img{width:140px;border-radius:6px}
.row{display:flex;gap:.8rem}.muted{color:var(--muted)}
footer{max-width:1180px;margin:0 auto;padding:1.5rem 1.25rem 3rem;color:var(--muted);border-top:1px solid var(--line)}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:1.2rem}.rows li{flex-wrap:wrap}.acts{width:100%}.who{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.items{display:grid;gap:1.2rem;margin-top:1.8rem}
.item{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:1.2rem 1.4rem}
.item h2{font-size:1.2rem;margin:.3rem 0 .7rem}.item p{margin:0 0 .9rem}
.empty-note{margin-top:2rem;padding:1.5rem;background:var(--surface);border:1px dashed var(--line);border-radius:8px;color:var(--muted)}
.item.unread{border-left-color:var(--danger)}
.item-top{display:flex;align-items:center;gap:.7rem}
.att{max-width:100%;max-height:420px;border-radius:6px;margin:0 0 1rem}
.filelink{color:var(--accent);font-weight:600}
.row form{margin:0}
.seen{color:var(--ok)!important}.unseen{color:var(--danger)!important}
.brand{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.online{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:500;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.2rem .75rem}
.online i{width:.55rem;height:.55rem;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
.online b{color:var(--ink);font-weight:600}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%,100%{box-shadow:0 0 0 .5rem transparent}}
@media(prefers-reduced-motion:reduce){.online i{animation:none}}
.panel-head h2{font-size:1.8rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin:1.2rem 0 2rem}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem}
.stat-card b{display:block;font:700 2rem/1.1 var(--head);letter-spacing:-.03em}.stat-card span{color:var(--muted);font-size:.9rem}
.table-wrap{overflow-x:auto;margin-bottom:3rem}
table.stat{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stat caption{text-align:left;color:var(--muted);padding:0 0 .6rem;font-size:.9rem}
.stat th,.stat td{text-align:left;padding:.55rem 1rem;border-bottom:1px solid var(--line);white-space:nowrap}
.stat th{font-weight:600;color:var(--muted);font-size:.88rem}.stat tr:last-child td{border:0}
.bar-cell{position:relative;min-width:160px;height:1.5rem;display:flex;align-items:center}
.bar-cell .fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);opacity:.22;border-radius:4px}
.bar-cell em{position:relative;font-style:normal;font-weight:600;padding-left:.5rem}

/* ===== Тёплая синяя тема: окна, мягкие тени, скруглённые панели ===== */
body{background:radial-gradient(900px 520px at 8% -8%,var(--glow1),transparent 62%),radial-gradient(800px 480px at 100% 0,var(--glow2),transparent 58%),var(--bg);background-attachment:fixed;min-height:100vh}
.bar{width:calc(100% - 2rem);margin:1rem auto 0;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow);position:sticky;top:.6rem;z-index:10;padding:.8rem 1.2rem}
.logo{background:var(--btn);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{background:var(--btn);border-color:transparent;box-shadow:0 8px 18px -10px var(--accent)}
.btn:hover{filter:brightness(1.06)}
.btn.ghost,.btn.danger{box-shadow:none}
.flash{border-radius:14px;border:1px solid var(--line);border-left-width:4px;box-shadow:var(--shadow);width:calc(100% - 2rem)}
.ph{background:linear-gradient(135deg,#8fc0ff,#3a6df0 60%,#1f3f9c);opacity:1}
.tag{background:var(--warm);color:var(--warm-ink)}
.card,.hero,.article,.auth,.item,.stat-card,.rows,table.stat,.empty-note{box-shadow:var(--shadow)}

/* главная: окна новостей */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:1.2rem;gap:2rem}
.hero-img{border-radius:18px}.hero-txt{padding:.5rem 1rem 0.5rem 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;padding-bottom:1.2rem;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -16px rgba(40,80,160,.5)}
.card .thumb{border-radius:0;margin-bottom:1rem}
.card time,.card h2{display:block;padding:0 1.2rem}
.article{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:2.4rem}
.cover{border-radius:16px}
.auth{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:2rem 2.2rem}
.full{border-top-color:var(--line)}

/* окна личного кабинета */
.items{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start;gap:1.5rem}
.item{padding:0;overflow:hidden;border:1px solid var(--line);border-left:1px solid var(--line);border-radius:22px;transition:transform .2s}
.item:hover{transform:translateY(-3px)}
.item.unread{border-color:var(--accent)}
.win-bar{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,var(--surface)),var(--surface));border-bottom:1px solid var(--line)}
.win-bar i{width:.65rem;height:.65rem;border-radius:50%;background:#ff8f7d}.win-bar i:nth-child(2){background:#ffc86b}.win-bar i:nth-child(3){background:#7ad9a4}
.win-bar .kind{margin-left:.6rem;font-weight:600;font-size:.85rem;color:var(--accent)}.win-bar .tag{margin-left:auto}
.item-body{padding:1.1rem 1.3rem 1.3rem}.item-body h2{font-size:1.15rem;margin:.3rem 0 .7rem}.item-body p{margin:0 0 .9rem}

/* админ-панель */
.rows{border-radius:18px;overflow:hidden}.rows li:hover{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.stat-card{border-radius:18px}.stat-card b{color:var(--accent)}
table.stat{border-radius:18px}
input:not([type=checkbox]),textarea{border-radius:12px}
input:focus,textarea:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.panel.narrow{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:2rem;box-shadow:var(--shadow)}
.online{box-shadow:var(--shadow)}
footer{border-top:0;text-align:center}
@media(max-width:800px){.hero{padding:.9rem}.article,.auth,.panel.narrow{padding:1.4rem}}
@media(prefers-reduced-motion:reduce){.card,.item{transition:none}.card:hover,.item:hover{transform:none}}

/* ===== Анимации ===== */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.12)}}
@keyframes shimmer{to{background-position:200% 0}}
@keyframes flow{to{background-position:200% 0}}
@keyframes soft{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* плавающие световые пятна на фоне */
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(70px);opacity:.55}
body::before{width:420px;height:420px;left:-120px;top:30vh;background:var(--glow1);animation:drift 16s ease-in-out infinite}
body::after{width:380px;height:380px;right:-100px;bottom:5vh;background:var(--glow2);animation:drift 20s ease-in-out infinite reverse}

/* появление страницы */
.bar{animation:drop .6s cubic-bezier(.2,.8,.2,1) both}
.flash{animation:rise .5s .1s both}
.hero-txt h1{animation:rise .7s .15s both}.hero-txt time{animation:rise .7s .05s both}.hero-txt p{animation:rise .7s .3s both}
.hero-img{animation:rise .8s both}
.logo{background-image:linear-gradient(90deg,#2c5ad8,#6fb1ff,#2c5ad8);background-size:200% 100%;animation:flow 6s linear infinite}

/* скроллинг: плавное появление блоков */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* карточки и окна */
.thumb img,.hero-img img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.card:hover .thumb img,.hero:hover .hero-img img{transform:scale(1.07)}
.card,.item,.stat-card{position:relative}
.card::after,.item::after,.stat-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 15%,transparent),transparent 70%)}
.card:hover::after,.item:hover::after,.stat-card:hover::after{opacity:1}
.win-bar i{transition:transform .25s}.item:hover .win-bar i{transform:scale(1.3)}
.win-bar .tag{animation:soft 2.2s ease-in-out infinite}
.stat-card{transition:transform .2s}.stat-card:hover{transform:translateY(-3px)}
.ph{background-size:200% 100%;background-image:linear-gradient(110deg,#8fc0ff 20%,#6fa0ff 40%,#3a6df0 60%,#8fc0ff 80%);animation:shimmer 6s linear infinite}

/* кнопки: блик и нажатие */
.btn{position:relative;overflow:hidden;transition:transform .15s,box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px -10px var(--accent)}
.btn:not(.ghost):not(.danger)::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:not(.ghost):not(.danger):hover::after{left:130%}
.btn:active{transform:scale(.97)}

/* ссылки в меню: растущее подчёркивание */
nav a:not(.btn){background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 2px no-repeat;transition:background-size .3s,color .2s;padding-bottom:2px}
nav a:not(.btn):hover{background-size:100% 2px}
.rows li{transition:background .2s}
.bar-cell .fill{transform-origin:left;animation:grow 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

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

/* ===== Мобильная версия ===== */
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.bar.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bar.open .burger span:nth-child(2){opacity:0}
.bar.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body{min-height:100dvh;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.table-wrap,.rows{max-width:100%}
img{height:auto}.thumb img,.hero-img img,.mini img,.hero-img .ph{height:100%}
@media(hover:none){
  .card:hover,.item:hover,.stat-card:hover,.btn:hover{transform:none}
  .card:hover .thumb img,.hero:hover .hero-img img{transform:none}
}
@media(max-width:760px){
  body{background-attachment:scroll}
  body::before,body::after{display:none}
  main{padding:1.2rem .9rem 3rem}
  .bar{flex-wrap:wrap;padding:.6rem .8rem;border-radius:18px;gap:.5rem}
  .brand{flex:1;gap:.6rem}.logo{font-size:1.3rem}
  .burger{display:flex}
  nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:.4rem;padding:.4rem 0 .5rem}
  .bar.open nav{display:flex}
  nav a:not(.btn),nav .link{display:block;padding:.8rem .9rem;border-radius:12px;background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:1.05rem;text-align:left}
  nav .btn{text-align:center;padding:.8rem}
  nav form{width:100%}nav .link{width:100%}
  .who{display:block;padding:.2rem .9rem}
  h1{overflow-wrap:anywhere}
  .hero{grid-template-columns:1fr;padding:.8rem;gap:1rem;margin-bottom:2rem;border-radius:22px}
  .hero-txt{padding:0 .3rem .5rem}.hero-txt h1{font-size:1.55rem}
  .grid{grid-template-columns:1fr;gap:1.2rem}
  .items{grid-template-columns:1fr}
  .article,.auth,.panel.narrow{padding:1.3rem 1.1rem;border-radius:22px}
  .article h1{font-size:1.6rem}.article p{font-size:1.05rem;line-height:1.7}
  .panel h1{font-size:1.5rem}.panel-head h2{font-size:1.4rem}
  .panel-head{align-items:stretch}.panel-head .btn,.panel-head .acts{width:100%}
  .panel-head .acts{flex-wrap:wrap}.panel-head .acts .btn{flex:1;text-align:center}
  .cards{grid-template-columns:1fr 1fr;gap:.7rem}.stat-card{padding:.8rem}.stat-card b{font-size:1.5rem}
  .rows li{flex-wrap:wrap;gap:.7rem}.rows .meta{flex-basis:calc(100% - 90px)}
  .rows li .acts{width:100%;flex-wrap:wrap}.rows .acts .btn,.rows .acts form{flex:1}.rows .acts form .btn{width:100%}
  .users .acts{justify-content:flex-start}
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .btn.small{min-height:40px}
  .row{flex-wrap:wrap}.row .btn{flex:1}
  input:not([type=checkbox]),textarea,select{font-size:16px;padding:.85rem .9rem}
  .check{min-height:44px}.check input{width:1.3rem;height:1.3rem}
  .current{flex-direction:column;align-items:flex-start}
  .flash{width:calc(100% - 1.6rem)}
  .online{font-size:.8rem;padding:.15rem .6rem}
  footer{padding:1rem .9rem 2rem}
}
@media(max-width:380px){.cards{grid-template-columns:1fr}.logo{font-size:1.15rem}}

/* онлайн в админке */
.live-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.4rem 1rem;margin-bottom:.5rem}
.live-head h2{font-size:1.5rem}
#live h3{font-size:1.05rem;margin:1.5rem 0 .7rem}
.ip{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}