:root{
  --bg:#0A0B0D; --surface:#141518; --raise:#1C1D21;
  --line:#28292E; --line-soft:#1D1E22;
  --text:#F2F2F3; --muted:#9A9BA3; --dim:#606169;
  --brass:#E0A83F; --brass2:#F0C569; --neon:#6E84E0; --neon2:#8FA3B0;
  --moss:#4FAE7C; --clay:#D06B66; --sky:#6FA0C4;
  --accent2:#6E84E0; --accent3:#4FAE7C; --accent4:#D06B66;
  --r:10px; --r2:16px; --pill:999px; --glass:none;
  --ease:cubic-bezier(.4,0,.2,1); color-scheme:dark; box-sizing:border-box;
}
:root[data-theme="light"]{
  --bg:#F7F6F3; --surface:#FFFFFF; --raise:#F0EFEB;
  --line:#E3E1DA; --line-soft:#EAE8E2;
  --text:#1C1B18; --muted:#6B6A63; --dim:#9B9A92;
  --brass:#9C6B1E; --brass2:#7A5417; --neon:#4557B8; --neon2:#4A6B7A;
  --moss:#2F7A50; --clay:#A83F3A; --sky:#3D6B8C;
  --accent2:#4557B8; --accent3:#2F7A50; --accent4:#A83F3A;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
#root{height:100%}
body{
  background:var(--bg);color:var(--text);overflow:hidden;
  font:400 15px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  transition:background-color .2s var(--ease),color .2s var(--ease)}
h1,h2,h3{font-family:var(--sans);font-weight:600;margin:0;letter-spacing:-.01em}
h1{font-size:28px;line-height:1.2} h2{font-size:20px} h3{font-size:16px}
a{color:var(--brass)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:var(--cur-leaf-hot);background:none;border:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
::selection{background:rgba(217,164,65,.28)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* скроллбар */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px;border:2px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* библиотека анимаций */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.98) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.view-enter{animation:fadeUp .3s var(--ease) both}

/* лендинг */
.landing{height:100%;overflow-y:auto;position:relative;background:var(--bg)}
.land-wrap{max-width:860px;margin:0 auto;padding:48px 24px 56px;position:relative;z-index:1}
.land-top{display:flex;justify-content:center;margin-bottom:56px;animation:fadeUp .4s var(--ease) both}
.land-top .brand{gap:10px}
.land-top .mark{width:22px;height:22px}
.land-top b{font-family:var(--sans);font-size:16px;letter-spacing:.02em}

.hero{text-align:center;margin-bottom:56px;animation:fadeUp .45s var(--ease) both .05s;position:relative}
.hero .mark{width:60px;height:60px;margin:0 auto 24px;position:relative}
.hero .mark::after{content:"";position:absolute;inset:-26px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(224,168,63,.22),transparent 70%)}
.hero h1{font-size:52px;font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--text) 35%,var(--brass2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:var(--muted);max-width:460px;margin:16px auto 32px;font-size:16px}
.btn.lg{padding:14px 30px;font-size:16px;text-decoration:none;display:inline-block;border-radius:var(--pill);font-weight:600}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r2);overflow:hidden;margin-bottom:56px;
  animation:fadeUp .45s var(--ease) both .1s}
.stat{background:var(--surface);padding:22px 14px;text-align:center;transition:background .2s var(--ease)}
.stat:hover{background:var(--raise)}
.stat b{display:block;font-family:var(--sans);font-size:28px;font-weight:600;color:var(--text)}
.stat span{display:block;margin-top:4px;font-size:12.5px;color:var(--dim)}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:52px}
.feature{padding:22px;border-top:2px solid var(--fc,var(--brass));
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.feature:hover{background:var(--raise);transform:translateY(-2px)}
.feature svg{width:20px;height:20px;stroke:var(--fc,var(--brass));fill:none;stroke-width:1.5;margin-bottom:12px}
.feature h3{margin-bottom:6px}
.feature p{color:var(--muted);font-size:13.5px;margin:0}

.land-section{margin-bottom:44px}
.land-section h2{margin-bottom:16px;font-size:18px}
.land-section .num.rank{font-size:14px;min-width:26px;display:inline-block}
.land-section .num.rank-1{color:var(--brass)}
.land-section .num.rank-2{color:var(--muted)}
.land-section .num.rank-3{color:var(--sky)}
/* достижения */
.achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.achbadge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;text-align:center;
  border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surface);
  opacity:.4;filter:grayscale(1);transition:opacity .2s var(--ease),filter .2s var(--ease)}
.achbadge svg{width:24px;height:24px;stroke:var(--muted);fill:none;stroke-width:1.5}
.achbadge span{font-size:12px;color:var(--muted)}
.achbadge.got{opacity:1;filter:none;border-color:var(--brass)}
.achbadge.got svg{stroke:var(--brass)}
.achbadge.got span{color:var(--text)}

.land-foot{text-align:center}
.land-foot>.dim{display:block;margin-bottom:14px}
.dev-toggle{display:inline-block;text-align:left;max-width:280px}
.dev-toggle summary{cursor:var(--cur-leaf-hot);color:var(--dim);font-size:12.5px;list-style:none;transition:color .15s var(--ease)}
.dev-toggle summary:hover{color:var(--muted)}
.dev-toggle summary::-webkit-details-marker{display:none}
.dev-toggle .dev{margin-top:14px;text-align:left;animation:fadeUp .2s var(--ease) both}

/* каркас */
.app{display:grid;grid-template-columns:230px 1fr;height:100%}
.rail{background:var(--surface);border-right:1px solid var(--line-soft);display:flex;
  flex-direction:column;min-height:0;padding-top:env(safe-area-inset-top,0px)}
.brand{display:flex;gap:11px;align-items:center;padding:20px 18px 18px}
.mark{width:24px;height:24px;flex:none;position:relative}
.mark i{position:absolute;inset:0;background:var(--brass);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.mark i:nth-child(2){transform:scale(.5);background:var(--surface)}
.brand b{font-family:var(--sans);font-size:17px;font-weight:600}
.brand span{display:block;font-size:11.5px;color:var(--dim);margin-top:-2px}
.nav{flex:1;overflow-y:auto;padding:4px 10px 10px}
.nav h4{margin:16px 8px 6px;font:500 11.5px/1 var(--sans);color:var(--dim)}
.nav button{width:100%;display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r);
  color:var(--muted);text-align:left;font-size:14.5px;position:relative;
  transition:color .15s var(--ease),background .15s var(--ease)}
.nav button:hover{color:var(--text);background:var(--raise)}
.nav button[aria-current=true]{color:var(--text);background:var(--raise)}
.nav button[aria-current=true]::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;
  width:3px;background:var(--brass);border-radius:3px}
.nav .count{margin-left:auto;font-size:12px;color:var(--brass);border:1px solid var(--line);
  border-radius:20px;padding:0 6px;line-height:17px}
.nav svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}
.me{border-top:1px solid var(--line-soft);padding:12px;display:flex;align-items:center;gap:10px}
.me .who{min-width:0;flex:1}
.me .who b{display:block;font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me .who span{font-size:12px;color:var(--dim)}
.main{min-width:0;overflow-y:auto;padding-bottom:70px}
.topbar{position:sticky;top:0;z-index:5;background:var(--bg);
  border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:14px;
  padding:14px 32px;padding-top:calc(14px + env(safe-area-inset-top,0px))}
.topbar .sub{font-size:13px;color:var(--dim)}
.wrap{max-width:1000px;padding:26px 32px}
.burger{display:none}

/* элементы */
.row{display:flex;align-items:center;gap:12px}
.spacer{flex:1}
.dim{color:var(--dim);font-size:13px}
.muted{color:var(--muted)}
.hr{height:1px;background:var(--line-soft);margin:18px 0}
.panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
  transition:border-color .15s var(--ease)}
.iconbtn{width:30px;height:30px;border:1px solid var(--line);border-radius:var(--r);display:grid;
  place-items:center;color:var(--muted);flex:none;transition:color .15s var(--ease),border-color .15s var(--ease)}
.iconbtn:hover{color:var(--text);border-color:var(--muted)}
.iconbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.btn{border:1px solid var(--line);background:var(--raise);border-radius:var(--r);padding:8px 14px;
  font-size:14px;transition:border-color .15s var(--ease),background .15s var(--ease)}
.btn:hover{border-color:var(--muted)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--brass);border-color:var(--brass);color:#171208;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.good{border-color:var(--moss);color:var(--moss)}
.btn.good:hover{background:rgba(79,174,124,.1)}
.btn.bad{border-color:var(--clay);color:var(--clay)}
.btn.bad:hover{background:rgba(208,107,102,.1)}
.btn.ghost{background:none}
.btn.sm{padding:5px 10px;font-size:13px}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;padding:2px 8px;
  border:1px solid var(--line);border-radius:20px;color:var(--muted);white-space:nowrap}
.tag.ok{color:var(--moss);border-color:var(--moss)}
.tag.no{color:var(--clay);border-color:var(--clay)}
.tag.wait{color:var(--brass);border-color:var(--brass)}
.tag.info{color:var(--sky);border-color:var(--sky)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.av{border-radius:2px;flex:none;image-rendering:pixelated;background:var(--raise)}

.list{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surface);overflow:hidden}
.entry{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:13px 16px;
  border-bottom:1px solid var(--line-soft);cursor:var(--cur-leaf-hot);position:relative;
  transition:background .15s var(--ease)}
.entry:last-child{border-bottom:none}
.entry:hover{background:var(--raise)}
.entry:not(.flat)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--brass);transform:scaleY(0);transition:transform .15s var(--ease)}
.entry:not(.flat):hover::before{transform:scaleY(1)}
.entry.flat{cursor:default} .entry.flat:hover{background:none}
.entry .t{font-size:14.5px}
.entry .m{font-size:12.5px;color:var(--dim);margin-top:2px}
.num{font-family:var(--sans);color:var(--dim);font-size:13px;margin-right:8px}
.empty{padding:44px 18px;text-align:center;color:var(--dim);animation:fadeIn .2s var(--ease) both}
.empty b{display:block;color:var(--muted);font-weight:500;margin-bottom:4px}
.spinner{width:24px;height:24px;border-radius:50%;margin:0 auto 14px;
  border:2px solid var(--line);border-top-color:var(--brass);animation:spin .7s linear infinite}

/* скелетон-загрузка списков */
.skeleton{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surface);overflow:hidden}
.skel-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.skel-row:last-child{border-bottom:none}
.skel-bar{height:11px;border-radius:20px;background:linear-gradient(90deg,var(--raise) 25%,var(--line) 50%,var(--raise) 75%);
  background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}
.skel-av{width:32px;height:32px;border-radius:var(--r);flex:none;
  background:linear-gradient(90deg,var(--raise) 25%,var(--line) 50%,var(--raise) 75%);
  background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}
.skel-lines{flex:1;display:flex;flex-direction:column;gap:8px}

/* полоса прогресса сверху при запросах */
.topload{position:fixed;top:0;left:0;height:2px;background:var(--brass);
  z-index:100;width:0;opacity:0;transition:width .3s var(--ease),opacity .2s var(--ease)}
.topload.on{opacity:1;width:70%}
.topload.done{width:100%;opacity:0;transition:width .2s var(--ease),opacity .4s var(--ease) .1s}

/* появление при скролле */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}

.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.pick{padding:20px;text-align:left;background:var(--surface);transition:background .15s var(--ease)}
.pick:hover{background:var(--raise)}
.pick p{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.pick .k{font-size:12px;color:var(--brass);margin-top:12px;display:block}

/* опросы */
.opts{display:flex;flex-direction:column;gap:8px}
.pollopt{position:relative;display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--raise);
  overflow:hidden;font-size:14px;text-align:left}
.pollopt::before{content:"";position:absolute;inset:0;width:var(--pct,0%);background:rgba(224,168,63,.16);
  transition:width .3s var(--ease)}
.pollopt.mine{border-color:var(--brass)}
.pollopt-label,.pollopt-pct{position:relative;z-index:1}
.pollopt-pct{color:var(--dim);font-variant-numeric:tabular-nums}
.pollopt:disabled{cursor:default}

/* галерея */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.gcard{border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.gcard-img{height:150px;background-size:cover;background-position:center;background-color:var(--raise)}
.gcard-body{padding:14px}

/* лист заявки */
.sheet{display:grid;grid-template-columns:1fr 250px;gap:26px;align-items:start}
.doc{position:relative;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:24px 26px}
.doc .q{font-size:12.5px;color:var(--dim);margin:18px 0 3px}
.doc .a{font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.side .box{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surface);
  padding:14px 15px;margin-bottom:12px}
.side .box h4{margin:0 0 10px;font:500 13px/1 var(--sans);color:var(--muted)}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:4px 0}
.kv span{color:var(--dim)}
.stamp{position:absolute;right:18px;top:14px;transform:rotate(-6deg);border:2px solid currentColor;
  border-radius:4px;padding:3px 12px;font:700 14px/1.2 var(--sans);letter-spacing:.14em;opacity:.8}
.stamp.ok{color:var(--moss)} .stamp.no{color:var(--clay)} .stamp.rev{color:var(--brass)}
.trail{border-left:1px solid var(--line);padding-left:14px}
.trail div{position:relative;padding:6px 0;font-size:13px;color:var(--muted)}
.trail div::before{content:"";position:absolute;left:-18px;top:13px;width:7px;height:1px;background:var(--line)}
.trail time{color:var(--dim);font-size:12px;margin-left:6px}

/* переписка */
.msg{padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.msg:last-child{border-bottom:none}
.msg .h{display:flex;gap:9px;align-items:center;margin-bottom:5px}
.msg .h b{font-weight:500;font-size:14px}
.msg .b{white-space:pre-wrap;overflow-wrap:anywhere}
.msg.staff{background:var(--raise)}

/* формы */
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r);padding:10px 12px;font-size:14.5px;
  transition:border-color .15s var(--ease)}
.field textarea{resize:vertical;min-height:92px;line-height:1.5}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brass)}
.field .cnt{font-size:12px;color:var(--dim);text-align:right;margin-top:4px}
.field .cnt.bad{color:var(--clay)}
.err{color:var(--clay);font-size:13px;margin-top:8px}

/* модалки */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;
  place-items:center;padding:20px;z-index:50;animation:fadeIn .15s var(--ease) both}
.modal{width:min(560px,100%);max-height:86vh;overflow:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r2);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
  animation:popIn .2s var(--ease) both}
.modal header{position:sticky;top:0;background:var(--surface);
  border-bottom:1px solid var(--line-soft);
  padding:16px 18px;display:flex;align-items:center;gap:12px;z-index:2}
.modal header h2{flex:1}
.modal .body{padding:18px}
.modal footer{position:sticky;bottom:0;background:var(--surface);
  border-top:1px solid var(--line-soft);padding:14px 18px}

/* профиль */
.cover{height:190px;border-radius:var(--r);border:1px solid var(--line-soft);position:relative;overflow:hidden}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 55%)}
.cover .name{position:absolute;left:18px;bottom:16px;display:flex;align-items:center;gap:12px;z-index:1}
.cover .name b{font-family:var(--sans);font-size:22px;font-weight:600;display:block;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.cover .name span{display:block;font-size:13px;color:rgba(255,255,255,.75);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.cover .acts{position:absolute;right:14px;bottom:14px;display:flex;gap:8px;z-index:1}

/* статистика профиля в виде строки с иконками */
.profile-stats{display:flex;flex-wrap:wrap;border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;margin-top:14px}
.profile-stat{flex:1;min-width:150px;padding:14px 16px;display:flex;align-items:center;gap:11px;
  border-right:1px solid var(--line-soft);border-top:1px solid var(--line-soft);background:var(--surface)}
.profile-stat:nth-child(-n+2){border-top:none}
.profile-stat svg{width:19px;height:19px;stroke:var(--brass);fill:none;stroke-width:1.6;flex:none}
.profile-stat b{display:block;font-size:14.5px;font-weight:500}
.profile-stat span{display:block;font-size:11.5px;color:var(--dim)}

.ach-head{display:flex;align-items:center;gap:12px;margin:22px 0 10px}
.ach-head h3{margin:0}
.ach-bar{flex:1;height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.ach-bar i{display:block;height:100%;background:var(--brass);border-radius:3px;transition:width .4s var(--ease)}
.ach-head .dim{white-space:nowrap}
.bannerpick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bannerpick button{height:74px;border-radius:var(--r);border:1px solid var(--line);position:relative;overflow:hidden}
.bannerpick button[aria-pressed=true]{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.bannerpick span{position:absolute;left:6px;bottom:5px;font-size:11.5px;background:rgba(0,0,0,.6);
  padding:1px 6px;border-radius:3px}

/* города */
.town{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;
  border-bottom:1px solid var(--line-soft);transition:background .15s var(--ease)}
.town:last-child{border-bottom:none}
.town:hover{background:var(--raise)}
.crest{min-width:38px;height:38px;padding:0 8px;box-sizing:border-box;border-radius:var(--r);display:grid;place-items:center;
  font:600 12px/1 var(--sans);letter-spacing:.02em;white-space:nowrap;color:#171208;background:linear-gradient(135deg,var(--brass),var(--brass2))}

/* банк */
.balance{font-family:var(--sans);font-size:42px;line-height:1;color:var(--text)}
.spark{width:100%;height:78px}

/* настройки */
.set{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.set:last-child{border-bottom:none}
.set .t{flex:1} .set .t b{display:block;font-weight:500} .set .t span{font-size:13px;color:var(--dim)}
code.token{font-family:var(--sans);font-size:13px;background:var(--bg);border:1px solid var(--line);
  padding:6px 10px;border-radius:var(--r);letter-spacing:.06em;overflow-wrap:anywhere}

/* тосты */
.toasts{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;
  flex-direction:column;gap:9px;z-index:80}
.toast{background:var(--raise);border:1px solid var(--line);border-left:2px solid var(--brass);
  border-radius:var(--r);padding:11px 14px;font-size:13.5px;max-width:340px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);animation:toastIn .28s var(--ease) both}
.toast b{display:block;font-weight:500}
.toast.bad{border-left-color:var(--clay)}
.toast.bot{border-left-color:var(--sky)}
.toast.mc{border-left-color:var(--moss)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:860px){.sheet{grid-template-columns:1fr}}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;inset:0 auto 0 0;width:230px;z-index:40;transform:translateX(-100%);
    transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.5)}
  .rail.open{transform:none}
  .burger{display:grid}
  .wrap,.topbar{padding-left:18px;padding-right:18px}
}
@media (max-width:520px){
  .hero h1{font-size:30px}
  .stats{grid-template-columns:1fr}
}

/* объявление и настройки сайта */
.annc{padding:9px 16px;text-align:center;font-size:14px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--sky) 16%,var(--surface));color:var(--text)}
.annc.warn{background:color-mix(in srgb,var(--brass) 20%,var(--surface))}
.annc.ok{background:color-mix(in srgb,var(--moss) 18%,var(--surface))}
.cfg{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start;padding-bottom:70px}
.cfg-tabs{display:flex;flex-direction:column;gap:2px;position:sticky;top:76px}
.cfg-tabs button{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;
  background:none;border:none;color:var(--muted);padding:8px 12px;border-radius:var(--r);cursor:var(--cur-leaf-hot);font:inherit}
.cfg-tabs button:hover{background:var(--raise);color:var(--text)}
.cfg-tabs button[aria-current]{background:var(--raise);color:var(--text);font-weight:600}
.cfg-tabs em{font-style:normal;font-size:12px;background:var(--brass);color:#171208;border-radius:var(--pill);padding:0 7px}
.cfg-head{margin-bottom:12px}
.cfg-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.cfg-row:last-child{border-bottom:none}
.cfg-row.dirty{background:color-mix(in srgb,var(--brass) 8%,transparent)}
.cfg-row .t{flex:1;min-width:0} .cfg-row .t b{display:block;font-weight:500}
.cfg-row .t span{font-size:13px;color:var(--dim)}
.cfg-row .ctl{flex:none;display:flex;align-items:center;max-width:46%}
.cfg-row .ctl input[type=text],.cfg-row .ctl select{width:260px;max-width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r);padding:8px 10px;color:var(--text);font:inherit}
.cfg-row .num{display:flex;align-items:center;gap:8px}
.cfg-row .num input{width:96px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;color:var(--text);font:inherit}
.cfg-row input:focus,.cfg-row select:focus{outline:none;border-color:var(--brass)}
.cfg-row .rst{flex:none} .cfg-row .rst[hidden]{display:none}
.sw{position:relative;display:inline-block;width:44px;height:26px;cursor:var(--cur-leaf-hot)}
.sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:var(--cur-leaf-hot)}
.sw i{position:absolute;inset:0;border-radius:var(--pill);background:var(--line);transition:background .15s var(--ease)}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  transition:transform .15s var(--ease)}
.sw input:checked+i{background:var(--moss)} .sw input:checked+i::after{transform:translateX(18px)}
.sw input:focus-visible+i{outline:2px solid var(--brass);outline-offset:2px}
.cfg-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:12px;
  width:min(640px,calc(100vw - 32px));padding:10px 14px;background:var(--raise);border:1px solid var(--brass);
  border-radius:var(--r2);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.cfg-bar[hidden]{display:none}
@media (max-width:820px){
  .cfg{grid-template-columns:1fr}
  .cfg-tabs{flex-direction:row;overflow-x:auto;position:static;padding-bottom:4px}
  .cfg-tabs button{white-space:nowrap}
  .cfg-row{flex-wrap:wrap} .cfg-row .ctl{max-width:100%}
  .cfg-row .ctl input[type=text],.cfg-row .ctl select{width:100%}
}

/* ───── профиль нового поколения ───── */
.pf{--pa:var(--brass)}
.pf-cover{position:relative;min-height:236px;border-radius:var(--r2);border:1px solid var(--line-soft);overflow:hidden;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:20px 22px;flex-wrap:wrap}
.pf-cover::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 90% at 0% 100%,color-mix(in srgb,var(--pa) 38%,transparent),transparent 60%),linear-gradient(0deg,rgba(0,0,0,.62),transparent 70%)}
.pf-head{position:relative;z-index:1;display:flex;align-items:flex-end;gap:18px;min-width:0}
.pf-id{min-width:0;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.65)}
.pf-id h1{font-size:30px;margin:0 0 4px;color:#fff;overflow-wrap:anywhere}
.pf-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.pf-meta .dim{color:rgba(255,255,255,.7)}
.rank-chip{background:color-mix(in srgb,var(--pa) 30%,rgba(0,0,0,.45));border:1px solid color-mix(in srgb,var(--pa) 60%,transparent);
  padding:2px 10px;border-radius:var(--pill);font-size:12px;font-weight:500}
.pf-online{display:inline-flex;align-items:center;gap:6px;color:#7be3a9}
.pf-online i{width:8px;height:8px;border-radius:50%;background:#4FAE7C;box-shadow:0 0 0 0 rgba(79,174,124,.7);animation:pfpulse 2s infinite}
@keyframes pfpulse{70%{box-shadow:0 0 0 7px rgba(79,174,124,0)}100%{box-shadow:0 0 0 0 rgba(79,174,124,0)}}
.pf-status{margin-top:8px;font-size:14.5px;font-style:italic;color:rgba(255,255,255,.92);max-width:520px}
.pf-pins{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pf-lvl{position:absolute;top:16px;right:18px;z-index:1;width:58px;height:58px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:rgba(0,0,0,.45);border:2px solid var(--pa);box-shadow:0 0 18px color-mix(in srgb,var(--pa) 55%,transparent);color:#fff;line-height:1}
.pf-lvl b{font-family:var(--sans);font-size:22px} .pf-lvl span{font-size:10px;opacity:.75;text-transform:uppercase;letter-spacing:.06em}
.pf-actions{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap}
.pf-actions .btn.on{border-color:var(--pa);background:color-mix(in srgb,var(--pa) 25%,transparent)}
.pf-xp{padding:14px 18px;margin-top:14px}
.pf-xp .ach-bar i{background:linear-gradient(90deg,var(--pa),color-mix(in srgb,var(--pa) 60%,#fff))}
.pf .profile-stat svg{stroke:var(--pa)}
.pf-tabs{display:flex;gap:4px;margin:20px 0 14px;border-bottom:1px solid var(--line-soft);overflow-x:auto}
.pf-tabs button{background:none;border:none;color:var(--muted);padding:10px 14px;cursor:var(--cur-leaf-hot);font:inherit;border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px}
.pf-tabs button:hover{color:var(--text)}
.pf-tabs button[aria-current]{color:var(--text);font-weight:600;border-bottom-color:var(--pa,var(--brass))}
.pf-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;align-items:start}
.pf-card{padding:16px 18px;margin-bottom:14px}
.tagrow,.linkrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{background:var(--raise);border:1px solid var(--line);border-radius:var(--pill);padding:2px 11px;font-size:13px;color:var(--muted)}
.timeline{margin-top:10px;display:flex;flex-direction:column;gap:12px}
.tl{display:flex;gap:12px;align-items:flex-start}
.tl i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;background:var(--raise);border:1px solid var(--line)}
.tl i.tl-award{border-color:#E0A83F} .tl i.tl-achievement{border-color:var(--sky)}

/* награды */
.ico{display:inline-grid;place-items:center;flex:none;overflow:hidden;border-radius:50%;width:22px;height:22px;font-style:normal;font-size:13px;line-height:1}
.ico img{width:100%;height:100%;object-fit:cover}
.ico.big{width:64px;height:64px;font-size:34px;background:radial-gradient(circle,color-mix(in srgb,var(--ac) 30%,var(--raise)),var(--raise));
  border:2px solid var(--ac);box-shadow:0 0 18px color-mix(in srgb,var(--ac) 45%,transparent)}
.award-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 4px;border-radius:var(--pill);font-size:12.5px;font-weight:500;
  background:rgba(0,0,0,.45);border:1px solid color-mix(in srgb,var(--ac) 70%,transparent);color:#fff;text-shadow:none}
.award-chip .ico{background:color-mix(in srgb,var(--ac) 35%,rgba(0,0,0,.4))}
.rar{display:inline-block;margin-left:8px;font-size:11px;padding:1px 8px;border-radius:var(--pill);color:var(--ac);
  border:1px solid color-mix(in srgb,var(--ac) 55%,transparent);vertical-align:middle;font-weight:500}
.award-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.award-card{display:flex;gap:14px;padding:14px;border-radius:var(--r);background:var(--surface);border:1px solid color-mix(in srgb,var(--ac) 40%,var(--line-soft));
  position:relative;overflow:hidden}
.award-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 120% at 0% 0%,color-mix(in srgb,var(--ac) 14%,transparent),transparent 70%)}
.award-card.click{cursor:var(--cur-leaf-hot);transition:transform .15s var(--ease),border-color .15s}
.award-card.click:hover{transform:translateY(-2px);border-color:var(--ac)}
.award-card.pinned{border-color:var(--ac)}
.award-card.r-legendary{box-shadow:0 0 0 1px color-mix(in srgb,var(--ac) 50%,transparent),0 6px 26px color-mix(in srgb,var(--ac) 22%,transparent)}
.award-card .ab{min-width:0;position:relative;z-index:1} .award-card .ab b{font-size:15px}
.award-card .ab p{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.award-card .note{margin-top:6px;font-size:13px;font-style:italic;color:var(--text)}
.award-acts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.award-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.award-mini{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:10px 6px;border-radius:var(--r);background:var(--bg);border:1px solid color-mix(in srgb,var(--ac) 35%,var(--line-soft))}
.award-mini .ico{width:40px;height:40px;font-size:22px;border:2px solid var(--ac);background:color-mix(in srgb,var(--ac) 18%,var(--raise))}
.award-mini span{font-size:11.5px;color:var(--muted);line-height:1.25}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.ach-card{display:flex;gap:12px;padding:12px 14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line-soft);opacity:.55;filter:grayscale(.7)}
.ach-card.got{opacity:1;filter:none;border-color:color-mix(in srgb,var(--ac) 55%,transparent)}
.ach-card svg{width:30px;height:30px;flex:none;stroke:var(--ac);fill:none;stroke-width:1.5;margin-top:2px}
.ach-card p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.ach-card .ach-bar i{background:var(--ac)}

/* стена */
.wall-form textarea{width:100%;min-height:70px;resize:vertical;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;color:var(--text);font:inherit}
.wall-form textarea:focus{outline:none;border-color:var(--brass)} .wall-form .row{margin-top:8px}
.wall-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.wall-item{display:flex;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r)}
.wall-item .wb{flex:1;min-width:0;overflow-wrap:anywhere} .wall-item a{color:var(--text);text-decoration:none}

/* зал славы и выбор */
.hall{display:flex;flex-direction:column;margin-top:8px}
.hall-row{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid var(--line-soft);color:var(--text);text-decoration:none}
.hall-row:last-child{border-bottom:none} .hall-row:hover{background:var(--raise)}
.hall-row .hb{flex:1;min-width:0} .hall-row .hb b{display:block;font-weight:500} .hall-row .hv{font-size:13px;color:var(--muted);white-space:nowrap}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatches button{display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--line);border-radius:var(--pill);padding:5px 12px 5px 6px;color:var(--muted);cursor:var(--cur-leaf-hot);font:inherit;font-size:13px}
.swatches button i{width:16px;height:16px;border-radius:50%;background:var(--sw);display:block}
.swatches button[aria-pressed="true"]{border-color:var(--sw,var(--brass));color:var(--text);background:color-mix(in srgb,var(--sw,var(--brass)) 15%,var(--bg))}
.emoji-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.emoji-grid button{background:var(--bg);border:1px solid var(--line-soft);border-radius:8px;padding:5px 0;font-size:18px;cursor:var(--cur-leaf-hot)}
.emoji-grid button:hover{border-color:var(--brass)}
.award-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.award-pick button{display:flex;align-items:center;gap:8px;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:8px;color:var(--text);cursor:var(--cur-leaf-hot);font:inherit;font-size:13px}
.award-pick button[aria-pressed="true"]{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,var(--bg))}
.award-pick .ico{border:1.5px solid var(--ac);background:color-mix(in srgb,var(--ac) 20%,var(--raise));width:28px;height:28px;font-size:15px}
.chk{display:flex!important;align-items:center;gap:8px;cursor:var(--cur-leaf-hot);color:var(--text)!important}
.chk input{width:auto!important}

/* уведомления */
.bell{position:relative}
.bellcount{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--pill);background:var(--clay);color:#fff;font-size:11px;line-height:17px;text-align:center;font-weight:600}
.bellcount[hidden]{display:none}
.notif{cursor:default} .notif.unread{background:color-mix(in srgb,var(--brass) 9%,transparent)}
.notif .nic{width:30px;height:30px;border-radius:50%;background:var(--raise);display:grid;place-items:center;flex:none}

@media (max-width:820px){
  .pf-grid{grid-template-columns:1fr}
  .pf-cover{padding:16px;min-height:0;padding-top:90px}
  .pf-head{flex-direction:column;align-items:flex-start}
  .pf-id h1{font-size:24px}
  .emoji-grid{grid-template-columns:repeat(8,1fr)}
}

/* ───── премиум-оформление: баннеры, рамки, эффекты, стили имени ───── */
@keyframes bnshift{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes bnwave{to{background-position:200% 0,0 0}}
.bn-p_nebula,.bn-p_void,.bn-p_royal,.bn-p_sakura{background-size:200% 200%!important;animation:bnshift 18s ease-in-out infinite alternate}
.bn-p_aurora_live{background:linear-gradient(120deg,#062a2a,#0f6b5a,#2fd1a0,#6b3fd1,#062a2a)!important;background-size:300% 300%!important;animation:bnshift 12s linear infinite alternate}
.bn-p_lava_flow{background:linear-gradient(160deg,#1a0805,#7a1c08,#e0541a,#ffb03d,#7a1c08)!important;background-size:260% 260%!important;animation:bnshift 10s ease-in-out infinite alternate}
.bn-p_ocean{background:repeating-linear-gradient(100deg,rgba(255,255,255,.06) 0 40px,transparent 40px 80px),linear-gradient(180deg,#02101f,#05406b 55%,#0b86a8)!important;background-size:200% 100%,100% 100%!important;animation:bnwave 16s linear infinite}
.bn-p_cyber{background:repeating-linear-gradient(0deg,rgba(255,47,160,.14) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(47,200,255,.12) 0 1px,transparent 1px 22px),linear-gradient(135deg,#0b0420,#2a0b5c 55%,#ff2fa0)!important}

@property --fa{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes fa{to{--fa:360deg}}
@keyframes frpulse{0%,100%{box-shadow:0 0 6px 0 rgba(255,199,54,.55)}50%{box-shadow:0 0 18px 3px rgba(255,199,54,.9)}}
.av.fr-p_gold_pulse{border:3px solid #FFC736;animation:frpulse 2.2s ease-in-out infinite}
.av.fr-p_rainbow,.av.fr-p_plasma,.av.fr-p_emerald,.av.fr-p_frost{border:3px solid transparent;
  background:linear-gradient(var(--raise),var(--raise)) padding-box,conic-gradient(from var(--fa),var(--c1),var(--c2),var(--c3),var(--c1)) border-box;animation:fa 5s linear infinite}
.av.fr-p_rainbow{--c1:#ff4d6d;--c2:#ffd24d;--c3:#4dffa6}
.av.fr-p_plasma{--c1:#b04dff;--c2:#4dd2ff;--c3:#ff4dd2;box-shadow:0 0 14px -2px #b04dff}
.av.fr-p_emerald{--c1:#0fbf6f;--c2:#b6ffd8;--c3:#0a7a4a;box-shadow:0 0 14px -2px #0fbf6f}
.av.fr-p_frost{--c1:#9be8ff;--c2:#ffffff;--c3:#5aa8ff;box-shadow:0 0 12px -2px #9be8ff}

.fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx_snow{background-image:radial-gradient(2.5px 2.5px at 12% 20%,#fff,transparent),radial-gradient(2px 2px at 36% 70%,#fff,transparent),radial-gradient(3px 3px at 58% 35%,#fff,transparent),radial-gradient(2px 2px at 82% 60%,#fff,transparent),radial-gradient(2.5px 2.5px at 92% 15%,#fff,transparent);background-size:240px 240px;animation:fxfall 9s linear infinite}
@keyframes fxfall{to{background-position:0 240px}}
.fx_stars{background-image:radial-gradient(1.5px 1.5px at 8% 25%,#fff,transparent),radial-gradient(1px 1px at 22% 70%,#dfe8ff,transparent),radial-gradient(2px 2px at 40% 30%,#fff,transparent),radial-gradient(1px 1px at 61% 62%,#fff,transparent),radial-gradient(1.5px 1.5px at 78% 22%,#cfe0ff,transparent),radial-gradient(1px 1px at 90% 70%,#fff,transparent);animation:fxtwinkle 3s ease-in-out infinite alternate}
@keyframes fxtwinkle{from{opacity:.35}to{opacity:1}}
.fx_embers{background-image:radial-gradient(2px 2px at 15% 90%,#ff9a3d,transparent),radial-gradient(1.5px 1.5px at 38% 60%,#ffcf6a,transparent),radial-gradient(2.5px 2.5px at 62% 85%,#ff7a2d,transparent),radial-gradient(1.5px 1.5px at 84% 50%,#ffb04d,transparent);background-size:200px 260px;animation:fxrise 7s linear infinite}
@keyframes fxrise{to{background-position:0 -260px}}
.fx_fireflies{background-image:radial-gradient(4px 4px at 18% 40%,#f4ff9a,transparent),radial-gradient(3px 3px at 47% 70%,#d6ff7a,transparent),radial-gradient(4px 4px at 76% 30%,#f4ff9a,transparent),radial-gradient(3px 3px at 90% 75%,#d6ff7a,transparent);background-size:100% 100%;filter:blur(.7px);animation:fxfloat 11s ease-in-out infinite alternate}
@keyframes fxfloat{0%{transform:translate(0,0)}50%{transform:translate(14px,-10px);opacity:.6}100%{transform:translate(-10px,8px)}}
.fx_rain{background-image:repeating-linear-gradient(105deg,transparent 0 14px,rgba(180,210,255,.4) 14px 15px);background-size:100% 100%;animation:fxrain .8s linear infinite}
@keyframes fxrain{to{background-position:-30px 100px}}

.nm{display:inline-flex;align-items:baseline;gap:.3em;max-width:100%}
.nbadge{font-style:normal;-webkit-text-fill-color:initial}
.nm.nf_gold,.nm.nf_rainbow,.nm.nf_ice,.nm.nf_fire{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.nm.nf_gold{background-image:linear-gradient(90deg,#b8860b,#ffe27a,#d4a017,#ffe27a,#b8860b);background-size:250% 100%;animation:nfshift 5s linear infinite}
.nm.nf_rainbow{background-image:linear-gradient(90deg,#ff5f6d,#ffc371,#5fff9e,#5fc8ff,#b07bff,#ff5f6d);background-size:300% 100%;animation:nfshift 6s linear infinite}
.nm.nf_ice{background-image:linear-gradient(90deg,#8ee9ff,#fff,#6fa8ff,#fff,#8ee9ff);background-size:250% 100%;animation:nfshift 5s linear infinite}
.nm.nf_fire{background-image:linear-gradient(90deg,#ff3d00,#ffb300,#ff3d00,#ffd54a,#ff3d00);background-size:250% 100%;animation:nfshift 3s linear infinite}
.nm.nf_neon{color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 0 6px #ff2fa0,0 0 14px #ff2fa0,0 0 26px #b02fff}
@keyframes nfshift{to{background-position:250% 0}}
.pf-id .nm[class*="nf_"]{text-shadow:none;filter:drop-shadow(0 1px 4px rgba(0,0,0,.65))}
.pf-id .nm.nf_neon{text-shadow:0 0 6px #ff2fa0,0 0 14px #ff2fa0,0 0 26px #b02fff}
.pf-title{display:inline-block;margin-top:6px;padding:2px 12px;border-radius:var(--pill);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(0,0,0,.35);border:1px solid color-mix(in srgb,var(--pa,var(--brass)) 70%,transparent);color:#fff;text-shadow:none}

/* ───── магазин ───── */
.shop-top{display:flex;align-items:center;gap:20px;padding:16px 20px;flex-wrap:wrap}
.shop-bal{font-family:var(--sans);font-size:34px;line-height:1.1} .shop-bal small{font-size:15px;color:var(--muted)}
.shop-stat b{display:block;font-size:22px;font-family:var(--sans)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.shop-grid.sm{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.shop-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r2);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s var(--ease),border-color .15s}
.shop-card:hover{transform:translateY(-2px);border-color:var(--line)}
.shop-card.owned{border-color:color-mix(in srgb,var(--moss) 70%,transparent)}
.shop-card.off{opacity:.6}
.sp-banner{height:84px;position:relative;overflow:hidden;background-size:cover}
.sp-dark{background:linear-gradient(180deg,#07090f,#10162a)}
.sp-center{height:84px;display:grid;place-items:center;background:var(--bg)}
.sp-name{font:600 24px var(--sans)}
.sp-emoji{font-size:38px}
.sc-body{padding:12px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.sc-body p{margin:0;font-size:13px;color:var(--muted)}
.sc-act{margin-top:auto;padding-top:6px}
.spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--brass);border-radius:50%;animation:spin .8s linear infinite;display:inline-block;flex:none}

/* ───── сезоны ───── */
.season-hero{display:flex;align-items:center;gap:22px;padding:20px 24px;flex-wrap:wrap;position:relative;overflow:hidden}
.season-hero.active{border-color:color-mix(in srgb,var(--brass) 55%,var(--line-soft))}
.season-hero.active::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 140% at 100% 0%,color-mix(in srgb,var(--brass) 14%,transparent),transparent 60%);pointer-events:none}
.season-hero>*{position:relative}
.season-hero h2{font-size:24px;margin:4px 0}
.season-clock b{font-family:var(--sans);font-size:30px;font-variant-numeric:tabular-nums;display:block}
.season-prizes{display:flex;gap:6px;flex-wrap:wrap}
.season-top{display:flex;flex-direction:column;gap:6px}
.me-place{margin-bottom:12px}
.standings{display:flex;flex-direction:column;gap:6px}
.st-row{display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);color:var(--text);text-decoration:none;transition:border-color .15s}
.st-row:hover{border-color:var(--line)} .st-row.mine{border-color:var(--brass)}
.st-row.p1{background:linear-gradient(90deg,color-mix(in srgb,#E0A83F 22%,var(--surface)),var(--surface) 70%)}
.st-row.p2{background:linear-gradient(90deg,color-mix(in srgb,#B8C0CC 18%,var(--surface)),var(--surface) 70%)}
.st-row.p3{background:linear-gradient(90deg,color-mix(in srgb,#C0805A 20%,var(--surface)),var(--surface) 70%)}
.st-place{width:36px;text-align:center;font-weight:600;font-size:18px;color:var(--muted);flex:none}
.st-name{flex:1;min-width:0;display:flex;flex-direction:column} .st-name b{font-weight:500}
.st-br{font-size:12px;color:var(--dim)}
.st-val{font-family:var(--sans);font-weight:600;white-space:nowrap}
.sz-now{margin-top:8px;font-size:14px} .sz-h{margin-top:8px;font-size:13.5px;gap:10px}

/* ═════════ мессенджер (раскладка как в Telegram) ═════════ */

  

.tick{width:15px;height:11px;stroke:var(--dim);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tick.two{width:19px}

 

 
 

 

 

 
 

 

 

 

 

 
 

/* заметные кнопки: заявка и тикет */
.qa{display:flex;gap:8px;align-items:center}
.cta-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-bottom:22px}
.cta{display:flex;align-items:center;gap:16px;padding:16px 20px;border-left:3px solid var(--brass)}
.cta.go{border-left-color:var(--moss)} .cta.warn{border-left-color:var(--clay)} .cta.info{border-left-color:var(--sky)} .cta.help{border-left-color:var(--sky)}
.cta-t{flex:1;min-width:0} .cta-t h3{margin:0 0 4px;font-size:21px} .cta-t p{margin:0;font-size:13.5px;color:var(--muted)}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-help{display:inline-block;margin-top:16px;font-size:13.5px;color:var(--muted)} .hero-help:hover{color:var(--brass)}
@media (max-width:520px){.qa .btn{padding:5px 8px;font-size:12.5px}.cta{flex-direction:column;align-items:stretch}}

/* ───── профиль: календарь, анкета, друзья, отзывы, 3D, стена ───── */
.pf-role{font-style:italic;color:rgba(255,255,255,.85);font-size:13px}
.pf-soc{margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.8)}
.pf-lock{display:flex;flex-direction:column;align-items:center;gap:6px;padding:48px 20px;margin-top:16px;text-align:center}
.pf-lockico{font-size:44px}
.pf-actions .btn.on{border-color:var(--pa);background:color-mix(in srgb,var(--pa) 25%,transparent)}
.cal-wrap{overflow-x:auto;padding-bottom:4px}
.cal-months{display:flex;gap:3px;font:500 10.5px var(--mono);color:var(--dim);height:14px;text-transform:uppercase;min-width:max-content}
.cal-months span{width:12px;overflow:visible;white-space:nowrap}
.cal-grid{display:flex;gap:3px;min-width:max-content}
.cal-col{display:flex;flex-direction:column;gap:3px}
.cal-c{display:block;width:12px;height:12px;border-radius:2px;background:var(--raise);border:1px solid var(--line-soft)}
.cal-c.off{background:none;border-color:transparent}
.cal-c.l1{background:color-mix(in srgb,var(--pa,var(--brass)) 28%,var(--raise));border-color:transparent}
.cal-c.l2{background:color-mix(in srgb,var(--pa,var(--brass)) 50%,var(--raise));border-color:transparent}
.cal-c.l3{background:color-mix(in srgb,var(--pa,var(--brass)) 75%,var(--raise));border-color:transparent}
.cal-c.l4{background:var(--pa,var(--brass));border-color:transparent}
.cal-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:13.5px}
.cal-legend{display:inline-flex;align-items:center;gap:4px}
.skin3d-box{position:relative;display:grid;place-items:center;min-height:330px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--pa,var(--brass)) 14%,var(--bg)),var(--bg));border:1px solid var(--line-soft);border-radius:var(--r)}
.skin3d-msg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px}
#sk-canvas{max-width:100%;cursor:grab}
.char-top{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.char-portrait{position:relative;width:200px;height:260px;flex:none;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--bg);box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--gilt)}
.char-portrait img{width:100%;height:100%;object-fit:cover}
.char-ph{height:100%;display:grid;place-items:center;font-size:64px;opacity:.5}
.char-pend{position:absolute;left:6px;bottom:6px;font:500 10.5px var(--mono);text-transform:uppercase;background:rgba(0,0,0,.7);color:var(--brass);padding:2px 8px;border-radius:2px}
.char-info{flex:1;min-width:220px} .char-info h2{font-size:38px;margin:6px 0 8px;line-height:1}
.char-meta{display:flex;gap:6px;flex-wrap:wrap}
.char-story{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:15.5px;line-height:1.6;white-space:normal}
.char-builds{margin-top:18px}
.chip.rv.pos{border-color:var(--moss);color:var(--moss)} .chip.rv.neg{border-color:var(--clay);color:var(--clay)}
.wall-item.pinned{border-color:color-mix(in srgb,var(--brass) 55%,transparent);background:color-mix(in srgb,var(--brass) 6%,var(--surface))}
.wall-pin{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--brass);margin-bottom:4px}
.wall-reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;align-items:center}
.wall-reacts>button,.wr-add>button{border:1px solid var(--line);background:var(--raise);border-radius:12px;padding:1px 9px;font-size:14px;display:inline-flex;gap:4px;align-items:center}
.wall-reacts>button span{font-size:12px;color:var(--muted)} .wall-reacts>button.mine{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 20%,var(--raise))}
.wr-add{position:relative} .wr-add>button{color:var(--muted)}
.wr-pop{position:absolute;left:0;top:30px;z-index:10;display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.wr-pop[hidden]{display:none} .wr-pop button{font-size:19px;width:32px;height:32px;border-radius:6px} .wr-pop button:hover{background:var(--raise)}
.gift-banner{display:flex;align-items:center;gap:12px;margin-top:12px;border-left:3px solid var(--brass)}
.gcard{display:block;color:var(--text);text-decoration:none;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-soft);background:var(--surface)}
.gcard-img{height:130px;background-size:cover;background-position:center}.gcard-body{padding:10px 12px}

/* ═══════════════ города: баннеры, карта, дипломатия ═══════════════ */
.town-hero{position:relative;border-radius:var(--r2);overflow:hidden;border:1px solid var(--line);min-height:170px;display:flex;align-items:flex-end}
.town-hero-bg{position:absolute;inset:0}
.town-hero-bg svg{width:100%;height:100%}
.town-hero-in{position:relative;padding:22px 24px;width:100%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));color:#fff}
.town-hero-in h1{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.town-hero-in .dim{color:rgba(255,255,255,.78)}
.town-hero-in .tag{background:rgba(0,0,0,.35);color:#fff;border-color:rgba(255,255,255,.35)}
.town-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.town-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;transition:transform .18s var(--ease),border-color .18s}
.town-card:hover{transform:translateY(-2px);border-color:var(--line)}
.tc-ban{position:relative;cursor:var(--cur-leaf-hot);height:110px;overflow:hidden}
.tc-ban svg{width:100%;height:100%}
.tc-tag{position:absolute;left:12px;bottom:10px;background:rgba(0,0,0,.45);color:#fff;border-color:rgba(255,255,255,.3)}
.tc-body{padding:14px 16px 16px}
.tcrest{box-shadow:0 0 0 1px rgba(255,255,255,.12)}

.mapwrap{position:relative;height:66vh;min-height:380px;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:
  radial-gradient(1200px 600px at 30% 20%,color-mix(in srgb,var(--sky) 10%,transparent),transparent),var(--surface);cursor:var(--cur-leaf);touch-action:none;user-select:none}
.mapwrap.drag{cursor:grabbing}
.mapwrap svg{display:block}
.mgrid{stroke:var(--line);stroke-width:1;opacity:.55}
.mgrid.axis{stroke:var(--brass);opacity:.5;stroke-width:1.5}
.mgl{fill:var(--dim);font:10px var(--mono,monospace)}
.mspawn{fill:var(--brass)}
.mk{cursor:var(--cur-leaf-hot);outline:none}
.mk:hover,.mk:focus-visible{filter:drop-shadow(0 0 6px var(--brass))}
.mklabel{fill:var(--text);font:600 12px Onest,sans-serif;paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.rel-ally{stroke:var(--moss);stroke-width:3;opacity:.85}
.rel-war{stroke:var(--clay);stroke-width:3;stroke-dasharray:10 7;animation:warflow 1s linear infinite}
@keyframes warflow{to{stroke-dashoffset:-17}}
.rel-lab{fill:var(--clay);font:700 13px var(--mono,monospace);paint-order:stroke;stroke:var(--surface);stroke-width:4px}
.cmp-bg{fill:var(--raise);stroke:var(--line)}
.cmp-n{fill:var(--clay)}
.mapctl{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px}
.mapctl .iconbtn{width:34px;height:34px;font-size:18px;background:var(--surface);border:1px solid var(--line)}
.mapcoord{position:absolute;left:12px;bottom:10px;font:12px var(--mono,monospace);color:var(--muted);background:color-mix(in srgb,var(--surface) 85%,transparent);padding:3px 8px;border-radius:6px}
.maptip{position:absolute;pointer-events:none;background:var(--raise);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.35);min-width:180px}

.rel-list{display:grid;gap:12px}
.rel-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:14px;display:grid;gap:12px}
.rel-card.war{border-color:color-mix(in srgb,var(--clay) 45%,var(--line-soft))}
.rel-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.rel-mid{text-align:center;min-width:110px}
.rel-mid b{font-size:26px;display:block}
.rel-side{display:block;text-decoration:none;color:inherit;border-radius:var(--r);overflow:hidden;border:2px solid transparent;background:var(--raise)}
.rel-side.win{border-color:var(--brass)}
.rel-ban{height:88px;overflow:hidden}.rel-ban svg{width:100%;height:100%}
.rel-name{padding:8px 10px 0;font-weight:600}
.rel-score{font:700 28px var(--mono,monospace);padding:0 10px 8px}
.rel-info{display:grid;gap:2px;font-size:14px}
@media(max-width:640px){.rel-vs{grid-template-columns:1fr}.rel-mid{min-width:0}.mapwrap{height:58vh}}

/* ═══════════════ панель модерации ═══════════════ */
.mod-grid{display:grid;grid-template-columns:330px 1fr;gap:18px;align-items:start}
.mod-side{position:sticky;top:0;max-height:calc(100vh - 110px);overflow:auto}
.mod-main{min-width:0}
.mod-p.sel{background:var(--raise);outline:1px solid var(--brass)}
.mod-rep{align-items:flex-start}
.mod-head h2{margin:0}
.slots{display:grid;grid-template-columns:repeat(9,44px);gap:3px;width:max-content;max-width:100%}
.slots.hotbar{margin-top:10px;padding-top:10px;border-top:2px solid var(--line)}
.inv-row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.inv-armor{display:grid;gap:3px}
.slot-gap{height:12px}
.slot{width:44px;height:44px;background:var(--raise);border:1px solid var(--line);border-radius:4px;position:relative;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.slot img{width:32px;height:32px;image-rendering:pixelated}
.slot i{display:grid;place-items:center;width:32px;height:32px;font:700 11px var(--mono,monospace);font-style:normal;color:#fff;border-radius:3px}
.slot.ench{box-shadow:inset 0 0 8px rgba(160,100,255,.55)}
.slot .cnt{position:absolute;right:3px;bottom:1px;font:700 12px var(--mono,monospace);color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
@media(max-width:900px){.mod-grid{grid-template-columns:1fr}.mod-side{position:static;max-height:none}.slots{grid-template-columns:repeat(9,minmax(0,1fr))}.slot{width:auto;aspect-ratio:1;height:auto}}
.town-pv svg{width:100%;height:auto;aspect-ratio:400/160}
.modal input[type=color]{width:54px;height:32px;padding:2px;background:var(--raise);border:1px solid var(--line);border-radius:6px;cursor:var(--cur-leaf-hot);vertical-align:middle}
.modal input[type=range]{padding:0}

/* ═══════════════ полировка оформления: единые детали по всему сайту ═══════════════ */
::selection{background:color-mix(in srgb,var(--brass) 38%,transparent);color:var(--text)}
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--brass) 35%,var(--line)) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--brass) 30%,var(--line));border-radius:10px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--brass) 55%,var(--line));background-clip:padding-box;border:2px solid transparent}

/* фокус с клавиатуры — заметный и красивый */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:var(--r)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brass);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brass) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.03)}

/* кнопки: плавное нажатие и свечение */
.btn,.iconbtn{transition:border-color .15s var(--ease),background .15s var(--ease),transform .12s var(--ease),box-shadow .2s var(--ease),filter .15s}
.btn:active:not(:disabled),.iconbtn:active:not(:disabled){transform:translateY(1px) scale(.985);filter:brightness(.95)}
.btn.good:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--moss) 40%,transparent),0 4px 14px color-mix(in srgb,var(--moss) 18%,transparent)}
.btn.bad:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--clay) 40%,transparent),0 4px 14px color-mix(in srgb,var(--clay) 18%,transparent)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.iconbtn:hover{border-color:var(--brass);color:var(--brass)}

/* вход страниц и каскадное появление строк */
.view-enter{animation:fadeUp .38s var(--ease) both}
.list>*,.town-grid>*,.rel-list>*,.shop-grid>*,.award-grid>*{animation:fadeUp .42s var(--ease) both}
.list>*:nth-child(2),.town-grid>*:nth-child(2),.rel-list>*:nth-child(2),.shop-grid>*:nth-child(2),.award-grid>*:nth-child(2){animation-delay:.04s}
.list>*:nth-child(3),.town-grid>*:nth-child(3),.rel-list>*:nth-child(3),.shop-grid>*:nth-child(3),.award-grid>*:nth-child(3){animation-delay:.08s}
.list>*:nth-child(4),.town-grid>*:nth-child(4),.rel-list>*:nth-child(4),.shop-grid>*:nth-child(4),.award-grid>*:nth-child(4){animation-delay:.12s}
.list>*:nth-child(5),.town-grid>*:nth-child(5),.rel-list>*:nth-child(5),.shop-grid>*:nth-child(5),.award-grid>*:nth-child(5){animation-delay:.16s}
.list>*:nth-child(n+6),.town-grid>*:nth-child(n+6),.shop-grid>*:nth-child(n+6),.award-grid>*:nth-child(n+6){animation-delay:.2s}

/* строки списков: живой отклик */
.list>.town,.list>.entry,.list>.set{transition:background .15s var(--ease),transform .15s var(--ease)}
.list>.town:hover,.list>.entry:hover{background:color-mix(in srgb,var(--raise) 70%,transparent)}
.town-card,.shop-card,.award-card,.gcard,.rel-card,.ach-card{transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
.town-card:hover,.gcard:hover,.rel-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(0,0,0,.55)}

/* модальные окна: выезд с размытием фона */
.scrim{animation:fadeIn .18s var(--ease) both;backdrop-filter:blur(5px) saturate(1.1)}
.modal{animation:popIn .26s cubic-bezier(.2,.9,.3,1.15) both}
.modal header{border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,color-mix(in srgb,var(--brass) 6%,transparent),transparent)}
.modal footer{border-top:1px solid var(--line-soft)}

/* уведомления: значок по типу */
.toast{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:start;backdrop-filter:blur(8px);animation:toastIn .3s cubic-bezier(.2,.9,.3,1.15) both}
.toast::before{content:"✦";grid-row:1/3;font-size:15px;line-height:1.5;color:var(--brass)}
.toast.bad::before{content:"✕";color:var(--clay)}
.toast.bot::before{content:"✉";color:var(--sky)}
.toast.mc::before{content:"⛏";color:var(--moss)}
.toast b{grid-column:2}

/* заголовки разделов с золотой чертой */
.view-enter>h3,.wrap>div>h3,.wrap>.view-enter h3{display:flex;align-items:center;gap:12px}
.view-enter>h3::after,.wrap>div>h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

/* пустые состояния */
.empty{position:relative;border:1px dashed var(--line);border-radius:var(--r2);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.empty::before{content:"✦";display:block;font-size:22px;color:var(--brass);opacity:.6;margin-bottom:8px}
.list>.empty{border:none;background:none}

/* скелетон: мягче и плавнее */
.skel-bar{background:linear-gradient(90deg,var(--raise) 25%,color-mix(in srgb,var(--brass) 10%,var(--line)) 50%,var(--raise) 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}

/* значки и метки: мягкие углы и пульс у «в сети» */
.tag.ok .dot{animation:pfpulse 2s infinite}
.chip,.tag{backdrop-filter:blur(2px)}
.rank-chip{border-radius:2px}

/* боковая панель и верхняя строка */
.nav button{transition:background .18s var(--ease),color .18s var(--ease),padding-left .18s var(--ease)}
.nav button:hover:not([aria-current=true]){padding-left:calc(var(--nav-pad,0px) + 4px);background:color-mix(in srgb,var(--raise) 55%,transparent)}
.rail{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--brass)),var(--surface))}
.topbar h2{background:linear-gradient(180deg,var(--text),color-mix(in srgb,var(--text) 70%,var(--brass)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* числа и «стат»-плитки */
.stats .stat,.profile-stat,.shop-stat{transition:background .2s}
.stats .stat:hover{background:color-mix(in srgb,var(--raise) 80%,transparent)}

/* аватары */
.av{transition:transform .2s var(--ease),box-shadow .2s}
a:hover>.av,.town:hover .av{transform:scale(1.06)}

/* переключатели */
.sw i{transition:background .2s var(--ease),border-color .2s}
.sw i::after{transition:transform .22s cubic-bezier(.3,1.4,.5,1),background .2s}

/* карточка текста: аккуратные цитаты, ссылки, код */
a{text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--brass2)}
code{background:var(--raise);border:1px solid var(--line-soft);border-radius:4px;padding:1px 6px;font-family:var(--mono);font-size:.9em}
blockquote{margin:8px 0;padding:6px 14px;border-left:3px solid var(--brass);background:color-mix(in srgb,var(--raise) 60%,transparent);border-radius:0 var(--r) var(--r) 0}
hr,.hr{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* телефон: крупнее зоны нажатия */
@media (max-width:640px){
  .btn.sm{padding:8px 12px}
  .iconbtn{min-width:38px;min-height:38px}
  .modal{border-radius:var(--r2) var(--r2) 0 0}
  .scrim{align-items:end}
}

/* пользователи, которым не нужна анимация */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rel-war{animation:none}
}

:root{--cur-leaf:auto;--cur-leaf-hot:pointer}

/* ═══════════════ премиальный мессенджер и мобильное приложение ═══════════════ */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
a,button,[role=button],input,select,textarea,label,summary{touch-action:manipulation}
.main,.modal{overscroll-behavior:contain}
@supports (height:100dvh){html,body,#root{height:100dvh}}

/* форматирование текста */

/* голосовое сообщение */

/* файл */

/* карточка ссылки */

/* закреплённое сообщение */

/* папки чатов */

/* поле ввода: микрофон и запись */

.rec-dot{width:11px;height:11px;border-radius:50%;background:var(--clay);animation:recpulse 1s infinite}
@keyframes recpulse{50%{opacity:.25;transform:scale(.8)}}
.rec-t{font:600 14px var(--mono);min-width:42px}
.rec-wave{flex:1;display:flex;align-items:center;gap:2px;height:32px;overflow:hidden;justify-content:flex-end}
.rec-wave i{width:3px;flex:none;border-radius:2px;background:var(--brass)}

/* push, установка */
.push-promo,.installbar{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:8px 12px;border-radius:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brass) 16%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--brass) 40%,transparent)}
.push-promo .t,.installbar .t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.push-promo .t b,.installbar .t b{font-size:14px}.push-promo .t span,.installbar .t span{font-size:12.5px;color:var(--muted)}
.push-ico{font-size:22px}
.installbar{position:fixed;left:10px;right:10px;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:60;box-shadow:0 12px 32px rgba(0,0,0,.5);margin:0;animation:fadeUp .3s var(--ease) both}
.push-state{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--raise)}
.push-state.on{border-color:color-mix(in srgb,var(--moss) 55%,transparent);background:color-mix(in srgb,var(--moss) 9%,var(--raise))}
.push-state .push-ico{font-size:28px}
.push-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--line-soft);cursor:var(--cur-leaf-hot)}
.push-row span{flex:1;display:flex;flex-direction:column}.push-row i{font-style:normal;font-size:12.5px;color:var(--dim)}
.push-row input{width:auto!important;transform:scale(1.25)}
.install-hero{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.install-steps{margin:0;padding-left:20px;display:grid;gap:10px;line-height:1.5}
.kbd{display:inline-block;padding:0 7px;border:1px solid var(--line);border-radius:6px;background:var(--raise);font:12px var(--mono)}

/* нижняя панель для телефона */
.tabbar{display:none}
@media (max-width:820px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--surface) 92%,transparent);
    backdrop-filter:blur(14px) saturate(1.2);border-top:1px solid var(--line)}
  .tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;background:none;border:none;color:var(--dim);font:500 10.5px var(--mono);letter-spacing:.03em;text-transform:uppercase;border-radius:12px}
  .tabbar button svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform .18s var(--ease)}
  .tabbar button.on{color:var(--brass)}.tabbar button.on svg{transform:translateY(-1px) scale(1.08)}
  .tabbar button:active{background:var(--raise)}
  .tb-badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--clay);color:#fff;font:700 10px var(--mono);font-style:normal;display:grid;place-items:center}
  .main{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  
  .app,.main{height:var(--vvh,100dvh)}
  
  
  input,textarea,select{font-size:16px!important}
  .topbar{padding-left:14px;padding-right:14px}
  
  
  .toasts{bottom:calc(76px + env(safe-area-inset-bottom,0px));left:10px;right:10px}
  .toast{max-width:none}
  .modal{max-height:92dvh}
  
}
/* установленное приложение: убираем лишнее и учитываем «чёлку» */
@media (display-mode: standalone){
  body{overscroll-behavior:none;-webkit-user-select:none;user-select:none}
  input,textarea,code{-webkit-user-select:text;user-select:text}
}

/* мобильная шапка и список чатов не должны вылезать за экран */

@media (max-width:520px){
  #themebtn{display:none}
  .topbar{gap:8px}
  .topbar h2{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
  .topbar .sub{display:none}
  .qa .btn{padding:6px 9px;font-size:12.5px;white-space:nowrap}
  
}

/* ═══════════════ звонки ═══════════════ */
.call{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;overflow:hidden;color:#fff;
  background:radial-gradient(1000px 700px at 50% 30%,#1c2a3a 0%,#0c121b 60%,#06090e 100%);animation:callIn .35s var(--ease) both}
.call.closing{animation:callOut .25s var(--ease) both}
@keyframes callIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes callOut{to{opacity:0;transform:scale(.97)}}
.call>video#call-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity .3s}
.call.has-remote-video>video#call-remote{opacity:1}
.call-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 28%,transparent 62%,rgba(0,0,0,.72))}
.call-top{position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 8px}
.call-stat{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.call-stat b{font:600 20px var(--display,Georgia,serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.call-stat span{font:500 13.5px var(--mono,monospace);letter-spacing:.04em;color:rgba(255,255,255,.75)}
.call-roundsm{width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);display:grid;place-items:center}
.call-roundsm svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.call-q{margin-left:auto;width:12px;height:12px;border-radius:50%;background:var(--moss);box-shadow:0 0 0 3px rgba(79,174,124,.25)}
.call-q.mid{background:var(--brass);box-shadow:0 0 0 3px rgba(224,168,63,.25)}.call-q.bad{background:var(--clay);box-shadow:0 0 0 3px rgba(208,107,102,.3)}
.call-center{position:relative;z-index:1;flex:1;display:grid;place-items:center;transition:opacity .3s}
.call.has-remote-video .call-center{opacity:0;pointer-events:none}
.call-av{position:relative;width:132px;height:132px;border-radius:32px;display:grid;place-items:center}
.call-av .av{width:132px!important;height:132px!important;border-radius:32px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.call:not(.active) .call-av::before,.call:not(.active) .call-av::after{content:"";position:absolute;inset:-14px;border-radius:44px;border:2px solid rgba(224,168,63,.5);animation:callRing 2.2s ease-out infinite}
.call:not(.active) .call-av::after{animation-delay:1.1s}
@keyframes callRing{from{transform:scale(.9);opacity:.8}to{transform:scale(1.5);opacity:0}}
video#call-local{position:absolute;z-index:3;right:14px;bottom:calc(150px + env(safe-area-inset-bottom,0px));width:104px;height:150px;object-fit:cover;border-radius:16px;
  background:#000;border:2px solid rgba(255,255,255,.35);box-shadow:0 8px 24px rgba(0,0,0,.5);transform:scaleX(-1);display:none}
.call.has-local-video video#call-local{display:block}
.call-ctl{position:relative;z-index:3;display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding:14px 16px calc(26px + env(safe-area-inset-bottom,0px))}
.call-btn{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;color:#fff;width:76px}
.call-btn span{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);transition:transform .15s var(--ease),background .2s}
.call-btn:active span{transform:scale(.92)}
.call-btn svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.call-btn i{font:500 11.5px var(--mono,monospace);font-style:normal;letter-spacing:.02em;color:rgba(255,255,255,.85);text-align:center}
.call-btn.on span{background:#fff}.call-btn.on svg{stroke:#10161d}
.call-btn.bad span{background:#d8454d}.call-btn.good span{background:#2fb872}.call-btn.soft span{background:rgba(255,255,255,.22)}
.call-btn.good span{animation:callPulse 1.4s ease-in-out infinite}
@keyframes callPulse{50%{box-shadow:0 0 0 12px rgba(47,184,114,.0);transform:scale(1.06)}0%,100%{box-shadow:0 0 0 0 rgba(47,184,114,.55)}}
.call.incoming .call-ctl{gap:26px}
/* свёрнутый звонок: плашка в углу */
.call.mini{inset:auto 12px calc(80px + env(safe-area-inset-bottom,0px)) auto;width:196px;height:122px;border-radius:18px;box-shadow:0 16px 40px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);cursor:var(--cur-leaf-hot);animation:none}
.call.mini .call-top{padding:8px 8px 0}.call.mini .call-stat b{font-size:14px}.call.mini .call-stat span{font-size:11px}.call.mini .call-roundsm,.call.mini video#call-local,.call.mini .call-q{display:none}
.call.mini .call-center{transform:scale(.45);margin-top:-18px}
.call.mini .call-ctl{position:absolute;inset:auto 0 6px 0;padding:0;gap:6px}
.call.mini .call-btn{width:auto}.call.mini .call-btn i{display:none}.call.mini .call-btn span{width:34px;height:34px}.call.mini .call-btn svg{width:16px;height:16px}
.call.mini .call-btn:not(.bad){display:none}

/* запись о звонке в чате */

@media (max-width:520px){.call-btn{width:68px}.call-btn span{width:56px;height:56px}video#call-local{width:88px;height:128px}}

/* ═══════════════ мессенджер: дизайн v2 ═══════════════ */
/* список чатов */

/* шапка чата */

/* переписка */

@keyframes tgpop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}

/* картинка без текста: время поверх снимка */

/* реакции «прилипают» к пузырю */

/* ответ и пересылка */

/* запись о звонке: компактная */

/* поле ввода — парящая «таблетка» */

/* меню и реакции */

/* разделители и кнопка «вниз» */

/* пустой чат */

/* ═══════════════ профиль: кнопки, статистика ═══════════════ */
.pf-actions{gap:12px 14px;margin-top:20px;align-items:center}
.pf-grp{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:13px;font:500 14px Onest,sans-serif;letter-spacing:0;text-transform:none;
  background:rgba(10,12,14,.48);border:1px solid rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(10px);transition:background .15s,border-color .15s,transform .12s,box-shadow .2s}
.pf-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pf-btn.ic{width:40px;padding:0}
.pf-btn:hover{background:rgba(10,12,14,.7);border-color:var(--pa,var(--brass));transform:translateY(-1px)}
.pf-btn:active{transform:scale(.97)}
.pf-btn.primary{background:linear-gradient(180deg,var(--brass2),var(--brass));border-color:transparent;color:#1b1406;font-weight:700;box-shadow:0 6px 18px -6px color-mix(in srgb,var(--brass) 70%,transparent)}
.pf-btn.primary:hover{filter:brightness(1.07)}
.pf-btn.on{background:color-mix(in srgb,var(--pa,var(--brass)) 32%,rgba(10,12,14,.55));border-color:var(--pa,var(--brass))}
.pf-grp.g-rep{gap:2px;padding:3px;border-radius:15px;background:rgba(10,12,14,.48);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px)}
.pf-grp.g-rep .pf-btn{height:32px;padding:0 12px;border:none;background:none;border-radius:11px;backdrop-filter:none;gap:6px}
.pf-grp.g-rep .pf-btn:hover{background:rgba(255,255,255,.12);transform:none}
.pf-grp.g-rep .pf-btn.on{background:var(--pa,var(--brass));color:#1b1406}
.pf-grp.g-rep .pf-btn svg{width:15px;height:15px}
.pf-grp.g-rep .pf-btn span{font:600 13px var(--mono,monospace)}
.pf-grp.g-extra{margin-left:auto}

/* плитки статистики */
.profile-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line-soft);overflow:hidden}
.profile-stat{background:var(--surface);border:none!important;min-width:0;padding:15px 17px}
.profile-stat b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-stat svg{width:22px;height:22px;padding:4px;border-radius:9px;background:color-mix(in srgb,var(--brass) 14%,transparent);stroke-width:1.7;box-sizing:content-box}

/* шапка: больше воздуха */
.pf-cover{padding-bottom:22px}
.pf-head{margin-bottom:2px}
.pf-xp{margin-top:14px}

@media (max-width:640px){
  .pf-actions{gap:10px}
  .pf-grp.g-main{flex:1 1 100%}
  .pf-grp.g-main .pf-btn.primary{flex:1}
  .pf-grp.g-social{flex:1 1 100%}
  .pf-grp.g-social .pf-btn{flex:1;padding:0 10px}
  .pf-grp.g-extra{margin-left:0}
  .pf-head{gap:14px}
  .pf-id h1{font-size:30px}
}

.profile-stats{gap:0;background:var(--surface)}
.profile-stat{box-shadow:inset -1px -1px 0 var(--line-soft)}

@media (max-width:640px){
  .profile-stats{grid-template-columns:repeat(2,1fr)}
  .profile-stat{padding:12px 12px;gap:9px}
  .profile-stat b{font-size:14.5px}
  .profile-stat svg{width:18px;height:18px}
}

/* ═══════════════ группы в мессенджере ═══════════════ */

/* ═══════════════ PIN-блокировка ═══════════════ */
.pin-on{overflow:hidden}
.pin-lock{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;
  background:radial-gradient(900px 600px at 50% 0%,color-mix(in srgb,var(--brass) 14%,var(--bg)),var(--bg) 70%);animation:fadeIn .18s var(--ease) both}
.pin-card{width:min(340px,100%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.pin-card .mark{transform:scale(1.5);margin:8px 0 14px}
.pin-card h2{margin:0;font-size:24px;letter-spacing:.04em}
.pin-who{margin:0 0 14px;color:var(--dim);font-size:14.5px}
.pin-dots{display:flex;gap:14px;justify-content:center;margin:6px 0 8px}
.pin-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);transition:background .12s,border-color .12s,transform .12s}
.pin-dots i.on{background:var(--brass);border-color:var(--brass);transform:scale(1.15)}
.pin-dots.shake{animation:pinShake .38s}
@keyframes pinShake{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.pin-msg{min-height:20px;font-size:13.5px;color:var(--dim)}
.pin-msg.bad{color:var(--clay)}
.pin-pad{display:grid;grid-template-columns:repeat(3,72px);gap:14px;margin:10px 0 14px;justify-content:center}
.pin-key{height:72px;width:72px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 90%,transparent);
  font:500 26px Onest,sans-serif;display:grid;place-items:center;transition:background .1s,transform .08s,border-color .1s}
.pin-key:hover{border-color:var(--brass)}
.pin-key:active{background:color-mix(in srgb,var(--brass) 24%,var(--raise));transform:scale(.94)}
.pin-key.del{font-size:22px;color:var(--dim)}
.pin-out{background:none;border:none;color:var(--dim);font-size:13.5px;padding:8px 12px;text-decoration:underline;text-underline-offset:3px}
.pin-out:hover{color:var(--text)}
@media (max-height:640px){.pin-card .mark{display:none}.pin-pad{gap:8px}.pin-key{height:58px;width:58px;font-size:22px}.pin-pad{grid-template-columns:repeat(3,58px)}}

/* код безопасности звонка */
.call-sec{position:absolute;top:58px;left:50%;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:16px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:13px;backdrop-filter:blur(6px)}
.call-sec:hover{background:rgba(0,0,0,.5)}
.call-sec .sym{letter-spacing:.12em}
.call.mini .call-sec{display:none}
.call-sec-big{font-size:34px;text-align:center;letter-spacing:.2em;padding:14px;border-radius:14px;background:var(--raise);border:1px solid var(--line)}

/* секретные чаты */

/* ═══════════════ оформление профиля (js/pfstyle.js) ═══════════════ */
.pf-themed{position:relative;font-family:var(--pf-font,inherit);max-width:var(--pf-width,1100px);margin-inline:auto}
.pf-themed h1,.pf-themed h2,.pf-themed h3,.pf-themed .pf-name,.pf-themed .pf-card>b,.pf-themed .pf-music .pm-title{font-family:var(--pf-head,var(--pf-font,var(--display)))}
.pf-themed .panel,.pf-themed .profile-stat{backdrop-filter:blur(var(--pf-blur,0px));-webkit-backdrop-filter:blur(var(--pf-blur,0px));border-radius:var(--pf-radius,14px);border-width:var(--pf-bw,1px);box-shadow:var(--pf-shadow,none)}
.pf-themed .pf-cover{min-height:var(--pf-cover-h,236px);border-radius:var(--pf-radius,14px);border-width:var(--pf-bw,1px)}
.pf-themed .btn:not(.primary){border-radius:calc(var(--pf-radius,14px) * .7)}
.pf-covervid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pf-themed .pf-head .av{width:var(--pf-av,96px);height:var(--pf-av,96px);object-fit:cover;flex:none}
.pf-themed.shape-circle .pf-head .av{border-radius:50%}
.pf-themed.shape-rounded .pf-head .av{border-radius:22%}
.pf-themed.shape-square .pf-head .av{border-radius:6px}
.pf-themed.shape-hex .pf-head .av{border-radius:0;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}
.pf-glowy .pf-head .av{box-shadow:0 0 calc(var(--pf-glow) * 40px) calc(var(--pf-glow) * 6px) color-mix(in srgb,var(--pf-accent2) 70%,transparent)}
.pf-glowy .pf-name{text-shadow:0 0 calc(var(--pf-glow) * 22px) var(--pf-accent2)}
.pf-grad-name .pf-name,.pf-grad-name .pf-name .nm{background:linear-gradient(90deg,var(--brass),var(--pf-accent2));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.pf-center .pf-head{flex-direction:column;align-items:center;text-align:center;width:100%}
.pf-center .pf-cover{justify-content:center}
.pf-center .pf-meta,.pf-center .pf-pins{justify-content:center}
.pf-center .pf-actions{justify-content:center;width:100%}
.pf-center .pf-id{align-items:center;display:flex;flex-direction:column}

.pf-blocks{display:block}
.pf-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--pf-gap,14px);align-items:start;margin-bottom:var(--pf-gap,14px)}
.pf-col{display:flex;flex-direction:column;gap:var(--pf-gap,14px);min-width:0}
.pf-full{margin-bottom:var(--pf-gap,14px)}
.pf-blocks .pf-card,.pf-blocks .pf-xp{margin:0}
.pf-blocks .profile-stats{margin:0}
.pf-mode-bio #tab{margin-top:var(--pf-gap,14px)}
.pf-mode-bio #pf-top{margin-top:var(--pf-gap,14px)}
.pf-wallblock{background:var(--surface);border:var(--pf-bw,1px) solid var(--line-soft);border-radius:var(--pf-radius,14px);padding:16px 18px;backdrop-filter:blur(var(--pf-blur,0px))}
.pf-wallhead{margin-bottom:10px;font-size:16px}
.pf-ach-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pf-ach{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--raise);border:1px solid var(--line)}
.pf-ach svg{width:20px;height:20px;stroke:var(--brass);fill:none;stroke-width:1.7}
.pf-links{display:grid;grid-template-columns:1fr;gap:10px;margin:0}
.pf-link{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:calc(var(--pf-radius,14px) * .8);background:var(--raise);border:1px solid var(--line);text-decoration:none;font-weight:600;transition:transform .15s,border-color .15s,background .15s}
.pf-link:hover{transform:translateY(-2px);border-color:var(--brass);background:color-mix(in srgb,var(--brass) 14%,var(--raise))}
.pf-link i{font-style:normal;opacity:.6}
@media (max-width:820px){
  .pf-cols{display:flex;flex-direction:column;gap:var(--pf-gap,14px)}
  .pf-col{display:contents}
  .pf-col>*{order:var(--i,0)}
}

/* входное появление блоков */
@keyframes pfRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pfFade{from{opacity:0}to{opacity:1}}
@keyframes pfZoom{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.pf-ent-rise .pf-blocks [data-block],.pf-ent-rise .pf-cover{animation:pfRise .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
.pf-ent-fade .pf-blocks [data-block],.pf-ent-fade .pf-cover{animation:pfFade .8s ease both;animation-delay:calc(var(--i,0) * 60ms)}
.pf-ent-zoom .pf-blocks [data-block],.pf-ent-zoom .pf-cover{animation:pfZoom .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}

/* фон страницы */
.pf-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.pf-bg.in-preview{position:absolute;z-index:0}
.pf-bgmedia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.pf-bgdim,.pf-particles{position:absolute;inset:0;width:100%;height:100%}
.pf-cursor{position:fixed;inset:0;pointer-events:none;z-index:70}
html.pf-bg-on .main{background:transparent!important}
html.pf-bg-on .rail{background:color-mix(in srgb,var(--surface) 62%,transparent)!important;backdrop-filter:blur(14px)}
html.pf-bg-on .topbar{background:color-mix(in srgb,var(--bg) 40%,transparent)!important;backdrop-filter:blur(12px)}
html.pf-bg-on .tabbar{backdrop-filter:blur(14px)}
html.pf-immersive .rail,html.pf-immersive .topbar,html.pf-immersive .tabbar{display:none!important}
html.pf-immersive .app{grid-template-columns:1fr}
html.pf-immersive .pf-themed{padding-top:28px}
.pf-immersive-bar{position:fixed;top:12px;left:12px;z-index:30;display:none}
html.pf-immersive .pf-immersive-bar{display:flex;gap:8px}
.pf-immersive-bar button{height:38px;padding:0 14px;border-radius:19px;background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);font:500 13px Onest,sans-serif;cursor:pointer}
.pf-immersive-bar button:hover{background:rgba(0,0,0,.65)}

/* плавающие кнопки музыки и звука, заставка */
.pf-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;gap:8px}
.pf-fab.in-preview{position:absolute}
.pf-fab button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);cursor:pointer}
.pf-fab button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pf-fab button:hover{background:rgba(0,0,0,.75)}
.pf-fab .pulse,.pm-play.pulse{animation:pfPulse 1.4s infinite}
@keyframes pfPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brass) 70%,transparent)}100%{box-shadow:0 0 0 16px transparent}}
@media (max-width:820px){.pf-fab{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
.pf-gate{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;background:rgba(5,6,8,.82);backdrop-filter:blur(18px);color:#fff;font:600 22px Onest,sans-serif;letter-spacing:.04em;cursor:pointer;transition:opacity .4s}
.pf-gate span{animation:pfBlink 2.4s ease-in-out infinite}
.pf-gate.out{opacity:0;pointer-events:none}
@keyframes pfBlink{50%{opacity:.45}}

/* плеер профиля */
.pf-music{padding:14px 16px}
.pm-top{display:flex;align-items:center;gap:14px}
.pm-art{width:52px;height:52px;border-radius:calc(var(--pf-radius,14px) * .7);background:linear-gradient(135deg,var(--brass),var(--pf-accent2,var(--brass)));display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:12px 10px;flex:none}
.pm-art i{width:4px;height:30%;background:rgba(0,0,0,.55);border-radius:2px}
.pf-music.playing .pm-art i{animation:pmEq .9s ease-in-out infinite}
.pf-music.playing .pm-art i:nth-child(2){animation-delay:.2s}.pf-music.playing .pm-art i:nth-child(3){animation-delay:.4s}.pf-music.playing .pm-art i:nth-child(4){animation-delay:.1s}
@keyframes pmEq{0%,100%{height:25%}50%{height:100%}}
.pm-meta{min-width:0;flex:1;display:flex;flex-direction:column}
.pm-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.pm-artist{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-ctl{display:flex;align-items:center;gap:4px}
.pm-ctl button,.pm-vol{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--text);background:none;border:none;cursor:pointer}
.pm-ctl button:hover,.pm-vol:hover{background:var(--raise)}
.pm-ctl svg,.pm-vol svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.pm-ctl .pm-play{width:42px;height:42px;background:var(--brass);color:#1b1406}
.pm-ctl .pm-play:hover{filter:brightness(1.1);background:var(--brass)}
.pm-bar{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px}
.pm-seek{flex:1;min-width:0}.pm-vl{width:70px}
.pf-music input[type=range]{accent-color:var(--brass);height:4px}
.pm-list{margin-top:10px;display:flex;flex-direction:column;border-top:1px solid var(--line-soft);padding-top:6px}
.pm-list button{display:flex;gap:10px;align-items:center;text-align:left;padding:6px 4px;border-radius:8px;background:none;border:none;color:var(--muted);cursor:pointer;font:inherit;font-size:13.5px}
.pm-list button span{width:20px;text-align:right;opacity:.6}.pm-list button i{margin-left:auto;font-style:normal;font-size:12px}
.pm-list button:hover{background:var(--raise);color:var(--text)}.pm-list button.on{color:var(--brass);font-weight:600}

/* ═══════════════ редактор оформления (js/pfstudio.js) ═══════════════ */
#view.pfs-wide{max-width:none;padding:0}
.pfs{display:grid;grid-template-columns:400px minmax(0,1fr);height:calc(100vh - 78px);min-height:520px}
.pfs-tabs{display:none}
.pfs-side{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:var(--surface)}
.pfs-body{flex:1;overflow-y:auto;padding:10px 14px}
.pfs-foot{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:var(--surface)}
.pfs-view{position:relative;overflow:hidden;background:var(--bg);isolation:isolate}
.pfs-scroll{position:relative;z-index:1;height:100%;overflow-y:auto;padding:22px 26px 90px}
.pfs-sec{border:1px solid var(--line-soft);border-radius:14px;margin-bottom:10px;background:var(--raise)}
.pfs-sec summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none;font-size:14.5px}
.pfs-sec summary::-webkit-details-marker{display:none}
.pfs-sec summary::after{content:"›";margin-left:auto;transition:transform .2s;opacity:.6}
.pfs-sec[open] summary::after{transform:rotate(90deg)}
.pfs-sbody{padding:4px 14px 14px;display:flex;flex-direction:column;gap:12px}
.pfs-f>label{display:block;font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.pfs-f select,.pfs-f input[type=text],.pfs-sbody select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.pfs-hint{font-size:12.5px;margin-top:4px;line-height:1.4}
.pfs-sub{font-size:13.5px}
.pfs-sep{height:1px;background:var(--line-soft);margin:4px 0}
.pfs-range{display:flex;align-items:center;gap:10px}
.pfs-range input{flex:1;accent-color:var(--brass)}
.pfs-range output{min-width:54px;text-align:right;font:500 12.5px var(--mono);color:var(--dim)}
.pfs-color{display:flex;gap:8px;align-items:center}
.pfs-color input[type=color]{width:38px;height:34px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;flex:none}
.pfs-color input[type=text]{flex:1;font-family:var(--mono)}
.pfs-color button{width:30px;height:34px;border-radius:8px;border:1px solid var(--line);background:none;color:var(--dim);cursor:pointer}
.pfs-seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.pfs-seg button{flex:1;border:none;background:none;color:var(--muted);padding:7px 6px;border-radius:7px;font:inherit;font-size:13px;cursor:pointer}
.pfs-seg button.on{background:var(--brass);color:#1b1406;font-weight:600}
.pfs-tg{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.pfs-tg input{display:none}
.pfs-tg i{width:38px;height:22px;border-radius:11px;background:var(--line);position:relative;flex:none;transition:background .15s}
.pfs-tg i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.pfs-tg input:checked+i{background:var(--brass)}
.pfs-tg input:checked+i::after{transform:translateX(16px)}
.pfs-tg.sm i{width:32px;height:19px}.pfs-tg.sm i::after{width:13px;height:13px}.pfs-tg.sm input:checked+i::after{transform:translateX(13px)}
.pfs-presets{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.pfs-preset{height:62px;border-radius:12px;border:1px solid var(--line);display:flex;align-items:flex-end;gap:8px;padding:8px 10px;cursor:pointer;position:relative;overflow:hidden;transition:transform .15s,border-color .15s}
.pfs-preset:hover{transform:translateY(-2px);border-color:var(--brass)}
.pfs-preset i{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor}
.pfs-preset span{font:600 13px Onest,sans-serif;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.pfs-fontprev{padding:12px;border-radius:10px;background:var(--bg);border:1px solid var(--line-soft);font-size:17px}
.pfs-css{width:100%;min-height:200px;font:12.5px/1.45 var(--mono);background:#0a0b0d;color:#cde;border:1px solid var(--line);border-radius:10px;padding:10px;resize:vertical;tab-size:2}
.pfs-blocks{display:flex;flex-direction:column;gap:6px}
.pfs-brow{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--bg);border:1px solid var(--line-soft)}
.pfs-brow.off{opacity:.5}.pfs-brow.drag{opacity:.3}.pfs-brow.over{border-color:var(--brass);box-shadow:0 0 0 2px color-mix(in srgb,var(--brass) 30%,transparent)}
.pfs-brow .bt{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13.5px}
.pfs-brow .bt span{font-size:11.5px}
.pfs-brow button,.pfs-tbtn button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;font-size:12px}
.pfs-brow button:hover,.pfs-tbtn button:hover{border-color:var(--brass);color:var(--text)}
.pfs-grab{cursor:grab;color:var(--dim);width:18px;text-align:center;flex:none}
.pfs-tracks{display:flex;flex-direction:column;gap:8px}
.pfs-track{display:flex;gap:8px;align-items:center;padding:8px;border-radius:10px;background:var(--bg);border:1px solid var(--line-soft)}
.pfs-track>div:nth-child(2){flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.pfs-track input{background:none;border:none;border-bottom:1px solid var(--line-soft);padding:3px 2px;font:inherit;font-size:13.5px;width:100%}
.pfs-tbtn{display:flex;gap:4px}
.pfs-picker{display:flex;flex-direction:column}
.pfs-pgrid,.pfs-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;max-height:210px;overflow-y:auto}
.pfs-files{max-height:none}
.pfs-thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:2px solid transparent;background:var(--bg);cursor:pointer}
.pfs-thumb.sel{border-color:var(--brass)}
.pfs-thumb img,.pfs-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.pfs-aud{height:100%;display:grid;place-items:center;font-size:26px;background:linear-gradient(135deg,color-mix(in srgb,var(--brass) 35%,#000),#111)}
.pfs-tn{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 4px;font-size:11px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfs-thumb i{position:absolute;top:4px;left:4px;font:500 10.5px var(--mono);font-style:normal;background:rgba(0,0,0,.6);color:#fff;padding:1px 5px;border-radius:6px}
.pfs-del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(0,0,0,.65);color:#fff;cursor:pointer}
.pfs-del:hover{background:var(--clay,#d06b66)}
.pfs-prog{position:relative;height:22px;border-radius:8px;background:var(--bg);margin-top:8px;overflow:hidden}
.pfs-prog i{position:absolute;inset:0 auto 0 0;width:0;background:color-mix(in srgb,var(--brass) 55%,transparent);transition:width .2s}
.pfs-prog span{position:relative;font-size:12px;padding:0 8px;line-height:22px}
@media (max-width:980px){
  .pfs{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:calc(100vh - 140px)}
  .pfs-tabs{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
  .pfs-tabs button{flex:1;padding:8px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--muted);font:inherit;cursor:pointer}
  .pfs-tabs button[aria-current]{background:var(--brass);color:#1b1406;font-weight:600;border-color:transparent}
  .pfs[data-t=edit] .pfs-view{display:none}
  .pfs[data-t=view] .pfs-side{display:none}
  .pfs-scroll{padding:14px 12px 90px}
}

/* ═══════════════ групповые звонки (js/gcalls.js) ═══════════════ */
.gc{position:fixed;inset:0;z-index:290;display:flex;flex-direction:column;background:radial-gradient(1200px 700px at 50% -10%,#1d2430,#0b0d11 70%);color:#fff;animation:fadeIn .2s var(--ease) both}
.gc.closing{opacity:0;transition:opacity .2s}
.gc.mini{display:none}
.gc-top{display:flex;align-items:center;gap:12px;padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top,0px))}
.gc-title{display:flex;flex-direction:column;line-height:1.2}
.gc-title b{font-size:17px}.gc-title span{font-size:12.5px;opacity:.65}
.gc-stage{flex:1;min-height:0;display:grid;gap:10px;padding:6px 16px 10px;align-content:center;justify-content:center}
.gc-stage.n1{grid-template-columns:minmax(0,640px)}
.gc-stage.n2{grid-template-columns:repeat(2,minmax(0,520px))}
.gc-stage.n3,.gc-stage.n4{grid-template-columns:repeat(2,minmax(0,440px))}
.gc-stage.n5,.gc-stage.n6{grid-template-columns:repeat(3,minmax(0,360px))}
.gc-stage.n7,.gc-stage.n8,.gc-stage.n9{grid-template-columns:repeat(4,minmax(0,300px))}
.gc-stage.spot{grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:minmax(0,1fr);align-content:stretch;justify-content:stretch}
.gc-stage.spot>.gc-tile{height:100%;aspect-ratio:auto}
.gc-strip{display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.gc-strip .gc-tile{aspect-ratio:16/10;flex:none}
.gc-tile{position:relative;aspect-ratio:16/10;border-radius:16px;background:linear-gradient(160deg,#252c38,#171b23);overflow:hidden;display:grid;place-items:center;border:2px solid transparent;transition:border-color .12s,box-shadow .12s}
.gc-tile.speaking{border-color:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.25),0 0 24px rgba(61,220,132,.3)}
.gc-tile.connecting .gc-av{opacity:.5;animation:pfBlink 1.4s infinite}
.gc-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;background:#000}
.gc-tile.has-video video{display:block}
.gc-tile.screen video{object-fit:contain}
.gc-tile video.mirror{transform:scaleX(-1)}
.gc-tile.has-video .gc-av{display:none}
.gc-av .av{border-radius:50%;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.gc-nm{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:12px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);font-size:13px;max-width:calc(100% - 20px)}
.gc-nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-mic{display:none;width:16px;height:16px}
.gc-mic.muted,.gc-mic.deaf{display:block}
.gc-mic svg{width:16px;height:16px;stroke:#ff6b6b;fill:none;stroke-width:2}
.gc-tools{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:0;transition:opacity .15s}
.gc-tile:hover .gc-tools,.gc-tile:focus-within .gc-tools{opacity:1}
@media (hover:none){.gc-tools{opacity:1}}
.gc-tools button{width:30px;height:30px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer}
.gc-tools svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.gc-ctl{display:flex;justify-content:center;gap:14px;padding:12px 16px 24px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));flex-wrap:wrap}
.gc-ctl .call-btn.on span{background:#fff;}
.gc-ctl .call-btn.on svg{stroke:#14171c}
.gc-ctl .call-btn.bad span{background:#e5484d}
.gc-banner{display:flex;align-items:center;gap:12px;padding:8px 14px;background:color-mix(in srgb,#3ddc84 12%,var(--surface));border-bottom:1px solid var(--line-soft)}
.gc-bt{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13.5px}
.gc-bt span{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-avs{display:flex}.gc-avs .av{margin-left:-8px;border:2px solid var(--surface);border-radius:50%}.gc-avs .av:first-child{margin-left:0}
.gc-live{width:12px;height:12px;display:grid;place-items:center;flex:none}
.gc-live i{width:9px;height:9px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.7);animation:pfpulse 1.8s infinite}
.gc-dot{display:inline-flex;align-items:center;gap:3px;margin-left:auto;padding:1px 7px;border-radius:10px;background:rgba(61,220,132,.16);color:#3ddc84;font:600 11.5px var(--mono)}
.gc-dot svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.gc-mini{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:295;width:222px;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:14px;background:#14171c;color:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.5);cursor:pointer}
.gc-mini.speaking{border-color:#3ddc84}
.gc-mini .gm-info{display:flex;gap:10px;align-items:center;min-width:0}
.gc-mini b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-mini .gm-t{font-size:11.5px;color:rgba(255,255,255,.6)}
.gm-btns{display:flex;gap:6px}
.gm-btns button{flex:1;height:32px;border-radius:9px;border:none;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer}
.gm-btns button.off{background:rgba(255,107,107,.25);color:#ff8a8a}
.gm-btns button.bad{background:#e5484d}
.gm-btns svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
@media (max-width:820px){.gc-mini{bottom:calc(74px + env(safe-area-inset-bottom,0px))}}
.gc-volpop{position:fixed;z-index:400;width:220px;padding:12px;border-radius:12px;background:#1b1f27;color:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:8px}
.gc-volpop .row{gap:8px}.gc-volpop input{flex:1;accent-color:#3ddc84}.gc-volpop output{width:40px;text-align:right;font:12px var(--mono)}
@media (max-width:820px){
  .gc-stage.n2,.gc-stage.n3,.gc-stage.n4,.gc-stage.n5,.gc-stage.n6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gc-stage.n7,.gc-stage.n8,.gc-stage.n9{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gc-stage.n1{grid-template-columns:minmax(0,1fr)}
  .gc-stage{overflow-y:auto;align-content:start}
  .gc-stage.spot{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 110px}
  .gc-strip{flex-direction:row;overflow-x:auto;overflow-y:hidden}.gc-strip .gc-tile{width:150px}
  .gc-ctl{gap:6px}.gc-ctl .call-btn{width:58px}.gc-ctl .call-btn span{width:50px;height:50px}.gc-ctl .call-btn i{font-size:10.5px}
}

/* телефон: быстрые кнопки «Подать заявку» и «+ Тикет» не помещаются в шапку рядом с колокольчиком — они есть на главной и в меню */
@media (max-width:820px){
  .topbar #qa{display:none}
  .topbar .iconbtn{flex:none}
  .topbar h2{max-width:none;flex:1;min-width:0}
}
.pf-music{min-width:0;overflow:hidden}
.pm-bar{flex-wrap:wrap}
@media (max-width:520px){.pm-vl,.pm-vol{display:none}.pm-ctl button{width:32px}}

/* выбор сообщений */


/* ═══════════════ гардероб скинов (js/skins.js) ═══════════════ */
.sk{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:16px;align-items:start}
.sk-stage{position:sticky;top:90px;padding:16px;display:flex;flex-direction:column;gap:12px}
.sk-3d{position:relative;display:grid;place-items:center;min-height:400px;border-radius:14px;background:radial-gradient(240px 260px at 50% 40%,color-mix(in srgb,var(--brass) 18%,transparent),transparent),var(--bg)}
.sk-3d canvas{max-width:100%}
.sk-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px}
.sk-empty[hidden]{display:none}
.sk-title{display:flex;flex-direction:column;margin-bottom:10px}.sk-title b{font-size:18px}
.sk-side{min-width:0;display:flex;flex-direction:column;gap:12px}
.sk-warn{padding:12px 14px;font-size:14px;border-color:color-mix(in srgb,var(--brass) 45%,transparent)}
.sk-add{padding:14px 16px}
.sk-add input:not([type]),.sk-add input[type=text],.sk-add select,.sk-add input#sk-label,.sk-add input#sk-nick{height:38px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:0 12px;font:inherit}
.sk-drop{display:grid;place-items:center;margin-top:10px;min-height:96px;border:2px dashed var(--line);border-radius:14px;cursor:pointer;text-align:center;color:var(--muted);transition:border-color .15s,background .15s}
.sk-drop:hover,.sk-drop.over{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 8%,transparent)}
.sk-drop small{display:block;font-size:12px;color:var(--dim);margin-top:4px}
.sk-or{display:flex;align-items:center;gap:10px;margin:14px 0 10px;font-size:12.5px;color:var(--dim)}
.sk-or::before,.sk-or::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.sk-head{display:flex;align-items:center;gap:10px}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.sk-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;border-radius:14px;border:2px solid var(--line-soft);background:var(--surface);color:var(--text);cursor:pointer;transition:border-color .15s,transform .15s}
.sk-card:hover{transform:translateY(-2px)}
.sk-card.on{border-color:var(--brass)}
.sk-card b{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-thumb{height:128px;display:grid;place-items:center}.sk-thumb canvas{image-rendering:pixelated;height:128px;width:auto}
.sk-badge{position:absolute;top:8px;right:8px;font:600 10.5px var(--mono);font-style:normal;text-transform:uppercase;padding:2px 7px;border-radius:9px;background:var(--moss);color:#06140c}
@media (max-width:820px){.sk{grid-template-columns:1fr}.sk-stage{position:static}.sk-3d{min-height:320px}}

/* ═══════════════ разметка как в Discord (md() в js/core.js) ═══════════════ */
.md{overflow-wrap:anywhere;line-height:1.55}
.md-code{font:.88em/1.4 var(--mono);padding:.1em .38em;border-radius:5px;background:color-mix(in srgb,var(--text) 9%,transparent)}
.md-pre{margin:8px 0;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--bg) 75%,transparent);border:1px solid var(--line-soft);overflow-x:auto;font:13px/1.5 var(--mono);white-space:pre}
.md-pre code{background:none;padding:0}
.md-bq{margin:6px 0;padding:2px 0 2px 12px;border-left:4px solid color-mix(in srgb,var(--muted) 55%,transparent);color:inherit}
.md-h{font-weight:700;line-height:1.3;margin:10px 0 4px}
.md-h1{font-size:1.5em}.md-h2{font-size:1.28em}.md-h3{font-size:1.1em}
.md-h:first-child{margin-top:0}
.md-sub{font-size:.8em;color:var(--dim)}
.md-list{margin:4px 0;padding-left:1.4em}
.md-list li{margin:2px 0}
.md-spoiler{background:color-mix(in srgb,var(--text) 55%,var(--bg));color:transparent;border-radius:4px;padding:0 2px;cursor:pointer;transition:background .2s,color .2s}
.md-spoiler.open{background:color-mix(in srgb,var(--text) 10%,transparent);color:inherit}
.md-spoiler.open *{color:inherit}
.md-spoiler:not(.open) *{color:transparent!important;background:none}
.md-mention{color:var(--brass);background:color-mix(in srgb,var(--brass) 14%,transparent);border-radius:4px;padding:0 3px;font-weight:600}
.md-emoji{color:var(--muted)}
.md-time{background:color-mix(in srgb,var(--text) 8%,transparent);border-radius:4px;padding:0 3px}
.md a,.annc a{color:var(--brass);text-decoration:underline;text-underline-offset:2px}
.md u{text-underline-offset:2px}
.md-bar{position:fixed;z-index:9999;display:flex;gap:2px;padding:4px;border-radius:10px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 28px -10px rgba(0,0,0,.6)}
.md-bar[hidden]{display:none}
.md-bar button{min-width:30px;height:28px;border:none;border-radius:7px;background:none;color:var(--text);font:14px var(--sans,inherit);cursor:pointer}
.md-bar button:hover{background:var(--raise)}

/* ═══════════════ поле «картинка» (imgFieldHTML в js/util.js) ═══════════════ */
.imgf-box{display:flex;gap:12px;align-items:stretch}
.imgf-pv{flex:none;width:132px;height:96px;border-radius:12px;border:2px dashed var(--line);background:var(--bg) center/cover no-repeat;display:grid;place-items:center;text-align:center;font-size:11.5px;color:var(--dim);cursor:pointer;transition:border-color .15s}
.imgf-pv[style*="background-image"]{border-style:solid}
.imgf.over .imgf-pv,.imgf-pv:hover{border-color:var(--brass)}
.imgf.busy .imgf-pv{opacity:.55;animation:imgf-pulse 1s ease-in-out infinite alternate}
@keyframes imgf-pulse{to{opacity:.9}}
.imgf-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.imgf-side input:not([type]){width:100%}
.imgf-side [hidden]{display:none}
.imgf-side small{font-size:12px;min-height:14px}
@media (max-width:520px){.imgf-box{flex-direction:column}.imgf-pv{width:100%;height:140px}}
.news-img{display:block;width:100%;max-height:520px;object-fit:cover;background:var(--bg)}

/* ═══════════════ заявки (js/support.js) ═══════════════ */
.ap-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:16px}
.ap-tabs{display:flex;flex-wrap:wrap;gap:6px}
.ap-tab{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;font-size:13.5px;cursor:pointer}
.ap-tab:hover{color:var(--text)}
.ap-tab.on{background:var(--brass);border-color:var(--brass);color:#14100a;font-weight:600}
.ap-tab i{font-style:normal;font:600 11px var(--mono);min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,currentColor 18%,transparent)}
.ap-filter{display:flex;gap:8px;flex-wrap:wrap}
.ap-filter input{width:220px}.ap-filter input,.ap-filter select{height:34px}
.ap-kind{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:9px;font-size:11.5px;font-weight:500;color:var(--muted);background:var(--raise);border:1px solid var(--line-soft);vertical-align:2px}
.ap-kind.big{font-size:13px;vertical-align:5px}
.ap-row.fresh .t::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brass);margin-left:8px;vertical-align:2px}
.ap-free{color:var(--brass);font-weight:500}
.ap-steps{display:flex;align-items:center;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.ap-steps>b{flex:1;min-width:16px;height:2px;background:var(--line)}
.ap-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim)}
.ap-step i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--mono);font-style:normal;border:1.5px solid var(--line);background:var(--surface)}
.ap-step.ok{color:var(--text)}.ap-step.ok i{background:var(--moss);border-color:var(--moss);color:#07140c}
.ap-step.cur i{border-color:var(--brass);color:var(--brass);box-shadow:0 0 0 4px color-mix(in srgb,var(--brass) 18%,transparent)}
.ap-steps.bad .ap-step.ok:nth-last-child(1) i{background:var(--clay);border-color:var(--clay)}
.ap-main{min-width:0;display:flex;flex-direction:column;gap:16px}
.doc .a.md{white-space:normal}
.ap-chg{font-size:10.5px;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,var(--brass) 20%,transparent);color:var(--brass);font-family:var(--mono);text-transform:uppercase}
.ap-old{margin-top:6px;font-size:13px;color:var(--dim)}.ap-old summary{cursor:pointer;font-size:12px}
.ap-old .md{padding:8px 10px;margin-top:4px;border-left:3px solid var(--line);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--dim) 50%,transparent)}
.ap-chat{padding:0;overflow:hidden}
.ap-chat-h{display:flex;align-items:baseline;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.ap-chat-h .dim{font-size:12.5px}
.ap-msgs{display:flex;flex-direction:column;gap:12px;padding:16px 18px;max-height:460px;overflow-y:auto}
.ap-empty{padding:4px 0;font-size:13.5px}
.ap-msg{display:flex;gap:10px;align-items:flex-start;max-width:88%}
.ap-msg.me{align-self:flex-end;flex-direction:row-reverse}
.ap-bub{min-width:0;padding:9px 13px;border-radius:14px;background:var(--raise);border:1px solid var(--line-soft)}
.ap-msg.staff .ap-bub{background:color-mix(in srgb,var(--brass) 9%,var(--surface));border-color:color-mix(in srgb,var(--brass) 28%,transparent)}
.ap-mh{display:flex;align-items:baseline;gap:8px;margin-bottom:3px;font-size:13px}
.ap-mh time{font-size:11.5px;color:var(--dim)}
.ap-role{font-size:10.5px;padding:0 6px;border-radius:6px;background:color-mix(in srgb,var(--brass) 22%,transparent);color:var(--brass);font-family:var(--mono);text-transform:uppercase}
.ap-reply{padding:12px 18px 16px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:8px}
.ap-reply textarea{min-height:70px}
.ap-reason{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--raise);font-size:13.5px}
.ap-reason>.dim{display:block;font-size:11.5px;margin-bottom:3px}
.ap-dlv{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:9px 11px;border-radius:10px;font-size:13px;background:var(--raise)}
.ap-dlv .dot{flex:none;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--dim)}
.ap-dlv.ok .dot{background:var(--moss)}.ap-dlv.wait .dot{background:var(--brass);animation:imgf-pulse .8s infinite alternate}.ap-dlv.no .dot{background:var(--clay)}
.ap-dlv.no{color:var(--clay)}
.ap-acts{display:grid;gap:8px}
.ap-hist{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0;font-size:13px;color:var(--text);text-decoration:none;border-top:1px solid var(--line-soft)}
.ap-tpl{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ap-tpl .chip{cursor:pointer;text-align:left}.ap-tpl .chip:hover{color:var(--text);border-color:var(--brass)}
.ap-note{font-size:13px;padding:9px 12px;border-radius:10px;background:var(--raise);color:var(--muted);margin-bottom:14px}
@media (max-width:900px){.sheet{grid-template-columns:1fr}.ap-msg{max-width:100%}.ap-filter input{width:100%;flex:1}}
.sheet{grid-template-columns:minmax(0,1fr) 290px}

/* разделы обращений */
.ib-secs{display:flex;gap:4px;padding:4px;margin-bottom:18px;border-radius:14px;background:var(--surface);border:1px solid var(--line-soft);overflow-x:auto}
.ib-sec{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-width:max-content;height:42px;padding:0 16px;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:500;font-size:14.5px;transition:background .15s,color .15s}
.ib-sec:hover{color:var(--text);background:var(--raise)}
.ib-sec.on{background:var(--raise);color:var(--text);box-shadow:inset 0 -2px 0 var(--brass)}
.ib-sec i{font:600 11px var(--mono);font-style:normal;min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:grid;place-items:center;background:var(--brass);color:#14100a}
.ib-add{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:14px 18px;margin-bottom:16px;flex-wrap:wrap}
.ib-add>div{display:flex;flex-direction:column;gap:2px}.ib-add .dim{font-size:13px}