*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
:root{
  --bg-app:#04060b;
  --bg-phone-1:#0a1122;
  --bg-phone-2:#060a14;
  --surface-1:#0c1424;
  --surface-2:#131c33;
  --surface-3:#1a2542;
  --surface-4:#22305a;
  --line:rgba(120,150,210,0.10);
  --line-strong:rgba(120,150,210,0.22);
  --text:#d6deee;
  --text-dim:#8a97b3;
  --text-muted:#5c6880;
  --accent:#4a6db8;
  --accent-2:#6b8fd4;
  --accent-3:#93b1e5;
  --accent-grad:linear-gradient(135deg,#3a5aa0 0%,#5d81c8 100%);
  --accent-grad-soft:linear-gradient(135deg,rgba(74,109,184,.35),rgba(107,143,212,.35));
  --danger:#d45a5a;
  --danger-grad:linear-gradient(135deg,#8a2f2f,#c94a4a);
  --success:#4ea878;
  --radius-s:10px;
  --radius-m:14px;
  --radius-l:20px;
  --radius-xl:28px;
}
body{
  background:var(--bg-app);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,sans-serif;
  font-size:14px;line-height:1.4;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
#app{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.phone{
  position:relative;
  width:100%;height:100%;
  max-width:420px;max-height:900px;
  display:flex;flex-direction:column;
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(74,109,184,.14) 0%,transparent 55%),
    radial-gradient(90% 50% at 50% 100%,rgba(74,109,184,.08) 0%,transparent 60%),
    linear-gradient(170deg,var(--bg-phone-1) 0%,var(--bg-phone-2) 60%,#03060d 100%);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.8),inset 0 0 0 1px rgba(120,150,210,.06);
}
@media (max-width:500px){
  .phone{max-width:none;max-height:none;border-radius:0;box-shadow:none}
}
.screen{
  flex:1;overflow-y:auto;overflow-x:hidden;position:relative;
  scrollbar-width:thin;scrollbar-color:rgba(120,150,210,.2) transparent;
  -webkit-overflow-scrolling:touch;
}
.screen::-webkit-scrollbar{width:4px}
.screen::-webkit-scrollbar-thumb{background:rgba(120,150,210,.2);border-radius:4px}

/* --- overlay roots --- */
.overlay-root{position:absolute;inset:0;pointer-events:none;z-index:60}
.overlay-root > *{pointer-events:auto}
.toast-root{
  position:absolute;left:0;right:0;bottom:96px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;z-index:80;padding:0 16px;
}

/* --- bottom nav --- */
.bottom-nav{
  display:flex;gap:4px;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(10,17,34,.86),rgba(5,9,17,.98));
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid var(--line);
  position:relative;z-index:20;
}
.bottom-nav.hidden{display:none}
.nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 2px;border:none;background:transparent;
  color:var(--text-muted);font-size:10px;font-family:inherit;
  border-radius:12px;cursor:pointer;transition:.15s;min-width:0;
  position:relative;
}
.nav-btn:hover{background:rgba(74,109,184,.08)}
.nav-btn.active{color:var(--text)}
.nav-btn .nav-icon{font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}
.nav-btn.primary .nav-icon{
  width:40px;height:40px;
  background:var(--accent-grad);color:#fff;
  border-radius:50%;font-size:22px;font-weight:300;
  box-shadow:0 6px 18px rgba(74,109,184,.55);
  margin-top:-8px;
}
.nav-btn .nav-av{width:24px;height:24px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}
.nav-btn .nav-av .avatar{width:24px!important;height:24px!important;font-size:12px!important;border:none!important}

/* --- layout helpers --- */
.screen-inner{min-height:100%;display:flex;flex-direction:column;gap:12px;padding:14px 0 20px}
.pad{padding:0 16px}
.row{display:flex;align-items:center;gap:10px}
.grow{flex:1}
.center{display:flex;align-items:center;justify-content:center}
.hidden{display:none!important}

/* --- typography --- */
h1,h2,h3{font-weight:700;letter-spacing:.15px}
.section-title{font-size:12px;font-weight:600;color:var(--accent-3);padding:2px 16px 0;letter-spacing:.3px;text-transform:uppercase;opacity:.85}
.muted{color:var(--text-dim)}
.small{font-size:11px}
.tiny{font-size:10px}
.text-dim{color:var(--text-dim)}

/* --- inputs --- */
.input,.search{
  width:100%;
  background:linear-gradient(180deg,rgba(20,29,51,.9),rgba(12,20,36,.9));
  border:1px solid var(--line-strong);
  border-radius:14px;padding:12px 14px;color:var(--text);
  font-size:13.5px;outline:none;font-family:inherit;transition:.15s;
}
.input::placeholder,.search::placeholder{color:var(--text-muted)}
.input:focus,.search:focus{
  border-color:rgba(107,143,212,.55);
  background:linear-gradient(180deg,rgba(26,37,66,.95),rgba(19,28,51,.95));
  box-shadow:0 0 0 3px rgba(74,109,184,.15);
}
textarea.input{resize:none;min-height:80px;line-height:1.45}

/* --- buttons --- */
.btn{
  display:block;width:100%;padding:13px 16px;
  border:none;border-radius:14px;
  background:linear-gradient(135deg,#2c4272,#3d5a9a);
  color:var(--text);font-size:13.5px;font-weight:600;
  cursor:pointer;transition:.15s;font-family:inherit;
  letter-spacing:.2px;
}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--accent-grad);color:#fff}
.btn.ghost{background:rgba(74,109,184,.14);color:var(--text);border:1px solid var(--line-strong)}
.btn.danger{background:var(--danger-grad);color:#fff}
.btn.sm{width:auto;padding:8px 14px;font-size:12px;border-radius:12px}
.btn.xs{width:auto;padding:5px 10px;font-size:11px;border-radius:9px}
.btn.block{margin-top:auto}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* --- avatar --- */
.avatar{
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;user-select:none;
  background:linear-gradient(135deg,#31467a,#1e2e4f);
  border:1px solid var(--line-strong);
  position:relative;
  line-height:1;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.sq{border-radius:22%}
.av-xs{width:28px;height:28px;font-size:14px}
.av-sm{width:36px;height:36px;font-size:17px}
.av-md{width:46px;height:46px;font-size:22px}
.av-lg{width:64px;height:64px;font-size:30px}
.av-xl{width:88px;height:88px;font-size:42px}
.av-2xl{width:110px;height:110px;font-size:52px}
.avatar.clickable{cursor:pointer}


.av-2xl 
.av-lg 

/* --- cards --- */
.card{
  background:linear-gradient(155deg,rgba(26,37,66,.75),rgba(19,28,51,.85));
  border:1px solid var(--line);
  border-radius:16px;padding:14px;
  display:flex;align-items:center;gap:12px;
  cursor:pointer;transition:.15s;
}
.card:hover{border-color:var(--line-strong)}
.card:active{transform:scale(.995)}
.card.flat{cursor:default}
.card.flat:hover{border-color:var(--line)}
.card-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.card-title{font-weight:700;font-size:13.5px;line-height:1.25}
.card-sub{font-size:11.5px;color:var(--text-dim);line-height:1.3}

/* --- empty --- */
.empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--text-dim);font-size:13px;text-align:center;padding:60px 24px;
}
.empty-emoji{font-size:44px;line-height:1;margin-bottom:4px;opacity:.85}
.empty-title{font-size:15px;font-weight:600;color:var(--text)}
.empty-sub{font-size:12px;color:var(--text-muted);max-width:280px;line-height:1.5}

/* --- toast --- */
.toast{
  background:linear-gradient(135deg,rgba(40,58,102,.98),rgba(26,40,80,.98));
  color:var(--text);
  padding:11px 18px;border-radius:14px;font-size:13px;font-weight:500;
  opacity:0;transform:translateY(12px);
  transition:.22s cubic-bezier(.3,.7,.3,1);
  max-width:88%;text-align:center;
  box-shadow:0 12px 32px rgba(0,0,0,.5),inset 0 0 0 1px rgba(120,150,210,.1);
  pointer-events:auto;
}
.toast.show{opacity:1;transform:translateY(0)}

/* --- drawer --- */
.drawer-backdrop{
  position:absolute;inset:0;
  background:rgba(3,6,12,.72);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:.24s;
}
.drawer-backdrop.open{opacity:1}
.drawer{
  position:absolute;top:0;left:0;bottom:0;
  width:80%;max-width:320px;
  background:linear-gradient(175deg,#0d1526,#080d18);
  border-right:1px solid var(--line-strong);
  border-radius:0 22px 22px 0;
  transform:translateX(-102%);
  transition:transform .28s cubic-bezier(.3,.7,.3,1);
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  box-shadow:12px 0 40px rgba(0,0,0,.6);
  padding-top:calc(18px + env(safe-area-inset-top));
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
}
.drawer.open{transform:translateX(0)}

/* --- sheet --- */
.sheet-backdrop{
  position:absolute;inset:0;
  background:rgba(3,6,12,.72);
  opacity:0;transition:.24s;
}
.sheet-backdrop.open{opacity:1}
.sheet{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,#1a2542,#0e1526);
  border-top-left-radius:26px;border-top-right-radius:26px;
  border-top:1px solid var(--line-strong);
  padding:22px 18px calc(26px + env(safe-area-inset-bottom));
  transform:translateY(102%);
  transition:transform .3s cubic-bezier(.3,.7,.3,1);
  display:flex;flex-direction:column;gap:8px;
  max-height:80%;overflow-y:auto;
  box-shadow:0 -20px 50px rgba(0,0,0,.6);
}
.sheet.open{transform:translateY(0)}
.sheet-handle{
  width:38px;height:4px;border-radius:2px;background:var(--line-strong);
  margin:0 auto 12px;flex-shrink:0;
}
.sheet-title{font-size:15px;font-weight:700;text-align:center;margin-bottom:4px}
.sheet-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:12px;
  background:transparent;border:none;color:var(--text);
  font-family:inherit;font-size:13.5px;font-weight:500;
  cursor:pointer;text-align:left;transition:.12s;
}
.sheet-item:hover{background:rgba(74,109,184,.12)}
.sheet-item.danger{color:#ff8b8b}
.sheet-item .ic{font-size:18px;width:24px;text-align:center;flex-shrink:0}

/* --- splash / welcome / auth (будут использоваться в этапе 3) --- */
.splash,.welcome{
  flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:36px;padding:32px 24px calc(32px + env(safe-area-inset-bottom));
}
.logo-word{display:flex;font-size:68px;font-weight:800;letter-spacing:8px;line-height:1}
.logo-word span{color:var(--accent-2)}
.logo-word .logo-oo{color:var(--accent-3);opacity:.95}
.logo-sub{font-size:11px;letter-spacing:5px;color:var(--accent-2);opacity:.7;margin-top:8px;text-align:center}
.splash-actions{width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px;margin-top:20px}
.legal{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:10px}
.legal span{font-size:10.5px;color:var(--text-muted);cursor:pointer}
.legal span:hover{color:var(--accent-3)}

.auth{display:flex;flex-direction:column;gap:12px;padding:24px 20px calc(24px + env(safe-area-inset-bottom))}
.auth-title{font-size:22px;font-weight:700;margin-bottom:6px;text-align:center}
.auth-subtitle{font-size:12.5px;color:var(--text-dim);text-align:center;margin-top:-6px;margin-bottom:6px}
.auth-label{font-size:11.5px;color:var(--text-dim);margin-top:4px;padding-left:4px;font-weight:500}

/* --- pickers --- */
.picker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:2px 0}
.picker-grid.b{grid-template-columns:repeat(3,1fr)}
.picker-item{
  aspect-ratio:1/1;border-radius:14px;
  border:2px solid transparent;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;cursor:pointer;transition:.15s;overflow:hidden;position:relative;
}
.picker-item img{width:100%;height:100%;object-fit:cover}
.picker-item.active{border-color:var(--accent-2);transform:scale(1.06);box-shadow:0 0 0 3px rgba(74,109,184,.25)}
.picker-banners .picker-item{border-radius:12px;aspect-ratio:16/9}

/* --- profile banner --- */
.banner{
  height:180px;width:100%;position:relative;flex-shrink:0;
  background:linear-gradient(150deg,#31467a,#1e2e4f);
}
.banner img{width:100%;height:100%;object-fit:cover;display:block}

/* --- scroll list gap --- */
.list{display:flex;flex-direction:column;gap:10px;padding:2px 16px}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}


/* ============================================================
   ЭТАП 3 — AUTH
   ============================================================ */

/* --- Splash: сферы и логотип --- */
.splash{position:relative;overflow:hidden;padding:0 24px}
.splash::before{
  content:'';position:absolute;top:-30%;right:-25%;
  width:100%;padding-bottom:100%;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(90,130,210,.55) 0%,rgba(50,80,150,.18) 45%,transparent 70%);
  pointer-events:none;z-index:0;
}
.splash::after{
  content:'';position:absolute;bottom:-40%;left:-30%;
  width:120%;padding-bottom:120%;border-radius:50%;
  background:radial-gradient(circle at 55% 40%,rgba(80,120,200,.48) 0%,rgba(40,70,140,.15) 45%,transparent 70%);
  pointer-events:none;z-index:0;
}
.splash > *{position:relative;z-index:1}
.splash-inner{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  width:100%;max-width:320px;
}
.splash-center{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}
.splash-bottom{padding-bottom:calc(20px + env(safe-area-inset-bottom));width:100%;max-width:320px}

.logo-block{display:flex;flex-direction:column;align-items:center;gap:6px}
.logo-word{font-size:60px;font-weight:800;letter-spacing:6px;line-height:1;color:#3a5aa0}
.logo-word .logo-oo{color:#93b1e5;opacity:.92}
.logo-sub{font-size:10px;letter-spacing:5px;color:#8fa8d4;opacity:.7;text-align:center}
.logo-title{font-size:22px;font-weight:600;color:var(--text);text-align:center;letter-spacing:.2px}
.logo-note{font-size:11.5px;color:var(--text-dim);text-align:center;max-width:280px;line-height:1.5}

/* --- Кнопки-outline (прозрачные с обводкой) --- */
.btn-outline{
  display:block;width:100%;
  background:rgba(20,35,70,.35);
  border:1px solid rgba(120,150,210,.5);
  border-radius:22px;
  color:var(--text);
  padding:12px 18px;
  font-size:13.5px;font-weight:500;font-family:inherit;
  cursor:pointer;transition:.15s;letter-spacing:.2px;
}
.btn-outline:hover{background:rgba(74,109,184,.25);border-color:var(--accent-2)}
.btn-outline:active{transform:scale(.985)}
.btn-outline.solid{
  background:linear-gradient(135deg,rgba(60,90,160,.85),rgba(45,70,130,.9));
  border-color:rgba(120,150,210,.4);
}

/* --- Ссылки политики/правил --- */
.legal-links{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  margin-top:18px;
}
.legal-links span{
  font-size:10.5px;color:var(--text-muted);cursor:pointer;
  transition:.15s;
}
.legal-links span:hover{color:var(--accent-3)}

/* --- Welcome --- */
.welcome-box{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  width:100%;max-width:320px;
}
.welcome-greet{font-size:17px;font-weight:600;color:var(--text);text-align:center}
.welcome-name{font-size:14px;color:var(--text);font-weight:500;text-align:center;margin-top:-6px}
.welcome-actions{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:8px}

/* --- Register 1 (email+pass) --- */
.reg-wrap{
  display:flex;flex-direction:column;gap:14px;
  width:100%;max-width:320px;
  padding:0 24px;
}
.reg-title{font-size:17px;font-weight:600;text-align:center;color:var(--text)}
.reg-fields{display:flex;flex-direction:column;gap:10px;width:100%}

/* --- Register 2 (ник+имя+аватар+баннер) --- */
.reg-avatar-block{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin:6px 0 2px;
}
.reg-avatar-circle{
  width:88px;height:88px;border-radius:50%;
  background:linear-gradient(135deg,#2a3f6e,#1a2542);
  border:2px solid rgba(120,150,210,.5);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;overflow:hidden;
  transition:.15s;
}
.reg-avatar-circle:hover{border-color:var(--accent-2)}
.reg-avatar-circle img{width:100%;height:100%;object-fit:cover}
.reg-avatar-circle .ph{
  font-size:36px;opacity:.5;
}
.reg-avatar-hint{
  font-size:10.5px;color:var(--text-muted);
  cursor:pointer;text-decoration:underline;
}

.reg-picker{
  display:flex;flex-direction:column;gap:6px;width:100%;
}
.reg-picker-label{font-size:11px;color:var(--text-dim);padding-left:4px;font-weight:500}

.picker-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:0;
}
.picker-grid.b{grid-template-columns:repeat(2,1fr);gap:10px}

.picker-item{
  aspect-ratio:1/1;border-radius:14px;
  border:2px solid transparent;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;cursor:pointer;transition:.15s;
  overflow:hidden;position:relative;
  background:rgba(20,35,70,.4);
}
.picker-item img{width:100%;height:100%;object-fit:cover;display:block}
.picker-item.active{
  border-color:var(--accent-2);transform:scale(1.05);
  box-shadow:0 0 0 3px rgba(74,109,184,.25);
}
.picker-item.banner-item{
  aspect-ratio:16/6;border-radius:10px;
}

/* --- Password screen --- */
.pwd-box{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  width:100%;max-width:320px;
}
.pwd-title{font-size:15px;font-weight:600;text-align:center;color:var(--text);margin-top:4px}

/* --- dev badge (пригодится позже) --- */


/* ============================================================
   ЭТАП 4 — FEED + PROFILE
   ============================================================ */

/* --- top search --- */
.top-search{
  padding:calc(10px + env(safe-area-inset-top)) 16px 4px;
}

/* --- profile-row (моя строка в ленте) --- */
.profile-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;cursor:pointer;transition:.15s;
}
.profile-row:hover{background:rgba(74,109,184,.06)}
.profile-row-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.profile-row-name{font-weight:700;font-size:14px}
.profile-row-nick{font-size:11.5px;color:var(--text-dim)}
.profile-row-badge{
  margin-left:auto;
  background:linear-gradient(135deg,rgba(74,109,184,.4),rgba(107,143,212,.25));
  border:1px solid var(--line-strong);
  padding:5px 10px;border-radius:12px;
  font-size:10.5px;font-weight:600;color:var(--accent-3);white-space:nowrap;
}

/* --- friends row --- */
.friends-online{
  display:flex;gap:16px;padding:2px 16px 4px;
  overflow-x:auto;scrollbar-width:none;
}
.friends-online::-webkit-scrollbar{display:none}
.friend-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;flex-shrink:0;min-width:52px;
}
.friend-item span{font-size:10.5px;color:var(--text-dim);max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-add{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(74,109,184,.12);
  border:1.5px dashed rgba(120,150,210,.4);
  color:var(--accent-2);font-size:20px;cursor:pointer;
  flex-shrink:0;
}
.friend-add:hover{background:rgba(74,109,184,.22)}

/* --- community leader card --- */
.leader-card{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;margin:0 16px;
  background:linear-gradient(155deg,rgba(26,37,66,.75),rgba(19,28,51,.85));
  border:1px solid var(--line);border-radius:16px;
  cursor:pointer;transition:.15s;
}
.leader-card:hover{border-color:var(--line-strong)}
.leader-card .leader-name{font-weight:700;font-size:13.5px}
.leader-card .leader-meta{font-size:11px;color:var(--text-dim)}
.leader-arrow{color:var(--text-muted);font-size:16px;margin-left:auto}

/* --- big featured card --- */
.big-cover{
  margin:0 16px;border-radius:18px;overflow:hidden;
  position:relative;height:140px;cursor:pointer;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  border:1px solid var(--line);
}
.big-cover img{width:100%;height:100%;object-fit:cover;display:block}
.big-cover-label{
  position:absolute;left:14px;bottom:12px;right:14px;
  color:#fff;font-size:13px;font-weight:600;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.big-cover-gradient{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.65) 100%);
}

/* --- community grid (2 columns) --- */
.comm-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:2px 16px;
}
.comm-tile{
  border-radius:16px;overflow:hidden;cursor:pointer;
  background:linear-gradient(150deg,rgba(26,37,66,.85),rgba(15,23,38,.95));
  border:1px solid var(--line);
  height:120px;position:relative;
  display:flex;align-items:flex-end;padding:12px;
  transition:.15s;
}
.comm-tile:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.comm-tile-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(74,109,184,.4),rgba(42,63,110,.1));
  opacity:.6;
}
.comm-tile-info{position:relative;z-index:1;min-width:0}
.comm-tile-name{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comm-tile-members{font-size:10.5px;color:var(--text-dim);margin-top:2px}

/* --- section --- */
.section{padding-top:10px}

/* --- profile header --- */
.profile-wrap{display:flex;flex-direction:column;gap:12px}
.profile-banner-wrap{position:relative}
.profile-actions-row{
  position:absolute;top:calc(12px + env(safe-area-inset-top));
  left:12px;right:12px;
  display:flex;justify-content:space-between;align-items:center;z-index:2;
}
.icon-btn-circle{
  width:38px;height:38px;border-radius:50%;
  background:rgba(10,17,34,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-strong);
  color:var(--text);font-size:16px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.15s;font-family:inherit;
}
.icon-btn-circle:hover{background:rgba(30,45,80,.85)}
.profile-hero{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin-top:-52px;padding:0 16px;position:relative;z-index:1;
}

.profile-hero-name{
  font-size:16px;font-weight:700;margin-top:6px;
  display:flex;align-items:center;gap:6px;justify-content:center;
  flex-wrap:wrap;
}
.profile-hero-nick{font-size:12px;color:var(--text-dim)}
.profile-hero-status{font-size:11px;color:var(--accent-2);margin-top:2px}
.profile-hero-status.off{color:var(--text-muted)}
.profile-hero-bio{font-size:12px;color:var(--text-dim);text-align:center;max-width:280px;margin-top:4px;line-height:1.4}
.profile-hero-community{font-size:11px;color:var(--text-muted);margin-top:2px}

.profile-counters{
  display:flex;gap:10px;justify-content:center;
  padding:2px 16px 0;
}
.counter-pill{
  background:rgba(74,109,184,.14);
  border:1px solid var(--line);
  color:var(--text-dim);
  padding:6px 14px;border-radius:12px;
  font-size:11.5px;font-weight:500;
  cursor:pointer;transition:.15s;
}
.counter-pill:hover{background:rgba(74,109,184,.24);color:var(--text)}

.profile-cta{padding:6px 16px 0}

.profile-community-back{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;margin:0 16px;
  background:linear-gradient(155deg,rgba(26,37,66,.6),rgba(19,28,51,.75));
  border:1px solid var(--line);border-radius:14px;
  cursor:pointer;transition:.15s;
}
.profile-community-back:hover{border-color:var(--line-strong)}
.profile-community-back .pcb-name{font-weight:600;font-size:12.5px}
.profile-community-back .pcb-meta{font-size:10.5px;color:var(--text-dim)}

/* --- tabs (публикации / комментарии) --- */
.tabs{
  position:relative;display:flex;gap:4px;margin:4px 16px 0;
  background:rgba(15,23,38,.6);border-radius:14px;padding:4px;
  border:1px solid var(--line);
}
.tabs-ind{
  position:absolute;top:4px;left:4px;
  height:calc(100% - 8px);border-radius:10px;
  background:rgba(74,109,184,.25);
  transition:transform .28s cubic-bezier(.3,.7,.3,1),width .28s cubic-bezier(.3,.7,.3,1);
  pointer-events:none;
}
.tab{
  flex:1;position:relative;z-index:2;
  border:none;background:transparent;
  color:var(--text-muted);font-family:inherit;
  font-size:11.5px;font-weight:600;
  padding:9px 4px;border-radius:10px;cursor:pointer;
  transition:color .2s;white-space:nowrap;
}
.tab.active{color:var(--text)}

/* --- posts list --- */
.posts-list{display:flex;flex-direction:column;gap:10px;padding:0 16px}

/* --- tile image (для больших карточек) --- */
.post-tile{
  margin:0 16px;border-radius:18px;overflow:hidden;
  position:relative;min-height:170px;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  border:1px solid var(--line);cursor:pointer;
  display:flex;align-items:flex-end;padding:14px;
}
.post-tile-cover{
  position:absolute;inset:0;background-size:cover;background-position:center;
}
.post-tile-gradient{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.75) 100%);
}
.post-tile-info{position:relative;z-index:1;width:100%}
.post-tile-title{color:#fff;font-size:14px;font-weight:700;line-height:1.25;text-shadow:0 2px 6px rgba(0,0,0,.8)}
.post-tile-meta{
  display:flex;align-items:center;gap:10px;margin-top:6px;
  color:rgba(255,255,255,.85);font-size:11px;
}
.post-tile-meta .ic{opacity:.85}

/* ============================================================
   ЭТАП 5 — РЕДАКТИРОВАНИЕ ПРОФИЛЯ
   ============================================================ */
.edit-wrap{padding:0 0 20px;display:flex;flex-direction:column;gap:14px}

.edit-header{
  display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 4px;
}
.edit-header .edit-title{font-size:15px;font-weight:700;flex:1;text-align:center;padding-right:38px}

.edit-banner{
  position:relative;height:150px;margin:0 16px;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,#2a3f6e,#0f1726);border:1px solid var(--line);
}
.edit-banner img{width:100%;height:100%;object-fit:cover;display:block}
.edit-banner .edit-banner-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.6) 100%);
  display:flex;align-items:flex-end;justify-content:flex-end;padding:10px;
}
.edit-banner .edit-banner-btn{
  background:rgba(10,17,34,.75);color:var(--text);
  border:1px solid var(--line-strong);border-radius:10px;
  padding:6px 12px;font-size:11px;font-family:inherit;font-weight:500;
  cursor:pointer;
}
.edit-banner .edit-banner-btn:hover{background:rgba(30,45,80,.9)}

.edit-avatar-block{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:-42px;position:relative;z-index:1;
}
.edit-avatar-circle{
  width:88px;height:88px;border-radius:50%;
  background:linear-gradient(135deg,#2a3f6e,#1a2542);
  border:3px solid var(--bg-phone-2);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:42px;cursor:pointer;position:relative;
}
.edit-avatar-circle img{width:100%;height:100%;object-fit:cover}

.edit-field{
  display:flex;flex-direction:column;gap:4px;
  padding:0 16px;
}
.edit-field label{
  font-size:11px;color:var(--text-dim);padding-left:4px;font-weight:500;
}

.edit-picker-block{display:flex;flex-direction:column;gap:6px;padding:0 16px}
.edit-picker-label{font-size:11px;color:var(--text-dim);padding-left:4px;font-weight:500}

.edit-actions{
  display:flex;flex-direction:column;gap:10px;
  padding:8px 16px 0;
}

.edit-pinned-card{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;margin:0 16px;border-radius:14px;
  background:rgba(74,109,184,.1);border:1px solid var(--line);
  cursor:pointer;transition:.15s;
}
.edit-pinned-card:hover{border-color:var(--line-strong)}
.edit-pinned-card .ep-info{flex:1;min-width:0}
.edit-pinned-card .ep-name{font-size:12.5px;font-weight:600}
.edit-pinned-card .ep-meta{font-size:10.5px;color:var(--text-dim)}
.edit-pinned-card .ep-del{
  color:#ff8b8b;font-size:14px;padding:4px 8px;
  border-radius:8px;
}

/* ============================================================
   ЭТАП 6 — СООБЩЕСТВА
   ============================================================ */
.comm-screen{
  min-height:100%;
  display:flex;flex-direction:column;
  gap:10px;
}

.comm-header{
  display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 4px;
}
.comm-header .comm-title{
  flex:1;text-align:center;font-size:14px;font-weight:700;
  padding-right:38px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.comm-cover{
  height:170px;margin:0 16px;border-radius:18px;overflow:hidden;
  position:relative;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  border:1px solid var(--line);
}
.comm-cover img{width:100%;height:100%;object-fit:cover;display:block}
.comm-cover::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.65) 100%);
}

.comm-info{
  display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:0 16px;margin-top:-30px;position:relative;z-index:1;
}
.comm-info .comm-avatar{
  width:70px;height:70px;border-radius:50%;
  border:3px solid var(--bg-phone-2);
  background:linear-gradient(135deg,#2a3f6e,#1a2542);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:32px;
}
.comm-info .comm-avatar img{width:100%;height:100%;object-fit:cover}
.comm-info .comm-name{font-size:16px;font-weight:700;margin-top:4px;text-align:center}
.comm-info .comm-meta{font-size:11.5px;color:var(--text-dim)}
.comm-info .comm-desc{
  font-size:12px;color:var(--text-dim);text-align:center;
  max-width:300px;line-height:1.4;margin-top:4px;
}

.comm-cta{padding:4px 16px 0}

.comm-nav{
  display:flex;gap:6px;
  justify-content:center;align-items:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(10,17,34,.86),rgba(5,9,17,.98));
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid var(--line);
  position:sticky;bottom:0;z-index:20;
  margin-top:auto;
}
.comm-nav-btn{
  flex:0 0 auto;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,35,70,.55);
  border:1px solid var(--line-strong);
  color:var(--text);font-size:18px;cursor:pointer;
  font-family:inherit;transition:.15s;
}
.comm-nav-btn:hover{background:rgba(74,109,184,.3)}
.comm-nav-btn.primary{
  width:56px;height:56px;font-size:26px;font-weight:300;
  background:var(--accent-grad);border-color:transparent;
  box-shadow:0 6px 18px rgba(74,109,184,.5);
}
.comm-nav-btn .av-mini{
  width:32px;height:32px;border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
}
.comm-nav-btn .av-mini img{width:100%;height:100%;object-fit:cover}

.comm-tab-content{
  padding:0 16px;
  display:flex;flex-direction:column;gap:10px;
}

.comm-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:40px 20px;color:var(--text-dim);text-align:center;
}
.comm-empty .ce-emoji{font-size:40px;opacity:.85}
.comm-empty .ce-title{font-size:14px;font-weight:600;color:var(--text)}
.comm-empty .ce-sub{font-size:12px;color:var(--text-muted);max-width:260px}

/* --- post card --- */
.post-card{
  background:linear-gradient(155deg,rgba(26,37,66,.8),rgba(19,28,51,.9));
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  transition:.15s;
}
.post-card:hover{border-color:var(--line-strong)}
.post-card-cover{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:rgba(74,109,184,.15)}
.post-card-body{padding:12px 14px 10px}
.post-card-title{font-size:13.5px;font-weight:700;line-height:1.3;margin-bottom:4px}
.post-card-text{font-size:12px;color:var(--text-dim);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card-foot{
  display:flex;align-items:center;gap:12px;
  padding:8px 14px 12px;border-top:1px solid var(--line);
  margin-top:6px;
}
.post-card-author{
  display:flex;align-items:center;gap:6px;flex:1;min-width:0;
  font-size:11px;color:var(--text-dim);
}
.post-card-author .pc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-card-action{
  display:flex;align-items:center;gap:4px;
  font-size:11.5px;color:var(--text-dim);
  padding:4px 8px;border-radius:10px;cursor:pointer;
  transition:.15s;background:transparent;border:none;
  font-family:inherit;
}
.post-card-action:hover{background:rgba(74,109,184,.15)}
.post-card-action.active{color:#ff8ba8}

/* ============================================================
   ЛЕНТА — Карточки сообществ (как на макетах)
   ============================================================ */
.comm-section-head{
  display:flex;align-items:center;gap:8px;
  padding:14px 16px 6px;
}
.comm-section-head .cs-title{
  font-size:12.5px;font-weight:600;color:var(--accent-3);
  letter-spacing:.3px;text-transform:uppercase;opacity:.85;flex:1;
}
.comm-section-head .cs-more{
  font-size:11px;color:var(--text-muted);cursor:pointer;
}
.comm-section-head .cs-more:hover{color:var(--accent-2)}

/* --- horizontal scroll --- */
.comm-scroll{
  display:flex;gap:10px;
  overflow-x:auto;scrollbar-width:none;
  padding:2px 16px 8px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.comm-scroll::-webkit-scrollbar{display:none}

/* --- большая горизонтальная карточка (главное сообщество) --- */
.comm-card-lg{
  display:flex;align-items:center;gap:12px;
  padding:14px;
  margin:2px 16px 0;
  background:linear-gradient(155deg,rgba(30,45,80,.75),rgba(19,28,51,.9));
  border:1px solid var(--line-strong);
  border-radius:18px;
  cursor:pointer;transition:.15s;
}
.comm-card-lg:hover{border-color:var(--accent-2);transform:translateY(-1px)}
.comm-card-lg .cav{
  width:54px;height:54px;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;flex-shrink:0;
  border:1px solid rgba(120,150,210,.2);
}
.comm-card-lg .cav img{width:100%;height:100%;object-fit:cover}
.comm-card-lg .cinfo{flex:1;min-width:0}
.comm-card-lg .cname{
  font-size:14.5px;font-weight:700;line-height:1.25;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.comm-card-lg .cmeta{
  font-size:11.5px;color:var(--text-dim);margin-top:3px;
  display:flex;align-items:center;gap:6px;
}
.comm-card-lg .cmeta .cdot{
  width:5px;height:5px;border-radius:50%;background:var(--accent-2);flex-shrink:0;
}
.comm-card-lg .cprog{
  height:4px;border-radius:2px;
  background:rgba(120,150,210,.14);overflow:hidden;margin-top:9px;
}
.comm-card-lg .cprog > i{
  display:block;height:100%;
  background:linear-gradient(90deg,#4a6db8,#93b1e5);
  border-radius:2px;
  transition:width .4s ease;
}

/* --- квадратная карточка (лидеры) --- */
.comm-card-sq{
  flex:0 0 auto;
  width:118px;height:118px;
  border-radius:16px;overflow:hidden;position:relative;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  border:1px solid var(--line);
  cursor:pointer;transition:.15s;
  display:flex;align-items:flex-end;padding:10px;
  scroll-snap-align:start;
}
.comm-card-sq:hover{
  border-color:var(--line-strong);
  transform:translateY(-2px);
}
.comm-card-sq img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;opacity:.9;
}
.comm-card-sq .cgrad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.75));
}
.comm-card-sq .cname{
  position:relative;z-index:1;
  color:#fff;font-size:11.5px;font-weight:600;
  text-shadow:0 2px 6px rgba(0,0,0,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;line-height:1.2;
}

/* --- вертикальная карточка (специально для вас) --- */
.comm-card-v{
  flex:0 0 auto;
  width:132px;height:192px;
  border-radius:16px;overflow:hidden;position:relative;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  border:1px solid var(--line);
  cursor:pointer;transition:.15s;
  display:flex;align-items:flex-end;padding:11px;
  scroll-snap-align:start;
}
.comm-card-v:hover{
  border-color:var(--line-strong);
  transform:translateY(-2px);
}
.comm-card-v img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.comm-card-v .cgrad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85));
}
.comm-card-v .cinfo{
  position:relative;z-index:1;width:100%;
}
.comm-card-v .cname{
  color:#fff;font-size:12.5px;font-weight:700;
  text-shadow:0 2px 6px rgba(0,0,0,.9);
  line-height:1.22;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}
.comm-card-v .cmeta{
  font-size:10.5px;color:rgba(255,255,255,.78);
  margin-top:4px;
}

/* ============================================================
   ЛЕНТА — Новая раскладка сообществ (по макету)
   ============================================================ */

.comm-section-head{
  display:flex;align-items:center;gap:8px;
  padding:14px 16px 6px;
}
.comm-section-head .cs-title{
  font-size:12.5px;font-weight:600;color:var(--accent-3);
  letter-spacing:.3px;text-transform:uppercase;opacity:.85;flex:1;
}
.comm-section-head .cs-more{
  font-size:11px;color:var(--text-muted);cursor:pointer;
}
.comm-section-head .cs-more:hover{color:var(--accent-2)}

/* ============================================================
   1) БОЛЬШАЯ КАРТОЧКА — баннер + иконка слева сверху
   ============================================================ */
.comm-hero{
  margin:2px 16px 0;
  border-radius:18px;overflow:hidden;
  background:linear-gradient(155deg,rgba(30,45,80,.6),rgba(19,28,51,.85));
  border:1px solid var(--line-strong);
  cursor:pointer;transition:.15s;
  position:relative;
}
.comm-hero:hover{transform:translateY(-1px);border-color:var(--accent-2)}

.comm-hero-banner{
  height:160px;position:relative;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
}
.comm-hero-banner img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.comm-hero-banner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55) 100%);
}

/* иконка слева сверху */
.comm-hero-av{
  position:absolute;left:12px;top:12px;
  width:56px;height:56px;border-radius:50%;
  border:3px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;align-items:center;justify-content:center;
  overflow:visible;z-index:2;font-size:26px;
  box-shadow:0 8px 22px rgba(0,0,0,.55);
}
.comm-hero-av .av-inner{
  width:100%;height:100%;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:inherit;
}
.comm-hero-av .av-inner img{width:100%;height:100%;object-fit:cover;display:block}

/* онлайн-точка на иконке */
.comm-hero-av 

.comm-hero-body{
  padding:12px 14px 14px;
}
.comm-hero-name{
  font-size:15px;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.comm-hero-meta{
  font-size:11.5px;color:var(--text-dim);
  margin-top:4px;display:flex;align-items:center;gap:8px;
}
.comm-hero-meta .on{
  color:#3fd07a;display:inline-flex;align-items:center;gap:4px;
}
.comm-hero-meta .on::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:#3fd07a;box-shadow:0 0 6px rgba(63,208,122,.7);
}
.comm-hero-prog{
  height:4px;border-radius:2px;
  background:rgba(120,150,210,.14);overflow:hidden;margin-top:10px;
}
.comm-hero-prog > i{
  display:block;height:100%;
  background:linear-gradient(90deg,#4a6db8,#93b1e5);
  border-radius:2px;
}

/* ============================================================
   2) ОСНОВНОЙ СПИСОК — 4 в ряд, вертикальные
   ============================================================ */
.comm-row4{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 24px) / 4);
  gap:8px;
  padding:2px 16px 8px;
  overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.comm-row4::-webkit-scrollbar{display:none}

.comm-mini{
  aspect-ratio:3 / 4;
  border-radius:14px;overflow:hidden;position:relative;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  border:1px solid var(--line);
  cursor:pointer;transition:.15s;
  scroll-snap-align:start;
}
.comm-mini:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.comm-mini > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.comm-mini .cgrad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85) 100%);
}
.comm-mini-av{
  position:absolute;top:6px;left:6px;
  width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;overflow:hidden;z-index:2;
}
.comm-mini-av img{width:100%;height:100%;object-fit:cover}
.comm-mini-name{
  position:absolute;left:6px;right:6px;bottom:6px;
  color:#fff;font-size:10.5px;font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,.95);
  z-index:2;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}

/* ============================================================
   3) ЛИДЕРЫ — 16:9 горизонтальные, иконка снизу слева
   ============================================================ */
.comm-leaders{
  display:flex;gap:10px;
  padding:2px 16px 8px;
  overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.comm-leaders::-webkit-scrollbar{display:none}

.comm-leader{
  flex:0 0 auto;width:216px;
  border-radius:14px;overflow:hidden;
  background:linear-gradient(155deg,rgba(30,45,80,.75),rgba(19,28,51,.9));
  border:1px solid var(--line);
  cursor:pointer;transition:.15s;
  scroll-snap-align:start;
}
.comm-leader:hover{transform:translateY(-2px);border-color:var(--line-strong)}

.comm-leader-banner{
  aspect-ratio:16 / 9;
  position:relative;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
}
.comm-leader-banner > img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.comm-leader-banner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.65) 100%);
}
.comm-leader-av{
  position:absolute;left:10px;bottom:10px;
  width:32px;height:32px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:16px;z-index:2;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.comm-leader-av img{width:100%;height:100%;object-fit:cover}

.comm-leader-body{
  padding:10px 12px 12px;
}
.comm-leader-name{
  font-size:12.5px;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.comm-leader-meta{
  font-size:10.5px;color:var(--text-dim);margin-top:3px;
  display:flex;align-items:center;gap:6px;
}
.comm-leader-meta .on{
  color:#3fd07a;display:inline-flex;align-items:center;gap:4px;
}
.comm-leader-meta .on::before{
  content:'';width:5px;height:5px;border-radius:50%;background:#3fd07a;
}

/* ============================================================
   ПРАВКА — квадратные иконки сообществ
   ============================================================ */

/* 1) Большая карточка сверху — иконка слева сверху, квадратная */
.comm-hero-av{
  border-radius:14px !important;
  width:60px;height:60px;
}
.comm-hero-av .av-inner{
  border-radius:11px !important;
}

/* 2) Мини-карточки (4 в ряд) — иконка слева сверху, квадратная */
.comm-mini-av{
  border-radius:7px !important;
  width:24px;height:24px;
  border-width:1.5px;
}

/* 3) Лидеры — иконка снизу слева, квадратная */
.comm-leader-av{
  border-radius:10px !important;
  width:36px;height:36px;
}

/* Онлайн-точка на квадратных иконках — не вылезает за угол */
.comm-hero-av 

/* ============================================================
   СООБЩЕСТВО — верх по макету
   ============================================================ */

/* --- Верхняя строка: [←]  ...  [Выйти/Вступить] --- */
.comm-top{
  display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 8px;
}
.comm-top-back{
  width:40px;height:40px;border-radius:12px;
  background:rgba(20,35,70,.6);
  border:1px solid var(--line-strong);
  color:var(--text);font-size:16px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:inherit;transition:.15s;
}
.comm-top-back:hover{background:rgba(74,109,184,.35)}
.comm-top-action{
  margin-left:auto;
  padding:9px 16px;border-radius:12px;
  background:rgba(74,109,184,.32);
  border:1px solid var(--line-strong);
  color:var(--text);font-family:inherit;
  font-size:12.5px;font-weight:600;
  cursor:pointer;transition:.15s;
  white-space:nowrap;
}
.comm-top-action:hover{background:rgba(74,109,184,.5)}
.comm-top-action.primary{
  background:linear-gradient(135deg,#4a6db8,#5d81c8);
  border-color:transparent;
}
.comm-top-action.primary:hover{filter:brightness(1.12)}
.comm-top-action.danger{
  background:rgba(180,60,60,.32);
  border-color:rgba(220,110,110,.45);
  color:#ffb3b3;
}
.comm-top-action.danger:hover{background:rgba(180,60,60,.5)}

/* --- Большой баннер с инфо внутри --- */
.comm-banner{
  position:relative;
  margin:0 16px;
  border-radius:18px;
  overflow:hidden;
  height:190px;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  border:1px solid var(--line);
}
.comm-banner > img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.comm-banner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.78) 100%);
  pointer-events:none;
}
.comm-banner-info{
  position:absolute;
  left:12px;bottom:12px;right:12px;
  display:flex;align-items:center;gap:12px;
  z-index:2;
}
.comm-banner-av{
  width:56px;height:56px;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;flex-shrink:0;
  border:2px solid rgba(255,255,255,.25);
  box-shadow:0 6px 16px rgba(0,0,0,.5);
}
.comm-banner-av img{width:100%;height:100%;object-fit:cover;display:block}
.comm-banner-meta{min-width:0;flex:1}
.comm-banner-name{
  font-size:16px;font-weight:700;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.15;
}
.comm-banner-sub{
  font-size:11.5px;color:rgba(255,255,255,.88);
  margin-top:3px;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}

/* --- Табы-пилюли --- */
.comm-tabs-pill{
  display:flex;gap:6px;
  padding:2px 16px 0;
  overflow-x:auto;scrollbar-width:none;
}
.comm-tabs-pill::-webkit-scrollbar{display:none}
.comm-tab-pill{
  flex:0 0 auto;
  padding:9px 16px;
  border-radius:12px;
  background:rgba(20,35,70,.45);
  border:1px solid var(--line);
  color:var(--text-dim);
  font-family:inherit;font-size:12px;font-weight:600;
  cursor:pointer;transition:.15s;white-space:nowrap;
}
.comm-tab-pill:hover{background:rgba(74,109,184,.2)}
.comm-tab-pill.active{
  background:linear-gradient(135deg,rgba(74,109,184,.55),rgba(93,129,200,.45));
  border-color:rgba(120,150,210,.5);
  color:var(--text);
}

/* --- Заголовок раздела (Активные пользователи / Главная Страница) --- */
.comm-section-label{
  font-size:13.5px;font-weight:700;color:var(--text);
  padding:14px 16px 6px;
}

/* --- Активные пользователи (круглые аватарки + ник) --- */
.comm-online{
  display:flex;gap:14px;
  padding:2px 16px 6px;
  overflow-x:auto;scrollbar-width:none;
}
.comm-online::-webkit-scrollbar{display:none}
.comm-online-item{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;min-width:54px;
}
.comm-online-item span{
  font-size:10.5px;color:var(--text-dim);
  max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* --- Посты в сообществе: компактные строки --- */
.comm-posts-list{
  display:flex;flex-direction:column;gap:8px;
  padding:2px 16px 8px;
}
.comm-post-row{
  display:flex;gap:10px;align-items:center;
  padding:12px 14px;
  background:linear-gradient(155deg,rgba(26,37,66,.6),rgba(19,28,51,.75));
  border:1px solid var(--line);border-radius:14px;
  cursor:pointer;transition:.15s;
}
.comm-post-row:hover{border-color:var(--line-strong)}
.comm-post-row-info{flex:1;min-width:0}
.comm-post-row-title{
  font-size:13px;font-weight:600;color:var(--text);
  line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}
.comm-post-row-meta{
  font-size:11px;color:var(--text-dim);margin-top:3px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}

/* ============================================================
   ТАБЫ СООБЩЕСТВА — единый контейнер + скользящий индикатор
   ============================================================ */
.comm-tabs-box{
  position:relative;
  display:flex;
  margin:0 16px;
  padding:4px;
  background:rgba(15,23,38,.7);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}

.comm-tabs-indicator{
  position:absolute;
  top:4px;left:4px;
  height:calc(100% - 8px);
  border-radius:10px;
  background:linear-gradient(135deg,rgba(74,109,184,.55),rgba(93,129,200,.45));
  border:1px solid rgba(120,150,210,.35);
  box-shadow:0 2px 10px rgba(74,109,184,.35);
  transition:transform .3s cubic-bezier(.4,.7,.3,1),
             width .3s cubic-bezier(.4,.7,.3,1);
  pointer-events:none;
  z-index:1;
}

.comm-tab-item{
  flex:1;
  position:relative;
  z-index:2;
  border:none;
  background:transparent;
  color:var(--text-muted);
  font-family:inherit;
  font-size:11.5px;
  font-weight:600;
  padding:9px 4px;
  border-radius:10px;
  cursor:pointer;
  transition:color .25s ease;
  white-space:nowrap;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
}
.comm-tab-item:hover{color:var(--text-dim)}
.comm-tab-item.active{color:var(--text)}

/* ============================================================
   ЭТАП 7 — ЧАТЫ
   ============================================================ */
.chats-header{
  display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 4px;
}
.chats-header .ch-title{
  flex:1;text-align:center;font-size:15px;font-weight:700;
  padding-right:38px;
}

.chat-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;margin:0 16px;
  background:linear-gradient(155deg,rgba(26,37,66,.6),rgba(19,28,51,.75));
  border:1px solid var(--line);border-radius:16px;
  cursor:pointer;transition:.15s;
  position:relative;
  user-select:none;-webkit-user-select:none;
}
.chat-row:hover{border-color:var(--line-strong)}
.chat-row:active{transform:scale(.995)}
.chat-row.pinned{
  border-color:rgba(120,150,210,.35);
  background:linear-gradient(155deg,rgba(35,50,88,.7),rgba(22,33,60,.85));
}
.chat-row .pin-badge{
  position:absolute;top:8px;right:10px;
  font-size:11px;color:var(--accent-3);opacity:.8;
}
.chat-row-info{flex:1;min-width:0}
.chat-row-top{
  display:flex;align-items:center;gap:8px;
}
.chat-row-name{
  font-weight:700;font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;min-width:0;
}
.chat-row-time{
  font-size:10.5px;color:var(--text-muted);flex-shrink:0;
}
.chat-row-last{
  font-size:12px;color:var(--text-dim);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-row-last.typing{color:var(--accent-2);font-style:italic}
.chat-row-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 6px;
  background:linear-gradient(135deg,#4a6db8,#5d81c8);
  color:#fff;font-size:10.5px;font-weight:700;
  border-radius:9px;margin-left:6px;
}
.chat-row-av-wrap{position:relative;flex-shrink:0}

/* --- Экран чата --- */
.chat-screen{
  min-height:100%;display:flex;flex-direction:column;
}
.chat-top{
  display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:linear-gradient(180deg,rgba(10,17,34,.95),rgba(10,17,34,.65));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:10;
  border-bottom:1px solid var(--line);
}
.chat-top-info{flex:1;min-width:0;cursor:pointer}
.chat-top-name{
  font-size:14px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-top-status{
  font-size:11px;color:var(--text-dim);margin-top:1px;
}
.chat-top-status.on{color:#3fd07a}
.chat-top-status.typing{color:var(--accent-2)}

.chat-feed{
  flex:1;display:flex;flex-direction:column;gap:8px;
  padding:12px 16px;
}
.chat-feed.no-input{padding-bottom:20px}

.date-sep{
  text-align:center;font-size:10.5px;color:var(--text-muted);
  margin:6px 0;
}

@keyframes msgIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.msg-row{
  display:flex;gap:8px;align-items:flex-end;
  max-width:100%;
  animation:msgIn .28s cubic-bezier(.3,.7,.3,1);
}
.msg-row .msg-av{flex-shrink:0;align-self:flex-end}
.msg-body{
  display:flex;flex-direction:column;gap:2px;
  max-width:75%;min-width:0;
}
.msg-name{
  font-size:10.5px;color:var(--text-dim);padding:0 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.msg-bubble{
  background:linear-gradient(155deg,rgba(35,50,88,.95),rgba(22,33,60,.98));
  border:1px solid var(--line);
  color:var(--text);
  padding:9px 12px;border-radius:14px 14px 14px 4px;
  font-size:12.5px;line-height:1.4;
  word-break:break-word;
  white-space:pre-wrap;
}
.msg-row.me{flex-direction:row-reverse}
.msg-row.me .msg-body{align-items:flex-end}
.msg-row.me .msg-name{text-align:right}
.msg-row.me .msg-bubble{
  background:linear-gradient(155deg,#3a5aa0,#4a6db8);
  border-color:rgba(120,150,210,.5);
  border-radius:14px 14px 4px 14px;
}

.chat-input-row{
  display:flex;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,17,34,.65),rgba(5,9,17,.98));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  position:sticky;bottom:0;z-index:5;
}
.chat-input-row .input{flex:1}
.chat-send{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  border:none;
  background:var(--accent-grad);color:#fff;
  font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(74,109,184,.45);
  transition:.15s;
}
.chat-send:hover{filter:brightness(1.12)}
.chat-send:active{transform:scale(.94)}

.typing-indicator{
  display:flex;align-items:center;gap:6px;
  padding:4px 12px 8px;color:var(--accent-2);
  font-size:11.5px;font-style:italic;
}
.typing-dots{
  display:inline-flex;gap:3px;
}
.typing-dots span{
  width:4px;height:4px;border-radius:50%;
  background:var(--accent-2);
  animation:tdot 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes tdot{
  0%,60%,100%{opacity:.3;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}
}

/* ============================================================
   КРАСИВЫЙ ЭКРАН ЧАТА
   ============================================================ */

/* --- фон с фигурами --- */
.chat-screen{
  position:relative;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(74,109,184,.10) 0, transparent 22%),
    radial-gradient(circle at 82% 78%, rgba(93,129,200,.10) 0, transparent 24%),
    radial-gradient(circle at 45% 55%, rgba(120,150,210,.06) 0, transparent 40%);
  background-attachment: local;
}
.chat-screen::before{
  content:'';
  position:absolute;inset:0;
  pointer-events:none;
  opacity:.5;
  background-image:
    /* круги */
    radial-gradient(circle, rgba(120,150,210,.14) 1.2px, transparent 2px),
    radial-gradient(circle, rgba(120,150,210,.10) 1px, transparent 1.6px),
    /* маленькие квадраты-ромбы (45deg) */
    linear-gradient(45deg, rgba(120,150,210,.06) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(120,150,210,.06) 1px, transparent 1px);
  background-size:
    42px 42px,
    28px 28px,
    56px 56px,
    56px 56px;
  background-position:
    0 0,
    14px 22px,
    0 0,
    28px 28px;
  z-index:0;
}

/* --- большой "профиль-хиро" сверху чата --- */
.chat-hero{
  margin:12px 16px 4px;
  padding:22px 18px 18px;
  border-radius:22px;
  background:
    linear-gradient(155deg,rgba(38,55,98,.9),rgba(22,33,60,.95));
  border:1px solid var(--line-strong);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  position:relative;z-index:1;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
}
.chat-hero::after{
  content:'';
  position:absolute;left:0;right:0;top:0;height:70px;
  background:linear-gradient(180deg,rgba(93,129,200,.28),transparent);
  pointer-events:none;
}
.chat-hero-av{
  width:88px;height:88px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  border:3px solid rgba(120,150,210,.35);
  display:flex;align-items:center;justify-content:center;
  font-size:42px;flex-shrink:0;
  position:relative;z-index:1;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.chat-hero-av img{width:100%;height:100%;object-fit:cover;display:block}
.chat-hero-name{
  font-size:18px;font-weight:700;color:var(--text);
  position:relative;z-index:1;margin-top:4px;
  text-align:center;
  word-break:break-word;
}
.chat-hero-status{
  font-size:12px;color:var(--text-muted);
  position:relative;z-index:1;
}
.chat-hero-status.on{color:#3fd07a}
.chat-hero-status.typing{color:var(--accent-2);font-style:italic}

/* --- лента сообщений --- */
.chat-feed{
  position:relative;z-index:1;
  flex:1;display:flex;flex-direction:column;gap:6px;
  padding:8px 16px 12px;
}

/* --- время под сообщением --- */
.msg-time{
  font-size:10px;color:var(--text-muted);
  padding:0 8px;
  margin-top:2px;
  opacity:.85;
}
.msg-row.me .msg-time{text-align:right}

/* --- пузырь: дорабатываем отступы чтобы влезло время --- */
.msg-body{gap:0}

/* --- поле ввода: пофиксим z-index над фоном --- */
.chat-input-row{position:relative;z-index:2}

/* --- верхняя панель: делаем полупрозрачной, чтобы фон было видно --- */
.chat-top{
  position:relative;z-index:3;
  background:linear-gradient(180deg,rgba(10,17,34,.9),rgba(10,17,34,.55));
}

/* ============================================================
   ЧАТ — правки: меньше hero, узкая панель, typing на панели
   ============================================================ */

/* 1) Меньше hero-аватар */
.chat-hero{
  padding:14px 16px 12px;
  gap:5px;
  margin:10px 16px 4px;
  border-radius:18px;
}
.chat-hero-av{
  width:60px;height:60px;
  font-size:28px;
  border-width:2px;
}
.chat-hero-name{
  font-size:14.5px;
  margin-top:2px;
}
.chat-hero-status{font-size:11px}

/* 2) Ник под каждым сообщением: возвращаем компактный стиль */
.msg-name{
  font-size:10.5px;
  color:var(--text-dim);
  padding:0 6px 1px;
  line-height:1.2;
}
.msg-row.me .msg-name{color:var(--accent-3);opacity:.9}

/* 3) Панель ввода — плоская, узкая (16:9 по форме, но тонкая) */
.chat-input-row{
  display:flex;align-items:flex-end;gap:8px;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  min-height:auto;
}
.chat-input-wrap{
  flex:1;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(20,29,51,.95),rgba(12,20,36,.95));
  border:1px solid var(--line-strong);
  border-radius:16px;
  padding:4px 4px 4px 12px;
  transition:.15s;
  min-width:0;
}
.chat-input-wrap:focus-within{
  border-color:rgba(107,143,212,.55);
  box-shadow:0 0 0 3px rgba(74,109,184,.15);
}
.chat-input-wrap .input{
  background:transparent;
  border:none;
  padding:7px 0;
  border-radius:0;
  font-size:13px;
  box-shadow:none;
  min-width:0;
}
.chat-input-wrap .input:focus{
  background:transparent;
  border:none;
  box-shadow:none;
}
.chat-input-wrap .input::placeholder{color:var(--text-muted)}

.chat-input-tools{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4px 0 0;
}
.chat-input-typing{
  font-size:10.5px;
  color:var(--accent-2);
  font-style:italic;
  padding-left:4px;
  opacity:0;
  transition:opacity .2s;
  display:flex;align-items:center;gap:5px;
  min-height:14px;
}
.chat-input-typing.on{opacity:1}
.chat-input-typing .typing-dots{display:inline-flex;gap:3px}
.chat-input-typing .typing-dots span{
  width:3px;height:3px;border-radius:50%;
  background:var(--accent-2);
  animation:tdot 1.2s infinite ease-in-out;
}
.chat-input-typing .typing-dots span:nth-child(2){animation-delay:.15s}
.chat-input-typing .typing-dots span:nth-child(3){animation-delay:.3s}

/* 4) Кнопка отправки — компактнее */
.chat-send{
  width:38px;height:38px;
  font-size:14px;
  flex-shrink:0;
}

/* 5) Старый typing-indicator в ленте больше не нужен */
.typing-indicator{display:none}

/* ============================================================
   ЧАТ — фиксированный верх + скролл только в ленте
   ============================================================ */
.chat-screen{
  display:flex;
  flex-direction:column;
  height:100%;
  max-height:100%;
  overflow:hidden;
  position:relative;
}

/* шапка (Назад) и hero — не скроллятся */
.chat-top{
  flex:0 0 auto;
  position:relative;
  top:auto;
}
.chat-hero{
  flex:0 0 auto;
}

/* лента — единственное, что скроллится */
.chat-feed{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(120,150,210,.2) transparent;
  -webkit-overflow-scrolling:touch;
}
.chat-feed::-webkit-scrollbar{width:4px}
.chat-feed::-webkit-scrollbar-thumb{
  background:rgba(120,150,210,.22);border-radius:4px;
}

/* панель ввода — не скроллится */
.chat-input-row{
  flex:0 0 auto;
  position:relative;
  bottom:auto;
}

/* аватар на своих сообщениях — фиксированный размер */
.msg-row .msg-av{flex-shrink:0;align-self:flex-end}

/* ============================================================
   ЭТАП 8 — ДРУЗЬЯ / УВЕДОМЛЕНИЯ / БУРГЕР-МЕНЮ
   ============================================================ */
.friends-tabs{
  display:flex;gap:6px;margin:8px 16px 0;
  padding:4px;background:rgba(15,23,38,.7);
  border:1px solid var(--line);border-radius:14px;
  position:relative;overflow:hidden;
}
.friends-tabs-ind{
  position:absolute;top:4px;left:4px;height:calc(100% - 8px);
  border-radius:10px;
  background:linear-gradient(135deg,rgba(74,109,184,.55),rgba(93,129,200,.45));
  border:1px solid rgba(120,150,210,.35);
  transition:transform .3s cubic-bezier(.4,.7,.3,1),width .3s cubic-bezier(.4,.7,.3,1);
  pointer-events:none;z-index:1;
}
.friends-tab{
  flex:1;position:relative;z-index:2;
  padding:9px 4px;border:none;background:transparent;
  color:var(--text-muted);font-family:inherit;font-size:11.5px;font-weight:600;
  cursor:pointer;transition:color .25s;border-radius:10px;text-align:center;
}
.friends-tab.active{color:var(--text)}

.user-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;margin:0 16px;
  background:linear-gradient(155deg,rgba(26,37,66,.55),rgba(19,28,51,.7));
  border:1px solid var(--line);border-radius:14px;
  cursor:pointer;transition:.15s;
}
.user-row:hover{border-color:var(--line-strong)}
.user-row-info{flex:1;min-width:0}
.user-row-name{
  font-size:13.5px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.user-row-nick{font-size:11px;color:var(--text-dim);margin-top:2px}
.user-row-actions{display:flex;gap:6px;flex-shrink:0}
.user-row-actions .btn.xs{
  width:auto;padding:6px 12px;font-size:11px;border-radius:10px;
}

/* Уведомления */
.notif-row{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 14px;margin:0 16px;
  background:linear-gradient(155deg,rgba(26,37,66,.55),rgba(19,28,51,.7));
  border:1px solid var(--line);border-radius:14px;
  cursor:pointer;transition:.15s;position:relative;
}
.notif-row:hover{border-color:var(--line-strong)}
.notif-row.unread{
  background:linear-gradient(155deg,rgba(45,65,115,.7),rgba(28,42,80,.85));
  border-color:rgba(120,150,210,.4);
}
.notif-row.unread::before{
  content:'';position:absolute;left:5px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--accent-2);box-shadow:0 0 6px var(--accent-2);
}
.notif-info{flex:1;min-width:0}
.notif-text{font-size:12.5px;line-height:1.4;color:var(--text);word-break:break-word}
.notif-time{font-size:10.5px;color:var(--text-muted);margin-top:4px}

/* Бургер-меню (DrawerMain) */
.drawer-user{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:20px 16px 16px;
  border-bottom:1px solid var(--line);
}
.drawer-user .du-name{
  font-size:15px;font-weight:700;color:var(--text);text-align:center;
  display:flex;align-items:center;gap:6px;justify-content:center;flex-wrap:wrap;
}
.drawer-user .du-nick{font-size:12px;color:var(--text-dim)}
.drawer-user .du-edit{
  padding:8px 18px;border-radius:12px;
  background:rgba(74,109,184,.25);
  border:1px solid var(--line-strong);
  color:var(--text);font-family:inherit;
  font-size:12px;font-weight:600;cursor:pointer;
  transition:.15s;margin-top:6px;
}
.drawer-user .du-edit:hover{background:rgba(74,109,184,.45)}

.drawer-nav{
  display:flex;flex-direction:column;gap:6px;
  padding:12px 14px;
}
.drawer-nav-item{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;border-radius:12px;
  background:rgba(20,35,70,.4);
  border:1px solid var(--line);
  color:var(--text);font-family:inherit;
  font-size:13px;font-weight:500;
  cursor:pointer;text-align:left;transition:.15s;
  width:100%;
}
.drawer-nav-item:hover{background:rgba(74,109,184,.22);border-color:var(--line-strong)}
.drawer-nav-item .ic{font-size:16px;width:22px;text-align:center;flex-shrink:0}

.drawer-staff{
  padding:12px 14px 24px;
  border-top:1px solid var(--line);
  margin-top:auto;
}
.drawer-staff-title{
  font-size:10.5px;color:var(--text-muted);letter-spacing:.5px;
  text-transform:uppercase;padding:0 4px 8px;font-weight:600;
}
.drawer-staff-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:10px;
  cursor:pointer;transition:.15s;
}
.drawer-staff-item:hover{background:rgba(74,109,184,.15)}
.drawer-staff-info{flex:1;min-width:0}
.drawer-staff-name{font-size:12px;font-weight:600}
.drawer-staff-role{font-size:10.5px;color:var(--accent-2)}

/* ============================================================
   ИКОНКА УВЕДОМЛЕНИЙ в поиске + Выйти внизу drawer
   ============================================================ */

/* строка поиска + квадратная иконка уведомлений */
.search-row{
  display:flex;gap:8px;align-items:center;
}
.search-row .search{flex:1;min-width:0}
.notif-btn{
  position:relative;
  flex:0 0 auto;
  width:44px;height:44px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(20,29,51,.9),rgba(12,20,36,.9));
  border:1px solid var(--line-strong);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:inherit;
  font-size:18px;transition:.15s;
}
.notif-btn:hover{
  background:linear-gradient(180deg,rgba(30,45,80,.95),rgba(20,30,55,.95));
  border-color:rgba(120,150,210,.5);
}
.notif-btn .notif-badge{
  position:absolute;
  top:-4px;right:-4px;
  min-width:18px;height:18px;
  padding:0 5px;
  background:linear-gradient(135deg,#d24a4a,#b83a3a);
  color:#fff;font-size:10.5px;font-weight:700;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg-phone-2);
  box-shadow:0 2px 8px rgba(210,74,74,.5);
}

/* Выйти внизу drawer */
.drawer-logout{
  margin:8px 14px calc(14px + env(safe-area-inset-bottom));
  padding:12px 14px;
  border-radius:12px;
  background:rgba(180,60,60,.18);
  border:1px solid rgba(220,110,110,.35);
  color:#ffb3b3;
  font-family:inherit;
  font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:12px;
  cursor:pointer;transition:.15s;
  width:calc(100% - 28px);
}
.drawer-logout:hover{
  background:rgba(180,60,60,.32);
  border-color:rgba(220,110,110,.55);
}
.drawer-logout .ic{font-size:16px}

/* ============================================================
   ДИАГНОСТИКА
   ============================================================ */
.diag-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:0 16px;
}
.diag-tile{
  padding:12px;
  background:linear-gradient(155deg,rgba(26,37,66,.7),rgba(19,28,51,.85));
  border:1px solid var(--line);border-radius:14px;
}
.diag-label{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.diag-value{font-size:16px;font-weight:700;color:var(--text);margin-top:4px;word-break:break-word}
.diag-value.sm{font-size:13px;font-weight:600}
.diag-section{
  padding:14px 16px 6px;
  font-size:12px;font-weight:600;color:var(--accent-3);
  text-transform:uppercase;letter-spacing:.5px;
}

/* ============================================================
   СТЕНА ПРОФИЛЯ
   ============================================================ */
.wall-list{
  display:flex;flex-direction:column;gap:8px;
  padding:0 16px;
}
.wall-card{
  padding:10px 12px;
  background:linear-gradient(155deg,rgba(26,37,66,.55),rgba(19,28,51,.7));
  border:1px solid var(--line);border-radius:12px;
  position:relative;
}
.wall-card.pinned{
  border-color:rgba(120,150,210,.4);
  background:linear-gradient(155deg,rgba(35,50,88,.7),rgba(22,33,60,.85));
}
.wall-card-head{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
}
.wall-card-name{
  font-size:11.5px;color:var(--text-dim);
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;flex:1;min-width:0;
}
.wall-card-name b{color:var(--text);font-weight:600}
.wall-card-time{font-size:10px;color:var(--text-muted)}
.wall-card-text{
  font-size:12.5px;color:var(--text);line-height:1.45;
  white-space:pre-wrap;word-break:break-word;
}
.wall-card-del{
  position:absolute;top:6px;right:6px;
  padding:2px 8px;border-radius:8px;
  background:transparent;border:none;
  color:var(--text-muted);font-size:12px;
  cursor:pointer;font-family:inherit;
}
.wall-card-del:hover{background:rgba(220,110,110,.15);color:#ff8b8b}

.wall-input-row{
  display:flex;gap:8px;align-items:center;
  padding:0 16px 8px;
}
.wall-input-row .input{flex:1}

/* ============================================================
   ФИКС-ПАКЕТ: посты компактнее, сообщества уже, аватар меньше
   ============================================================ */

/* --- п.4: посты в ленте сообщества компактнее, без полоски --- */
.post-card-cover{
  aspect-ratio: 16 / 7;
  border-radius: 0;
}
.post-card-body{padding: 10px 12px 6px}
.post-card-title{font-size:12.5px}
.post-card-text{font-size:11.5px;-webkit-line-clamp:2}
.post-card-foot{
  padding:6px 12px 10px;
  border-top: none;   /* убрал полоску */
  margin-top:0;
}
.post-card-action{font-size:11px;padding:3px 6px}

/* --- п.5: сообщества чуть уже + иконка менее скруглённая --- */
.comm-mini{aspect-ratio:3 / 4.2}
.comm-mini-av{border-radius:6px}          /* было 7, стало 6 — менее скруглённо */
.comm-hero-av{border-radius:10px !important}
.comm-hero-av .av-inner{border-radius:8px !important}
.comm-leader-av{border-radius:8px !important}

/* сообщества уже — 4 в ряд, но с меньшим gap */
.comm-row4{grid-auto-columns:calc((100% - 30px) / 4.4); gap:6px; padding:2px 16px 8px}
.comm-leader{width:200px}

/* --- п.6: аватар в профиле меньше и аккуратнее --- */
.profile-hero .avatar.av-2xl,
.profile-hero .av-2xl{
  width:76px !important;
  height:76px !important;
  font-size:36px !important;
}
.profile-hero{margin-top:-42px}


/* ============================================================
   CTA-кнопки в профиле — в одну строку, компактнее
   ============================================================ */
.profile-cta-row{
  display:flex;gap:8px;
  padding:6px 16px 0;
  align-items:stretch;
}
.profile-cta-row .btn-outline{
  flex:1;
  padding:9px 12px;          /* было 12-13px, стало 9px — ниже */
  font-size:12.5px;          /* было 13.5px */
  border-radius:12px;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ============================================================
   РЕАКЦИИ НА СООБЩЕНИЯ
   ============================================================ */
.msg-bubble-wrap{
  display:flex;flex-direction:column;gap:4px;
  align-items:flex-start;
}
.msg-row.me .msg-bubble-wrap{align-items:flex-end}

.reactions-row{
  display:flex;gap:4px;flex-wrap:wrap;
  padding:0 4px;
  margin-top:-2px;
}
.reaction-chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;border-radius:10px;
  background:rgba(74,109,184,.18);
  border:1px solid rgba(120,150,210,.25);
  color:var(--text);font-size:11px;
  cursor:pointer;transition:.15s;
  user-select:none;
}
.reaction-chip:hover{background:rgba(74,109,184,.32)}
.reaction-chip.mine{
  background:linear-gradient(135deg,rgba(74,109,184,.5),rgba(93,129,200,.4));
  border-color:rgba(120,150,210,.55);
}
.reaction-chip .count{font-size:10.5px;font-weight:600;opacity:.9}

/* Плашка выбора реакций */
.reaction-picker{
  display:flex;gap:6px;justify-content:center;
  padding:10px 8px;
}
.reaction-picker .rp{
  width:44px;height:44px;
  border-radius:50%;
  background:rgba(20,35,70,.55);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;cursor:pointer;transition:.15s;
  user-select:none;
}
.reaction-picker .rp:hover{transform:scale(1.15);background:rgba(74,109,184,.35)}

/* Кнопка «+реакция» — появляется у сообщения по тапу */
.msg-actions{
  display:flex;gap:4px;padding:2px 6px;
  opacity:0;transition:opacity .15s;
}
.msg-row:hover .msg-actions{opacity:.7}
.msg-row.me .msg-actions{justify-content:flex-end}
.msg-action-btn{
  width:26px;height:26px;border-radius:50%;
  background:rgba(20,35,70,.55);
  border:1px solid var(--line);
  color:var(--text-dim);font-size:13px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.15s;
  font-family:inherit;
}
.msg-action-btn:hover{background:rgba(74,109,184,.4);color:var(--text)}

/* ============================================================
   ПАНЕЛЬ СОЗДАНИЯ/РЕДАКТИРОВАНИЯ ЧАТА + обложка
   ============================================================ */
.chat-cover{
  margin:0 16px;border-radius:16px;overflow:hidden;
  aspect-ratio:16/9;position:relative;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  border:1px solid var(--line);
}
.chat-cover img{width:100%;height:100%;object-fit:cover;display:block}
.chat-cover::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.6) 100%);
  pointer-events:none;
}
.chat-cover-info{
  position:absolute;left:12px;right:12px;bottom:12px;
  display:flex;align-items:center;gap:10px;z-index:2;
}
.chat-cover-info .cc-icon{
  width:40px;height:40px;border-radius:12px;
  background:rgba(10,17,34,.7);
  border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.chat-cover-info .cc-name{
  font-size:14px;font-weight:700;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.9);
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* featured badge */
.chat-featured-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:10px;
  background:linear-gradient(135deg,#d4a13a,#f0c765);
  color:#1a1207;font-size:10px;font-weight:700;
  letter-spacing:.3px;
}

/* featured card (крупный чат) */
.chat-featured{
  margin:8px 16px 4px;
  border-radius:18px;overflow:hidden;
  border:1px solid rgba(212,161,58,.35);
  cursor:pointer;transition:.15s;
  position:relative;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
}
.chat-featured:hover{border-color:rgba(212,161,58,.6);transform:translateY(-1px)}
.chat-featured-cover{
  aspect-ratio:16/7;position:relative;overflow:hidden;
}
.chat-featured-cover img{width:100%;height:100%;object-fit:cover;display:block}
.chat-featured-cover::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.75) 100%);
}
.chat-featured-meta{
  padding:12px 14px;
  display:flex;flex-direction:column;gap:4px;
}
.chat-featured-name{
  font-size:15px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.chat-featured-desc{
  font-size:12px;color:var(--text-dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.chat-featured-sub{
  font-size:11.5px;color:var(--text-muted);margin-top:2px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.chat-featured-sub .on{color:#3fd07a;display:inline-flex;align-items:center;gap:4px}
.chat-featured-sub .on::before{content:'';width:5px;height:5px;border-radius:50%;background:#3fd07a}

/* Mute-иконка в списке */
.chat-row.muted{opacity:.65}
.chat-row-mute-badge{
  position:absolute;top:10px;right:10px;
  font-size:11px;color:var(--text-muted);
}

/* ============================================================
   ТЕМЫ СООБЩЕСТВ
   ============================================================ */
.theme-default { --cm-accent: linear-gradient(135deg,#4a6db8,#5d81c8); --cm-accent-solid: #4a6db8; }
.theme-sunset  { --cm-accent: linear-gradient(135deg,#d4663a,#e8985a); --cm-accent-solid: #d4663a; }
.theme-ocean   { --cm-accent: linear-gradient(135deg,#0d7a9e,#4ab5d4); --cm-accent-solid: #0d7a9e; }
.theme-forest  { --cm-accent: linear-gradient(135deg,#2d7a4e,#5aa876); --cm-accent-solid: #2d7a4e; }
.theme-violet  { --cm-accent: linear-gradient(135deg,#7a3aa0,#a866c8); --cm-accent-solid: #7a3aa0; }
.theme-rose    { --cm-accent: linear-gradient(135deg,#c84a7a,#e87aa0); --cm-accent-solid: #c84a7a; }
.theme-mono    { --cm-accent: linear-gradient(135deg,#4a4a4a,#7a7a7a); --cm-accent-solid: #4a4a4a; }

/* табы и кнопки в цвет темы */
.comm-screen.themed .comm-tab-item.active{color:var(--text)}
.comm-screen.themed .comm-tabs-indicator{
  background:var(--cm-accent);
  border-color:rgba(255,255,255,.18);
}
.comm-screen.themed .comm-top-action.primary{
  background:var(--cm-accent);
  border-color:transparent;
}
.comm-screen.themed .btn-outline.solid{
  background:var(--cm-accent);
  border-color:transparent;
  color:#fff;
}
.comm-screen.themed .comm-hero-prog > i,
.comm-screen.themed .comm-banner::after{
  background:var(--cm-accent);
}

/* ============================================================
   ПРОДВИНУТОЕ РЕДАКТИРОВАНИЕ СООБЩЕСТВА — статистика
   ============================================================ */
.edit-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding:0 16px;
}
.stat-tile{
  padding:10px;
  background:linear-gradient(155deg,rgba(26,37,66,.7),rgba(19,28,51,.85));
  border:1px solid var(--line);border-radius:14px;
  display:flex;flex-direction:column;gap:2px;
  text-align:left;
}
.stat-label{
  font-size:9.5px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.4px;font-weight:600;
}
.stat-value{
  font-size:18px;font-weight:700;color:var(--text);line-height:1.1;
}
.stat-sub{
  font-size:10px;color:var(--text-dim);
}
.stat-sub .up{color:#3fd07a}

/* Топ-пользователи */
.edit-top{
  display:flex;flex-direction:column;gap:6px;
  padding:0 16px;
}
.edit-top-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  background:rgba(74,109,184,.08);
  border:1px solid var(--line);border-radius:12px;
}
.edit-top-item .num{
  font-size:12px;font-weight:700;color:var(--text-muted);
  width:18px;text-align:center;flex-shrink:0;
}
.edit-top-item .info{flex:1;min-width:0}
.edit-top-item .name{
  font-size:12.5px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.edit-top-item .nick{font-size:10.5px;color:var(--text-muted)}
.edit-top-item .score{
  font-size:11px;font-weight:600;color:var(--accent-2);
  background:rgba(74,109,184,.2);padding:3px 8px;border-radius:8px;
  flex-shrink:0;
}

/* Палитра тем */
.theme-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:0 16px;
}
.theme-item{
  aspect-ratio:1/1;border-radius:14px;
  border:2px solid transparent;
  cursor:pointer;transition:.15s;
  position:relative;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:8px;
}
.theme-item::after{
  content:attr(data-label);
  font-size:9.5px;font-weight:600;color:rgba(255,255,255,.9);
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  position:relative;z-index:1;
}
.theme-item.active{
  border-color:var(--text);
  box-shadow:0 0 0 3px rgba(120,150,210,.25);
}
.theme-item.theme-default{background:linear-gradient(135deg,#4a6db8,#5d81c8)}
.theme-item.theme-sunset {background:linear-gradient(135deg,#d4663a,#e8985a)}
.theme-item.theme-ocean  {background:linear-gradient(135deg,#0d7a9e,#4ab5d4)}
.theme-item.theme-forest {background:linear-gradient(135deg,#2d7a4e,#5aa876)}
.theme-item.theme-violet {background:linear-gradient(135deg,#7a3aa0,#a866c8)}
.theme-item.theme-rose   {background:linear-gradient(135deg,#c84a7a,#e87aa0)}
.theme-item.theme-mono   {background:linear-gradient(135deg,#4a4a4a,#7a7a7a)}

/* секция в edit */
.edit-section{
  padding:14px 16px 4px;
  font-size:12px;font-weight:600;color:var(--accent-3);
  text-transform:uppercase;letter-spacing:.4px;
}

/* ============================================================
   РОЛИ В СООБЩЕСТВЕ
   ============================================================ */
.role-badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;border-radius:8px;
  font-size:10px;font-weight:700;
  letter-spacing:.2px;text-transform:lowercase;
  vertical-align:middle;
}
.role-badge.owner{
  background:linear-gradient(135deg,#d4a13a,#f0c765);
  color:#1a1207;
}
.role-badge.admin{
  background:linear-gradient(135deg,#c84a7a,#e87aa0);
  color:#fff;
}
.role-badge.moderator{
  background:linear-gradient(135deg,#2d7a4e,#5aa876);
  color:#fff;
}

/* Секция администрации в настройках */
.staff-block{
  display:flex;flex-direction:column;gap:6px;
  padding:0 16px;
}
.staff-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  background:rgba(74,109,184,.08);
  border:1px solid var(--line);border-radius:12px;
  transition:.15s;
}
.staff-row:hover{border-color:var(--line-strong)}
.staff-row .info{flex:1;min-width:0}
.staff-row .name{
  font-size:12.5px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.staff-row .nick{font-size:10.5px;color:var(--text-muted)}
.staff-row .actions{
  display:flex;gap:4px;flex-shrink:0;
}
.staff-row .actions .btn.xs{
  width:auto;padding:4px 9px;font-size:10.5px;border-radius:8px;
}

/* Кнопка "Назначить" в модалке */
.staff-pick-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  border-radius:12px;cursor:pointer;
  transition:.15s;
}
.staff-pick-row:hover{background:rgba(74,109,184,.18)}
.staff-pick-row .info{flex:1;min-width:0}
.staff-pick-row .name{font-size:13px;font-weight:600}
.staff-pick-row .nick{font-size:11px;color:var(--text-muted)}

/* ============================================================
   ФИКС: темы, статистика, квадратные иконки, featured 16:9
   ============================================================ */

/* --- 1. ТЕМЫ: более широкое покрытие --- */
.theme-default{--cm-accent:linear-gradient(135deg,#4a6db8,#5d81c8);--cm-solid:#4a6db8;--cm-glow:rgba(74,109,184,.45)}
.theme-sunset {--cm-accent:linear-gradient(135deg,#d4663a,#e8985a);--cm-solid:#d4663a;--cm-glow:rgba(212,102,58,.45)}
.theme-ocean  {--cm-accent:linear-gradient(135deg,#0d7a9e,#4ab5d4);--cm-solid:#0d7a9e;--cm-glow:rgba(13,122,158,.45)}
.theme-forest {--cm-accent:linear-gradient(135deg,#2d7a4e,#5aa876);--cm-solid:#2d7a4e;--cm-glow:rgba(45,122,78,.45)}
.theme-violet {--cm-accent:linear-gradient(135deg,#7a3aa0,#a866c8);--cm-solid:#7a3aa0;--cm-glow:rgba(122,58,160,.45)}
.theme-rose   {--cm-accent:linear-gradient(135deg,#c84a7a,#e87aa0);--cm-solid:#c84a7a;--cm-glow:rgba(200,74,122,.45)}
.theme-mono   {--cm-accent:linear-gradient(135deg,#4a4a4a,#7a7a7a);--cm-solid:#4a4a4a;--cm-glow:rgba(74,74,74,.45)}

/* табы */
.comm-tabs-indicator{
  background:var(--cm-accent, linear-gradient(135deg,rgba(74,109,184,.55),rgba(93,129,200,.45))) !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:0 2px 10px var(--cm-glow, rgba(74,109,184,.35)) !important;
}
.comm-tab-item.active{color:#fff}

/* кнопки */
.comm-top-action.primary{
  background:var(--cm-accent, linear-gradient(135deg,#4a6db8,#5d81c8)) !important;
  border-color:transparent !important;
}
.comm-screen .btn-outline.solid{
  background:var(--cm-accent, linear-gradient(135deg,#4a6db8,#5d81c8)) !important;
  border-color:transparent !important;
  color:#fff;
}

/* прогресс-полоса на карточке сообщества */
.comm-hero-prog > i,
.comm-banner::after,
.comm-hero::after{
  background:var(--cm-accent, linear-gradient(90deg,#4a6db8,#93b1e5)) !important;
  opacity:.85;
}

/* аватарка в баннере — обводка цветом темы */
.comm-banner-av,
.comm-hero-av{
  border-color:var(--cm-glow, rgba(255,255,255,.25)) !important;
}

/* нижняя навигация сообщества — активные кнопки в цвет темы */
.comm-nav-btn.primary{
  background:var(--cm-accent, linear-gradient(135deg,#4a6db8,#5d81c8)) !important;
  box-shadow:0 6px 18px var(--cm-glow, rgba(74,109,184,.5)) !important;
}

/* tab "сейчас актуально" / section-title — в цвет темы */
.comm-screen .comm-section-label{
  color:var(--cm-solid, var(--accent-3));
}

/* ============================================================
   2. СТАТИСТИКА — меньше шрифты
   ============================================================ */
.stat-tile{padding:9px}
.stat-label{font-size:9px}
.stat-value{font-size:15px;line-height:1.05}
.stat-sub{font-size:9.5px}

.edit-top-item{padding:7px 10px}
.edit-top-item .name{font-size:11.5px}
.edit-top-item .nick{font-size:10px}
.edit-top-item .score{font-size:10px;padding:2px 6px}

.edit-section{padding:12px 16px 4px;font-size:11px}

/* ============================================================
   3. ИКОНКИ СООБЩЕСТВ — везде квадратные
   ============================================================ */
.avatar.community{
  border-radius:12px !important;
}
.avatar.community.av-lg{border-radius:14px !important}
.avatar.community.av-xl{border-radius:16px !important}
.avatar.community.av-sm{border-radius:10px !important}
.avatar.community.av-xs{border-radius:8px !important}
.avatar.community.av-md{border-radius:11px !important}

/* featured-иконка чата */
.chat-featured .cf-av{
  border-radius:10px;
}

/* ============================================================
   4. FEATURED (подборка) — обложка 16:9 + полоса с иконкой/названием/кол-вом
   ============================================================ */
.chat-featured{
  margin:8px 16px 4px;
  border-radius:16px;overflow:hidden;
  border:1px solid rgba(212,161,58,.3);
  cursor:pointer;transition:.15s;
  position:relative;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
}
.chat-featured:hover{border-color:rgba(212,161,58,.6)}

.chat-featured-cover{
  aspect-ratio:16 / 9 !important;   /* было 16/7 */
  position:relative;overflow:hidden;
}
.chat-featured-cover img{width:100%;height:100%;object-fit:cover;display:block}
.chat-featured-cover::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55) 100%);
}

/* нижняя полоса: иконка слева, название от неё, справа кол-во */
.chat-featured-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:linear-gradient(180deg,rgba(10,17,34,.35),rgba(10,17,34,.75));
}
.chat-featured-bar .cf-av{
  width:38px;height:38px;flex-shrink:0;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
}
.chat-featured-bar .cf-av img{width:100%;height:100%;object-fit:cover;display:block}
.chat-featured-bar .cf-name{
  flex:1;min-width:0;
  font-size:14px;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.chat-featured-bar .cf-count{
  font-size:11px;font-weight:600;
  color:#fff;opacity:.9;
  padding:4px 10px;border-radius:10px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  flex-shrink:0;white-space:nowrap;
}
.chat-featured-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:9px;
  background:linear-gradient(135deg,#d4a13a,#f0c765);
  color:#1a1207;font-size:9.5px;font-weight:700;
  margin-right:4px;
}

/* ============================================================
   ФИКС 1: баннер сообщества — вернуть прозрачность
   ============================================================ */
.comm-banner::after{
  background: linear-gradient(180deg, transparent 65%, rgba(0,0,0,.35) 100%) !important;
}
.comm-hero::after{
  background: linear-gradient(180deg, transparent 75%, rgba(0,0,0,.15) 100%) !important;
  opacity:.5 !important;
}
.comm-hero-banner::after{
  background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,.3) 100%) !important;
}
.comm-leader-banner::after{
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4) 100%) !important;
}

/* ============================================================
   ФИКС 3: логотип сообщества (в редакции) — квадратный
   ============================================================ */
.edit-avatar-circle{
  border-radius: 16px !important;
}
.edit-avatar-circle img{
  border-radius: 16px !important;
}

/* регистрация тоже — квадратная */
.reg-avatar-circle{
  border-radius: 16px !important;
}
.reg-avatar-circle img{
  border-radius: 16px !important;
}

/* ============================================================
   ФИКС 2: drawer меняет цвет под тему сообщества
   ============================================================ */
.drawer.themed{
  background: linear-gradient(175deg, var(--cm-drawer-1, #0d1526), var(--cm-drawer-2, #080d18));
  border-right-color: var(--cm-glow, var(--line-strong));
}
.drawer.themed .drawer-nav-item:hover{
  background: var(--cm-glow, rgba(74,109,184,.22));
  border-color: var(--cm-solid, var(--line-strong));
}
.drawer.themed .du-edit{
  background: var(--cm-glow, rgba(74,109,184,.25));
  border-color: var(--cm-solid, var(--line-strong));
  color:#fff;
}
.drawer.themed .drawer-staff-item:hover{
  background: var(--cm-glow, rgba(74,109,184,.15));
}
.drawer.themed .drawer-user{
  border-bottom-color: var(--cm-glow, var(--line));
}

/* палитры drawer по темам */
.theme-default{--cm-drawer-1:#0d1526;--cm-drawer-2:#080d18}
.theme-sunset {--cm-drawer-1:#2a1608;--cm-drawer-2:#1a0d05;--cm-solid:#d4663a;--cm-glow:rgba(212,102,58,.28)}
.theme-ocean  {--cm-drawer-1:#062428;--cm-drawer-2:#03161a;--cm-solid:#0d7a9e;--cm-glow:rgba(13,122,158,.28)}
.theme-forest {--cm-drawer-1:#0a2314;--cm-drawer-2:#051410;--cm-solid:#2d7a4e;--cm-glow:rgba(45,122,78,.28)}
.theme-violet {--cm-drawer-1:#1e0c2a;--cm-drawer-2:#11061a;--cm-solid:#7a3aa0;--cm-glow:rgba(122,58,160,.28)}
.theme-rose   {--cm-drawer-1:#280b1a;--cm-drawer-2:#170610;--cm-solid:#c84a7a;--cm-glow:rgba(200,74,122,.28)}
.theme-mono   {--cm-drawer-1:#1c1c1c;--cm-drawer-2:#0e0e0e;--cm-solid:#7a7a7a;--cm-glow:rgba(122,122,122,.25)}

/* ============================================================
   МАССИВНЫЙ ФИКС — партия 1
   ============================================================ */

/* --- 1. Табы: градиентный индикатор (синий → голубой) --- */
.comm-tabs-indicator{
  background-image: var(--cm-tab-grad, linear-gradient(90deg,#2c4a8a 0%,#4a7ec8 50%,#5fb8d8 100%)) !important;
  background-size: 400% 100% !important;
  background-position: 0% 0 !important;
  transition: transform .35s cubic-bezier(.4,.7,.3,1),
              width .35s cubic-bezier(.4,.7,.3,1),
              background-position .45s cubic-bezier(.4,.7,.3,1) !important;
}
.comm-tab-item.active{ color:#fff !important }

/* --- 2. Бабл чата: тот же baseline, что и аватар --- */
.msg-row{
  align-items: flex-end !important;
}
.msg-row .msg-av,
.msg-row > .avatar{
  align-self: flex-end !important;
  margin-bottom: 16px; /* компенсируем высоту .msg-time */
}
.msg-row .msg-body > .msg-bubble{ margin:0 }
.msg-row .msg-time{ margin-top:2px }

/* --- 3. Реакции: скрыты по умолчанию, показываются по двойному клику --- */
.reactions-row{ display:none !important }
.reactions-row.visible{ display:flex !important }
.msg-actions{ display:none !important } /* убираем кнопку 😀 — реакции через двойной клик */
.msg-bubble{ cursor:pointer; user-select:none }

/* подсветка при двойном тапе */
@keyframes msgPulse{
  0%{ box-shadow: 0 0 0 0 rgba(120,150,210,.55) }
  100%{ box-shadow: 0 0 0 14px rgba(120,150,210,0) }
}
.msg-bubble.pulse{ animation:msgPulse .5s ease-out }

/* --- 4. Островок (bottom-nav): убрать ☰, домик слева --- */
.bottom-nav{
  gap:2px;
}

/* --- 5. Панель редактирования — компактнее --- */
.edit-header{
  padding: calc(6px + env(safe-area-inset-top)) 14px 2px !important;
}
.edit-header .edit-title{ font-size:13.5px !important }
.edit-wrap{ gap:10px !important }
.edit-avatar-circle{ width:74px !important; height:74px !important; border-radius:14px !important }
.edit-avatar-circle img{ border-radius:14px !important }
.edit-avatar-block{ margin-top:-34px !important }
.edit-banner{ height:130px !important }
.icon-btn-circle{ width:34px !important; height:34px !important; font-size:14px !important }

/* --- 6. Предпросмотр чатов в сообществе (2 в колонку, 16:9) --- */
.cp-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:0 16px;
}
.cp-card{
  border-radius:14px;overflow:hidden;
  background:linear-gradient(155deg,rgba(26,37,66,.75),rgba(19,28,51,.9));
  border:1px solid var(--line);
  cursor:pointer;transition:.15s;
  display:flex;flex-direction:column;
  position:relative;
}
.cp-card:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.cp-cover{
  aspect-ratio:16/9;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
}
.cp-cover img{width:100%;height:100%;object-fit:cover;display:block}
.cp-cover::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55) 100%);
}
.cp-av{
  position:absolute;left:8px;bottom:8px;
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:15px;
  border:2px solid rgba(255,255,255,.22);
  z-index:2;
}
.cp-av img{width:100%;height:100%;object-fit:cover}
.cp-info{
  padding:8px 10px 10px;
  display:flex;flex-direction:column;gap:2px;
  min-width:0;
}
.cp-name{
  font-size:12px;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cp-count{font-size:10.5px;color:var(--text-muted)}
.cp-badge{
  position:absolute;top:6px;right:6px;
  padding:2px 7px;border-radius:8px;
  background:linear-gradient(135deg,#d4a13a,#f0c765);
  color:#1a1207;font-size:9.5px;font-weight:700;
  z-index:2;
}
.cp-badge.muted{ background:rgba(80,80,80,.85); color:#fff }

/* --- 7. Онлайн-лента в шапке сообщества (аватарки в ряд, как Amino) --- */
.comm-online-strip{
  display:flex;gap:8px;padding:6px 16px 4px;
  overflow-x:auto;scrollbar-width:none;
}
.comm-online-strip::-webkit-scrollbar{display:none}
.comm-online-strip .cosa{
  flex:0 0 auto;
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  overflow:hidden;position:relative;cursor:pointer;
  border:2px solid rgba(255,255,255,.15);
}
.comm-online-strip .cosa img{width:100%;height:100%;object-fit:cover}
.comm-online-strip .cosa .dot{
  position:absolute;right:0;bottom:0;
  width:10px;height:10px;border-radius:50%;
  background:#3fd07a;border:2px solid var(--bg-phone-2);
}
.comm-online-strip .label{
  align-self:center;font-size:11px;color:var(--text-muted);
  padding-left:6px;white-space:nowrap;
}

/* ============================================================
   5 ТЕМ СООБЩЕСТВ (вместо 7): green / cyan / pink / violet / mono
   ============================================================ */
.theme-default, .theme-cyan{
  --cm-solid:#3f8fbf; --cm-glow:rgba(63,143,191,.45);
  --cm-tab-grad: linear-gradient(90deg,#2c4a8a 0%,#3f8fbf 50%,#5fb8d8 100%);
  --cm-drawer-1:#0a1e2a; --cm-drawer-2:#05121a;
}
.theme-green{
  --cm-solid:#2d7a4e; --cm-glow:rgba(45,122,78,.45);
  --cm-tab-grad: linear-gradient(90deg,#1e5a37 0%,#2d7a4e 50%,#5aa876 100%);
  --cm-drawer-1:#0a2314; --cm-drawer-2:#051410;
}
.theme-pink{
  --cm-solid:#c84a7a; --cm-glow:rgba(200,74,122,.45);
  --cm-tab-grad: linear-gradient(90deg,#8a2c52 0%,#c84a7a 50%,#e87aa0 100%);
  --cm-drawer-1:#280b1a; --cm-drawer-2:#170610;
}
.theme-violet{
  --cm-solid:#7a3aa0; --cm-glow:rgba(122,58,160,.45);
  --cm-tab-grad: linear-gradient(90deg,#4d1e6e 0%,#7a3aa0 50%,#a866c8 100%);
  --cm-drawer-1:#1e0c2a; --cm-drawer-2:#11061a;
}
.theme-mono{
  --cm-solid:#7a7a7a; --cm-glow:rgba(122,122,122,.35);
  --cm-tab-grad: linear-gradient(90deg,#3a3a3a 0%,#7a7a7a 50%,#b0b0b0 100%);
  --cm-drawer-1:#1c1c1c; --cm-drawer-2:#0e0e0e;
}

/* применение accent к элементам */
.comm-top-action.primary{background:var(--cm-solid) !important;border-color:transparent !important}
.comm-screen .btn-outline.solid{
  background:linear-gradient(135deg, var(--cm-solid,#4a6db8), color-mix(in srgb, var(--cm-solid,#5d81c8) 70%, white 30%)) !important;
  border-color:transparent !important; color:#fff;
}
.comm-nav-btn.primary{
  background:linear-gradient(135deg, var(--cm-solid,#4a6db8), color-mix(in srgb, var(--cm-solid,#5d81c8) 65%, white 35%)) !important;
  box-shadow:0 6px 18px var(--cm-glow) !important;
}
.comm-hero-prog > i{
  background:var(--cm-tab-grad) !important;
}
.comm-banner::after{
  background:linear-gradient(180deg, transparent 65%, rgba(0,0,0,.35) 100%) !important;
}

/* ============================================================
   МАССИВНЫЙ ФИКС — партия 1
   ============================================================ */

/* --- 1. Табы: градиентный индикатор (синий → голубой) --- */
.comm-tabs-indicator{
  background-image: var(--cm-tab-grad, linear-gradient(90deg,#2c4a8a 0%,#4a7ec8 50%,#5fb8d8 100%)) !important;
  background-size: 400% 100% !important;
  background-position: 0% 0 !important;
  transition: transform .35s cubic-bezier(.4,.7,.3,1),
              width .35s cubic-bezier(.4,.7,.3,1),
              background-position .45s cubic-bezier(.4,.7,.3,1) !important;
}
.comm-tab-item.active{ color:#fff !important }

/* --- 2. Бабл чата: тот же baseline, что и аватар --- */
.msg-row{
  align-items: flex-end !important;
}
.msg-row .msg-av,
.msg-row > .avatar{
  align-self: flex-end !important;
  margin-bottom: 16px; /* компенсируем высоту .msg-time */
}
.msg-row .msg-body > .msg-bubble{ margin:0 }
.msg-row .msg-time{ margin-top:2px }

/* --- 3. Реакции: скрыты по умолчанию, показываются по двойному клику --- */
.reactions-row{ display:none !important }
.reactions-row.visible{ display:flex !important }
.msg-actions{ display:none !important } /* убираем кнопку 😀 — реакции через двойной клик */
.msg-bubble{ cursor:pointer; user-select:none }

/* подсветка при двойном тапе */
@keyframes msgPulse{
  0%{ box-shadow: 0 0 0 0 rgba(120,150,210,.55) }
  100%{ box-shadow: 0 0 0 14px rgba(120,150,210,0) }
}
.msg-bubble.pulse{ animation:msgPulse .5s ease-out }

/* --- 4. Островок (bottom-nav): убрать ☰, домик слева --- */
.bottom-nav{
  gap:2px;
}

/* --- 5. Панель редактирования — компактнее --- */
.edit-header{
  padding: calc(6px + env(safe-area-inset-top)) 14px 2px !important;
}
.edit-header .edit-title{ font-size:13.5px !important }
.edit-wrap{ gap:10px !important }
.edit-avatar-circle{ width:74px !important; height:74px !important; border-radius:14px !important }
.edit-avatar-circle img{ border-radius:14px !important }
.edit-avatar-block{ margin-top:-34px !important }
.edit-banner{ height:130px !important }
.icon-btn-circle{ width:34px !important; height:34px !important; font-size:14px !important }

/* --- 6. Предпросмотр чатов в сообществе (2 в колонку, 16:9) --- */
.cp-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:0 16px;
}
.cp-card{
  border-radius:14px;overflow:hidden;
  background:linear-gradient(155deg,rgba(26,37,66,.75),rgba(19,28,51,.9));
  border:1px solid var(--line);
  cursor:pointer;transition:.15s;
  display:flex;flex-direction:column;
  position:relative;
}
.cp-card:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.cp-cover{
  aspect-ratio:16/9;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
}
.cp-cover img{width:100%;height:100%;object-fit:cover;display:block}
.cp-cover::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55) 100%);
}
.cp-av{
  position:absolute;left:8px;bottom:8px;
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:15px;
  border:2px solid rgba(255,255,255,.22);
  z-index:2;
}
.cp-av img{width:100%;height:100%;object-fit:cover}
.cp-info{
  padding:8px 10px 10px;
  display:flex;flex-direction:column;gap:2px;
  min-width:0;
}
.cp-name{
  font-size:12px;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cp-count{font-size:10.5px;color:var(--text-muted)}
.cp-badge{
  position:absolute;top:6px;right:6px;
  padding:2px 7px;border-radius:8px;
  background:linear-gradient(135deg,#d4a13a,#f0c765);
  color:#1a1207;font-size:9.5px;font-weight:700;
  z-index:2;
}
.cp-badge.muted{ background:rgba(80,80,80,.85); color:#fff }

/* --- 7. Онлайн-лента в шапке сообщества (аватарки в ряд, как Amino) --- */
.comm-online-strip{
  display:flex;gap:8px;padding:6px 16px 4px;
  overflow-x:auto;scrollbar-width:none;
}
.comm-online-strip::-webkit-scrollbar{display:none}
.comm-online-strip .cosa{
  flex:0 0 auto;
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  overflow:hidden;position:relative;cursor:pointer;
  border:2px solid rgba(255,255,255,.15);
}
.comm-online-strip .cosa img{width:100%;height:100%;object-fit:cover}
.comm-online-strip .cosa .dot{
  position:absolute;right:0;bottom:0;
  width:10px;height:10px;border-radius:50%;
  background:#3fd07a;border:2px solid var(--bg-phone-2);
}
.comm-online-strip .label{
  align-self:center;font-size:11px;color:var(--text-muted);
  padding-left:6px;white-space:nowrap;
}

/* ============================================================
   5 ТЕМ СООБЩЕСТВ (вместо 7): green / cyan / pink / violet / mono
   ============================================================ */
.theme-default, .theme-cyan{
  --cm-solid:#3f8fbf; --cm-glow:rgba(63,143,191,.45);
  --cm-tab-grad: linear-gradient(90deg,#2c4a8a 0%,#3f8fbf 50%,#5fb8d8 100%);
  --cm-drawer-1:#0a1e2a; --cm-drawer-2:#05121a;
}
.theme-green{
  --cm-solid:#2d7a4e; --cm-glow:rgba(45,122,78,.45);
  --cm-tab-grad: linear-gradient(90deg,#1e5a37 0%,#2d7a4e 50%,#5aa876 100%);
  --cm-drawer-1:#0a2314; --cm-drawer-2:#051410;
}
.theme-pink{
  --cm-solid:#c84a7a; --cm-glow:rgba(200,74,122,.45);
  --cm-tab-grad: linear-gradient(90deg,#8a2c52 0%,#c84a7a 50%,#e87aa0 100%);
  --cm-drawer-1:#280b1a; --cm-drawer-2:#170610;
}
.theme-violet{
  --cm-solid:#7a3aa0; --cm-glow:rgba(122,58,160,.45);
  --cm-tab-grad: linear-gradient(90deg,#4d1e6e 0%,#7a3aa0 50%,#a866c8 100%);
  --cm-drawer-1:#1e0c2a; --cm-drawer-2:#11061a;
}
.theme-mono{
  --cm-solid:#7a7a7a; --cm-glow:rgba(122,122,122,.35);
  --cm-tab-grad: linear-gradient(90deg,#3a3a3a 0%,#7a7a7a 50%,#b0b0b0 100%);
  --cm-drawer-1:#1c1c1c; --cm-drawer-2:#0e0e0e;
}

/* применение accent к элементам */
.comm-top-action.primary{background:var(--cm-solid) !important;border-color:transparent !important}
.comm-screen .btn-outline.solid{
  background:linear-gradient(135deg, var(--cm-solid,#4a6db8), color-mix(in srgb, var(--cm-solid,#5d81c8) 70%, white 30%)) !important;
  border-color:transparent !important; color:#fff;
}
.comm-nav-btn.primary{
  background:linear-gradient(135deg, var(--cm-solid,#4a6db8), color-mix(in srgb, var(--cm-solid,#5d81c8) 65%, white 35%)) !important;
  box-shadow:0 6px 18px var(--cm-glow) !important;
}
.comm-hero-prog > i{
  background:var(--cm-tab-grad) !important;
}
.comm-banner::after{
  background:linear-gradient(180deg, transparent 65%, rgba(0,0,0,.35) 100%) !important;
}

/* Превью 5 тем */
.theme-item.theme-green  { background:linear-gradient(135deg,#1e5a37,#5aa876) }
.theme-item.theme-cyan   { background:linear-gradient(135deg,#2c4a8a,#5fb8d8) }
.theme-item.theme-pink   { background:linear-gradient(135deg,#8a2c52,#e87aa0) }
.theme-item.theme-violet { background:linear-gradient(135deg,#4d1e6e,#a866c8) }
.theme-item.theme-mono   { background:linear-gradient(135deg,#3a3a3a,#b0b0b0) }

/* ============================================================
   БЕЙДЖИ РОЛЕЙ — новые градиенты
   ============================================================ */
.role-badge.admin{
  background: linear-gradient(90deg, #5fb8d8 0%, #4a6db8 100%) !important;
  color:#fff !important;
  border:none !important;
}
.role-badge.moderator{
  background: linear-gradient(90deg, #ffffff 0%, #2dd4bf 100%) !important;
  color:#0a1424 !important;
  border:none !important;
}

/* ============================================================
   ОНЛАЙН В КНОПКЕ 👥 (маленькие кружки)
   ============================================================ */
.comm-nav-btn.online-btn{
  width:52px;height:52px;
  padding:4px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.comm-nav-btn.online-btn .mini-stack{
  display:flex;flex-wrap:wrap;gap:2px;
  align-items:center;justify-content:center;
  width:100%;height:100%;
}
.comm-nav-btn.online-btn .mini-av{
  width:18px;height:18px;border-radius:50%;
  overflow:hidden;background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;
  border:1px solid rgba(255,255,255,.15);
}
.comm-nav-btn.online-btn .mini-av img{width:100%;height:100%;object-fit:cover;display:block}
.comm-nav-btn.online-btn .mini-more{
  width:18px;height:18px;border-radius:50%;
  background:rgba(255,255,255,.15);
  font-size:8px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}

/* ============================================================
   ОВЕРЛЕЙ ОНЛАЙН (in-line strip сверху, как drawer)
   ============================================================ */
.online-overlay{
  position:absolute;left:0;right:0;top:0;
  z-index:40;
  background:linear-gradient(180deg,rgba(10,17,34,.98),rgba(10,17,34,.85) 80%,transparent);
  border-bottom-left-radius:18px;
  border-bottom-right-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  transform:translateY(-102%);
  transition:transform .3s cubic-bezier(.3,.7,.3,1);
  padding: calc(12px + env(safe-area-inset-top)) 0 12px;
  max-height:60%;
  overflow-y:auto;
}
.online-overlay.open{transform:translateY(0)}
.online-overlay-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px 10px;
}
.online-overlay-title{font-size:13px;font-weight:700;color:var(--text)}
.online-overlay-close{
  width:30px;height:30px;border-radius:9px;
  background:rgba(74,109,184,.25);
  border:1px solid var(--line-strong);
  color:var(--text);font-size:14px;font-family:inherit;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.online-overlay-list{
  display:flex;gap:10px;padding:0 16px 4px;
  overflow-x:auto;scrollbar-width:none;
}
.online-overlay-list::-webkit-scrollbar{display:none}
.online-overlay-list .ol-item{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;min-width:60px;
}
.online-overlay-list .ol-item .ol-av{
  width:52px;height:52px;border-radius:50%;
  overflow:hidden;position:relative;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  border:2px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.online-overlay-list .ol-item .ol-av img{width:100%;height:100%;object-fit:cover;display:block}
.online-overlay-list .ol-item .ol-av .dot{
  position:absolute;right:0;bottom:0;
  width:12px;height:12px;border-radius:50%;
  background:#3fd07a;border:2px solid var(--bg-phone-2);
}
.online-overlay-list .ol-item .ol-name{
  font-size:10.5px;color:var(--text-dim);
  max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ============================================================
   ТЕМЫ: реально красят табы и drawer
   ============================================================ */
.comm-screen .comm-tabs-indicator{
  background: var(--cm-tab-grad) !important;
  background-size: 400% 100% !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px var(--cm-glow) !important;
}
.comm-screen .comm-tab-item.active{ color:#fff !important; font-weight:700 }

/* drawer в тему */
.drawer.themed{
  background: linear-gradient(175deg, var(--cm-drawer-1) 0%, var(--cm-drawer-2) 100%) !important;
  border-right-color: var(--cm-glow) !important;
}
.drawer.themed .drawer-user{
  border-bottom: 2px solid var(--cm-solid) !important;
}
.drawer.themed .drawer-nav-item{
  background: rgba(255,255,255,.04) !important;
  border-color: var(--cm-glow) !important;
}
.drawer.themed .drawer-nav-item:hover{
  background: var(--cm-glow) !important;
}
.drawer.themed .du-edit{
  background: var(--cm-solid) !important;
  border-color: transparent !important;
  color:#fff !important;
}
.drawer.themed .drawer-staff-item:hover{
  background: var(--cm-glow) !important;
}

/* темы в главном меню (лента) — меняют цвета для активного сообщества дня */
.feed-themed .comm-card-lg,
.feed-themed .comm-hero{
  border-color: var(--cm-glow);
}

/* ============================================================
   МАСС-ФИКС
   ============================================================ */

/* --- 1) Табы в сообществе — красивее --- */
.comm-tabs-box{
  display:flex;
  margin:10px 16px 0;
  padding:4px;
  background:rgba(15,23,38,.7);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  position:relative;
}
.comm-tab-item{
  flex:1;position:relative;z-index:2;
  padding:9px 4px;border:none;background:transparent;
  color:var(--text-muted);font-family:inherit;
  font-size:11px;font-weight:600;
  border-radius:10px;cursor:pointer;
  transition:color .25s;white-space:nowrap;
  text-align:center;overflow:hidden;text-overflow:ellipsis;
}
.comm-tab-item.active{color:#fff}

/* --- 2) Кнопка 👥-mini онлайн --- */
.comm-nav-btn.online-btn{
  width:52px;height:52px;
  padding:0;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:visible;
}
.comm-nav-btn.online-btn .mini-av{
  width:32px;height:32px;border-radius:50%;
  overflow:hidden;background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  border:2px solid rgba(255,255,255,.28);
  position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.comm-nav-btn.online-btn .mini-av img{width:100%;height:100%;object-fit:cover;display:block}
.comm-nav-btn.online-btn .mini-av .dot{
  position:absolute;right:-1px;bottom:-1px;
  width:10px;height:10px;border-radius:50%;
  background:#3fd07a;border:2px solid var(--bg-phone-2);
}
.comm-nav-btn.online-btn .count-badge{
  position:absolute;top:2px;right:2px;
  min-width:16px;height:16px;padding:0 4px;
  background:#3fd07a;color:#0a1424;
  font-size:9.5px;font-weight:800;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--bg-phone-2);
}

/* --- 3) Оверлей снизу (над островком) --- */
.online-overlay{
  position:absolute;left:0;right:0;bottom:0;
  z-index:45;
  background:linear-gradient(0deg, rgba(10,17,34,.98) 0%, rgba(10,17,34,.92) 80%, transparent 100%);
  border-top-left-radius:20px;border-top-right-radius:20px;
  box-shadow:0 -12px 30px rgba(0,0,0,.5);
  transform:translateY(110%);
  transition:transform .32s cubic-bezier(.3,.7,.3,1);
  padding:14px 0 calc(12px + 60px + env(safe-area-inset-bottom));
  max-height:60%;
  overflow-y:auto;
}
.online-overlay.open{transform:translateY(0)}

.online-overlay-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px 10px;
}
.online-overlay-title{font-size:13px;font-weight:700;color:var(--text)}
.online-overlay-close{
  width:30px;height:30px;border-radius:9px;
  background:rgba(74,109,184,.25);
  border:1px solid var(--line-strong);
  color:var(--text);font-size:14px;font-family:inherit;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.online-overlay-list{
  display:flex;flex-direction:column;gap:6px;
  padding:0 12px;
}
.online-overlay-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:12px;
  cursor:pointer;transition:.15s;
}
.online-overlay-row:hover{background:rgba(74,109,184,.16)}
.online-overlay-row .ol-av{
  width:38px;height:38px;border-radius:50%;
  overflow:hidden;position:relative;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;flex-shrink:0;
  border:2px solid rgba(255,255,255,.15);
}
.online-overlay-row .ol-av img{width:100%;height:100%;object-fit:cover;display:block}
.online-overlay-row .ol-av .dot{
  position:absolute;right:-1px;bottom:-1px;
  width:11px;height:11px;border-radius:50%;
  background:#3fd07a;border:2px solid var(--bg-phone-2);
}
.online-overlay-row .ol-info{flex:1;min-width:0}
.online-overlay-row .ol-name{
  font-size:12.5px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.online-overlay-row .ol-nick{font-size:10.5px;color:var(--text-muted)}

/* ============================================================
   4) НОВЫЕ ПОЛЬЗОВАТЕЛИ — секция вверху (заменяем "В сети")
   ============================================================ */
.comm-section-label{ padding:12px 16px 6px; font-size:13px; font-weight:700; color:var(--text) }

/* ============================================================
   5) Подборка — вертикальная карточка 9:16 как на макете
   ============================================================ */
.pod-card{
  margin:12px 16px 6px;
  border-radius:18px;overflow:hidden;
  position:relative;
  border:1px solid var(--line-strong);
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  cursor:pointer;
  aspect-ratio: 9 / 16;
  max-height: 540px;
}
.pod-card img.pod-bg{
  width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;
}
.pod-card .pod-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.85) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:16px;
  z-index:1;
}
.pod-card .pod-av{
  position:absolute;top:14px;left:14px;
  width:54px;height:54px;border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  border:2px solid rgba(255,255,255,.28);
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  z-index:2;
}
.pod-card .pod-av img{width:100%;height:100%;object-fit:cover;display:block}
.pod-card .pod-star{
  position:absolute;top:14px;right:14px;
  padding:4px 10px;border-radius:10px;
  background:linear-gradient(135deg,#d4a13a,#f0c765);
  color:#1a1207;font-size:10.5px;font-weight:700;
  z-index:2;
}
.pod-card .pod-name{
  font-size:17px;font-weight:800;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
  line-height:1.2;
}
.pod-card .pod-desc{
  font-size:12px;color:rgba(255,255,255,.88);
  margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.pod-card .pod-meta{
  font-size:11px;color:rgba(255,255,255,.85);
  margin-top:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.pod-card .pod-meta .on{
  color:#3fd07a;display:inline-flex;align-items:center;gap:4px;
}
.pod-card .pod-meta .on::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#3fd07a;
}

/* ============================================================
   ПОДБОРКА — большая карточка + 2 маленькие (по макету)
   ============================================================ */
.pod-main{
  margin:12px 16px 6px;
  border-radius:18px;overflow:hidden;
  position:relative;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  cursor:pointer;
  min-height: 200px;
  aspect-ratio: 16/10;
  max-height: 320px;
}
.pod-main img.pod-bg{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  display:block;
  /* растягиваем на весь пост без границ */
  filter:none;
}
.pod-main .pod-grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.8) 100%);
  pointer-events:none;
}
.pod-main .pod-top{
  position:absolute;top:12px;left:12px;right:12px;
  display:flex;justify-content:space-between;align-items:flex-start;
  z-index:2;
}
.pod-main .pod-star{
  padding:4px 10px;border-radius:10px;
  background:linear-gradient(135deg,#d4a13a,#f0c765);
  color:#1a1207;font-size:10.5px;font-weight:700;
  letter-spacing:.3px;
}
.pod-main .pod-av{
  width:44px;height:44px;border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  border:2px solid rgba(255,255,255,.3);
  box-shadow:0 6px 16px rgba(0,0,0,.5);
}
.pod-main .pod-av img{width:100%;height:100%;object-fit:cover}
.pod-main .pod-bottom{
  position:absolute;left:14px;right:14px;bottom:12px;
  z-index:2;
  display:flex;align-items:flex-end;gap:12px;
}
.pod-main .pod-info{flex:1;min-width:0}
.pod-main .pod-title{
  font-size:17px;font-weight:800;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
  line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}
.pod-main .pod-author{
  font-size:11.5px;color:rgba(255,255,255,.85);
  margin-top:4px;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.pod-main .pod-meta{
  display:flex;gap:10px;flex-shrink:0;
  font-size:12px;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.85);
  font-weight:600;
  align-items:center;
}
.pod-main .pod-meta .item{
  display:flex;align-items:center;gap:4px;
  padding:4px 8px;
  background:rgba(0,0,0,.35);
  border-radius:10px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* --- 2 маленьких поста подборки --- */
.pod-mini-row{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:0 16px 8px;
}
.pod-mini{
  border-radius:14px;overflow:hidden;
  position:relative;
  aspect-ratio:1/1;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  cursor:pointer;
  border:1px solid var(--line);
}
.pod-mini img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
.pod-mini .pod-mini-grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85) 100%);
}
.pod-mini .pod-mini-info{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:2;
}
.pod-mini .pod-mini-title{
  font-size:11.5px;font-weight:700;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.9);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.2;
}
.pod-mini .pod-mini-meta{
  font-size:10px;color:rgba(255,255,255,.8);margin-top:3px;
}

/* ============================================================
   3 КАРТИНКИ В НАСТРОЙКАХ СООБЩЕСТВА
   баннер 16:9 / иконка 1:1 / обложка 9:16
   ============================================================ */
.edit-img-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:0 16px;
  grid-template-areas:
    "banner banner"
    "icon theme";
}
.edit-img-grid .img-slot{
  position:relative;border-radius:14px;overflow:hidden;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  border:1px solid var(--line);
  cursor:pointer;transition:.15s;
  display:flex;align-items:flex-end;justify-content:center;
}
.edit-img-grid .img-slot:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.edit-img-grid .img-slot img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
.edit-img-grid .img-slot::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.75) 100%);
  pointer-events:none;
}
.edit-img-grid .slot-banner{grid-area:banner;aspect-ratio:16/9}
.edit-img-grid .slot-icon{grid-area:icon;aspect-ratio:1/1}
.edit-img-grid .slot-theme{grid-area:theme;aspect-ratio:9/16;max-height:280px}
.edit-img-grid .slot-label{
  position:relative;z-index:2;
  padding:6px 10px;
  font-size:10.5px;font-weight:600;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
  text-align:center;width:100%;
  background:rgba(0,0,0,.3);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.edit-img-grid .slot-tip{
  position:absolute;top:8px;left:8px;right:8px;
  font-size:9.5px;color:rgba(255,255,255,.85);
  text-shadow:0 1px 4px rgba(0,0,0,.9);
  z-index:2;
  text-align:left;
  line-height:1.3;
}

/* ============================================================
   БОКОВОЕ МЕНЮ (drawer) — подписчики + участники
   ============================================================ */
.drawer-section{
  padding:12px 14px;
  border-top:1px solid var(--line);
}
.drawer-section-title{
  font-size:10.5px;color:var(--text-muted);letter-spacing:.5px;
  text-transform:uppercase;padding:0 4px 8px;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;
}
.drawer-section-title .count{
  font-size:10px;color:var(--accent-2);
  background:rgba(74,109,184,.2);
  padding:2px 7px;border-radius:8px;
}
.drawer-user-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:10px;
  cursor:pointer;transition:.15s;
}
.drawer-user-item:hover{background:rgba(74,109,184,.15)}
.drawer-user-item .info{flex:1;min-width:0}
.drawer-user-item .name{
  font-size:12px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.drawer-user-item .nick{
  font-size:10.5px;color:var(--text-muted);
}
.drawer-user-item .role-chip{
  font-size:9px;padding:2px 6px;border-radius:7px;
  font-weight:700;flex-shrink:0;
}
.drawer-user-item .role-chip.admin{
  background:linear-gradient(90deg,#5fb8d8,#4a6db8);color:#fff;
}
.drawer-user-item .role-chip.moderator{
  background:linear-gradient(90deg,#ffffff,#2dd4bf);color:#0a1424;
}
.drawer-more-btn{
  width:100%;padding:8px;
  background:rgba(74,109,184,.12);
  border:1px dashed rgba(120,150,210,.3);
  border-radius:10px;color:var(--text-dim);
  font-family:inherit;font-size:11px;
  cursor:pointer;transition:.15s;
  margin-top:6px;
}
.drawer-more-btn:hover{background:rgba(74,109,184,.2);color:var(--text)}

/* ============================================================
   КАРТОЧКИ СООБЩЕСТВ 9:16 В ЛЕНТЕ
   ============================================================ */
.comm-row-916{
  display:flex;gap:10px;
  padding:2px 16px 8px;
  overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.comm-row-916::-webkit-scrollbar{display:none}
.comm-tile-916{
  flex:0 0 auto;
  width:140px;
  aspect-ratio:9/16;
  border-radius:16px;overflow:hidden;
  position:relative;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  border:1px solid var(--line);
  cursor:pointer;transition:.15s;
  scroll-snap-align:start;
}
.comm-tile-916:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.comm-tile-916 > img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
.comm-tile-916 .cgrad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.88) 100%);
}


.comm-tile-916 .cinfo{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:2;
}
.comm-tile-916 .cname{
  font-size:12.5px;font-weight:700;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.9);
  line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}
.comm-tile-916 .cmeta{
  font-size:10.5px;color:rgba(255,255,255,.82);
  margin-top:4px;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
  display:flex;align-items:center;gap:5px;
}
.comm-tile-916 .cmeta .on{
  color:#3fd07a;display:inline-flex;align-items:center;gap:3px;
}
.comm-tile-916 .cmeta .on::before{
  content:'';width:5px;height:5px;border-radius:50%;background:#3fd07a;
}

/* --- Оверлей онлайн снизу 40% высоты --- */
.online-overlay{
  max-height:40vh !important;
  padding:14px 0 calc(12px + env(safe-area-inset-bottom)) !important;
}

/* ============================================================
   ПАНЕЛЬ НАСТРОЕК
   ============================================================ */
.settings-wrap{padding:0 0 24px;display:flex;flex-direction:column;gap:14px}

.settings-section{
  background:linear-gradient(155deg,rgba(26,37,66,.55),rgba(19,28,51,.75));
  border:1px solid var(--line);border-radius:16px;
  margin:0 16px;overflow:hidden;
}
.settings-section-head{
  padding:12px 14px 8px;
  font-size:11px;font-weight:600;color:var(--accent-3);
  text-transform:uppercase;letter-spacing:.4px;
}
.settings-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  border-top:1px solid var(--line);
  cursor:pointer;transition:.15s;
}
.settings-row:first-of-type{border-top:none}
.settings-row:hover{background:rgba(74,109,184,.08)}
.settings-row .ic{font-size:18px;width:26px;text-align:center;flex-shrink:0}
.settings-row .info{flex:1;min-width:0}
.settings-row .label{font-size:13px;font-weight:600;color:var(--text)}
.settings-row .sub{font-size:11px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settings-row .arrow{color:var(--text-muted);font-size:14px;flex-shrink:0}
.settings-row.danger .label{color:#ff8b8b}

.settings-status{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  font-size:12px;
  border-top:1px solid var(--line);
}
.settings-status .dot{
  width:10px;height:10px;border-radius:50%;
  background:#5c6880;flex-shrink:0;
}
.settings-status .dot.on{background:#3fd07a;box-shadow:0 0 8px rgba(63,208,122,.6)}
.settings-status .dot.err{background:#d44a4a;box-shadow:0 0 8px rgba(212,74,74,.6)}
.settings-status .dot.check{background:#e8a042;animation:pulse 1.2s infinite}

/* ============================================================
   ФИНАЛЬНЫЕ ФИКСЫ
   ============================================================ */

/* --- Drawer: правильные отступы, ничего не наслаивается --- */
.drawer{
  display:flex;
  flex-direction:column;
  padding-top: calc(16px + env(safe-area-inset-top)) !important;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}
.drawer > *{
  flex-shrink:0;
}
.drawer-user{
  padding:16px 16px 14px !important;
  flex-shrink:0 !important;
}
.drawer-nav{
  padding:10px 14px !important;
  flex-shrink:0 !important;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.drawer-nav-item{
  padding:11px 14px !important;
  font-size:12.5px !important;
  min-height:0 !important;
}
.drawer-section{
  padding:10px 14px !important;
  flex-shrink:0 !important;
  border-top:1px solid var(--line) !important;
}
.drawer-staff{
  padding:10px 14px !important;
  flex-shrink:0 !important;
  margin-top:auto !important;
  border-top:1px solid var(--line) !important;
}
.drawer-logout{
  margin:10px 14px calc(14px + env(safe-area-inset-bottom)) !important;
  flex-shrink:0 !important;
  width:calc(100% - 28px) !important;
  padding:12px 14px !important;
}

/* --- Онлайн-оверлей строго снизу --- */
.online-overlay{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  max-height:40vh !important;
  border-top-left-radius:22px !important;
  border-top-right-radius:22px !important;
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
  transform:translateY(110%) !important;
  padding:14px 0 calc(80px + env(safe-area-inset-bottom)) !important;
  background:linear-gradient(0deg,#0a1122 0%,#0a1122 90%,rgba(10,17,34,.95) 100%) !important;
  z-index:60 !important;
}
.online-overlay.open{transform:translateY(0) !important}

/* --- Чат: статус под именем, не в hero --- */
.chat-hero-status,
.chat-hero .chat-hero-status{
  display:none !important;
}
.chat-top-status-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:2px;
  font-size:11.5px;
  color:var(--text-dim);
}
.chat-top-status-row.online{color:#3fd07a}
.chat-top-status-row .dot-on{
  width:7px;height:7px;border-radius:50%;
  background:#3fd07a;box-shadow:0 0 6px rgba(63,208,122,.7);
  display:inline-block;
}
.chat-top-status-row.typing{color:var(--accent-2);font-style:italic}

/* --- Подборка: большая карточка --- */
.pod-main{
  min-height:220px !important;
  aspect-ratio:auto !important;
  max-height:none !important;
}

/* Фикс: сетка для 2 картинок */
.edit-img-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  padding:0 16px !important;
  grid-template-areas:
    "banner banner"
    "icon icon" !important;
}
.edit-img-grid .slot-banner{grid-area:banner !important;aspect-ratio:16/9 !important}
.edit-img-grid .slot-icon{grid-area:icon !important;aspect-ratio:1/1 !important;max-width:200px !important;justify-self:center !important;width:100%}

/* ============================================================
   Маленькие карточки сообществ — компактные, 4 в ряд
   ============================================================ */
.comm-row-916{
  display:flex !important;
  gap:8px !important;
  padding:2px 16px 8px !important;
  overflow-x:auto !important;
}
.comm-tile-916{
  flex:0 0 calc((100% - 24px) / 4) !important;
  width:auto !important;
  min-width:0 !important;
  aspect-ratio: 3 / 4.2 !important;
  border-radius:12px !important;
}

.comm-tile-916 .cinfo{
  left:6px !important;right:6px !important;bottom:6px !important;
}
.comm-tile-916 .cname{
  font-size:10px !important;
  line-height:1.15 !important;
  -webkit-line-clamp:2 !important;
}
.comm-tile-916 .cmeta{
  font-size:9px !important;
  margin-top:2px !important;
  gap:3px !important;
}
.comm-tile-916 .cmeta .on::before{
  width:4px !important;height:4px !important;
}

/* Маленькие карточки: картинка во всю площадь, без аватарки */
.comm-tile-916{
  position:relative;
  overflow:hidden;
}
.comm-tile-916 > img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

.comm-tile-916 .cname{
  font-size:10px !important;
  font-weight:700;
}
.comm-tile-916 .cmeta{
  font-size:9px !important;
  margin-top:2px !important;
}

/* ============================================================
   МАЛЕНЬКИЕ КАРТОЧКИ СООБЩЕСТВ — 4 в ряд, вертикальные
   ============================================================ */
.comm-row-916{
  display:flex !important;
  gap:8px !important;
  padding:2px 16px 8px !important;
  overflow-x:auto !important;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.comm-row-916::-webkit-scrollbar{display:none}

.comm-tile-916{
  flex:0 0 calc((100% - 24px) / 4) !important;
  width:auto !important;
  min-width:0 !important;
  aspect-ratio:9/16 !important;   /* вертикальная */
  border-radius:12px !important;
  overflow:hidden !important;
  position:relative !important;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  border:1px solid var(--line);
  cursor:pointer;
  scroll-snap-align:start;
}

.comm-tile-916 > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.comm-tile-916 .cgrad{
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.85) 100%) !important;
}

/* Убираем иконку-эмодзи — её тут не должно быть */


.comm-tile-916 .cinfo{
  position:absolute !important;
  left:6px !important;
  right:6px !important;
  bottom:6px !important;
  z-index:2 !important;
}
.comm-tile-916 .cname{
  font-size:10px !important;
  font-weight:700 !important;
  color:#fff !important;
  line-height:1.15 !important;
  text-shadow:0 1px 4px rgba(0,0,0,.95) !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  word-break:break-word;
}
.comm-tile-916 .cmeta{
  font-size:9px !important;
  color:rgba(255,255,255,.85) !important;
  margin-top:2px !important;
  text-shadow:0 1px 4px rgba(0,0,0,.9) !important;
}

/* Слот картинки: подсказка сверху */
.edit-img-grid .slot-hint{
  position:absolute;top:8px;left:8px;right:8px;
  font-size:9.5px;color:rgba(255,255,255,.85);
  text-shadow:0 1px 4px rgba(0,0,0,.9);
  z-index:3;
  line-height:1.3;
  pointer-events:none;
}

/* ============================================================
   КРАСИВОЕ ОФОРМЛЕНИЕ РЕДАКТОРА СООБЩЕСТВА
   ============================================================ */

/* --- Общий контейнер редактора --- */
.edit-wrap{
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(74,109,184,.10) 0%, transparent 60%),
    linear-gradient(180deg, #0a1122 0%, #060a14 100%);
  min-height:100%;
  padding-bottom:20px;
}

/* --- Шапка --- */
.edit-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(15,25,45,.7), transparent);
}
.edit-header .edit-title{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  letter-spacing:.2px;
}

/* --- Табы редактора --- */
.edit-tabs{
  display:flex;
  gap:6px;
  padding:12px 16px 4px;
  background:transparent;
  border:none;
}
.edit-tab{
  flex:1;
  padding:11px 8px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(20,29,51,.85), rgba(12,20,36,.85));
  border:1px solid var(--line-strong);
  color:var(--text-dim);
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  letter-spacing:.3px;
  cursor:pointer;
  transition:.2s cubic-bezier(.3,.7,.3,1);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.edit-tab::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(74,109,184,.35), rgba(93,129,200,.25));
  opacity:0;
  transition:.2s;
}
.edit-tab:hover::before{opacity:.6}
.edit-tab:hover{color:var(--text);transform:translateY(-1px)}
.edit-tab.active{
  color:#fff;
  background:linear-gradient(135deg, #3a5aa0 0%, #5d81c8 100%);
  border-color:rgba(120,150,210,.5);
  box-shadow:0 6px 20px rgba(74,109,184,.35),
             inset 0 1px 0 rgba(255,255,255,.15);
}
.edit-tab.active::before{opacity:0}

/* --- Секции (заголовки) --- */
.edit-section{
  padding:18px 16px 8px;
  font-size:11px;
  font-weight:700;
  color:var(--accent-3);
  letter-spacing:.6px;
  text-transform:uppercase;
  opacity:.85;
}

/* --- Слот картинки — тёмный, красивый --- */
.img-slot{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(20,29,51,.85), rgba(12,20,36,.9));
  border:1px dashed rgba(120,150,210,.3);
  cursor:pointer;
  transition:.2s cubic-bezier(.3,.7,.3,1);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin:0 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.img-slot:hover{
  border-color:rgba(120,150,210,.6);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.05);
}
.img-slot:active{transform:translateY(0)}

.img-slot.slot-banner-full{aspect-ratio:16/9}
.img-slot.slot-icon-square{
  aspect-ratio:1/1;
  max-width:220px;
  margin-left:auto;
  margin-right:auto;
}
.img-slot.slot-theme-vertical{
  aspect-ratio:9/16;
  width:180px;
  max-width:70%;
}

.img-slot .slot-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.img-slot .slot-label{
  position:relative;
  z-index:2;
  padding:10px 14px;
  width:100%;
  font-size:11px;
  font-weight:600;
  letter-spacing:.3px;
  color:#fff;
  text-align:center;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.75));
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}

/* Иконка-подсказка, когда слот пуст */
.img-slot .slot-icon{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:30px;
  opacity:.35;
  z-index:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
  transition:.2s;
}
.img-slot:hover .slot-icon{
  opacity:.65;
  transform:translate(-50%,-50%) scale(1.08);
}

/* --- Метка поля --- */
.edit-field-label{
  padding:0 16px;
  font-size:11.5px;
  color:var(--text-dim);
  font-weight:500;
  margin-top:10px;
  line-height:1.4;
}

/* --- Поля ввода --- */
.edit-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:0 16px;
}
.edit-field label{
  font-size:11px;
  color:var(--text-dim);
  padding-left:4px;
  font-weight:500;
  letter-spacing:.2px;
}
.edit-field .input{
  padding:13px 16px;
  border-radius:14px;
}

/* --- Пресеты --- */
.edit-picker-block{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0 16px;
}
.edit-picker-label{
  font-size:11px;
  color:var(--text-dim);
  padding-left:4px;
  font-weight:500;
}

/* --- Кнопки действий --- */
.edit-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 16px 0;
  margin-top:8px;
  border-top:1px solid var(--line);
}
.edit-actions .btn-outline{
  padding:14px 18px;
  border-radius:14px;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.2px;
}
.edit-actions .btn-outline.solid{
  background:linear-gradient(135deg, #3a5aa0 0%, #5d81c8 100%);
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 20px rgba(74,109,184,.35);
}
.edit-actions .btn-outline.solid:hover{
  filter:brightness(1.12);
  box-shadow:0 10px 26px rgba(74,109,184,.45);
}
.edit-actions .btn-outline.solid:active{transform:scale(.985)}

/* --- Статистика: плитки --- */
.edit-stats{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
  padding:0 16px;
}
.stat-tile{
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(20,29,51,.85), rgba(12,20,36,.9));
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:3px;
  transition:.15s;
}
.stat-tile:hover{border-color:var(--line-strong)}
.stat-label{
  font-size:9.5px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:700;
}
.stat-value{
  font-size:20px;
  font-weight:800;
  color:var(--text);
  line-height:1.1;
  letter-spacing:-.3px;
}
.stat-sub{
  font-size:10px;
  color:var(--text-dim);
  margin-top:2px;
}

/* --- Администрация: строки --- */
.staff-block{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0 16px;
}
.staff-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(20,29,51,.75), rgba(12,20,36,.85));
  border:1px solid var(--line);
  transition:.15s;
}
.staff-row:hover{
  border-color:var(--line-strong);
  background:linear-gradient(180deg, rgba(26,37,66,.85), rgba(19,28,51,.95));
}
.staff-row .info{flex:1;min-width:0}
.staff-row .name{
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.staff-row .nick{font-size:10.5px;color:var(--text-muted)}

/* Бейдж роли */
.role-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:10px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.3px;
  text-transform:lowercase;
  white-space:nowrap;
  flex-shrink:0;
}
.role-badge.owner{
  background:linear-gradient(135deg, rgba(212,161,58,.25), rgba(240,199,101,.2));
  color:#f0c765;
  border:1px solid rgba(212,161,58,.5);
}
.role-badge.admin{
  background:linear-gradient(90deg, #5fb8d8 0%, #4a6db8 100%);
  color:#fff;
  border:none;
}
.role-badge.moderator{
  background:linear-gradient(90deg, #ffffff 0%, #2dd4bf 100%);
  color:#0a1424;
  border:none;
}

/* Кнопки внутри staff-row */
.staff-row .btn.xs{
  width:auto;
  padding:5px 10px;
  font-size:10.5px;
  border-radius:9px;
}

/* Плавающее затемнение снизу — чтобы кнопка Сохранить всегда была видна */
.edit-wrap::after{
  content:'';
  display:block;
  height:1px;
}

/* ============================================================
   АВАТАРКА НА ЭКРАНАХ ВХОДА — свечение + парение
   ============================================================ */
@keyframes avatarFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
@keyframes avatarGlow {
  0%   { box-shadow: 0 0 12px rgba(120,150,210,.35), 0 0 30px rgba(74,109,184,.25); }
  50%  { box-shadow: 0 0 22px rgba(120,150,210,.65), 0 0 50px rgba(74,109,184,.45); }
  100% { box-shadow: 0 0 12px rgba(120,150,210,.35), 0 0 30px rgba(74,109,184,.25); }
}

/* Welcome */
.welcome-box > .avatar,
.welcome-box > .avatar.av-xl{
  animation: avatarFloat 3.2s ease-in-out infinite,
             avatarGlow 2.4s ease-in-out infinite;
  border:2px solid rgba(120,150,210,.55);
  transition:border-color .3s;
}

/* Password-экран */
.pwd-box > .avatar,
.pwd-box > .avatar.av-xl{
  animation: avatarFloat 3.2s ease-in-out infinite,
             avatarGlow 2.4s ease-in-out infinite;
  border:2px solid rgba(120,150,210,.55);
}

/* Пауза при клике — не мешает тапам */
.welcome-box > .avatar:active,
.pwd-box > .avatar:active{
  animation-play-state: paused;
}

/* ============================================================
   МОИ СООБЩЕСТВА — сетка 3 в ряд
   ============================================================ */
.my-comm-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  padding:8px 16px 16px;
}
.my-comm-card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:9 / 16;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  border:1px solid var(--line);
  cursor:pointer;
  transition:.2s cubic-bezier(.3,.7,.3,1);
  display:flex;
  align-items:flex-end;
}
.my-comm-card:hover{
  transform:translateY(-2px);
  border-color:var(--line-strong);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.my-comm-card:active{transform:translateY(0)}

.my-comm-card > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.my-comm-card .mcg-grad{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85) 100%);
  pointer-events:none;
}

/* Иконка сообщества — квадратная, слева сверху */
.my-comm-card .mcg-av{
  position:absolute;
  top:8px;
  left:8px;
  width:34px;
  height:34px;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  border:2px solid rgba(255,255,255,.28);
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  z-index:3;
}
.my-comm-card .mcg-av img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* Название снизу */
.my-comm-card .mcg-name{
  position:relative;
  z-index:2;
  width:100%;
  padding:8px 10px 10px;
  font-size:11px;
  font-weight:700;
  color:#fff;
  line-height:1.2;
  text-shadow:0 1px 4px rgba(0,0,0,.95);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}

/* Бейдж-звезда для подборки */
.my-comm-card .mcg-star{
  position:absolute;
  top:8px;
  right:8px;
  font-size:14px;
  z-index:3;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));
}

/* Бейдж "админ" */
.my-comm-card .mcg-owner{
  position:absolute;
  bottom:6px;
  right:8px;
  font-size:9px;
  font-weight:700;
  padding:2px 6px;
  border-radius:7px;
  background:linear-gradient(135deg, rgba(212,161,58,.9), rgba(240,199,101,.9));
  color:#1a1207;
  z-index:3;
}

/* ============================================================
   КНОПКИ НА ЭКРАНАХ ВХОДА — компактнее + свечение + сжатие
   ============================================================ */

/* Базовый размер кнопок auth-экранов */
.splash-actions .btn-outline,
.welcome-actions .btn-outline,
.pwd-box .btn-outline,
.reg-wrap .btn-outline,
.auth .btn-outline{
  padding:10px 16px !important;       /* было 12-13px */
  font-size:12.5px !important;        /* было 13.5px */
  border-radius:18px !important;
  position:relative;
  overflow:hidden;
  transition:
    transform .18s cubic-bezier(.3,.7,.3,1),
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease,
    letter-spacing .25s ease;
  letter-spacing:.2px;
}

/* --- Hover: свечение + сжатие --- */
.splash-actions .btn-outline:hover,
.welcome-actions .btn-outline:hover,
.pwd-box .btn-outline:hover,
.reg-wrap .btn-outline:hover,
.auth .btn-outline:hover{
  transform: scale(.965);
  border-color: rgba(120,150,210,.85);
  background: rgba(74,109,184,.28);
  box-shadow:
    0 0 0 1px rgba(120,150,210,.35),
    0 0 18px rgba(120,150,210,.45),
    0 0 40px rgba(74,109,184,.3);
}

/* --- Active (клик): сильнее свечение + глубже сжатие --- */
.splash-actions .btn-outline:active,
.welcome-actions .btn-outline:active,
.pwd-box .btn-outline:active,
.reg-wrap .btn-outline:active,
.auth .btn-outline:active{
  transform: scale(.94);
  background: rgba(74,109,184,.42);
  box-shadow:
    0 0 0 1px rgba(120,150,210,.55),
    0 0 26px rgba(120,150,210,.6),
    0 0 56px rgba(74,109,184,.4);
  transition-duration:.06s;
}

/* --- Solid-вариант (кнопки «Войти», «Далее», «Создать» ) --- */
.splash-actions .btn-outline.solid,
.welcome-actions .btn-outline.solid,
.pwd-box .btn-outline.solid,
.reg-wrap .btn-outline.solid,
.auth .btn-outline.solid{
  background:linear-gradient(135deg,#3a5aa0 0%,#5d81c8 100%);
  border-color:transparent;
  box-shadow:0 4px 14px rgba(74,109,184,.3);
}
.splash-actions .btn-outline.solid:hover,
.welcome-actions .btn-outline.solid:hover,
.pwd-box .btn-outline.solid:hover,
.reg-wrap .btn-outline.solid:hover,
.auth .btn-outline.solid:hover{
  box-shadow:
    0 0 0 1px rgba(120,150,210,.4),
    0 0 22px rgba(120,150,210,.55),
    0 0 46px rgba(74,109,184,.4),
    0 6px 22px rgba(74,109,184,.45);
  filter:brightness(1.1);
}
.splash-actions .btn-outline.solid:active,
.welcome-actions .btn-outline.solid:active,
.pwd-box .btn-outline.solid:active,
.reg-wrap .btn-outline.solid:active,
.auth .btn-outline.solid:active{
  box-shadow:
    0 0 0 1px rgba(120,150,210,.6),
    0 0 30px rgba(120,150,210,.7),
    0 0 66px rgba(74,109,184,.5);
  filter:brightness(1.18);
}

/* --- Плавное появление глянцевого блика слева --- */
.splash-actions .btn-outline::before,
.welcome-actions .btn-outline::before,
.pwd-box .btn-outline::before,
.reg-wrap .btn-outline::before,
.auth .btn-outline::before{
  content:'';
  position:absolute;
  top:0; left:-80%;
  width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform:skewX(-18deg);
  transition:left .55s cubic-bezier(.3,.7,.3,1);
  pointer-events:none;
}
.splash-actions .btn-outline:hover::before,
.welcome-actions .btn-outline:hover::before,
.pwd-box .btn-outline:hover::before,
.reg-wrap .btn-outline:hover::before,
.auth .btn-outline:hover::before{
  left:130%;
}

/* --- Отключённые (disabled) — без свечения --- */
.btn-outline[disabled],
.btn-outline[disabled]:hover{
  opacity:.5;
  transform:none;
  box-shadow:none;
  cursor:not-allowed;
  filter:none;
}

/* --- На телефоне убираем «залипание» hover --- */
@media (hover: none){
  .splash-actions .btn-outline:hover,
  .welcome-actions .btn-outline:hover,
  .pwd-box .btn-outline:hover,
  .reg-wrap .btn-outline:hover,
  .auth .btn-outline:hover{
    transform:none;
    box-shadow:none;
    background:inherit;
    border-color:inherit;
  }
  .splash-actions .btn-outline:active,
  .welcome-actions .btn-outline:active,
  .pwd-box .btn-outline:active,
  .reg-wrap .btn-outline:active,
  .auth .btn-outline:active{
    transform: scale(.965);
    background: rgba(74,109,184,.35);
    box-shadow:
      0 0 0 1px rgba(120,150,210,.5),
      0 0 22px rgba(120,150,210,.5),
      0 0 44px rgba(74,109,184,.35);
  }
}

/* ============================================================
   ПОДСВЕТКА ПОЛЕЙ ПРИ ВВОДЕ + мягкие кнопки входа
   ============================================================ */

/* --- 1. Поля ввода: подсветка при вводе любого символа --- */
.input,
.search,
textarea.input{
  transition:
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    transform .15s ease;
}

/* Пока поле пустое (placeholder виден) — обычное состояние */
/* Как только введён хоть один символ — placeholder исчезает, срабатывает :not(:placeholder-shown) */
.input:not(:placeholder-shown),
.search:not(:placeholder-shown),
textarea.input:not(:placeholder-shown),
.input:focus,
.search:focus,
textarea.input:focus{
  border-color: rgba(120,150,210,.75) !important;
  background:linear-gradient(180deg, rgba(26,37,66,.95), rgba(19,28,51,.95)) !important;
  box-shadow:
    0 0 0 2px rgba(74,109,184,.18),
    0 0 16px rgba(120,150,210,.35),
    0 0 32px rgba(74,109,184,.2),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Плавная «вспышка» при вводе — через анимацию box-shadow */
@keyframes inputPulse {
  0% {
    box-shadow:
      0 0 0 2px rgba(74,109,184,.22),
      0 0 22px rgba(120,150,210,.55),
      0 0 44px rgba(74,109,184,.35);
  }
  100% {
    box-shadow:
      0 0 0 2px rgba(74,109,184,.18),
      0 0 16px rgba(120,150,210,.35),
      0 0 32px rgba(74,109,184,.2);
  }
}
/* Класс .input-typed вешается через JS при вводе — см. ниже */

/* --- 2. Кнопки входа — менее насыщенные --- */

/* Outline-кнопки (Вход в аккаунт / регистрация / Написать / и т.д.) */
.btn-outline.solid{
  background:linear-gradient(135deg, rgba(58,90,160,.75) 0%, rgba(93,129,200,.72) 100%) !important;
  border-color:rgba(120,150,210,.35) !important;
  color:#e4ebf7 !important;
  box-shadow:0 3px 12px rgba(74,109,184,.18) !important;
  opacity:.92;
}
.btn-outline.solid:hover{
  background:linear-gradient(135deg, rgba(74,109,184,.85) 0%, rgba(107,143,212,.82) 100%) !important;
  opacity:1;
  box-shadow:
    0 0 0 1px rgba(120,150,210,.35),
    0 0 16px rgba(120,150,210,.4),
    0 4px 16px rgba(74,109,184,.3) !important;
  filter:none;
}
.btn-outline.solid:active{
  background:linear-gradient(135deg, rgba(58,90,160,.9) 0%, rgba(93,129,200,.88) 100%) !important;
}

/* Обычная .btn.primary — тоже приглушим на auth-экранах */
.splash-actions .btn.primary,
.welcome-actions .btn.primary,
.pwd-box .btn.primary,
.reg-wrap .btn.primary,
.auth .btn.primary{
  background:linear-gradient(135deg, rgba(58,90,160,.7) 0%, rgba(93,129,200,.68) 100%) !important;
  border:1px solid rgba(120,150,210,.3) !important;
  box-shadow:0 3px 12px rgba(74,109,184,.15) !important;
  opacity:.92;
}
.splash-actions .btn.primary:hover,
.welcome-actions .btn.primary:hover,
.pwd-box .btn.primary:hover,
.reg-wrap .btn.primary:hover,
.auth .btn.primary:hover{
  opacity:1;
  box-shadow:
    0 0 0 1px rgba(120,150,210,.35),
    0 0 16px rgba(120,150,210,.4),
    0 4px 16px rgba(74,109,184,.28) !important;
}

/* Вспышка при каждом символе */
.input.input-typed,
.search.input-typed,
textarea.input.input-typed{
  animation: inputPulse .26s ease-out !important;
}
@keyframes inputPulse {
  0% {
    box-shadow:
      0 0 0 2px rgba(74,109,184,.3),
      0 0 24px rgba(120,150,210,.6),
      0 0 48px rgba(74,109,184,.4);
    transform: scale(1.008);
  }
  100% {
    box-shadow:
      0 0 0 2px rgba(74,109,184,.18),
      0 0 16px rgba(120,150,210,.35),
      0 0 32px rgba(74,109,184,.2);
    transform: scale(1);
  }
}

/* ============================================================
   ОТКЛЮЧАЕМ ВСПЫШКУ/СВЕЧЕНИЕ В ЧАТАХ
   (личные чаты + чаты сообществ + нижняя панель ввода)
   ============================================================ */

/* Поля ввода в чатах — без анимации, без свечения */
.chat-input-row .input,
.chat-input-wrap .input,
.chat-input-row .search,
.chat-input-wrap .search,
.chat-input-row textarea.input,
.chat-input-wrap textarea.input,
.chat-input-row input,
.chat-input-wrap input{
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  border-color: var(--line-strong) !important;
  background: transparent !important;
  transform: none !important;
}

.chat-input-row .input:focus,
.chat-input-wrap .input:focus,
.chat-input-row input:focus,
.chat-input-wrap input:focus{
  border-color: var(--line-strong) !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

.chat-input-row .input:not(:placeholder-shown),
.chat-input-wrap .input:not(:placeholder-shown),
.chat-input-row input:not(:placeholder-shown),
.chat-input-wrap input:not(:placeholder-shown){
  border-color: var(--line-strong) !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

.chat-input-row .input.input-typed,
.chat-input-wrap .input.input-typed,
.chat-input-row input.input-typed,
.chat-input-wrap input.input-typed{
  animation: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ============================================================
   БЕЙДЖ "АДМИН" в "Мои сообщества" — теперь СВЕРХУ справа
   ============================================================ */
.my-comm-card .mcg-owner{
  position:absolute !important;
  top:8px !important;
  right:8px !important;
  bottom:auto !important;
  font-size:9.5px !important;
  font-weight:700 !important;
  letter-spacing:.3px;
  padding:3px 7px !important;
  border-radius:8px !important;
  background:linear-gradient(135deg, rgba(212,161,58,.9), rgba(240,199,101,.9)) !important;
  color:#1a1207 !important;
  box-shadow:0 3px 10px rgba(0,0,0,.4) !important;
  z-index:3 !important;
}

/* ============================================================
   ТЁМНО-СИНЯЯ ТЕМА СООБЩЕСТВ
   Перекрываем все существующие темы единым градиентом
   ============================================================ */

/* Фон экрана сообщества — тёмно-синий градиент */
.comm-screen{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(74,109,184,.18) 0%, transparent 60%),
    radial-gradient(90% 50% at 50% 100%, rgba(74,109,184,.10) 0%, transparent 60%),
    linear-gradient(170deg, #0a1122 0%, #060a14 60%, #03060d 100%);
  min-height:100%;
}

/* Табы — активный индикатор в цвете тёмно-синего градиента */
.comm-screen .comm-tabs-indicator,
.comm-screen .comm-tabs-indicator.theme-default,
.comm-screen .comm-tabs-indicator.theme-green,
.comm-screen .comm-tabs-indicator.theme-pink,
.comm-screen .comm-tabs-indicator.theme-violet,
.comm-screen .comm-tabs-indicator.theme-mono,
.comm-screen .comm-tabs-indicator.theme-cyan{
  background:linear-gradient(90deg, #2c4a8a 0%, #4a6db8 50%, #5d81c8 100%) !important;
  box-shadow:0 4px 16px rgba(74,109,184,.5) !important;
  border-color:rgba(120,150,210,.4) !important;
}

/* Кнопки в сообществе — тёмно-синий градиент */
.comm-screen .btn-outline.solid,
.comm-screen .comm-top-action.primary,
.comm-screen .comm-nav-btn.primary{
  background:linear-gradient(135deg, #2c4a8a 0%, #4a6db8 100%) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(74,109,184,.4) !important;
}
.comm-screen .btn-outline.solid:hover,
.comm-screen .comm-top-action.primary:hover,
.comm-screen .comm-nav-btn.primary:hover{
  background:linear-gradient(135deg, #3a5aa0 0%, #5d81c8 100%) !important;
  box-shadow:0 8px 24px rgba(74,109,184,.55) !important;
}

/* Прогресс-полоса на карточке сообщества */
.comm-screen .comm-hero-prog > i,
.comm-hero-prog > i{
  background:linear-gradient(90deg, #2c4a8a 0%, #5d81c8 100%) !important;
}

/* Баннер в сообществе — лёгкий тёмно-синий оттенок */
.comm-banner::after,
.comm-hero-banner::after,
.comm-leader-banner::after{
  background:linear-gradient(180deg, transparent 65%, rgba(10,17,34,.5) 100%) !important;
}

/* Обводка иконки в баннере */
.comm-banner-av,
.comm-hero-av{
  border-color:rgba(93,129,200,.5) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.55), 0 0 20px rgba(74,109,184,.3) !important;
}

/* Секции (заголовки) в сообществе — приглушённый синий */
.comm-screen .comm-section-label{
  color:#8fa8d4 !important;
}

/* Нижняя панель сообщества — тёмно-синий градиент */
.comm-nav{
  background:linear-gradient(180deg, rgba(10,17,34,.9), rgba(5,9,17,.98)) !important;
  border-top:1px solid rgba(74,109,184,.25) !important;
}
.comm-nav-btn{
  background:rgba(20,35,70,.55) !important;
  border-color:rgba(74,109,184,.35) !important;
}
.comm-nav-btn:hover{
  background:rgba(74,109,184,.4) !important;
}

/* Посты, чаты, карточки в сообществе — тёмно-синяя обводка */
.comm-screen .post-card,
.comm-screen .cp-card,
.comm-screen .chat-row{
  border-color:rgba(74,109,184,.2) !important;
}
.comm-screen .post-card:hover,
.comm-screen .cp-card:hover,
.comm-screen .chat-row:hover{
  border-color:rgba(74,109,184,.5) !important;
}

/* ============================================================
   Убираем разноцветные темы (green/pink/violet/mono/cyan)
   — они остаются, но визуально всё равно применяется тёмно-синий
   ============================================================ */

/* Перебиваем переменные тем — все темы теперь тёмно-синие */
.theme-default,
.theme-green,
.theme-pink,
.theme-violet,
.theme-mono,
.theme-cyan{
  --cm-solid:#4a6db8 !important;
  --cm-glow:rgba(74,109,184,.45) !important;
  --cm-tab-grad: linear-gradient(90deg, #2c4a8a 0%, #4a6db8 50%, #5d81c8 100%) !important;
  --cm-drawer-1:#0a1526 !important;
  --cm-drawer-2:#040812 !important;
}

/* Drawer — тёмно-синий при активной теме сообщества */
.drawer.themed{
  background:linear-gradient(175deg, #0a1526, #040812) !important;
  border-right-color:rgba(74,109,184,.4) !important;
}
.drawer.themed .drawer-user{
  border-bottom:2px solid #4a6db8 !important;
}
.drawer.themed .drawer-nav-item:hover{
  background:rgba(74,109,184,.25) !important;
}
.drawer.themed .du-edit{
  background:linear-gradient(135deg, #2c4a8a, #4a6db8) !important;
  border-color:transparent !important;
}

/* Превью тем в редакторе — все тёмно-синие */
.theme-item.theme-green,
.theme-item.theme-cyan,
.theme-item.theme-pink,
.theme-item.theme-violet,
.theme-item.theme-mono,
.theme-item.theme-default{
  background:linear-gradient(135deg, #2c4a8a 0%, #5d81c8 100%) !important;
}

/* ============================================================
   ЗАКРЕПЛЁННОЕ СООБЩЕСТВО в глобальном профиле
   ============================================================ */
.profile-pinned-section{
  padding:14px 16px 4px;
}
.profile-pinned-label{
  font-size:12px;
  font-weight:600;
  color:var(--accent-3);
  letter-spacing:.3px;
  margin-bottom:8px;
  padding-left:4px;
}
.profile-pinned-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(155deg, rgba(26,37,66,.7), rgba(19,28,51,.85));
  border:1px solid var(--line);
  cursor:pointer;
  transition:.15s;
}
.profile-pinned-card:hover{
  border-color:var(--line-strong);
  transform:translateY(-1px);
}
.profile-pinned-card:active{transform:translateY(0)}

.profile-pinned-av{
  width:44px;
  height:44px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  flex-shrink:0;
  border:1px solid rgba(120,150,210,.2);
}
.profile-pinned-av img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.profile-pinned-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.profile-pinned-name{
  font-size:13.5px;
  font-weight:700;
  color:var(--text);
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.profile-pinned-meta{
  font-size:11.5px;
  color:var(--text-dim);
}

/* ============================================================
   ЛОГОТИП НА SPLASH — больше, парит, ниже
   ============================================================ */

/* Увеличиваем изображение логотипа */


/* Если используется текстовый логотип — тоже увеличиваем */



/* Опускаем логотип чуть ниже */
.splash .logo-block{
  margin-top:80px !important;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Парение логотипа */
@keyframes logoFloat {
  0%   { transform: translateY(0)    scale(1); }
  50%  { transform: translateY(-10px) scale(1.005); }
  100% { transform: translateY(0)    scale(1); }
}

/* Мягкое свечение под лого */
@keyframes logoGlow {
  0%   { filter: drop-shadow(0 0 12px rgba(120,150,210,.35)) drop-shadow(0 0 30px rgba(74,109,184,.2)); }
  50%  { filter: drop-shadow(0 0 22px rgba(120,150,210,.7))  drop-shadow(0 0 55px rgba(74,109,184,.45)); }
  100% { filter: drop-shadow(0 0 12px rgba(120,150,210,.35)) drop-shadow(0 0 30px rgba(74,109,184,.2)); }
}

.splash .logo-block img,


/* Мобильная адаптация — не вылезать за экран */
@media (max-width:500px){
  
  .splash .logo-block{margin-top:60px !important}
}

/* ============================================================
   ФОН ЧАТА — тёмный градиент, без кругов и паттернов
   ============================================================ */

/* Убираем все паттерны кругами у чата */
.chat-screen::before,
.chat-screen::after{
  display:none !important;
  content:none !important;
  background:none !important;
}

.chat-screen{
  background:
    linear-gradient(170deg, #0a1122 0%, #060a14 60%, #03060d 100%) !important;
  background-image:
    linear-gradient(170deg, #0a1122 0%, #060a14 60%, #03060d 100%) !important;
  position:relative;
  overflow:hidden;
}

/* Если что-то ещё рисует — перекрываем фон ленты */
.chat-feed{
  background:transparent !important;
}

/* ============================================================
   SETTINGS — новые блоки
   ============================================================ */
.settings-profile-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
}
.settings-profile-info{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:1;
  min-width:0;
}
.settings-profile-name{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.settings-profile-nick{
  font-size:12px;
  color:var(--text-dim);
}
.settings-profile-status{
  font-size:11px;
  color:var(--text-muted);
  margin-top:2px;
}
.settings-profile-status.on{color:#3fd07a}

.settings-row.flat{cursor:default}
.settings-row.flat:hover{background:transparent}

/* ============================================================
   DRAWER — порядок без наслаивания
   ============================================================ */
.drawer{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
.drawer > *{
  flex-shrink:0 !important;
}

/* Отступы между секциями */
.drawer-user{padding:16px 16px 12px !important}
.drawer-nav{padding:10px 14px !important}
.drawer-section{padding:12px 14px !important}
.drawer-staff{padding:12px 14px !important}

/* Кнопка "Выйти" — всегда внизу, отделена линией */
.drawer-logout{
  margin-top:auto !important;
  margin-left:14px !important;
  margin-right:14px !important;
  margin-bottom:calc(14px + env(safe-area-inset-bottom)) !important;
  padding:12px 14px !important;
  width:calc(100% - 28px) !important;
  flex-shrink:0 !important;
  position:relative !important;
  z-index:2 !important;
  border-top:1px solid rgba(220,110,110,.25) !important;
}

/* 5 табов — уменьшаем шрифт и отступы */
.comm-tab-item{
  font-size:10px !important;
  padding:9px 2px !important;
  letter-spacing:-.1px;
}
.comm-tabs-box{padding:3px !important}
.comm-tabs-indicator{top:3px !important;height:calc(100% - 6px) !important}

/* ============================================================
   КНОПКА МЕНЮ ПОСТА — горизонтальные точки, справа, красиво
   ============================================================ */






/* Если у поста есть бейдж подборки сверху слева — не мешает */
.post-card .post-card-featured-badge,
.post-card .post-card-hidden-badge{
  left:10px !important;
  top:10px !important;
}

/* ============================================================
   ТРИ ТОЧКИ У КАЖДОГО ПОСТА — строго внутри карточки, справа сверху
   ============================================================ */

.post-card{
  position:relative !important;   /* карточка — точка отсчёта */
}

.post-card .post-card-menu{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  z-index:10 !important;

  width:34px !important;
  height:24px !important;
  padding:0 !important;
  padding-bottom:6px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:12px !important;
  background:rgba(15,25,45,.75) !important;
  border:1px solid rgba(120,150,210,.28) !important;
  color:#e4ebf7 !important;

  font-size:16px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:1px !important;
  font-family:inherit !important;

  cursor:pointer !important;
  transition:background .15s, border-color .15s, box-shadow .2s, transform .12s !important;

  backdrop-filter:blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(8px) saturate(140%) !important;

  box-shadow:
    0 3px 10px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.post-card .post-card-menu:hover{
  background:rgba(74,109,184,.6) !important;
  border-color:rgba(120,150,210,.6) !important;
  box-shadow:
    0 0 0 1px rgba(120,150,210,.35),
    0 0 14px rgba(120,150,210,.45),
    0 4px 14px rgba(0,0,0,.5) !important;
}

.post-card .post-card-menu:active{
  transform:scale(.94) !important;
  background:rgba(74,109,184,.75) !important;
}

/* Бейджи не мешают кнопке */
.post-card .post-card-featured-badge,
.post-card .post-card-hidden-badge{
  left:10px !important;
  top:10px !important;
  right:auto !important;
}

/* ============================================================
   ОНЛАЙН В ВЫЕЗЖАЮЩЕЙ ПАНЕЛИ — в ряд, по центру
   ============================================================ */

/* Список — флекс-строка с переносом, центрирован */
.online-overlay-list{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap:14px 16px !important;
  padding:6px 16px 4px !important;
}

/* Скрываем старые строки — они больше не используются */
.online-overlay-row{display:none !important}

/* Элемент — вертикальный: аватар + ник */
.online-overlay-list .ol-item{
  flex:0 0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:6px !important;
  cursor:pointer !important;
  transition:transform .15s !important;
  width:60px !important;
}
.online-overlay-list .ol-item:hover{
  transform:translateY(-2px) !important;
}

/* Аватар круглый */
.online-overlay-list .ol-item .ol-av{
  width:52px !important;
  height:52px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  background:linear-gradient(135deg,#4a6db8,#1a2542) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:22px !important;
  position:relative !important;
  border:2px solid rgba(120,150,210,.35) !important;
  box-shadow:0 3px 12px rgba(0,0,0,.4) !important;
}
.online-overlay-list .ol-item .ol-av img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Онлайн-точка */
.online-overlay-list .ol-item .ol-av .dot{
  position:absolute !important;
  right:0 !important;
  bottom:0 !important;
  width:13px !important;
  height:13px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  border:2px solid var(--bg-phone-2) !important;
  box-shadow:0 0 8px rgba(63,208,122,.7) !important;
}

/* Ник снизу */
.online-overlay-list .ol-item .ol-name{
  font-size:10.5px !important;
  color:var(--text-dim) !important;
  max-width:60px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-align:center !important;
}

/* Заголовок — по центру */
.online-overlay-head{
  justify-content:center !important;
  position:relative !important;
}
.online-overlay-title{
  text-align:center !important;
  width:100% !important;
  font-size:13px !important;
}
.online-overlay-close{
  position:absolute !important;
  right:14px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}

/* ============================================================
   ЗЕЛЁНАЯ ТОЧКА ОНЛАЙНА — над иконкой + пульсация
   ============================================================ */

/* Точно над аватаркой, поверх всего */
.online-overlay-list .ol-item .ol-av .dot{
  position:absolute !important;
  top:-2px !important;
  right:-2px !important;
  bottom:auto !important;
  left:auto !important;

  width:14px !important;
  height:14px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  border:2.5px solid var(--bg-phone-2, #060a14) !important;

  z-index:10 !important;
  pointer-events:none !important;

  box-shadow:
    0 0 6px rgba(63,208,122,.9),
    0 0 14px rgba(63,208,122,.55) !important;

  animation: dotPulse 1.8s ease-in-out infinite !important;
}

/* Пульсация — кольцо и лёгкое свечение */


/* Аватарка — базовый слой выше обводки */
.online-overlay-list .ol-item .ol-av{
  position:relative !important;
  z-index:1 !important;
  overflow:visible !important;
}

/* Внутреннее изображение — обрезано по кругу */
.online-overlay-list .ol-item .ol-av > img,
.online-overlay-list .ol-item .ol-av > svg{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border-radius:50% !important;
  object-fit:cover !important;
  z-index:0 !important;
}

/* Точка поверх всего, включая картинку */
.online-overlay-list .ol-item .ol-av .dot{
  z-index:20 !important;
}

/* Убираем старые правила со сдвигом вниз-вправо — перебиваем */
.online-overlay-list .ol-item .ol-av .dot{
  bottom:auto !important;
  right:-2px !important;
  top:-2px !important;
}

/* ============================================================
   ЗЕЛЁНАЯ ТОЧКА — без обводки, меньше
   ============================================================ */
.online-overlay-list .ol-item .ol-av .dot{
  width:10px !important;
  height:10px !important;
  border:none !important;
  outline:none !important;
  top:-1px !important;
  right:-1px !important;
  box-shadow:0 0 5px rgba(63,208,122,.9),
             0 0 12px rgba(63,208,122,.5) !important;
  animation: dotPulse 1.8s ease-in-out infinite !important;
}



/* ============================================================
   ПУЛЬСИРУЮЩАЯ ЗЕЛЁНАЯ ТОЧКА — ВЕЗДЕ, ГДЕ ЕСТЬ ИКОНКА ОНЛАЙН
   ============================================================ */

/* Единая базовая анимация пульса */
@keyframes onlinePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 5px rgba(63,208,122,.9),
                0 0 12px rgba(63,208,122,.5);
  }
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 8px rgba(63,208,122,1),
                0 0 18px rgba(63,208,122,.75);
  }
}

/* Все 

/* Аватарки — контейнер позиционирует точку */
.avatar{
  position:relative !important;
  overflow:visible !important;
}
.avatar > img,
.avatar > svg{
  border-radius:inherit !important;
  overflow:hidden !important;
}

/* Небольшое увеличение для больших аватарок */
.profile-hero .avatar.av-2xl 
.chat-hero-av 

/* Для мелких аватарок — совсем маленькая точка */
.avatar.av-xs 
.avatar.av-sm 

/* Убираем серый фон от старого стиля (было background:#3d4557 по умолчанию) */
.avatar 

/* ============================================================
   УБИРАЕМ ЗЕЛЁНУЮ ТОЧКУ У ИКОНОК СООБЩЕСТВ
   (оставляем только у пользователей)
   ============================================================ */

/* Иконки сообществ — баннер, карточка, список */
.comm-banner-av 

/* Превью чатов сообществ (в табе Чаты) */
.cp-card .cp-av 

/* Иконки в списке "Мои сообщества" */
.my-comm-card .mcg-av 

/* Иконки в списке сообществ в ленте (маленькие квадратные) */
.comm-tile-916 .cav 

/* Иконки лидеров сообществ */
.comm-leader-av 

/* Иконки в публичных чатах */
.chat-row .avatar.community 

/* ============================================================
   ЗЕЛЁНАЯ ТОЧКА — МЕНЬШЕ + ЯРЧЕ МИГАЕТ
   ============================================================ */

/* Новый ключевой кадр — резкое яркое мигание */


/* Все точки — размер 7px, ярче, с новым keyframes */
.avatar 

/* В панели онлайн — тоже 7px */
.online-overlay-list .ol-item .ol-av .dot{
  width:7px !important;
  height:7px !important;
  animation: onlinePulseBright 1.4s ease-in-out infinite !important;
}

/* Профиль — чуть больше, но всё равно меньше */
.profile-hero .avatar.av-2xl 

/* Мелкие аватарки — крошечная точка */
.avatar.av-xs 
.avatar.av-sm 

/* ============================================================
   ЗЕЛЁНАЯ ТОЧКА — у САМОГО КРАЯ аватарки + контрастное мигание
   ============================================================ */

/* Новое контрастное мигание: тёмно-зелёный → ярко-зелёный */


/* Все точки — прижаты к краю (правый-верхний угол) */
.avatar 

/* Небольшие аватарки — точка остаётся на краю */
.avatar.av-xs 
.avatar.av-sm 

/* Крупные аватарки — точка чуть больше, тоже на краю */
.profile-hero .avatar.av-2xl 

.chat-hero-av 

/* В панели онлайн — тоже на краю */
.online-overlay-list .ol-item .ol-av .dot{
  width:8px !important;
  height:8px !important;
  top:-1px !important;
  right:-1px !important;
  animation: onlinePulseContrast 1.3s ease-in-out infinite !important;
}

/* ============================================================
   ЗЕЛЁНАЯ ТОЧКА — БЫСТРОЕ мигание (0.7 сек)
   ============================================================ */



/* Применяем ко ВСЕМ существующим точкам — переопределяем период */
.avatar 

/* Панель онлайн — тоже быстро */
.online-overlay-list .ol-item .ol-av .dot{
  animation: onlinePulseFast 0.7s ease-in-out infinite !important;
}

/* ============================================================
   НАДПИСИ НА ЭКРАНАХ ВХОДА — лёгкое парение
   ============================================================ */

@keyframes textFloatSoft {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* Welcome: "Здравствуйте, ..." + имя + ник */
.welcome-greet,
.welcome-name,
.welcome-nick{
  animation: textFloatSoft 3.8s ease-in-out infinite;
  will-change: transform;
}

/* Небольшая разница в фазе для естественности */
.welcome-greet{ animation-duration: 3.8s; }
.welcome-name { animation-duration: 4.2s; animation-delay:.3s; }
.welcome-nick { animation-duration: 4.6s; animation-delay:.6s; }

/* Password: заголовок "Введите пароль" */
.pwd-title{
  animation: textFloatSoft 4s ease-in-out infinite;
  will-change: transform;
}

/* Login: заголовок "вход в аккаунт" */
.auth-title,
.reg-title,
.logo-title{
  animation: textFloatSoft 4.4s ease-in-out infinite;
  will-change: transform;
}

/* Подзаголовок логотипа "COMMUNITY AND CHAT" — совсем чуть-чуть */
.logo-sub{
  animation: textFloatSoft 5s ease-in-out infinite;
  will-change: transform;
}


/* ============================================================
   РАСХОДЯЩИЕСЯ КРУГИ — ТОЛЬКО НА ЭКРАНАХ ВХОДА
   (Welcome, Password, Login, Register)
   ============================================================ */



/* Welcome + Password */
.welcome-box > .avatar,




/* Не мешаем контенту — аватарка сверху */
.welcome-box > .avatar,


/* ============================================================
   КРУГИ ОТ АВАТАРКИ — СИНИЕ и БОЛЬШЕ (только auth-экраны)
   ============================================================ */

/* Переопределяем keyframes — увеличиваем масштаб до 3.2 */


/* Welcome + Password — синие круги, больше */


/* Сдвиг фазы второго круга */


/* ============================================================
   ЛОГОТИП НА SPLASH — пульсирующее свечение
   ============================================================ */



/* Логотип-картинка */


/* Текстовый логотип (если используется) */


/* Подпись COMMUNITY AND CHAT */


/* Опускаем логотип чуть ниже центра */
.splash .logo-block{
  margin-top:60px !important;
}

/* ============================================================
   ЛОГОТИП — без анимации (статичный, используется PNG)
   ============================================================ */
.splash .logo-block img{
  width:340px !important;
  max-width:90vw !important;
  display:block;
}

/* ============================================================
   СВЕЧЕНИЕ У АВАТАРКИ В ПРОФИЛЕ (только глобальный профиль)
   ============================================================ */




/* ============================================================
   ЗЕЛЁНАЯ ТОЧКА ОНЛАЙНА — простая, без свечения и радара
   ============================================================ */
.avatar .online-dot,
.chat-hero-av .online-dot,
.nav-btn .nav-av .online-dot{
  position:absolute !important;
  top:-1px !important;
  right:-1px !important;
  bottom:auto !important;
  left:auto !important;
  width:10px !important;
  height:10px !important;
  border:0 !important;
  border-radius:50% !important;
  z-index:20 !important;
  pointer-events:none !important;
  background:#3fd07a !important;
  box-shadow:0 0 6px rgba(63,208,122,.9) !important;
}

.avatar .online-dot:not(.on){
  background:#3d4557 !important;
  box-shadow:none !important;
}

.avatar.av-xs .online-dot{ width:7px !important; height:7px !important; }
.avatar.av-sm .online-dot{ width:8px !important; height:8px !important; }
.avatar.av-md .online-dot{ width:10px !important; height:10px !important; }
.avatar.av-lg .online-dot{ width:11px !important; height:11px !important; }
.avatar.av-xl .online-dot{ width:13px !important; height:13px !important; }
.avatar.av-2xl .online-dot{ width:14px !important; height:14px !important; }

.comm-banner-av .online-dot,
.comm-hero-av .online-dot,
.comm-tile-916 .online-dot,
.comm-leader-av .online-dot,
.cp-card .online-dot,
.my-comm-card .online-dot,
.chat-row .avatar.community .online-dot{
  display:none !important;
}

/* ============================================================
   ПУЛЬСИРУЮЩЕЕ СВЕЧЕНИЕ АВАТАРКИ — ТОЛЬКО НА ЭКРАНАХ ВХОДА
   Welcome + Password. Больше нигде.
   ============================================================ */

@keyframes authOnlyGlow {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(120,150,210,.4),
      0 0 20px rgba(74,109,184,.22);
  }
  50% {
    box-shadow:
      0 0 24px rgba(120,150,210,.95),
      0 0 48px rgba(74,109,184,.6),
      0 0 78px rgba(74,109,184,.32);
  }
}

/* Welcome-бокс */
.welcome-box > .avatar{
  border-radius:50% !important;
  animation: authOnlyGlow 2.4s ease-in-out infinite !important;
}

/* Password-бокс */
.pwd-box > .avatar{
  border-radius:50% !important;
  animation: authOnlyGlow 2.4s ease-in-out infinite !important;
}

/* ============================================================
   ПУЛЬСИРУЮЩЕЕ СВЕЧЕНИЕ АВАТАРКИ — ТОЛЬКО НА ЭКРАНАХ ВХОДА
   Welcome + Password. Больше нигде.
   ============================================================ */

@keyframes authOnlyGlow {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(120,150,210,.4),
      0 0 20px rgba(74,109,184,.22);
  }
  50% {
    box-shadow:
      0 0 24px rgba(120,150,210,.95),
      0 0 48px rgba(74,109,184,.6),
      0 0 78px rgba(74,109,184,.32);
  }
}

/* Welcome-бокс */
.welcome-box > .avatar{
  border-radius:50% !important;
  animation: authOnlyGlow 2.4s ease-in-out infinite !important;
}

/* Password-бокс */
.pwd-box > .avatar{
  border-radius:50% !important;
  animation: authOnlyGlow 2.4s ease-in-out infinite !important;
}

/* ============================================================
   БЕЙДЖ "РАЗРАБОТЧИК" — белый, скруглённый, кликабельный
   ============================================================ */
.dev-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:15px !important;
  padding:0 9px !important;
  margin-right:6px !important;
  font-family:inherit !important;
  font-size:9.5px !important;
  font-weight:600 !important;
  letter-spacing:.3px !important;
  color:#0a1424 !important;
  background:#ffffff !important;
  border-radius:999px !important;
  white-space:nowrap !important;
  line-height:1 !important;
  vertical-align:middle !important;
  cursor:pointer !important;
  transition:transform .15s ease, box-shadow .2s ease, background .15s ease !important;
  user-select:none !important;
  box-shadow:0 2px 6px rgba(0,0,0,.35) !important;
}

.dev-badge:hover{
  transform:scale(1.06) !important;
  box-shadow:0 4px 12px rgba(255,255,255,.4),
             0 0 18px rgba(255,255,255,.25) !important;
  background:#f3f6fc !important;
}

.dev-badge:active{
  transform:scale(.96) !important;
}

/* В тёмных блоках чата */
.msg-name .dev-badge,
.chat-top-name .dev-badge{
  font-size:9px !important;
  height:14px !important;
}

/* Модалка разработчика */
.dev-modal{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px 4px 4px !important;
  text-align:center !important;
}
.dev-modal .dev-icon{
  width:54px !important;
  height:54px !important;
  border-radius:50% !important;
  background:#ffffff !important;
  color:#0a1424 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:26px !important;
  font-weight:800 !important;
  box-shadow:0 6px 22px rgba(255,255,255,.35) !important;
}
.dev-modal .dev-title{
  font-size:15px !important;
  font-weight:700 !important;
  color:var(--text) !important;
  letter-spacing:.2px !important;
}
.dev-modal .dev-sub{
  font-size:12px !important;
  color:var(--text-dim) !important;
  max-width:280px !important;
  line-height:1.45 !important;
}

/* Имя с бейджем — flex-контейнер, чтобы бейдж был слева от имени */
.profile-hero-name,
.chat-hero-name,
.profile-row-name,
.chat-row-name,
.user-row-name,
.ol-name,
.staff-row .name,
.drawer-user-item .name,
.comm-post-row-title,
.post-card-title,
.post-card-author,
.msg-name{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  flex-wrap:wrap !important;
}

/* Бейдж слева от имени */
.dev-badge{
  margin-right:6px !important;
  margin-left:0 !important;
  order:-1 !important;   /* всегда первый слева */
}

/* ============================================================
   БЕЙДЖ "РАЗРАБОТЧИК" — СПРАВА от имени, чуть ниже
   ============================================================ */

/* Контейнеры имени — flex, чтобы order работал */
.profile-hero-name,
.chat-hero-name,
.profile-row-name,
.chat-row-name,
.user-row-name,
.ol-name,
.staff-row .name,
.drawer-user-item .name,
.comm-post-row-title,
.post-card-title,
.post-card-author,
.msg-name,
.chat-top-name{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
}

/* Бейдж — всегда справа (order:1), чуть ниже центра */
.dev-badge{
  order:1 !important;                /* всегда после имени */
  margin-left:6px !important;        /* отступ слева */
  margin-right:0 !important;
  transform:translateY(2px) !important;  /* чуть ниже */
  align-self:center !important;
}

/* Псевдоэлемент "·" перед бейджем? Нет, оставляем чисто. */

/* У имени — order:0 явно, чтобы не потерялось */
.profile-hero-name > *,
.chat-hero-name > *,
.profile-row-name > *,
.chat-row-name > *,
.msg-name > *{
  order:0;
}
.dev-badge{ order:1 !important; }

/* ============================================================
   ТРИ ТОЧКИ в оверлее пользователя — слева сверху
   ============================================================ */
.user-overlay-dots{
  position:absolute !important;
  top:14px !important;
  left:14px !important;
  width:34px !important;
  height:26px !important;
  border-radius:13px !important;

  background:rgba(15,25,45,.75) !important;
  border:1px solid rgba(120,150,210,.28) !important;
  color:#e4ebf7 !important;

  font-size:16px !important;
  font-weight:700 !important;
  line-height:1 !important;
  padding:0 !important;
  padding-bottom:6px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  cursor:pointer !important;
  transition:background .18s ease, border-color .18s ease,
             box-shadow .22s ease, transform .14s !important;

  backdrop-filter:blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(8px) saturate(140%) !important;

  box-shadow:0 3px 10px rgba(0,0,0,.4),
             inset 0 1px 0 rgba(255,255,255,.06) !important;
  z-index:5 !important;
  font-family:inherit !important;
}
.user-overlay-dots:hover{
  background:rgba(74,109,184,.55) !important;
  border-color:rgba(120,150,210,.6) !important;
  box-shadow:0 0 0 1px rgba(120,150,210,.35),
             0 0 14px rgba(120,150,210,.45) !important;
}
.user-overlay-dots:active{
  transform:scale(.94) !important;
}

/* ============================================================
   ОВЕРЛЕЙ ПОЛЬЗОВАТЕЛЯ — красивый, компактный
   ============================================================ */

/* Компактный размер sheet */


/* Обёртка контента */


/* Аватарка с обводкой и лёгким свечением */




/* Имя — крупное, с бейджем справа */
.user-overlay-name{
  font-size:17px !important;
  font-weight:800 !important;
  color:var(--text) !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  line-height:1.2 !important;
}
.user-overlay-name .dev-badge{
  font-size:9px !important;
  height:14px !important;
  padding:0 8px !important;
}

/* Ник */
.user-overlay-nick{
  font-size:12.5px !important;
  color:var(--text-dim) !important;
  margin-top:-4px !important;
}

/* Статус онлайн/оффлайн */
.user-overlay-status{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:11.5px !important;
  color:var(--text-muted) !important;
  padding:4px 12px !important;
  background:rgba(110,130,168,.15) !important;
  border-radius:10px !important;
  margin-top:2px !important;
}
.user-overlay-status.on{
  color:#3fd07a !important;
  background:rgba(63,208,122,.12) !important;
}
.user-overlay-status.on::before{
  content:'' !important;
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  box-shadow:0 0 6px rgba(63,208,122,.9) !important;
}

/* Разделитель */


/* Кнопки действий */
.user-overlay-actions{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:100% !important;
  margin-top:4px !important;
}

.user-overlay-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:13px 16px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg, rgba(20,29,51,.9), rgba(12,20,36,.95)) !important;
  border:1px solid var(--line-strong) !important;
  color:var(--text) !important;
  font-family:inherit !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  transition:.15s !important;
  letter-spacing:.2px !important;
  width:100% !important;
}
.user-overlay-btn:hover{
  background:linear-gradient(180deg, rgba(30,45,80,.95), rgba(20,30,55,.95)) !important;
  border-color:rgba(120,150,210,.6) !important;
  transform:translateY(-1px) !important;
}
.user-overlay-btn:active{
  transform:translateY(0) scale(.98) !important;
}
.user-overlay-btn .ic{
  font-size:16px !important;
  width:22px !important;
  text-align:center !important;
  flex-shrink:0 !important;
}
.user-overlay-btn.primary{
  background:linear-gradient(135deg, #3a5aa0 0%, #5d81c8 100%) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(74,109,184,.45) !important;
}
.user-overlay-btn.primary:hover{
  box-shadow:0 8px 24px rgba(74,109,184,.6) !important;
  filter:brightness(1.12) !important;
}

/* Три точки для жалобы — слева вверху, минималистично */
.user-overlay-dots{
  position:absolute !important;
  top:14px !important;
  right:16px !important;
  left:auto !important;
  width:36px !important;
  height:28px !important;
  border-radius:14px !important;
  background:rgba(15,25,45,.65) !important;
  border:1px solid rgba(120,150,210,.22) !important;
  color:#c9d4e8 !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1 !important;
  padding:0 !important;
  padding-bottom:6px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  transition:.18s !important;
  font-family:inherit !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  z-index:5 !important;
}
.user-overlay-dots:hover{
  background:rgba(74,109,184,.55) !important;
  border-color:rgba(120,150,210,.6) !important;
  color:#fff !important;
}
.user-overlay-dots:active{
  transform:scale(.94) !important;
}

/* ============================================================
   ОВЕРЛЕЙ ПОЛЬЗОВАТЕЛЯ — компактный, тёмный, аватарка выпирает
   ============================================================ */

/* Панель — темнее и ниже */


/* Хэндл — оставляем тонкий */
#sheet-root .sheet.user-sheet .sheet-handle{
  margin:12px auto 4px !important;
  opacity:.4 !important;
}

/* Обёртка контента — с большим верхним отступом, чтобы аватарка выпирала */
.user-overlay{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:8px !important;
  padding:0 4px 4px !important;
  margin-top:-42px !important;
  text-align:center !important;
  position:relative !important;
}

/* Аватарка — выпирает вверх */




/* Имя */
.user-overlay-name{
  font-size:17px !important;
  font-weight:800 !important;
  color:var(--text) !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  line-height:1.2 !important;
}

/* Ник */
.user-overlay-nick{
  font-size:12.5px !important;
  color:var(--text-dim) !important;
  margin-top:-2px !important;
}

/* Статус */
.user-overlay-status{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:11.5px !important;
  color:var(--text-muted) !important;
  padding:4px 12px !important;
  background:rgba(110,130,168,.15) !important;
  border-radius:10px !important;
  margin-top:2px !important;
}
.user-overlay-status.on{
  color:#3fd07a !important;
  background:rgba(63,208,122,.12) !important;
}
.user-overlay-status.on::before{
  content:'' !important;
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  box-shadow:0 0 6px rgba(63,208,122,.9) !important;
}

/* Разделитель */
.user-overlay-sep{
  width:60% !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent, rgba(120,150,210,.22), transparent) !important;
  margin:10px 0 4px !important;
}

/* Кнопки */
.user-overlay-actions{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:100% !important;
  margin-top:2px !important;
}
.user-overlay-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:13px 16px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg, rgba(15,22,40,.9), rgba(8,13,26,.95)) !important;
  border:1px solid rgba(120,150,210,.2) !important;
  color:var(--text) !important;
  font-family:inherit !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  transition:.15s !important;
  width:100% !important;
}
.user-overlay-btn:hover{
  background:linear-gradient(180deg, rgba(30,45,80,.95), rgba(20,30,55,.95)) !important;
  border-color:rgba(120,150,210,.5) !important;
  transform:translateY(-1px) !important;
}
.user-overlay-btn.primary{
  background:linear-gradient(135deg, #3a5aa0 0%, #5d81c8 100%) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(74,109,184,.45) !important;
}

/* Три точки справа сверху */
.user-overlay-dots{
  position:absolute !important;
  top:14px !important;
  right:16px !important;
  width:36px !important;
  height:28px !important;
  border-radius:14px !important;
  background:rgba(8,14,26,.75) !important;
  border:1px solid rgba(120,150,210,.2) !important;
  color:#c9d4e8 !important;
  font-size:16px !important;
  font-weight:700 !important;
  padding:0 !important;
  padding-bottom:6px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  z-index:5 !important;
  font-family:inherit !important;
}
.user-overlay-dots:hover{
  background:rgba(74,109,184,.55) !important;
  border-color:rgba(120,150,210,.55) !important;
  color:#fff !important;
}

/* ============================================================
   ОВЕРЛЕЙ ПОЛЬЗОВАТЕЛЯ — полупрозрачный тёмный, без обводки
   ============================================================ */

/* Панель — тёмная, полупрозрачная */


/* Хэндл — тонкий */
#sheet-root .sheet.user-sheet .sheet-handle{
  margin:10px auto 4px !important;
  background:rgba(120,150,210,.25) !important;
  opacity:.6 !important;
}

/* Обёртка контента — аватарка выпирает сверху */
.user-overlay{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:8px !important;
  padding:0 4px 4px !important;
  margin-top:-44px !important;
  text-align:center !important;
  position:relative !important;
}

/* Аватарка — без чёрной обводки, с мягким свечением */




/* Имя */
.user-overlay-name{
  font-size:17px !important;
  font-weight:800 !important;
  color:var(--text) !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  line-height:1.2 !important;
}

/* Ник */
.user-overlay-nick{
  font-size:12.5px !important;
  color:var(--text-dim) !important;
  margin-top:-2px !important;
}

/* Статус */
.user-overlay-status{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:11.5px !important;
  color:var(--text-muted) !important;
  padding:4px 12px !important;
  background:rgba(110,130,168,.15) !important;
  border-radius:10px !important;
  margin-top:2px !important;
}
.user-overlay-status.on{
  color:#3fd07a !important;
  background:rgba(63,208,122,.12) !important;
}
.user-overlay-status.on::before{
  content:'' !important;
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  box-shadow:0 0 6px rgba(63,208,122,.9) !important;
}

/* Разделитель */
.user-overlay-sep{
  width:60% !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent, rgba(120,150,210,.22), transparent) !important;
  margin:10px 0 4px !important;
}

/* Кнопки */
.user-overlay-actions{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:100% !important;
  margin-top:2px !important;
}
.user-overlay-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:13px 16px !important;
  border-radius:14px !important;
  background:rgba(20,29,51,.75) !important;
  border:1px solid rgba(120,150,210,.2) !important;
  color:var(--text) !important;
  font-family:inherit !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  transition:.15s !important;
  width:100% !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
.user-overlay-btn:hover{
  background:rgba(74,109,184,.4) !important;
  border-color:rgba(120,150,210,.5) !important;
  transform:translateY(-1px) !important;
}
.user-overlay-btn.primary{
  background:linear-gradient(135deg, rgba(58,90,160,.9) 0%, rgba(93,129,200,.85) 100%) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(74,109,184,.45) !important;
}

/* Три точки справа сверху */
.user-overlay-dots{
  position:absolute !important;
  top:14px !important;
  right:16px !important;
  width:36px !important;
  height:28px !important;
  border-radius:14px !important;
  background:rgba(8,14,26,.6) !important;
  border:1px solid rgba(120,150,210,.18) !important;
  color:#c9d4e8 !important;
  font-size:16px !important;
  font-weight:700 !important;
  padding:0 !important;
  padding-bottom:6px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  z-index:5 !important;
  font-family:inherit !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
.user-overlay-dots:hover{
  background:rgba(74,109,184,.55) !important;
  border-color:rgba(120,150,210,.55) !important;
  color:#fff !important;
}

/* ============================================================
   ОВЕРЛЕЙ ПОЛЬЗОВАТЕЛЯ — полупрозрачный тёмный, без обводки
   ============================================================ */

/* Панель — тёмная, полупрозрачная */
#sheet-root .sheet.user-sheet{
  max-height:62vh !important;
  padding:0 18px calc(20px + env(safe-area-inset-bottom)) !important;
  border-radius:26px 26px 0 0 !important;
  background:rgba(6,10,20,.82) !important;
  backdrop-filter:blur(26px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(26px) saturate(160%) !important;
  border-top:1px solid rgba(120,150,210,.15) !important;
  overflow:visible !important;
  box-shadow:0 -20px 50px rgba(0,0,0,.55) !important;
}

/* Хэндл — тонкий */
#sheet-root .sheet.user-sheet .sheet-handle{
  margin:10px auto 4px !important;
  background:rgba(120,150,210,.25) !important;
  opacity:.6 !important;
}

/* Обёртка контента — аватарка выпирает сверху */
.user-overlay{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:8px !important;
  padding:0 4px 4px !important;
  margin-top:-44px !important;
  text-align:center !important;
  position:relative !important;
}

/* Аватарка — без чёрной обводки, с мягким свечением */
.user-overlay-av{
  width:72px !important;
  height:72px !important;
  border-radius:50% !important;
  overflow:visible !important;
  background:linear-gradient(135deg,#4a6db8,#1a2542) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:42px !important;
  position:relative !important;
  border:none !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,.6),
    0 0 0 2px rgba(120,150,210,.28),
    0 0 40px rgba(74,109,184,.45) !important;
  margin-bottom:8px !important;
  z-index:2 !important;
}
.user-overlay-av img{
  width:100% !important;
  height:100% !important;
  border-radius:50% !important;
  object-fit:cover !important;
  display:block !important;
}
.user-overlay-av .online-dot{
  width:18px !important;
  height:18px !important;
  top:2px !important;
  right:2px !important;
  border:none !important;
  box-shadow:0 0 12px rgba(63,208,122,1) !important;
}

/* Имя */
.user-overlay-name{
  font-size:17px !important;
  font-weight:800 !important;
  color:var(--text) !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  line-height:1.2 !important;
}

/* Ник */
.user-overlay-nick{
  font-size:12.5px !important;
  color:var(--text-dim) !important;
  margin-top:-2px !important;
}

/* Статус */
.user-overlay-status{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:11.5px !important;
  color:var(--text-muted) !important;
  padding:4px 12px !important;
  background:rgba(110,130,168,.15) !important;
  border-radius:10px !important;
  margin-top:2px !important;
}
.user-overlay-status.on{
  color:#3fd07a !important;
  background:rgba(63,208,122,.12) !important;
}
.user-overlay-status.on::before{
  content:'' !important;
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  box-shadow:0 0 6px rgba(63,208,122,.9) !important;
}

/* Разделитель */
.user-overlay-sep{
  width:60% !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent, rgba(120,150,210,.22), transparent) !important;
  margin:10px 0 4px !important;
}

/* Кнопки */
.user-overlay-actions{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:100% !important;
  margin-top:2px !important;
}
.user-overlay-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:13px 16px !important;
  border-radius:14px !important;
  background:rgba(20,29,51,.75) !important;
  border:1px solid rgba(120,150,210,.2) !important;
  color:var(--text) !important;
  font-family:inherit !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  transition:.15s !important;
  width:100% !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
.user-overlay-btn:hover{
  background:rgba(74,109,184,.4) !important;
  border-color:rgba(120,150,210,.5) !important;
  transform:translateY(-1px) !important;
}
.user-overlay-btn.primary{
  background:linear-gradient(135deg, rgba(58,90,160,.9) 0%, rgba(93,129,200,.85) 100%) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(74,109,184,.45) !important;
}

/* Три точки справа сверху */
.user-overlay-dots{
  position:absolute !important;
  top:14px !important;
  right:16px !important;
  width:36px !important;
  height:28px !important;
  border-radius:14px !important;
  background:rgba(8,14,26,.6) !important;
  border:1px solid rgba(120,150,210,.18) !important;
  color:#c9d4e8 !important;
  font-size:16px !important;
  font-weight:700 !important;
  padding:0 !important;
  padding-bottom:6px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  z-index:5 !important;
  font-family:inherit !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
.user-overlay-dots:hover{
  background:rgba(74,109,184,.55) !important;
  border-color:rgba(120,150,210,.55) !important;
  color:#fff !important;
}

/* ============================================================
   БАННЕР — фото растягивается на всю площадь без обрезки
   ============================================================ */

/* Профиль пользователя */
.profile-banner-wrap .banner,
.banner{
  overflow:hidden !important;
}

.banner > img{
  width:100% !important;
  height:100% !important;
  object-fit: fill !important;   /* растянуть, без обрезки */
  display:block !important;
}

/* Сообщество — баннер */
.comm-banner > img,
.comm-hero-banner > img,
.comm-leader-banner > img{
  width:100% !important;
  height:100% !important;
  object-fit: fill !important;
  display:block !important;
}

/* Превью в редакторах (edit-banner) */
.edit-banner > img{
  width:100% !important;
  height:100% !important;
  object-fit: fill !important;
  display:block !important;
}

/* Карточки сообществ (большая и лидер) */
.comm-hero-banner > img,
.comm-leader-banner > img{
  object-fit: fill !important;
}

/* ============================================================
   БАННЕР СООБЩЕСТВА В ЛЕНТЕ — растянуть, без обрезки
   (карточки "Сейчас актуально" и "Лидеры сообществ")
   ============================================================ */

/* Большая карточка "Сейчас актуально" */
.comm-hero-banner{
  height:auto !important;          /* убрать фиксированную высоту */
  aspect-ratio:16/9 !important;    /* формат 16:9 */
  overflow:hidden !important;
  position:relative !important;
}
.comm-hero-banner > img{
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;      /* растянуть без обрезки */
  display:block !important;
}

/* Лидеры сообществ — тоже */
.comm-leader-banner{
  aspect-ratio:16/9 !important;
  overflow:hidden !important;
}
.comm-leader-banner > img{
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  display:block !important;
}

/* Маленькие квадратные карточки (9:16) */
.comm-tile-916 > img{
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  display:block !important;
}

/* ============================================================
   КАРТОЧКА СООБЩЕСТВА В ЛЕНТЕ
   — убрать синюю полосу, буквам тень, 16:9
   ============================================================ */

/* Баннер 16:9 */
.comm-hero-banner{
  aspect-ratio:16/9 !important;
  height:auto !important;
  overflow:hidden !important;
  position:relative !important;
}
.comm-hero-banner > img{
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  display:block !important;
}

/* Убираем синюю полосу-прогресс */
.comm-hero-prog{
  display:none !important;
}
.comm-hero-prog > i{
  display:none !important;
}

/* Название и мета — поверх картинки с тенью */
.comm-hero-body{
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  bottom:12px !important;
  padding:0 !important;
  background:none !important;
  z-index:2 !important;
}
.comm-hero-name{
  color:#fff !important;
  font-size:17px !important;
  font-weight:800 !important;
  text-shadow:
    0 2px 6px rgba(0,0,0,.95),
    0 0 16px rgba(0,0,0,.7) !important;
  line-height:1.2 !important;
  margin-bottom:4px !important;
}
.comm-hero-meta{
  display:flex !important;
  gap:10px !important;
  align-items:center !important;
  font-size:12px !important;
  color:rgba(255,255,255,.92) !important;
  text-shadow:
    0 1px 4px rgba(0,0,0,.95),
    0 0 8px rgba(0,0,0,.7) !important;
}
.comm-hero-meta .on{
  color:#5cffa0 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
}
.comm-hero-meta .on::before{
  content:'' !important;
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  box-shadow:0 0 6px rgba(63,208,122,.9) !important;
}

/* Лёгкий тёмный градиент снизу для читаемости (без полос) */
.comm-hero{
  position:relative !important;
  border-radius:18px !important;
  overflow:hidden !important;
}
.comm-hero::after{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:50% !important;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 100%) !important;
  pointer-events:none !important;
  z-index:1 !important;
}

/* ============================================================
   ЛИДЕРЫ СООБЩЕСТВ — 16:9, тень тексту, без полос
   ============================================================ */

.comm-leader{
  position:relative !important;
  border-radius:16px !important;
  overflow:hidden !important;
}

/* Баннер 16:9 */
.comm-leader-banner{
  aspect-ratio:16/9 !important;
  height:auto !important;
  overflow:hidden !important;
  position:relative !important;
}
.comm-leader-banner > img{
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  display:block !important;
}

/* Иконка сообщества поверх баннера — уже так и есть */

/* Тело с текстом — поверх картинки */
.comm-leader-body{
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:10px !important;
  padding:0 !important;
  background:none !important;
  z-index:2 !important;
}
.comm-leader-name{
  color:#fff !important;
  font-size:13px !important;
  font-weight:800 !important;
  text-shadow:
    0 2px 5px rgba(0,0,0,.95),
    0 0 12px rgba(0,0,0,.7) !important;
  line-height:1.2 !important;
  margin-bottom:3px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.comm-leader-meta{
  display:flex !important;
  gap:8px !important;
  align-items:center !important;
  font-size:10.5px !important;
  color:rgba(255,255,255,.9) !important;
  text-shadow:
    0 1px 3px rgba(0,0,0,.95),
    0 0 6px rgba(0,0,0,.7) !important;
}
.comm-leader-meta .on{
  color:#5cffa0 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
}
.comm-leader-meta .on::before{
  content:'' !important;
  width:5px !important;
  height:5px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  box-shadow:0 0 5px rgba(63,208,122,.9) !important;
}

/* Лёгкий градиент снизу для читаемости */
.comm-leader::after{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:55% !important;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 100%) !important;
  pointer-events:none !important;
  z-index:1 !important;
}

/* Убираем старые стили с фоном и padding */
.comm-leader .comm-leader-body{
  background:transparent !important;
  border:none !important;
}

/* ============================================================
   ЛИДЕРЫ — текст не накладывается на иконку
   ============================================================ */

/* Иконка снизу слева (как есть) */
.comm-leader-av{
  position:absolute !important;
  left:10px !important;
  bottom:10px !important;
  width:36px !important;
  height:36px !important;
  border-radius:10px !important;
  z-index:3 !important;
}

/* Тело с текстом — сдвигаем ВПРАВО от иконки */
.comm-leader-body{
  position:absolute !important;
  left:56px !important;              /* 10 + 36 + 10 */
  right:12px !important;
  bottom:10px !important;
  padding:0 !important;
  background:none !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  min-height:36px !important;
}
.comm-leader-name{
  color:#fff !important;
  font-size:12.5px !important;
  font-weight:800 !important;
  text-shadow:
    0 2px 5px rgba(0,0,0,.95),
    0 0 12px rgba(0,0,0,.7) !important;
  line-height:1.2 !important;
  margin-bottom:2px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.comm-leader-meta{
  display:flex !important;
  gap:8px !important;
  align-items:center !important;
  font-size:10px !important;
  color:rgba(255,255,255,.88) !important;
  text-shadow:
    0 1px 3px rgba(0,0,0,.95),
    0 0 6px rgba(0,0,0,.7) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}

/* ============================================================
   МАЛЕНЬКИЕ КАРТОЧКИ "СООБЩЕСТВА" — вернуть иконку
   ============================================================ */

/* Убираем display:none если было */




/* Убеждаемся, что другие места не скрывают */


/* В карточках "Лидеры" и "Сейчас актуально" иконки уже видны */

/* ============================================================
   1) БАННЕРЫ — растянуть красиво (cover, без искажения)
   ============================================================ */
.comm-hero-banner > img,
.comm-leader-banner > img,
.comm-banner > img,
.banner > img,
.edit-banner > img{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;   /* cover: заполняет весь блок, без искажения */
  display:block !important;
}

/* Маленькие квадратные карточки */
.comm-tile-916 > img{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  display:block !important;
}

/* ============================================================
   2) МАЛЕНЬКИЕ КАРТОЧКИ "СООБЩЕСТВА" — иконка в левом верхнем углу
   ============================================================ */
.comm-tile-916{
  position:relative !important;
}



/* ============================================================
   3) ЛИДЕРЫ — иконка слева внизу, текст правее (не перекрывает)
   ============================================================ */
.comm-leader{
  position:relative !important;
}
.comm-leader-av{
  position:absolute !important;
  left:10px !important;
  bottom:10px !important;
  width:36px !important;
  height:36px !important;
  border-radius:10px !important;
  z-index:3 !important;
  border:2px solid rgba(255,255,255,.35) !important;
  overflow:hidden !important;
  background:linear-gradient(135deg,#4a6db8,#1a2542) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:16px !important;
  box-shadow:0 4px 12px rgba(0,0,0,.5) !important;
}
.comm-leader-av img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.comm-leader-body{
  position:absolute !important;
  left:54px !important;            /* 10 + 36 + 8 */
  right:12px !important;
  bottom:12px !important;
  padding:0 !important;
  background:none !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
}
.comm-leader-name{
  color:#fff !important;
  font-size:12px !important;
  font-weight:800 !important;
  text-shadow:0 2px 5px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.7) !important;
  line-height:1.2 !important;
  margin-bottom:2px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.comm-leader-meta{
  font-size:10px !important;
  color:rgba(255,255,255,.88) !important;
  text-shadow:0 1px 3px rgba(0,0,0,.95) !important;
  display:flex !important;
  gap:6px !important;
  align-items:center !important;
  white-space:nowrap !important;
}

/* ============================================================
   4) КАРТОЧКА "СЕЙЧАС АКТУАЛЬНО" — иконка слева сверху, не перекрывает
   ============================================================ */
.comm-hero-av{
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  width:52px !important;
  height:52px !important;
  border-radius:12px !important;
  z-index:3 !important;
  border:2px solid rgba(255,255,255,.35) !important;
  overflow:hidden !important;
  background:linear-gradient(135deg,#4a6db8,#1a2542) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:24px !important;
  box-shadow:0 6px 16px rgba(0,0,0,.55) !important;
}
.comm-hero-av .av-inner,
.comm-hero-av img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:10px !important;
}

/* Название и мета в карточке "Актуально" — снизу */
.comm-hero-body{
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  bottom:12px !important;
  padding:0 !important;
  background:none !important;
  z-index:2 !important;
  pointer-events:auto !important;
}
.comm-hero-name{
  color:#fff !important;
  font-size:16px !important;
  font-weight:800 !important;
  text-shadow:0 2px 6px rgba(0,0,0,.95), 0 0 16px rgba(0,0,0,.7) !important;
  margin-bottom:3px !important;
}
.comm-hero-meta{
  color:rgba(255,255,255,.9) !important;
  font-size:11.5px !important;
  text-shadow:0 1px 4px rgba(0,0,0,.95) !important;
  display:flex !important;
  gap:10px !important;
  align-items:center !important;
}

/* ============================================================
   МАЛЕНЬКИЕ КАРТОЧКИ "СООБЩЕСТВА" — иконка сверху слева
   ЕДИНОЕ правило, всё с !important
   ============================================================ */
.comm-tile-916{
  position:relative !important;
  overflow:hidden !important;
}



/* ============================================================
   МАЛЕНЬКИЕ КАРТОЧКИ — иконка больше, скругление меньше, левее
   ============================================================ */
.comm-tile-916 .cav{
  display:flex !important;
  position:absolute !important;
  top:6px !important;
  left:4px !important;
  right:auto !important;
  bottom:auto !important;
  width:36px !important;
  height:36px !important;
  border-radius:4px !important;      /* меньше скругления */
  overflow:hidden !important;
  background:linear-gradient(135deg,#4a6db8,#1a2542) !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
  line-height:1 !important;
  color:#fff !important;
  border:1.5px solid rgba(255,255,255,.5) !important;
  z-index:5 !important;
  box-shadow:0 3px 10px rgba(0,0,0,.6) !important;
  pointer-events:none !important;
}
.comm-tile-916 .cav img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:3px !important;
}

/* ============================================================
   REPLY — цитата над сообщением
   ============================================================ */
.msg-reply-quote{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:5px 10px;
  margin-bottom:4px;
  border-left:3px solid var(--accent-2);
  background:rgba(74,109,184,.15);
  border-radius:8px;
  font-size:11px;
  max-width:100%;
  cursor:pointer;
}
.msg-reply-quote .rq-name{
  font-weight:700;
  color:var(--accent-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.msg-reply-quote .rq-text{
  color:var(--text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.85;
}
.msg-row.me .msg-reply-quote{
  border-left-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);
}
.msg-row.me .msg-reply-quote .rq-name{color:rgba(255,255,255,.85)}

/* ============================================================
   REPLY PREVIEW — над полем ввода, когда отвечаем
   ============================================================ */
.chat-reply-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:rgba(20,35,70,.9);
  border-top:1px solid var(--line-strong);
  border-left:3px solid var(--accent-2);
}
.chat-reply-bar .rb-info{
  flex:1;
  min-width:0;
}
.chat-reply-bar .rb-name{
  font-size:11px;
  color:var(--accent-2);
  font-weight:700;
}
.chat-reply-bar .rb-text{
  font-size:11.5px;
  color:var(--text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-reply-bar .rb-close{
  width:26px;height:26px;border-radius:8px;
  border:none;
  background:rgba(220,110,110,.2);
  color:#ff8b8b;
  cursor:pointer;
  font-size:14px;
  font-family:inherit;
  display:flex;align-items:center;justify-content:center;
}

/* ============================================================
   Прочитано / Не прочитано — галочки
   ============================================================ */
.msg-status{
  display:inline-flex;
  align-items:center;
  gap:2px;
  margin-left:4px;
  font-size:10px;
  color:var(--text-muted);
  opacity:.7;
  vertical-align:middle;
}
.msg-status.read{color:#5fb8d8;opacity:1}
.msg-row.me .msg-time{
  display:inline-flex;
  align-items:center;
  gap:4px;
  justify-content:flex-end;
}

/* ============================================================
   Упоминания @username — кликабельные
   ============================================================ */
.mention{
  color:var(--accent-2);
  font-weight:600;
  cursor:pointer;
  border-radius:5px;
  padding:0 2px;
  transition:.12s;
}
.mention:hover{
  background:rgba(93,129,200,.2);
  color:#a3c1ee;
}
.msg-row.me .mention{color:#d4e2ff;background:rgba(255,255,255,.08)}
.msg-row.me .mention:hover{background:rgba(255,255,255,.18)}

/* ============================================================
   Свайп для ответа
   ============================================================ */
.msg-row{
  position:relative;
  transition:transform .18s cubic-bezier(.3,.7,.3,1);
  will-change:transform;
  touch-action:pan-y;
}
.msg-row.swipe-reply{
  transform:translateX(60px);
}
.msg-swipe-icon{
  position:absolute;
  left:-40px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
  color:var(--accent-2);
  opacity:0;
  transition:opacity .15s;
  pointer-events:none;
}
.msg-row.swipe-reply .msg-swipe-icon{
  opacity:1;
}

/* ============================================================
   Стикеры
   ============================================================ */
.sticker-panel{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  padding:10px 12px 4px;
  max-height:220px;
  overflow-y:auto;
}
.sticker{
  aspect-ratio:1/1;
  font-size:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(74,109,184,.1);
  cursor:pointer;
  transition:.15s;
  user-select:none;
}
.sticker:hover{background:rgba(74,109,184,.25);transform:scale(1.06)}
.sticker:active{transform:scale(.94)}

.msg-sticker{
  font-size:72px;
  line-height:1;
  user-select:none;
}

/* Плашка блокировки */
.profile-hero-blocked{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:5px 12px;border-radius:10px;background:rgba(220,110,110,.15);border:1px solid rgba(220,110,110,.35);color:#ff8b8b;font-size:11.5px;font-weight:600;}


/* Сетка создания сообщества — 3 слота */
.edit-img-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  padding:0 16px !important;
  grid-template-areas:
    "banner banner"
    "icon theme" !important;
}
.edit-img-grid .slot-banner{grid-area:banner !important;aspect-ratio:16/9 !important}
.edit-img-grid .slot-icon{grid-area:icon !important;aspect-ratio:1/1 !important}
.edit-img-grid .slot-theme{grid-area:theme !important;aspect-ratio:9/16 !important;max-height:240px !important}

/* ============================================================
   НАСТРОЙКИ — красивые кнопки с анимацией (как на входе)
   ============================================================ */

/* Контейнер секции — тень как у карточек */
.settings-section{
  position:relative;
  box-shadow:
    0 6px 18px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.03);
  transition:box-shadow .3s ease;
}

/* Каждая строка-кнопка */
.settings-row{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:
    background .25s ease,
    transform .18s cubic-bezier(.3,.7,.3,1),
    box-shadow .3s ease,
    padding-left .25s ease;
  border-radius:0;
}

/* Наведение */
.settings-row:hover{
  background:linear-gradient(90deg,
    rgba(74,109,184,.28) 0%,
    rgba(93,129,200,.15) 50%,
    transparent 100%) !important;
  padding-left:20px !important;
  box-shadow:
    inset 4px 0 0 var(--accent-2),
    inset 0 0 20px rgba(74,109,184,.15);
}
.settings-row:hover .label{
  color:#fff;
  text-shadow:0 0 10px rgba(120,150,210,.6);
}
.settings-row:hover .ic{
  transform:scale(1.15) rotate(-3deg);
  filter:drop-shadow(0 0 6px rgba(120,150,210,.8));
}
.settings-row:hover .arrow{
  transform:translateX(6px);
  color:var(--accent-2);
}

/* Иконка */
.settings-row .ic{
  transition:transform .25s cubic-bezier(.3,.7,.3,1), filter .25s;
}

/* Стрелка */
.settings-row .arrow{
  transition:transform .25s cubic-bezier(.3,.7,.3,1), color .25s;
}

/* Текст */
.settings-row .label{
  transition:color .25s, text-shadow .25s;
}

/* Клик — сжатие */
.settings-row:active{
  transform:scale(.985);
  background:linear-gradient(90deg,
    rgba(74,109,184,.4) 0%,
    rgba(93,129,200,.25) 50%,
    transparent 100%) !important;
}

/* Опасные (Выйти) */
.settings-row.danger{
  color:#ff8b8b;
}
.settings-row.danger:hover{
  background:linear-gradient(90deg,
    rgba(220,110,110,.25) 0%,
    rgba(200,90,90,.12) 50%,
    transparent 100%) !important;
  box-shadow:
    inset 4px 0 0 #ff8b8b,
    inset 0 0 20px rgba(220,110,110,.15);
}
.settings-row.danger:hover .label{color:#ffb3b3}

/* Блик — пробегающий при hover */
.settings-row::before{
  content:'';
  position:absolute;
  top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.06) 50%,
    transparent 100%);
  transform:skewX(-18deg);
  transition:left .7s cubic-bezier(.3,.7,.3,1);
  pointer-events:none;
  z-index:1;
}
.settings-row:hover::before{
  left:130%;
}

/* Заголовок секции — анимация */
.settings-section-head{
  transition:color .25s, letter-spacing .3s;
}
.settings-section:hover .settings-section-head{
  color:#a3c1ee;
  letter-spacing:.55px;
}

/* Заголовок страницы «Настройки» */
.edit-header .edit-title{
  animation:settingsTitleFloat 4s ease-in-out infinite;
}
@keyframes settingsTitleFloat{
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(-2px); }
}

/* Кнопка назад */
.settings-wrap .icon-btn-circle{
  transition:transform .2s cubic-bezier(.3,.7,.3,1),
             box-shadow .25s, background .2s;
}
.settings-wrap .icon-btn-circle:hover{
  transform:scale(.94);
  background:rgba(74,109,184,.5) !important;
  box-shadow:
    0 0 0 1px rgba(120,150,210,.5),
    0 0 18px rgba(120,150,210,.4);
}
.settings-wrap .icon-btn-circle:active{
  transform:scale(.88);
}

/* Пульс при загрузке страницы — поочерёдное появление */
.settings-section{
  animation:settingsIn .35s cubic-bezier(.3,.7,.3,1) both;
}
.settings-section:nth-of-type(1){animation-delay:.03s}
.settings-section:nth-of-type(2){animation-delay:.09s}
.settings-section:nth-of-type(3){animation-delay:.15s}
.settings-section:nth-of-type(4){animation-delay:.21s}
.settings-section:nth-of-type(5){animation-delay:.27s}
.settings-section:nth-of-type(6){animation-delay:.33s}

@keyframes settingsIn{
  0%   { opacity:0; transform:translateY(8px); }
  100% { opacity:1; transform:translateY(0); }
}

/* ============================================================
   КОШЕЛЁК + МАГАЗИН
   ============================================================ */
.wallet-tabs{
  display:flex;gap:6px;margin:10px 16px 0;padding:4px;
  background:rgba(15,23,38,.7);border:1px solid var(--line);
  border-radius:14px;position:relative;overflow:hidden;
}
.wallet-tabs-ind{
  position:absolute;top:4px;left:4px;height:calc(100% - 8px);
  border-radius:10px;
  background:linear-gradient(135deg,rgba(74,109,184,.55),rgba(93,129,200,.45));
  border:1px solid rgba(120,150,210,.35);
  transition:transform .3s cubic-bezier(.4,.7,.3,1), width .3s cubic-bezier(.4,.7,.3,1);
  pointer-events:none;
}
.wallet-tab{
  flex:1;position:relative;z-index:2;padding:10px 6px;
  border:none;background:transparent;color:var(--text-muted);
  font-family:inherit;font-size:12px;font-weight:600;
  cursor:pointer;border-radius:10px;transition:color .25s;
}
.wallet-tab.active{color:#fff}

.wallet-balance{
  margin:14px 16px 6px;padding:20px 16px;border-radius:20px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(212,161,58,.35) 0%, transparent 60%),
    linear-gradient(135deg, rgba(26,37,66,.9), rgba(15,23,38,.95));
  border:1px solid rgba(240,199,101,.4);
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.wallet-balance .wlb-icon{font-size:36px;line-height:1;margin-bottom:6px;display:block}
.wallet-balance .wlb-num{
  font-size:34px;font-weight:800;color:#f0c765;
  letter-spacing:-.5px;line-height:1;
  text-shadow:0 2px 20px rgba(240,199,101,.5);
}
.wallet-balance .wlb-lbl{
  font-size:12px;color:var(--text-dim);margin-top:6px;
  letter-spacing:.4px;text-transform:uppercase;
}

.wallet-coupon{
  margin:10px 16px;padding:14px;border-radius:16px;
  background:linear-gradient(135deg, rgba(74,109,184,.3), rgba(93,129,200,.18));
  border:1px dashed rgba(120,150,210,.55);
  display:flex;align-items:center;gap:12px;
  cursor:pointer;transition:.15s;position:relative;overflow:hidden;
}
.wallet-coupon:hover{
  background:linear-gradient(135deg, rgba(74,109,184,.5), rgba(93,129,200,.3));
  transform:translateY(-1px);box-shadow:0 8px 22px rgba(74,109,184,.35);
}
.wallet-coupon.used{
  opacity:.5;cursor:default;transform:none !important;
  background:rgba(20,29,51,.6);border-style:solid;
}
.wallet-coupon .wc-icon{font-size:28px}
.wallet-coupon .wc-info{flex:1}
.wallet-coupon .wc-title{font-size:13.5px;font-weight:700;color:var(--text)}
.wallet-coupon .wc-sub{font-size:11.5px;color:var(--text-dim);margin-top:2px}
.wallet-coupon .wc-badge{
  padding:4px 10px;border-radius:10px;
  background:linear-gradient(135deg,#f0c765,#d4a13a);
  color:#1a1207;font-size:11px;font-weight:800;
}



.shop-frame:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.shop-frame.active{border-color:#f0c765;box-shadow:0 0 0 1px #f0c765, 0 0 22px rgba(240,199,101,.4)}
.shop-frame.owned{border-color:rgba(63,208,122,.45)}





.shop-frame-name{font-size:12.5px;font-weight:700;color:var(--text);text-align:center}
.shop-frame-price{
  font-size:12px;font-weight:800;padding:5px 12px;border-radius:10px;
  background:linear-gradient(135deg, rgba(212,161,58,.25), rgba(240,199,101,.15));
  border:1px solid rgba(240,199,101,.5);
  color:#f0c765;width:100%;text-align:center;
  cursor:pointer;transition:.15s;font-family:inherit;
}
.shop-frame-price:hover{background:linear-gradient(135deg, rgba(212,161,58,.4), rgba(240,199,101,.3));box-shadow:0 0 12px rgba(240,199,101,.35)}
.shop-frame-price.disabled{opacity:.5;cursor:not-allowed}
.shop-frame-status{
  position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:8px;
}
.shop-frame-status.owned{background:rgba(63,208,122,.25);color:#3fd07a}
.shop-frame-status.active{background:linear-gradient(135deg,#f0c765,#d4a13a);color:#1a1207}

.avatar{position:relative}
.avatar .frame-overlay{
  position:absolute;inset:-3px;
  width:calc(100% + 6px);height:calc(100% + 6px);
  object-fit:contain;pointer-events:none;z-index:5;
  border-radius:50%;
  filter:drop-shadow(0 0 6px rgba(120,150,210,.5));
}
.profile-hero .avatar .frame-overlay{
  inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);
  filter:drop-shadow(0 0 10px rgba(120,150,210,.65));
}

/* ============================================================
   FALLBACK для рамки (если PNG не найден)
   Красивая CSS-обводка
   ============================================================ */
@keyframes fallbackFrameRotate {
  0%   { box-shadow: 0 0 0 3px #ff4d6d, 0 0 22px rgba(255,77,109,.8); }
  25%  { box-shadow: 0 0 0 3px #ffd93d, 0 0 22px rgba(255,217,61,.8); }
  50%  { box-shadow: 0 0 0 3px #6bff8f, 0 0 22px rgba(107,255,143,.8); }
  75%  { box-shadow: 0 0 0 3px #4db8ff, 0 0 22px rgba(77,184,255,.8); }
  100% { box-shadow: 0 0 0 3px #b58fff, 0 0 22px rgba(181,143,255,.8); }
}

.shop-frame-prev.fallback-frame .sfp-base{
  animation: fallbackFrameRotate 3s linear infinite;
}

/* Если рамка одна — карточка по центру, крупнее */
.shop-grid:has(> .shop-frame:only-child){
  grid-template-columns:1fr;
  justify-items:center;
}
.shop-grid:has(> .shop-frame:only-child) 

/* ============================================================
   СЕТКА РАМОК В РЕДАКТОРЕ ПРОФИЛЯ
   ============================================================ */


.frame-item:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.frame-item.active{
  border-color:#f0c765;
  box-shadow:0 0 0 1px #f0c765, 0 0 20px rgba(240,199,101,.45);
}
.frame-item.locked{opacity:.7}




.frame-item-none{
  position:absolute;
  inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;color:#9aa5b8;
  font-weight:800;
}


.frame-item-lock{
  position:absolute;top:6px;right:6px;
  font-size:9.5px;font-weight:700;
  padding:2px 6px;border-radius:8px;
  background:linear-gradient(135deg, rgba(212,161,58,.9), rgba(240,199,101,.9));
  color:#1a1207;
}

/* Fallback для рамки, если PNG нет */
.frame-item-prev.fallback-frame 
@keyframes fallbackFrameRotate {
  0%   { box-shadow: 0 0 0 3px #ff4d6d, 0 0 22px rgba(255,77,109,.8); }
  25%  { box-shadow: 0 0 0 3px #ffd93d, 0 0 22px rgba(255,217,61,.8); }
  50%  { box-shadow: 0 0 0 3px #6bff8f, 0 0 22px rgba(107,255,143,.8); }
  75%  { box-shadow: 0 0 0 3px #4db8ff, 0 0 22px rgba(77,184,255,.8); }
  100% { box-shadow: 0 0 0 3px #b58fff, 0 0 22px rgba(181,143,255,.8); }
}

/* ============================================================
   ПРЕВЬЮ РАМКИ В МАГАЗИНЕ — БОЛЬШОЕ
   ============================================================ */

/* Контейнер превью — большой */


/* База (аватар) — большой круг */


/* Рамка-оверлей поверх — по размеру базы + запас */


/* Карточка — по центру, шире */



/* Название крупнее */
.shop-frame-name{
  font-size:15px !important;
}

/* Кнопки/цена крупнее */
.shop-frame-price,
.shop-frame .btn-outline{
  padding:14px 18px !important;
  font-size:14px !important;
  border-radius:14px !important;
}

/* Мобильная адаптация — на маленьких экранах меньше */
@media (max-width:400px){
  
  
  
  
}

/* Также увеличиваем превью в редакторе профиля */




/* Сетка рамок в редакторе — 2 в ряд, покрупнее */


@media (max-width:400px){
  
  
  
}

/* ============================================================
   КАРТОЧКА МАГАЗИНА — КОМПАКТНАЯ
   ============================================================ */

/* Карточка уже и ниже */


/* Превью меньше */




/* Название меньше */
.shop-frame-name{
  font-size:13px !important;
}

/* Кнопка цены/надеть — компактнее */
.shop-frame-price,
.shop-frame .btn-outline{
  padding:10px 14px !important;
  font-size:12.5px !important;
  border-radius:12px !important;
}

/* Мобильная адаптация */
@media (max-width:400px){
  
  
  
  
}

/* ============================================================
   БАЛАНС В ШАПКЕ ПРОФИЛЯ — компактный
   ============================================================ */




/* Кнопки в шапке — одной высоты */
.profile-actions-row .icon-btn-circle{
  height:34px !important;
  width:34px !important;
}

/* ============================================================
   БАЛАНС В ШАПКЕ ПРОФИЛЯ — тёмный + сильно скруглённый
   ============================================================ */








/* ============================================================
   БАЛАНС В ШАПКЕ ПРОФИЛЯ — светлый, золотой, красивый
   ============================================================ */
.profile-actions-row .coins-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  height:34px !important;
  padding:0 14px !important;
  border-radius:999px !important;

  background:linear-gradient(135deg, rgba(212,161,58,.35) 0%, rgba(240,199,101,.25) 50%, rgba(212,161,58,.3) 100%) !important;
  border:1px solid rgba(240,199,101,.6) !important;
  color:#ffe9a8 !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.3px !important;
  cursor:pointer !important;
  transition:.18s cubic-bezier(.3,.7,.3,1) !important;

  backdrop-filter:blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(140%) !important;

  box-shadow:
    0 4px 16px rgba(0,0,0,.45),
    0 0 18px rgba(240,199,101,.25),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
  white-space:nowrap !important;
  position:relative !important;
  overflow:hidden !important;
}

/* Лёгкий блик внутри */
.profile-actions-row .coins-badge::before{
  content:'' !important;
  position:absolute !important;
  top:0 !important;
  left:-100% !important;
  width:60% !important;
  height:100% !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent) !important;
  transform:skewX(-18deg) !important;
  transition:left .7s cubic-bezier(.3,.7,.3,1) !important;
  pointer-events:none !important;
}
.profile-actions-row .coins-badge:hover::before{
  left:130% !important;
}

.profile-actions-row .coins-badge:hover{
  background:linear-gradient(135deg, rgba(240,199,101,.5) 0%, rgba(255,220,140,.4) 50%, rgba(240,199,101,.45) 100%) !important;
  border-color:rgba(255,220,140,.85) !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,.5),
    0 0 24px rgba(240,199,101,.5),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform:translateY(-1px) !important;
}

.profile-actions-row .coins-badge:active{
  transform:scale(.96) !important;
}

.profile-actions-row .coins-badge .cnum{
  color:#ffffff !important;
  font-size:12.5px !important;
  font-weight:800 !important;
  text-shadow:0 1px 4px rgba(0,0,0,.5) !important;
}

/* ============================================================
   ПРЕВЬЮ РАМОК — градиент + круг, без смайлика
   ============================================================ */
.shop-frame-prev .sfp-base,


/* Тонкое свечение сверху */


/* Блик снизу */


/* Размеры */



@media (max-width:400px){
  
  
}

/* ============================================================
   МАГАЗИН — 3 рамки в ряд, мягкий линейный градиент
   ============================================================ */

/* Сетка — 3 в ряд */
.shop-grid{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:8px !important;
  padding:12px 12px 24px !important;
  justify-items:stretch !important;
}

/* Карточка — компактная */
.shop-frame{
  max-width:none !important;
  width:100% !important;
  padding:10px 6px !important;
  gap:6px !important;
  border-radius:14px !important;
  box-sizing:border-box !important;
}

/* Название компактнее */
.shop-frame-name{
  font-size:10.5px !important;
  line-height:1.15 !important;
  text-align:center !important;
  word-break:break-word !important;
  padding:0 2px !important;
}

/* Кнопки/цена — компактнее */
.shop-frame-price,
.shop-frame .btn-outline{
  padding:8px 6px !important;
  font-size:11px !important;
  border-radius:10px !important;
  width:100% !important;
}

/* Превью — компактное */
.shop-frame-prev{
  width:100% !important;
  aspect-ratio:1/1 !important;
  max-width:90px !important;
  height:auto !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto !important;
}

/* Круг-база — мягкий линейный градиент */
.shop-frame-prev .sfp-base,


/* Мягкий блик — сильно ослаблен */
.shop-frame-prev .sfp-base::before,


/* Тень снизу — мягкая */
.shop-frame-prev .sfp-base::after,


/* Оверлей-рамка поверх — по размеру карточки */
.shop-frame-prev .sfp-overlay{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  pointer-events:none !important;
}

/* Мобильная адаптация */
@media (max-width:400px){
  .shop-grid{
    grid-template-columns:repeat(3, 1fr) !important;
    gap:6px !important;
    padding:10px 10px 20px !important;
  }
  .shop-frame{padding:8px 4px !important}
  .shop-frame-name{font-size:9.5px !important}
  .shop-frame-price{font-size:10px !important;padding:6px 4px !important}
  .shop-frame-prev{max-width:70px !important}
}

/* Редактор профиля — тоже 3 в ряд */










/* ============================================================
   ВЫБОР РАМКИ ПРОФИЛЯ — 3 в ряд, аккуратные карточки
   ============================================================ */
.frame-grid{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:8px !important;
  padding:8px 16px 20px !important;
}

.frame-item{
  aspect-ratio:1 / 1.2 !important;
  border-radius:14px !important;
  padding:10px 6px 8px !important;
  background:linear-gradient(155deg, rgba(26,37,66,.7), rgba(19,28,51,.85)) !important;
  border:1px solid var(--line) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  cursor:pointer !important;
  transition:.15s !important;
  position:relative !important;
  overflow:hidden !important;
}

.frame-item:hover{
  transform:translateY(-2px) !important;
  border-color:var(--line-strong) !important;
}

.frame-item.active{
  border-color:#f0c765 !important;
  box-shadow:0 0 0 1px #f0c765, 0 0 18px rgba(240,199,101,.4) !important;
}
.frame-item.locked{opacity:.75 !important}

/* Превью: квадрат по центру сверху */
.frame-item-prev{
  width:100% !important;
  aspect-ratio:1/1 !important;
  max-width:78px !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  margin:0 auto !important;
}

/* Круг внутри — по центру */
.frame-item-base{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:72% !important;
  height:72% !important;
  border-radius:50% !important;
  background:linear-gradient(155deg, #8fb3e2 0%, #5d81c8 45%, #3a5aa0 100%) !important;
  box-shadow:
    inset 0 -2px 6px rgba(0,0,0,.25),
    0 3px 10px rgba(0,0,0,.4) !important;
  z-index:1 !important;
}

/* Оверлей-рамка — поверх круга, по центру */
.frame-item-overlay{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  pointer-events:none !important;
  z-index:2 !important;
}

/* Крестик для "без рамки" */
.frame-item-none{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  font-size:24px !important;
  color:#d4dff0 !important;
  font-weight:800 !important;
  z-index:3 !important;
  pointer-events:none !important;
}

/* Название — снизу */
.frame-item-name{
  font-size:10.5px !important;
  font-weight:600 !important;
  color:var(--text) !important;
  text-align:center !important;
  line-height:1.15 !important;
  width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  padding:0 2px !important;
}

/* Бейдж цены */
.frame-item-lock{
  position:absolute !important;
  top:6px !important;
  right:6px !important;
  font-size:9px !important;
  font-weight:700 !important;
  padding:2px 6px !important;
  border-radius:8px !important;
  background:linear-gradient(135deg, rgba(212,161,58,.9), rgba(240,199,101,.9)) !important;
  color:#1a1207 !important;
  z-index:4 !important;
}

/* ============================================================
   РАМКИ АВАТАРКИ — НЕ ОБРЕЗАЮТСЯ ПО КРАЯМ
   ============================================================ */

/* Контейнер аватара — позволяем рамке выйти за границы */
.avatar{
  overflow: visible !important;
  isolation: isolate;
}

/* Круглая часть аватара — картинка/градиент */
.avatar > img,
.avatar::before{
  border-radius: 50%;
  overflow: hidden;
}

/* Обёртка внутри аватара (для картинок) */
.avatar > img{
  border-radius: 50%;
}

/* Если рамка — отдельный слой, даём ей место */
.avatar .avatar-frame,
.avatar .frame-overlay,
.avatar [class*="frame-"]{
  position: absolute !important;
  inset: -12% !important;
  width: 124% !important;
  height: 124% !important;
  pointer-events: none !important;
  z-index: 5 !important;
  object-fit: contain !important;
}

/* Сама аватарка — фиксируем в центре, чтобы рамка вокруг */
.avatar{
  position: relative;
}

/* У крутых аватарок (в профиле) — побольше места для рамки */
.avatar.av-2xl,
.avatar.av-xl,
.avatar.av-lg{
  overflow: visible !important;
}

/* Онлайн-точка не должна теряться */
.avatar .online-dot{
  z-index: 10 !important;
}

/* Рамки в магазине — не обрезаем */
.shop-frame-prev .avatar,
.shop-frame-prev [class*="frame-"]{
  overflow: visible !important;
}

/* ============================================================
   ЖЁСТКИЙ ФИКС: снимаем overflow у родителей аватара
   ============================================================ */

/* Родители аватара в профиле — не обрезают */
.profile-hero,
.profile-hero > *,
.profile-banner-wrap,
.profile-wrap,
.profile-counters,
.profile-cta-row{
  overflow: visible !important;
}

/* Сам аватар */
.avatar{
  overflow: visible !important;
}

/* Любой слой рамки — растягиваем и не обрезаем */
.avatar img,
.avatar .frame-img,
.avatar .avatar-ring,
.avatar [class*="frame"]{
  overflow: visible !important;
}

/* Магазин рамок */
.shop-frame,
.shop-frame-prev,
.shop-frame-prev .avatar{
  overflow: visible !important;
}

/* Профиль в сообществе */
.profile-hero{
  overflow: visible !important;
  position: relative;
}

/* Карточка сообщества — тоже может обрезать */
.comm-info,
.comm-banner-info{
  overflow: visible !important;
}

/* ============================================================
   АВАТАРКА КРУГЛАЯ + РАМКА НЕ ОБРЕЗАЕТСЯ
   ============================================================ */

/* Контейнер — БЕЗ обрезки, чтобы рамка была видна */
.avatar{
  overflow: visible !important;
  position: relative !important;
  background-clip: padding-box !important;
}

/* Картинка внутри — круглая сама по себе */
.avatar > img{
  border-radius: 50% !important;
  overflow: hidden !important;
  display: block !important;
}

/* Квадратный вариант (сообщества) */
.avatar.sq > img{
  border-radius: 22% !important;
}

/* Градиент-кружок (когда нет картинки) — 
   делаем псевдоэлементом, чтобы сам .avatar не обрезал */
.avatar:not(.has-img):not(:has(img))::before{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background: inherit !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Эмодзи/буква — поверх круга, но не обрезается контейнером */
.avatar:not(.has-img):not(:has(img)){
  border-radius: 50% !important;
  background: transparent !important;
}

/* Родители аватара — не обрезают */
.profile-hero,
.profile-hero > *,
.profile-banner-wrap,
.profile-wrap,
.profile-counters,
.profile-cta-row,
.profile-pinned-section{
  overflow: visible !important;
}

/* Аватар в hero — с местом для рамки */
.profile-hero .avatar{
  overflow: visible !important;
}

/* Онлайн-точка — наверху */
.avatar .online-dot{
  z-index: 10 !important;
}

/* Рамка (отдельный слой, если есть) */
.avatar .frame-img,
.avatar .avatar-frame,
.avatar [class*="frame-"]{
  position: absolute !important;
  inset: -14% !important;
  width: 128% !important;
  height: 128% !important;
  pointer-events: none !important;
  z-index: 6 !important;
  object-fit: contain !important;
}

/* ============================================================
   РЕДАКТОР ПРОФИЛЯ — КРУГЛАЯ АВАТАРКА
   ============================================================ */

.edit-avatar-circle{
  border-radius: 50% !important;
  overflow: visible !important;
}

.edit-avatar-circle img{
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* Плейсхолдер-эмодзи тоже круглый */
.edit-avatar-circle > .ph,
.edit-avatar-circle > span{
  border-radius: 50% !important;
}

/* Аватарки-пресеты в редакторе — круглые */
.edit-avatar-block .picker-item{
  border-radius: 50% !important;
}

/* В регистрации тоже оставим круглыми (то же самое) */
.reg-avatar-circle{
  border-radius: 50% !important;
}
.reg-avatar-circle img{
  border-radius: 50% !important;
}
.reg-avatar-block .picker-item{
  border-radius: 50% !important;
}

/* Магазин рамок — превью круглое */
.shop-frame-prev .sfp-base,
.shop-frame-prev .avatar{
  border-radius: 50% !important;
}

/* ============================================================
   БАГ-ФИКС ПАКЕТ 16 ПУНКТОВ
   ============================================================ */

/* --- 1. Пост: убрать синие границы, картинка 16:9, меньше скругление --- */
.post-card{
  border:none !important;
  border-radius:10px !important;
  background:linear-gradient(155deg, rgba(26,37,66,.55), rgba(19,28,51,.75)) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.35) !important;
  overflow:hidden !important;
}
.post-card-cover{
  aspect-ratio:16/9 !important;
  width:100% !important;
  border-radius:0 !important;
  margin:0 !important;
}
.post-card-body{padding:10px 12px 6px !important}

/* --- 2. Пост в подборке (pod-main) --- */
.pod-main .pod-av{
  top:auto !important;
  bottom:12px !important;
  left:12px !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
}
.pod-main .pod-top{
  top:12px !important;
  right:12px !important;
  left:auto !important;
}

/* --- 3+9. В табе Чаты — только публичные --- */
.comm-chats-personal{display:none !important}

/* --- 4. Аватарка в профиле 85px --- */
.profile-hero .avatar.av-2xl,
.profile-hero .avatar.av-xl{
  width:85px !important;
  height:85px !important;
  font-size:38px !important;
}

/* --- 11. Убрать текст «в сети» под ником в профиле --- */
.profile-hero-status,
.profile-hero .chat-hero-status,
.profile-hero .profile-hero-status{display:none !important}

/* --- 12. Кнопка «Редактировать» меньше по высоте --- */
.profile-actions-row .btn-outline,
.profile-cta-row .btn-outline{
  padding:8px 14px !important;
  font-size:12.5px !important;
  border-radius:11px !important;
  min-height:0 !important;
}

/* --- 5. Пост: три точки справа сверху, горизонтальные --- */
.post-card-menu{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  width:38px !important;
  height:26px !important;
  border-radius:13px !important;
  background:rgba(15,25,45,.75) !important;
  border:1px solid rgba(120,150,210,.3) !important;
  color:#e4ebf7 !important;
  font-size:16px !important;
  font-weight:700 !important;
  padding:0 0 6px 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:10 !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  box-shadow:0 3px 10px rgba(0,0,0,.45) !important;
}

/* --- 4. Бейдж «Подборка» — скрыть --- */
.post-card-featured-badge{display:none !important}
/* ============================================================
   ЛОКАЛЬНЫЙ ПРОФИЛЬ В СООБЩЕСТВЕ
   ============================================================ */
.profile-local-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:6px;
  padding:3px 10px;
  border-radius:10px;
  background:rgba(74,109,184,.2);
  border:1px solid rgba(120,150,210,.4);
  color:#a3c1ee;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.3px;
}

/* Пилюля с локальным именем в постах/чатах */
.local-name-badge{
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-left:4px;
  font-size:10px;
  color:var(--text-muted);
  opacity:.85;
}
/* ============================================================
   ПОДБОРКА (pod-main) — иконка вниз, круглая, без бейджа
   ============================================================ */
.pod-main .pod-av{
  position:absolute !important;
  top:auto !important;
  bottom:14px !important;
  left:14px !important;
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  border:2px solid rgba(255,255,255,.35) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.55) !important;
  z-index:5 !important;
}
.pod-main .pod-av img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:50% !important;
}
.pod-main .pod-star{
  display:none !important;
}
.pod-main .pod-top{
  top:12px !important;
  right:12px !important;
  left:auto !important;
}

/* ============================================================
   ПУБЛИЧНЫЕ ЧАТЫ — убрать кнопку "Личные чаты" из шапки
   ============================================================ */
.comm-chats-personal,
.comm-personal-header{
  display:none !important;
}

/* ============================================================
   МАЛЕНЬКИЕ ФИНАЛЬНЫЕ ПРАВКИ
   ============================================================ */
/* Кнопка Редактировать в профиле — компактнее */
.profile-actions-row .btn-outline,
.profile-cta-row .btn-outline{
  padding:8px 14px !important;
  font-size:12.5px !important;
  min-height:0 !important;
}

/* Убрать надпись "в сети" под ником */
.profile-hero-status,
.profile-hero .chat-hero-status,
.profile-hero .profile-hero-status{
  display:none !important;
}
/* ============================================================
   ПОСТ — убрать синюю полосу снизу
   ============================================================ */
.post-card-foot{
  background:transparent !important;
  background-image:none !important;
  border-top:none !important;
  box-shadow:none !important;
  padding:6px 12px 10px !important;
}
.post-card-body{
  background:transparent !important;
}
.post-card{
  background:linear-gradient(155deg, rgba(26,37,66,.55), rgba(19,28,51,.75)) !important;
}
.post-card-action{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.post-card-action.active{
  background:transparent !important;
  color:#ff6b8a !important;
}
/* ============================================================
   ПОСТ — убрать синий фон под заголовком и автором
   ============================================================ */
.post-card{
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:10px !important;
  overflow:hidden !important;
}
.post-card-body{
  background:transparent !important;
  background-image:none !important;
  padding:10px 12px 4px !important;
}
.post-card-body::before,
.post-card-body::after{
  display:none !important;
}
.post-card-foot{
  background:transparent !important;
  background-image:none !important;
  border-top:none !important;
  padding:4px 12px 10px !important;
}
.post-card-foot::before,
.post-card-foot::after{
  display:none !important;
}
/* ============================================================
   ОБЛОЖКА ПОСТА — строго 16:9, заполняет всю ширину без зазоров
   ============================================================ */
.post-card{
  border-radius:8px !important;
  overflow:hidden !important;
}
.post-card-cover{
  width:100% !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:0 !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  display:block !important;
}
.post-card-cover img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:0 !important;
}

/* Верхняя часть карточки тоже без скругления (обложка сама закруглится) */
.post-card > *:first-child{
  border-top-left-radius:8px !important;
  border-top-right-radius:8px !important;
}
.post-card > *:last-child{
  border-bottom-left-radius:8px !important;
  border-bottom-right-radius:8px !important;
}
/* БЕЙДЖ "ПОДБОРКА" — СКРЫТЬ НАВСЕГДА */
.post-card-featured-badge,
.post-card-hidden-badge{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
  position:absolute !important;
  pointer-events:none !important;
}
/* ============================================================
   ПОСТ = КАК ПОДБОРКА (pod-main)
   ============================================================ */
.post-card{
  position:relative !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:linear-gradient(150deg,#2a3f6e,#0f1726) !important;
  border:none !important;
  box-shadow:0 4px 16px rgba(0,0,0,.35) !important;
  cursor:pointer !important;
  margin:0 !important;
  padding:0 !important;
}

/* обложка = фон всей карточки */
.post-card-cover{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-size:cover !important;
  background-position:center !important;
  border-radius:0 !important;
  z-index:1 !important;
}
.post-card-cover img{
  width:100% !important;height:100% !important;
  object-fit:cover !important;display:block !important;
}

/* градиент снизу */
.post-card::after{
  content:'' !important;
  position:absolute !important;
  left:0 !important;right:0 !important;bottom:0 !important;
  height:70% !important;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 100%) !important;
  pointer-events:none !important;
  z-index:2 !important;
}

/* тело — внизу */
.post-card-body{
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  bottom:58px !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  z-index:3 !important;
  pointer-events:none !important;
}
.post-card-title{
  font-size:17px !important;
  font-weight:800 !important;
  color:#fff !important;
  line-height:1.2 !important;
  text-shadow:0 2px 10px rgba(0,0,0,.95) !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  margin-bottom:3px !important;
}
.post-card-text{
  font-size:12px !important;
  color:rgba(255,255,255,.85) !important;
  line-height:1.4 !important;
  text-shadow:0 1px 6px rgba(0,0,0,.9) !important;
  display:-webkit-box !important;
  -webkit-line-clamp:1 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

/* подвал — внизу: аватар + ник слева, лайки/комменты справа */
.post-card-foot{
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  bottom:14px !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:none !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  z-index:4 !important;
}
.post-card-author{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:1 !important;
  min-width:0 !important;
}
.post-card-author .avatar{
  width:32px !important;height:32px !important;
  border-radius:50% !important;
  border:2px solid rgba(255,255,255,.4) !important;
  flex-shrink:0 !important;
  overflow:hidden !important;
}
.post-card-author .avatar img{
  width:100% !important;height:100% !important;
  border-radius:50% !important;object-fit:cover !important;display:block !important;
}
.pc-name{
  font-size:12px !important;
  font-weight:700 !important;
  color:#fff !important;
  text-shadow:0 1px 6px rgba(0,0,0,.95) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.post-card-action{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  min-width:44px !important;
  height:32px !important;
  padding:0 12px !important;
  border-radius:16px !important;
  background:rgba(0,0,0,.55) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:700 !important;
  font-family:inherit !important;
  cursor:pointer !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  flex-shrink:0 !important;
  text-shadow:0 1px 4px rgba(0,0,0,.7) !important;
  box-shadow:none !important;
}
.post-card-action:hover{background:rgba(74,109,184,.7) !important}
.post-card-action.active{color:#ff8ba7 !important}

/* кнопка ⋯ — справа сверху */
.post-card-menu{
  position:absolute !important;
  top:12px !important;right:12px !important;
  width:36px !important;height:26px !important;
  border-radius:13px !important;
  background:rgba(0,0,0,.5) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  color:#fff !important;
  font-size:15px !important;font-weight:700 !important;
  padding:0 0 5px 0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  z-index:6 !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  box-shadow:0 3px 10px rgba(0,0,0,.4) !important;
}

/* бейджи подборки/скрытого — скрыть */
.post-card-featured-badge,
.post-card-hidden-badge{
  display:none !important;
}
/* ============================================================
   ПРАВИЛА СООБЩЕСТВА
   ============================================================ */
.rule-add-box{
  margin:8px 16px;
  padding:12px;
  border-radius:14px;
  background:linear-gradient(155deg, rgba(26,37,66,.6), rgba(19,28,51,.75));
  border:1px solid var(--line);
  display:flex;flex-direction:column;
}
.rule-card{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(155deg, rgba(26,37,66,.6), rgba(19,28,51,.75));
  border:1px solid var(--line);
  position:relative;
}
.rule-card.pending{
  border-color:rgba(212,161,58,.5);
  background:linear-gradient(155deg, rgba(74,55,20,.35), rgba(40,30,12,.5));
}
.rule-num{
  width:26px;height:26px;flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(74,109,184,.5), rgba(93,129,200,.35));
  border:1px solid rgba(120,150,210,.5);
  color:#fff;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.rule-body{flex:1;min-width:0}
.rule-text{
  font-size:13px;color:var(--text);line-height:1.5;
  word-break:break-word;white-space:pre-wrap;
}
.rule-meta{
  font-size:11px;color:var(--text-muted);margin-top:4px;
}
.rule-actions{display:flex;gap:6px;flex-shrink:0}
.rule-btn{
  width:32px;height:32px;border-radius:10px;
  border:none;cursor:pointer;font-size:15px;
  font-family:inherit;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  transition:.15s;
}
.rule-btn.approve{background:rgba(63,208,122,.22);color:#3fd07a}
.rule-btn.approve:hover{background:rgba(63,208,122,.45)}
.rule-btn.reject{background:rgba(220,110,110,.22);color:#ff8b8b}
.rule-btn.reject:hover{background:rgba(220,110,110,.45)}
.rule-del{
  position:absolute;top:8px;right:8px;
  width:24px;height:24px;border-radius:8px;
  border:none;background:transparent;
  color:var(--text-muted);font-size:12px;
  cursor:pointer;font-family:inherit;
}
.rule-del:hover{background:rgba(220,110,110,.15);color:#ff8b8b}
/* ============================================================
   РЕДАКТОР ПРАВИЛ
   ============================================================ */
.rule-add-title{
  font-size:12.5px;font-weight:700;color:var(--text);
  margin-bottom:2px;
}
.rule-card{position:relative}
.rule-menu{
  position:absolute;top:8px;right:8px;
  display:flex;gap:4px;
}
.rule-menu-btn{
  width:26px;height:26px;border-radius:8px;
  border:none;background:rgba(74,109,184,.2);
  color:var(--text);font-size:13px;
  cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  transition:.15s;
}
.rule-menu-btn:hover{background:rgba(74,109,184,.5)}
.rule-menu-btn.del{background:rgba(220,110,110,.2);color:#ff8b8b}
.rule-menu-btn.del:hover{background:rgba(220,110,110,.45)}

.rule-edit-box{
  width:100%;
  display:flex;flex-direction:column;gap:8px;
}
.rule-edit-actions{display:flex;gap:6px}
/* ============================================================
   КАРТИНКА В СООБЩЕНИИ
   ============================================================ */
.msg-bubble-wrap .msg-image{
  display:block;
  max-width:240px;
  max-height:320px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid var(--line);
  cursor:pointer;
  transition:.15s;
  background:rgba(0,0,0,.3);
}
.msg-row.me .msg-image{
  border-color:rgba(120,150,210,.5);
}
.msg-image:hover{filter:brightness(1.1)}
.msg-image:active{transform:scale(.98)}

/* Если у сообщения только картинка — убираем фон пузыря */
.msg-bubble.img-only{
  padding:0 !important;
  background:transparent !important;
  border:none !important;
}

/* Кнопка камеры */
.chat-photo-btn{
  width:38px !important;height:38px !important;
  border-radius:50% !important;
  background:rgba(74,109,184,.35) !important;
  color:#fff !important;
  border:none !important;
  font-size:16px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  cursor:pointer !important;flex-shrink:0 !important;
  box-shadow:none !important;
  font-family:inherit !important;
  transition:.15s !important;
}
.chat-photo-btn:hover{background:rgba(74,109,184,.6) !important}

/* Просмотр картинки на весь экран */
.img-viewer{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;
  cursor:zoom-out;
  animation:imgFadeIn .2s;
}
.img-viewer img{
  max-width:95vw;max-height:95vh;
  object-fit:contain;border-radius:12px;
}
@keyframes imgFadeIn{
  from{opacity:0}
  to{opacity:1}
}
/* Закреплённый пост в профиле */
.post-pinned-badge{
  position:absolute;
  top:10px;left:10px;
  padding:3px 9px;
  border-radius:10px;
  background:linear-gradient(135deg,#d4a13a,#f0c765);
  color:#1a1207;
  font-size:10.5px;
  font-weight:700;
  z-index:6;
  text-shadow:none;
}
/* ============================================================
   ФОН ЧАТА (картинка)
   ============================================================ */












/* ============================================================
   SPLASH — иконка плавно вверх-вниз
   ============================================================ */
@keyframes logoFloat{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.splash .logo-block,
.splash .logo-block img,
.splash .logo-word{
  animation: logoFloat 3.4s ease-in-out infinite;
  will-change: transform;
}
/* ============================================================
   WOON — iOS-АНИМАЦИИ (глобальные)
   ============================================================ */

/* --- Плавный переход экранов --- */
@keyframes screenFadeIn{
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes screenSlideIn{
  from { opacity:0; transform:translateX(14px); }
  to   { opacity:1; transform:translateX(0); }
}
#screen > *{
  animation: screenFadeIn .28s cubic-bezier(.25,.7,.3,1) both;
}
#screen.screen-push > *{
  animation: screenSlideIn .32s cubic-bezier(.25,.7,.3,1) both;
}

/* --- Карточки появляются каскадом --- */
@keyframes cardRise{
  from { opacity:0; transform:translateY(14px) scale(.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.post-card,
.chat-row,
.comm-card,
.rule-card,
.profile-post,
.notif-row,
.user-card,
.community-card{
  animation: cardRise .38s cubic-bezier(.2,.7,.3,1) both;
}
.post-card:nth-child(1),.chat-row:nth-child(1),.rule-card:nth-child(1){animation-delay:.02s}
.post-card:nth-child(2),.chat-row:nth-child(2),.rule-card:nth-child(2){animation-delay:.06s}
.post-card:nth-child(3),.chat-row:nth-child(3),.rule-card:nth-child(3){animation-delay:.10s}
.post-card:nth-child(4),.chat-row:nth-child(4),.rule-card:nth-child(4){animation-delay:.14s}
.post-card:nth-child(5),.chat-row:nth-child(5),.rule-card:nth-child(5){animation-delay:.18s}
.post-card:nth-child(6),.chat-row:nth-child(6),.rule-card:nth-child(6){animation-delay:.22s}
.post-card:nth-child(7),.chat-row:nth-child(7),.rule-card:nth-child(7){animation-delay:.26s}
.post-card:nth-child(8),.chat-row:nth-child(8),.rule-card:nth-child(8){animation-delay:.30s}

/* --- Tap-фидбек (всё кликабельное) --- */
button,
[role="button"],
.btn,
.btn-outline,
.icon-btn-circle,
.chat-row,
.post-card,
.comm-card,
.user-card,
.tab,
.picker-item,
.nav-item{
  -webkit-tap-highlight-color:transparent;
  transition: transform .14s cubic-bezier(.3,.7,.4,1),
              opacity .14s,
              background .18s;
}
button:active,
.btn:active,
.btn-outline:active,
.icon-btn-circle:active{
  transform: scale(.94);
  opacity:.85;
}
.chat-row:active,
.post-card:active,
.comm-card:active,
.user-card:active,
.nav-item:active{
  transform: scale(.985);
}
.tab:active,
.picker-item:active{
  transform: scale(.93);
}

/* --- Модалки / Sheet: выпрыгивание снизу --- */
@keyframes sheetSpringUp{
  0%   { transform: translateY(100%); opacity:.4; }
  60%  { transform: translateY(-2%); opacity:1; }
  80%  { transform: translateY(1%); }
  100% { transform: translateY(0); }
}
.sheet.open{
  animation: sheetSpringUp .42s cubic-bezier(.22,.68,.32,1) both;
}
@keyframes backdropFade{
  from { opacity:0; } to { opacity:1; }
}
.sheet-backdrop.open{
  animation: backdropFade .22s ease both;
}

/* --- Центральные оверлеи (pop, confirm) --- */
@keyframes popIn{
  0%   { transform: scale(.86); opacity:0; }
  60%  { transform: scale(1.03); opacity:1; }
  100% { transform: scale(1); }
}
.sheet-center.open,
.modal.open,
.dialog.open{
  animation: popIn .32s cubic-bezier(.22,.7,.3,1) both;
}

/* --- Лайк / реакция --- */
@keyframes heartPop{
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  60%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
.post-card-action.active,
.msg-bubble.pulse{
  animation: heartPop .45s cubic-bezier(.3,.7,.4,1) both;
}
.post-card-action svg,
.post-card-action span{
  transition: transform .2s;
}
.post-card-action.active svg,
.post-card-action.active span{
  transform: scale(1.08);
}

/* --- Стрелка Назад — пружинка --- */
.icon-btn-circle:active{
  transform: scale(.9) !important;
}

/* --- Плавный tab-индикатор --- */
.tab,
.chats-tab,
.comm-tab{
  transition: color .24s, background .24s, transform .18s;
}

/* --- Прогресс-бары (опрос) --- */
.post-poll-opt-bar{
  transition: width .55s cubic-bezier(.3,.7,.3,1);
}

/* --- Toast: всплывашка --- */
@keyframes toastIn{
  0%   { transform: translateY(20px); opacity:0; }
  100% { transform: translateY(0); opacity:1; }
}
.toast,
.ui-toast{
  animation: toastIn .28s cubic-bezier(.2,.7,.3,1) both;
}

/* --- Уведомление (красная точка) — пульс --- */
@keyframes dotPulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,80,120,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(255,80,120,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,80,120,0); }
}
.badge-dot,
.unread-dot{
  animation: dotPulse 1.8s ease-out infinite;
}

/* --- Скелетоны: мягкое мерцание --- */
@keyframes skelShimmer{
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton,
.skeleton-line,
.skeleton-list > *{
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.04) 100%);
  background-size:200% 100%;
  animation: skelShimmer 1.6s ease-in-out infinite;
}

/* --- Ripple на больших кнопках --- */
.btn-outline.solid,
.btn.primary{
  position:relative;
  overflow:hidden;
}
.btn-outline.solid::after,
.btn.primary::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at center,
    rgba(255,255,255,.35) 0%,
    rgba(255,255,255,0) 60%);
  opacity:0;
  transition: opacity .35s;
  pointer-events:none;
}
.btn-outline.solid:active::after,
.btn.primary:active::after{
  opacity:1;
  transition: opacity 0s;
}

/* --- Плавное появление изображений --- */
img{
  animation: fadeInImg .35s ease both;
}
@keyframes fadeInImg{
  from { opacity:0; }
  to   { opacity:1; }
}

/* --- Отключаем излишние анимации на устройствах с reduce-motion --- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* --- SPLASH — иконка плавно вверх-вниз --- */
@keyframes logoFloat{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.splash .logo-block,
.splash .logo-block img,
.splash .logo-word{
  animation: logoFloat 3.4s ease-in-out infinite;
  will-change: transform;
}
/* ============================================================
   АНИМАЦИЯ БАБЛОВ ЧАТА (iOS-style)
   ============================================================ */

/* --- Плавное появление нового сообщения --- */
@keyframes bubbleInLeft{
  0%   { opacity:0; transform: translateY(8px) scale(.94); }
  70%  { opacity:1; transform: translateY(-1px) scale(1.01); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes bubbleInRight{
  0%   { opacity:0; transform: translateY(8px) scale(.94) translateX(6px); }
  70%  { opacity:1; transform: translateY(-1px) scale(1.01) translateX(0); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}

.msg-row,
.msg-row.me{
  animation: bubbleInLeft .38s cubic-bezier(.22,.7,.3,1) both;
}
.msg-row.me{
  animation-name: bubbleInRight;
}

/* --- Пружинка при отправке (не при загрузке истории) --- */
@keyframes bubbleSend{
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  70%  { transform: scale(.97); }
  100% { transform: scale(1); }
}
.msg-row.sent{
  animation: bubbleSend .42s cubic-bezier(.3,.7,.4,1) both;
}

/* --- Хвостик у бабла (лёгкий iOS-стиль) --- */
.msg-bubble{
  position: relative;
  transition: transform .18s cubic-bezier(.3,.7,.4,1),
              background .18s;
}
.msg-bubble:active{
  transform: scale(.97);
}

/* --- Анимация «печатает…» (три прыгающие точки) --- */
@keyframes typingDot{
  0%   { transform: translateY(0); opacity:.4; }
  30%  { transform: translateY(-4px); opacity:1; }
  60%  { transform: translateY(0); opacity:.4; }
  100% { transform: translateY(0); opacity:.4; }
}
.typing,
.typing-indicator{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:10px 14px;
  border-radius:18px 18px 18px 6px;
  background:rgba(30,42,72,.85);
  border:1px solid var(--line);
  width:max-content;
  animation: bubbleInLeft .32s cubic-bezier(.22,.7,.3,1) both;
}
.typing span,
.typing-indicator span{
  width:6px;height:6px;border-radius:50%;
  background:var(--text-dim);
  display:inline-block;
  animation: typingDot 1.15s ease-in-out infinite;
}
.typing span:nth-child(2),
.typing-indicator span:nth-child(2){ animation-delay:.15s; }
.typing span:nth-child(3),
.typing-indicator span:nth-child(3){ animation-delay:.3s; }

/* --- Пульс при получении сообщения (собеседник написал) --- */
@keyframes bubblePulse{
  0%   { box-shadow: 0 0 0 0 rgba(120,150,210,.45); }
  100% { box-shadow: 0 0 0 12px rgba(120,150,210,0); }
}
.msg-row.pulse .msg-bubble{
  animation: bubblePulse 1.2s ease-out;
}

/* --- Реакции: пружинка появления --- */
@keyframes reactPop{
  0%   { opacity:0; transform: scale(.5) translateY(4px); }
  60%  { opacity:1; transform: scale(1.15) translateY(0); }
  100% { opacity:1; transform: scale(1) translateY(0); }
}
.reactions-row,
.reactions-row.visible{
  animation: reactPop .32s cubic-bezier(.25,.7,.3,1) both;
}
.reactions-row > *{
  transition: transform .15s cubic-bezier(.3,.7,.4,1);
}
.reactions-row > *:active{
  transform: scale(.85);
}

/* --- Двойной тап по баблу = пульс --- */
.msg-bubble.pulse{
  animation: bubbleSend .45s cubic-bezier(.3,.7,.4,1) both;
}

/* --- Стикеры: появление с pop --- */
@keyframes stickerPop{
  0%   { opacity:0; transform: scale(.3) rotate(-8deg); }
  65%  { opacity:1; transform: scale(1.12) rotate(3deg); }
  100% { opacity:1; transform: scale(1) rotate(0); }
}
.msg-sticker{
  animation: stickerPop .4s cubic-bezier(.25,.7,.3,1) both;
}

/* --- Изображение в сообщении: мягкий fade --- */
.msg-image{
  animation: bubbleInLeft .35s cubic-bezier(.22,.7,.3,1) both;
}

/* --- Статус прочтения (галочки) — плавная смена --- */
.msg-status,
.msg-check{
  transition: opacity .24s, transform .24s;
}
.msg-status.read,
.msg-check.read{
  transform: scale(1.06);
}

/* --- Плавное появление «новые сообщения» разделителя --- */
@keyframes dividerFade{
  from { opacity:0; transform: scaleX(.6); }
  to   { opacity:1; transform: scaleX(1); }
}
.msg-divider,
.unread-divider{
  animation: dividerFade .4s ease both;
}
/* ============================================================
   АНИМАЦИЯ БАБЛОВ ЧАТА (iOS-style)
   ============================================================ */

/* --- Плавное появление нового сообщения --- */
@keyframes bubbleInLeft{
  0%   { opacity:0; transform: translateY(8px) scale(.94); }
  70%  { opacity:1; transform: translateY(-1px) scale(1.01); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes bubbleInRight{
  0%   { opacity:0; transform: translateY(8px) scale(.94) translateX(6px); }
  70%  { opacity:1; transform: translateY(-1px) scale(1.01) translateX(0); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}

.msg-row,
.msg-row.me{
  animation: bubbleInLeft .38s cubic-bezier(.22,.7,.3,1) both;
}
.msg-row.me{
  animation-name: bubbleInRight;
}

/* --- Пружинка при отправке (не при загрузке истории) --- */
@keyframes bubbleSend{
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  70%  { transform: scale(.97); }
  100% { transform: scale(1); }
}
.msg-row.sent{
  animation: bubbleSend .42s cubic-bezier(.3,.7,.4,1) both;
}

/* --- Хвостик у бабла (лёгкий iOS-стиль) --- */
.msg-bubble{
  position: relative;
  transition: transform .18s cubic-bezier(.3,.7,.4,1),
              background .18s;
}
.msg-bubble:active{
  transform: scale(.97);
}

/* --- Анимация «печатает…» (три прыгающие точки) --- */
@keyframes typingDot{
  0%   { transform: translateY(0); opacity:.4; }
  30%  { transform: translateY(-4px); opacity:1; }
  60%  { transform: translateY(0); opacity:.4; }
  100% { transform: translateY(0); opacity:.4; }
}
.typing,
.typing-indicator{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:10px 14px;
  border-radius:18px 18px 18px 6px;
  background:rgba(30,42,72,.85);
  border:1px solid var(--line);
  width:max-content;
  animation: bubbleInLeft .32s cubic-bezier(.22,.7,.3,1) both;
}
.typing span,
.typing-indicator span{
  width:6px;height:6px;border-radius:50%;
  background:var(--text-dim);
  display:inline-block;
  animation: typingDot 1.15s ease-in-out infinite;
}
.typing span:nth-child(2),
.typing-indicator span:nth-child(2){ animation-delay:.15s; }
.typing span:nth-child(3),
.typing-indicator span:nth-child(3){ animation-delay:.3s; }

/* --- Пульс при получении сообщения (собеседник написал) --- */
@keyframes bubblePulse{
  0%   { box-shadow: 0 0 0 0 rgba(120,150,210,.45); }
  100% { box-shadow: 0 0 0 12px rgba(120,150,210,0); }
}
.msg-row.pulse .msg-bubble{
  animation: bubblePulse 1.2s ease-out;
}

/* --- Реакции: пружинка появления --- */
@keyframes reactPop{
  0%   { opacity:0; transform: scale(.5) translateY(4px); }
  60%  { opacity:1; transform: scale(1.15) translateY(0); }
  100% { opacity:1; transform: scale(1) translateY(0); }
}
.reactions-row,
.reactions-row.visible{
  animation: reactPop .32s cubic-bezier(.25,.7,.3,1) both;
}
.reactions-row > *{
  transition: transform .15s cubic-bezier(.3,.7,.4,1);
}
.reactions-row > *:active{
  transform: scale(.85);
}

/* --- Двойной тап по баблу = пульс --- */
.msg-bubble.pulse{
  animation: bubbleSend .45s cubic-bezier(.3,.7,.4,1) both;
}

/* --- Стикеры: появление с pop --- */
@keyframes stickerPop{
  0%   { opacity:0; transform: scale(.3) rotate(-8deg); }
  65%  { opacity:1; transform: scale(1.12) rotate(3deg); }
  100% { opacity:1; transform: scale(1) rotate(0); }
}
.msg-sticker{
  animation: stickerPop .4s cubic-bezier(.25,.7,.3,1) both;
}

/* --- Изображение в сообщении: мягкий fade --- */
.msg-image{
  animation: bubbleInLeft .35s cubic-bezier(.22,.7,.3,1) both;
}

/* --- Статус прочтения (галочки) — плавная смена --- */
.msg-status,
.msg-check{
  transition: opacity .24s, transform .24s;
}
.msg-status.read,
.msg-check.read{
  transform: scale(1.06);
}

/* --- Плавное появление «новые сообщения» разделителя --- */
@keyframes dividerFade{
  from { opacity:0; transform: scaleX(.6); }
  to   { opacity:1; transform: scaleX(1); }
}
.msg-divider,
.unread-divider{
  animation: dividerFade .4s ease both;
}
/* ============================================================
   ПУБЛИЧНЫЕ ЧАТЫ — Amino-баблы (сетка карточек с обложкой)
   ============================================================ */
.chat-bubbles-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  padding:14px 16px 24px;
}

.chat-bubble-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:4/5;
  cursor:pointer;
  background:linear-gradient(150deg,#1a2340,#0f1726);
  box-shadow:0 8px 22px rgba(0,0,0,.45),
             inset 0 0 0 1px rgba(120,150,210,.15);
  transition:transform .18s cubic-bezier(.3,.7,.4,1),
             box-shadow .22s;
  animation: bubbleCardIn .42s cubic-bezier(.22,.7,.3,1) both;
}
@keyframes bubbleCardIn{
  from{opacity:0; transform:translateY(14px) scale(.96);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
.chat-bubble-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,.55),
             inset 0 0 0 1px rgba(120,150,210,.35);
}
.chat-bubble-card:active{
  transform:scale(.97);
}
.chat-bubble-card:nth-child(1){animation-delay:.02s}
.chat-bubble-card:nth-child(2){animation-delay:.06s}
.chat-bubble-card:nth-child(3){animation-delay:.10s}
.chat-bubble-card:nth-child(4){animation-delay:.14s}
.chat-bubble-card:nth-child(5){animation-delay:.18s}
.chat-bubble-card:nth-child(6){animation-delay:.22s}
.chat-bubble-card:nth-child(7){animation-delay:.26s}
.chat-bubble-card:nth-child(8){animation-delay:.30s}

.cbc-cover{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  display:flex;align-items:center;justify-content:center;
}
.cbc-cover img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.cbc-emoji{
  font-size:56px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));
  opacity:.85;
}

/* Градиент снизу для читаемости */
.cbc-fade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.05) 40%,
    rgba(0,0,0,.65) 75%,
    rgba(0,0,0,.9) 100%);
  pointer-events:none;
}

/* Бейдж "вы в чате" сверху */
.cbc-tag{
  position:absolute;
  top:10px;left:10px;
  padding:4px 9px;
  border-radius:10px;
  background:rgba(63,208,122,.85);
  color:#052012;
  font-size:10px;
  font-weight:800;
  letter-spacing:.3px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:3;
}

/* Онлайн-индикатор */
.cbc-online{
  position:absolute;
  top:10px;right:10px;
  padding:3px 8px;
  border-radius:10px;
  background:rgba(0,0,0,.55);
  color:#3fd07a;
  font-size:10.5px;
  font-weight:700;
  display:flex;align-items:center;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:3;
}
.cbc-online .dot{
  width:6px;height:6px;border-radius:50%;
  background:#3fd07a;
  display:inline-block;
  box-shadow:0 0 6px #3fd07a;
  margin-right:2px;
}

/* Инфо снизу */
.cbc-info{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:10px 12px 12px;
  z-index:2;
}
.cbc-name{
  font-size:14px;
  font-weight:800;
  color:#fff;
  line-height:1.15;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
}
.cbc-meta{
  font-size:10.5px;
  color:rgba(255,255,255,.75);
  margin-top:3px;
  display:flex;flex-wrap:wrap;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.cbc-meta-sep{opacity:.6}
.cbc-last{
  font-size:11px;
  color:rgba(255,255,255,.65);
  margin-top:4px;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}

/* Кнопка Войти */
.cbc-join{
  position:absolute;
  right:10px;bottom:10px;
  padding:6px 14px;
  border-radius:20px;
  background:linear-gradient(135deg,#4a6db8,#5d81c8);
  color:#fff;
  font-size:11.5px;
  font-weight:800;
  border:none;
  cursor:pointer;
  font-family:inherit;
  z-index:5;
  box-shadow:0 4px 12px rgba(74,109,184,.5);
  transition:transform .15s;
}
.cbc-join:active{transform:scale(.92)}
.cbc-join:disabled{opacity:.6}

/* На мобилке — при узком экране 2 колонки оставляем */
@media (max-width:360px){
  .chat-bubbles-grid{gap:10px; padding:12px}
}
/* ============================================================
   АНИМИРОВАННЫЙ ГРАДИЕНТ НА СИНИХ КНОПКАХ
   ============================================================ */
@keyframes btnShimmer{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes btnGlow{
  0%,100% { box-shadow: 0 6px 18px rgba(59,130,246,.45), 0 0 22px rgba(90,166,255,.35); }
  50%     { box-shadow: 0 8px 24px rgba(90,166,255,.7), 0 0 34px rgba(124,196,255,.55); }
}

/* Основные синие кнопки */
.btn-outline.solid,
.btn.primary,
.cbc-join,
button.solid,
button.primary{
  background: linear-gradient(120deg,
    #3b82f6 0%,
    #5aa6ff 25%,
    #7cc4ff 50%,
    #5aa6ff 75%,
    #3b82f6 100%);
  background-size: 300% 300%;
  color:#fff !important;
  border: none !important;
  animation: btnShimmer 5.5s ease-in-out infinite,
             btnGlow 3.6s ease-in-out infinite;
  will-change: background-position, box-shadow;
}

.btn-outline.solid:hover,
.btn.primary:hover,
.cbc-join:hover{
  animation-duration: 3.2s, 2.4s;
  filter: brightness(1.1);
}

.btn-outline.solid:active,
.btn.primary:active,
.cbc-join:active{
  filter: brightness(.95);
}

/* Кнопка «Редактировать профиль» если она с solid */
.profile-cta-row .btn-outline.solid,
.profile-actions-row .btn-outline.solid{
  background: linear-gradient(120deg,
    #3b82f6 0%,
    #5aa6ff 25%,
    #7cc4ff 50%,
    #5aa6ff 75%,
    #3b82f6 100%);
  background-size: 300% 300%;
  animation: btnShimmer 5.5s ease-in-out infinite,
             btnGlow 3.6s ease-in-out infinite;
}

/* Отключаем для тех у кого reduce-motion */
@media (prefers-reduced-motion: reduce){
  .btn-outline.solid,
  .btn.primary,
  .cbc-join{
    animation: none !important;
  }
}
/* ============================================================
   АНИМИРОВАННЫЙ ФОН — «течёт» от тёмно-синего к текущему
   ============================================================ */
@keyframes flowBg{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes flowGlow{
  0%,100% { opacity: .55; transform: scale(1) translate(0,0); }
  50%     { opacity: .85; transform: scale(1.1) translate(-2%, -2%); }
}

/* Слой под всем интерфейсом — течёт */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    130deg,
    #050c1f 0%,
    #071530 20%,
    #0a1e44 40%,
    #0e2a5e 60%,
    #0a1e44 80%,
    #071530 100%
  );
  background-size: 400% 400%;
  animation: flowBg 22s ease-in-out infinite;
  pointer-events: none;
}

/* Мягкое голубое свечение сверху — плывёт */
body::after{
  content: '';
  position: fixed;
  top: -30%;
  left: -10%;
  width: 120%;
  height: 80%;
  z-index: -1;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(90, 166, 255, .28) 0%,
    rgba(59, 130, 246, .14) 30%,
    rgba(10, 22, 60, 0) 70%
  );
  animation: flowGlow 16s ease-in-out infinite;
  pointer-events: none;
  filter: blur(30px);
}

/* Убедимся что контейнеры прозрачные чтобы фон было видно */
html, body{
  background: transparent !important;
}
#app, #screen{
  background: transparent !important;
}

/* Если у элементов уже были свои градиенты-фоны — оставляем,
   но экраны меню делаем прозрачными */
.screen-inner,
.screen,
.feed-screen,
.chats-screen{
  background: transparent !important;
}

/* Reduce-motion — отключаем */
@media (prefers-reduced-motion: reduce){
  body::before,
  body::after{
    animation: none !important;
  }
}

/* ============================================================
   ОПРОС — МАКЕТ: округлые пилюли + анимация
   ============================================================ */

/* Карточка опроса */
.post-poll{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 14px 12px;
  border-radius:18px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(74,109,184,.14) 0%, transparent 60%),
    linear-gradient(155deg, rgba(26,37,66,.7), rgba(19,28,51,.85));
  border:1px solid rgba(120,150,210,.18);
  box-shadow:
    0 8px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
  animation: pollIn .35s cubic-bezier(.22,.7,.3,1) both;
}
@keyframes pollIn{
  from{opacity:0; transform:translateY(8px) scale(.98)}
  to{opacity:1; transform:translateY(0) scale(1)}
}

/* Вопрос */
.post-poll-q{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  letter-spacing:.2px;
  line-height:1.35;
  padding:0 2px 4px;
  display:flex;
  align-items:center;
  gap:8px;
}
.post-poll-q::before{
  content:'📊';
  font-size:14px;
  opacity:.9;
}

/* Пилюля варианта — базовая */
.post-poll-opt{
  position:relative;
  display:flex;
  align-items:center;
  min-height:46px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(28,42,72,.85), rgba(18,28,50,.9));
  border:1px solid rgba(120,150,210,.22);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .18s cubic-bezier(.3,.7,.4,1),
    border-color .22s ease,
    box-shadow .28s ease,
    background .22s ease;
  will-change: transform;
}
.post-poll-opt::after{
  /* блик, пробегающий по hover */
  content:'';
  position:absolute;
  top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform:skewX(-18deg);
  transition:left .7s cubic-bezier(.3,.7,.3,1);
  pointer-events:none;
  z-index:2;
}
.post-poll-opt:hover{
  border-color:rgba(120,150,210,.55);
  background:linear-gradient(180deg, rgba(35,52,88,.9), rgba(22,34,60,.95));
  transform:translateY(-1px);
  box-shadow:
    0 6px 18px rgba(0,0,0,.35),
    0 0 0 1px rgba(120,150,210,.18),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.post-poll-opt:hover::after{
  left:130%;
}
.post-poll-opt:active{
  transform:scale(.985);
}

/* Прогресс-бар (заливка слева) */
.post-poll-opt-bar{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  border-radius:14px;
  background:linear-gradient(90deg,
    rgba(74,109,184,.65) 0%,
    rgba(93,129,200,.55) 50%,
    rgba(124,166,230,.45) 100%);
  box-shadow:
    inset 0 0 20px rgba(255,255,255,.05),
    0 0 18px rgba(74,109,184,.25);
  transition: width .65s cubic-bezier(.22,.7,.3,1),
              background .3s ease;
  z-index:0;
  pointer-events:none;
}

/* Контент внутри пилюли */
.post-poll-opt-lbl{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:12px 16px;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  letter-spacing:.15px;
  gap:10px;
}
.post-poll-opt-lbl > span:first-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  min-width:0;
}

/* Проценты справа — появляются с fade-in */
.post-poll-opt-pct{
  font-size:12px;
  font-weight:800;
  color:#cfe0ff;
  background:rgba(15,25,45,.55);
  border:1px solid rgba(120,150,210,.28);
  padding:2px 9px;
  border-radius:9px;
  flex-shrink:0;
  opacity:0;
  transform:translateX(6px);
  animation: pctIn .4s cubic-bezier(.3,.7,.3,1) .15s both;
}
@keyframes pctIn{
  to{ opacity:1; transform:translateX(0) }
}

/* Проголосованный вариант — подсветка */
.post-poll-opt.voted{
  border-color:rgba(140,175,235,.75);
  background:linear-gradient(180deg, rgba(40,60,105,.95), rgba(24,38,70,.95));
  box-shadow:
    0 0 0 1px rgba(140,175,235,.5),
    0 0 22px rgba(74,109,184,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.post-poll-opt.voted .post-poll-opt-bar{
  background:linear-gradient(90deg,
    rgba(90,130,210,.85) 0%,
    rgba(120,160,230,.7) 50%,
    rgba(150,190,255,.6) 100%);
}
.post-poll-opt.voted .post-poll-opt-lbl > span:first-child::before{
  content:'✓ ';
  color:#a7c4ff;
  font-weight:800;
  margin-right:2px;
}

/* Пульс при голосовании */
@keyframes pollPulse{
  0%   { box-shadow: 0 0 0 0 rgba(120,150,210,.55); }
  100% { box-shadow: 0 0 0 16px rgba(120,150,210,0); }
}
.post-poll-opt.just-voted{
  animation: pollPulse .6s ease-out;
}

/* Итог голосов */
.post-poll-total{
  font-size:11.5px;
  color:var(--text-muted);
  text-align:right;
  padding:2px 4px 0;
  letter-spacing:.2px;
}

/* Бейдж опроса в карточке поста */
.post-card-poll-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  color:#cfe0ff;
  background:linear-gradient(180deg, rgba(40,60,105,.75), rgba(24,38,70,.85));
  border:1px solid rgba(120,150,210,.35);
  padding:5px 11px;
  border-radius:10px;
  margin-top:6px;
  letter-spacing:.15px;
  transition:.15s;
}
.post-card-poll-badge:hover{
  border-color:rgba(120,150,210,.6);
  background:linear-gradient(180deg, rgba(50,72,120,.85), rgba(30,46,84,.92));
}

/* ============================================================
   ЛЕНТА СООБЩЕСТВА — превью постов 16:9 / 1:1
   ============================================================ */
.post-card{
  position:relative !important;
  border-radius:8px !important;
  overflow:hidden !important;
  background:linear-gradient(150deg,#2a3f6e,#0f1726) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.35) !important;
  border:none !important;
  width:100% !important;
}
.post-card.post-card--1{ aspect-ratio:16/9 !important; }
.post-card.post-card--3{ aspect-ratio:1/1 !important; }

/* Обложка — на всю площадь карточки */
.post-card .post-card-cover{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  border-radius:0 !important;
  z-index:1 !important;
}
.post-card .post-card-cover img{
  width:100% !important;height:100% !important;
  object-fit:cover !important;display:block !important;border-radius:0 !important;
}

/* Затемнение снизу */
.post-card::after{
  content:'' !important;
  position:absolute !important;
  left:0 !important;right:0 !important;bottom:0 !important;
  height:70% !important;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 100%) !important;
  pointer-events:none !important;
  z-index:2 !important;
}

/* Тело — над футером */
.post-card .post-card-body{
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:42px !important;
  padding:0 !important;
  background:transparent !important;
  z-index:3 !important;
  pointer-events:none !important;
}
.post-card .post-card-title{
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  color:#fff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.95) !important;
  margin-bottom:2px !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.post-card .post-card-text{
  font-size:11.5px !important;
  color:rgba(255,255,255,.82) !important;
  line-height:1.35 !important;
  text-shadow:0 1px 5px rgba(0,0,0,.9) !important;
  display:-webkit-box !important;
  -webkit-line-clamp:1 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.post-card .post-card-poll-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  margin-top:5px !important;
  font-size:10.5px !important;
  color:#cfe0ff !important;
  background:rgba(40,60,105,.8) !important;
  border:1px solid rgba(120,150,210,.4) !important;
  padding:3px 9px !important;
  border-radius:9px !important;
  pointer-events:auto !important;
}

/* Футер — аватар + ник слева, кнопки справа */
.post-card .post-card-foot{
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:12px !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:none !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  z-index:4 !important;
}
.post-card .post-card-author{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex:1 !important;
  min-width:0 !important;
}
.post-card .post-card-author .avatar{
  width:24px !important;
  height:24px !important;
  font-size:12px !important;
  border-radius:50% !important;
  border:1.5px solid rgba(255,255,255,.45) !important;
  flex-shrink:0 !important;
  overflow:hidden !important;
}
.post-card .post-card-author .avatar img{
  width:100% !important;height:100% !important;
  border-radius:50% !important;object-fit:cover !important;display:block !important;
}
.post-card .pc-name{
  font-size:11px !important;
  font-weight:600 !important;
  color:#fff !important;
  text-shadow:0 1px 5px rgba(0,0,0,.95) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Кнопки лайк/коммент компактнее */
.post-card .post-card-action{
  min-width:38px !important;
  height:26px !important;
  padding:0 9px !important;
  border-radius:13px !important;
  background:rgba(0,0,0,.5) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:700 !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
.post-card .post-card-menu{
  top:10px !important;
  right:10px !important;
  width:32px !important;
  height:24px !important;
  border-radius:12px !important;
}

/* ============================================================
   ОПРОС — вопрос отдельно, варианты в отдельной группе
   ============================================================ */
.post-poll{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  animation:none !important;
}
.post-poll-q{
  display:block !important;
  font-size:15px !important;
  font-weight:800 !important;
  color:var(--text) !important;
  line-height:1.35 !important;
  letter-spacing:.15px !important;
  padding:0 2px !important;
  margin:0 !important;
}
.post-poll-q::before{
  content:'📊 ' !important;
  font-size:14px !important;
  opacity:.9 !important;
}
.post-poll-opts{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}

/* ============================================================
   ОПРОС ВНУТРИ КАРТОЧКИ ПОСТА — снизу, над аватаркой
   ============================================================ */

/* Общий bottom-контейнер: body + poll + foot */
.post-card .post-card-bottom{
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:12px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  z-index:3 !important;
  pointer-events:none !important;
}
.post-card .post-card-bottom > *{
  pointer-events:auto !important;
}

/* Тело поста (title/text) теперь в потоке bottom, не абсолютное */
.post-card .post-card-body{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  padding:0 !important;
  background:transparent !important;
  pointer-events:none !important;
}
.post-card .post-card-body > *{
  pointer-events:none !important;
}

/* Футер (аватар + кнопки) — тоже в потоке */
.post-card .post-card-foot{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
}

/* --- Блок опроса внутри карточки --- */
.post-card .post-card-poll{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  animation: pollFloatIn .4s cubic-bezier(.22,.7,.3,1) both;
}
@keyframes pollFloatIn{
  from{ opacity:0; transform:translateY(6px) }
  to  { opacity:1; transform:translateY(0) }
}

/* Вопрос — компактный, над вариантами */
.post-card .post-card-poll-q{
  display:block !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  color:#fff !important;
  line-height:1.3 !important;
  letter-spacing:.15px !important;
  padding:0 2px !important;
  text-shadow:0 1px 5px rgba(0,0,0,.95) !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.post-card .post-card-poll-q::before{
  content:'📊 ' !important;
  font-size:11px !important;
  opacity:.9 !important;
}

/* Контейнер вариантов */
.post-card .post-card-poll-opts{
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
}

/* Пилюля варианта — компактная, полупрозрачная, читаема на градиенте */
.post-card .post-card-poll-opt{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  min-height:32px !important;
  border-radius:10px !important;
  background:rgba(10,18,34,.62) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  cursor:pointer !important;
  overflow:hidden !important;
  isolation:isolate !important;
  backdrop-filter:blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(8px) saturate(140%) !important;
  transition:
    transform .18s cubic-bezier(.3,.7,.4,1),
    border-color .22s ease,
    box-shadow .28s ease,
    background .22s ease !important;
}
.post-card .post-card-poll-opt:hover{
  background:rgba(20,34,64,.75) !important;
  border-color:rgba(140,175,235,.55) !important;
  transform:translateY(-1px) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,.35),
    0 0 0 1px rgba(120,150,210,.25) !important;
}
.post-card .post-card-poll-opt:active{
  transform:scale(.985) !important;
}

/* Прогресс-полоса */
.post-card .post-card-poll-opt-bar{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:0%;
  border-radius:10px !important;
  background:linear-gradient(90deg,
    rgba(74,109,184,.72) 0%,
    rgba(120,160,230,.6) 60%,
    rgba(150,190,255,.5) 100%) !important;
  box-shadow:
    inset 0 0 14px rgba(255,255,255,.06),
    0 0 12px rgba(74,109,184,.35) !important;
  transition: width .6s cubic-bezier(.22,.7,.3,1) !important;
  z-index:0 !important;
  pointer-events:none !important;
}

/* Текст варианта */
.post-card .post-card-poll-opt-lbl{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  width:100% !important;
  padding:7px 12px !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  color:#fff !important;
  letter-spacing:.15px !important;
  gap:8px !important;
  text-shadow:0 1px 4px rgba(0,0,0,.85) !important;
}
.post-card .post-card-poll-opt-lbl > span:first-child{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  flex:1 !important;
  min-width:0 !important;
}
.post-card .post-card-poll-opt-pct{
  font-size:10px !important;
  font-weight:800 !important;
  color:#cfe0ff !important;
  background:rgba(0,0,0,.45) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  padding:1px 7px !important;
  border-radius:8px !important;
  flex-shrink:0 !important;
}

/* Проголосованный вариант */
.post-card .post-card-poll-opt.voted{
  border-color:rgba(160,195,255,.85) !important;
  background:rgba(30,52,95,.85) !important;
  box-shadow:
    0 0 0 1px rgba(160,195,255,.5),
    0 0 16px rgba(120,160,230,.45) !important;
}
.post-card .post-card-poll-opt.voted .post-card-poll-opt-lbl > span:first-child::before{
  content:'✓ ' !important;
  color:#a7c4ff !important;
  font-weight:800 !important;
  margin-right:2px !important;
}

/* Пульс при клике */
@keyframes pollPulseCard{
  0%   { box-shadow: 0 0 0 0 rgba(140,175,235,.6); }
  100% { box-shadow: 0 0 0 14px rgba(140,175,235,0); }
}
.post-card .post-card-poll-opt.just-voted{
  animation: pollPulseCard .55s ease-out !important;
}

/* Старый бейдж — прячем, теперь настоящий опрос */
.post-card .post-card-poll-badge{
  display:none !important;
}

/* ============================================================
   ПРОФИЛЬ — посты 16:9
   ============================================================ */
.post-tile{
  aspect-ratio:16/9 !important;
  min-height:0 !important;
  height:auto !important;
  border-radius:12px !important;
  margin:0 16px !important;
}
.post-tile .post-tile-cover{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.post-tile .post-tile-gradient{
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85) 100%) !important;
}
.post-tile .post-tile-info{
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
}
.post-tile .post-tile-title{
  font-size:13.5px !important;
  font-weight:800 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.95) !important;
}

/* ============================================================
   КАРТОЧКА ПОСТА — заголовок сверху на обложке
   ============================================================ */
.post-card .post-card-title-top{
  position:absolute !important;
  left:12px !important;
  right:46px !important;
  top:12px !important;
  z-index:3 !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  letter-spacing:.15px !important;
  text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 24px rgba(0,0,0,.6) !important;
  pointer-events:none !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

/* Кнопка ⋯ в карточке поста — круглая и красивее */
.post-card .post-card-menu{
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  padding:0 !important;
  padding-bottom:0 !important;
  font-size:17px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(10,18,34,.6) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  color:#fff !important;
  backdrop-filter:blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(160%) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.1) !important;
  transition:.18s cubic-bezier(.3,.7,.3,1) !important;
}
.post-card .post-card-menu:hover{
  background:rgba(74,109,184,.7) !important;
  border-color:rgba(160,195,255,.6) !important;
  transform:scale(1.06) !important;
  box-shadow:
    0 0 0 1px rgba(160,195,255,.35),
    0 0 18px rgba(120,160,230,.5),
    0 6px 16px rgba(0,0,0,.55) !important;
}
.post-card .post-card-menu:active{
  transform:scale(.92) !important;
}

/* ============================================================
   ПРОФИЛЬ — превью поста: заголовок сверху, аватар слева
   ============================================================ */
.post-tile .post-tile-title-top{
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  top:14px !important;
  z-index:3 !important;
  color:#fff !important;
  font-size:14.5px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  letter-spacing:.15px !important;
  text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 24px rgba(0,0,0,.6) !important;
  pointer-events:none !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.post-tile .post-tile-info{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.post-tile .post-tile-info .avatar{
  width:26px !important;
  height:26px !important;
  border-radius:50% !important;
  border:1.5px solid rgba(255,255,255,.45) !important;
  flex-shrink:0 !important;
  overflow:hidden !important;
}
.post-tile .post-tile-info .avatar img{
  width:100% !important;
  height:100% !important;
  border-radius:50% !important;
  object-fit:cover !important;
}
.post-tile .post-tile-info-text{
  flex:1 !important;
  min-width:0 !important;
}

/* ============================================================
   СТЕНА — три точки вместо крестика
   ============================================================ */
.wall-card .wall-card-dots{
  position:absolute;
  top:6px;
  right:6px;
  width:28px;
  height:22px;
  padding:0;
  padding-bottom:4px;
  border-radius:11px;
  background:rgba(10,18,34,.55);
  border:1px solid rgba(120,150,210,.22);
  color:var(--text-dim);
  font-size:15px;
  font-weight:700;
  font-family:inherit;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.15s;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.wall-card .wall-card-dots:hover{
  background:rgba(74,109,184,.55);
  border-color:rgba(160,195,255,.5);
  color:#fff;
}
.wall-card .wall-card-dots:active{ transform:scale(.94) }

/* Старый крестик — прячем если где-то остался */
.wall-card .wall-card-del{ display:none !important }

/* ============================================================
   ПРОФИЛЬ — плашка монет компактнее
   ============================================================ */
.profile-actions-row .coins-badge{
  height:30px !important;
  padding:0 11px !important;
  font-size:11.5px !important;
  gap:5px !important;
}
.profile-actions-row .coins-badge .cnum{
  font-size:11.5px !important;
}

/* ============================================================
   ЭКРАН ПОСТА — обложка с заголовком поверх
   ============================================================ */
.post-detail-cover{
  position:relative !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
  border-radius:12px !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  overflow:hidden !important;
}
.post-detail-cover::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.78) 100%) !important;
  pointer-events:none !important;
  z-index:1 !important;
}
.post-detail-cover-title{
  position:absolute !important;
  left:16px !important;
  right:16px !important;
  bottom:16px !important;
  z-index:2 !important;
  color:#fff !important;
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  letter-spacing:.2px !important;
  text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 24px rgba(0,0,0,.55) !important;
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

/* ============================================================
   РЕДАКТОР ПРОФИЛЯ — пресеты скрыть, кнопка наверх
   ============================================================ */
.edit-avatar-block > .picker-grid{ display:none !important }
.edit-picker-block > .picker-grid,
.edit-picker-block > .picker-grid.b{ display:none !important }

.edit-banner .edit-banner-overlay{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:auto !important;
  height:auto !important;
  padding:10px !important;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent) !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
}

/* ============================================================
   ХЕДЕР СООБЩЕСТВА — стек админов + шестерёнка
   ============================================================ */
.comm-staff-stack{
  display:flex;
  align-items:center;
  gap:0;
  margin-left:auto;
  padding-left:8px;
}
.comm-staff-av{
  width:32px;
  height:32px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  color:#fff;
  cursor:pointer;
  flex-shrink:0;
  border:2px solid rgba(255,255,255,.28);
  box-shadow:0 3px 10px rgba(0,0,0,.45);
  margin-left:-10px;
  transition:transform .18s cubic-bezier(.3,.7,.3,1),
             z-index .1s,
             box-shadow .22s;
  z-index:1;
}
.comm-staff-av:first-child{ margin-left:0 }
.comm-staff-av img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.comm-staff-av:hover{
  transform:translateY(-2px) scale(1.06);
  z-index:5;
  box-shadow:0 6px 16px rgba(0,0,0,.6), 0 0 12px rgba(120,160,230,.5);
}
.comm-staff-more{
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(74,109,184,.55);
  border:2px solid rgba(255,255,255,.28);
  color:#fff;
  font-size:10.5px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:-10px;
  box-shadow:0 3px 10px rgba(0,0,0,.45);
  z-index:0;
}
.comm-staff-gear{
  width:38px;
  height:38px;
  border-radius:12px;
  margin-left:8px;
  background:rgba(74,109,184,.42);
  border:1px solid rgba(120,150,210,.45);
  color:#fff;
  font-size:16px;
  font-family:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.15s;
  flex-shrink:0;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.comm-staff-gear:hover{
  background:rgba(74,109,184,.72);
  border-color:rgba(160,195,255,.7);
  transform:scale(1.05);
  box-shadow:0 0 16px rgba(120,160,230,.5);
}
.comm-staff-gear:active{ transform:scale(.94) }

/* ============================================================
   SHEET СОЗДАНИЯ — квадратная сетка
   ============================================================ */
.create-sheet-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:6px 2px 6px;
}
.create-tile{
  aspect-ratio:1/1;
  border-radius:16px;
  background:linear-gradient(155deg, rgba(40,60,105,.85), rgba(20,30,55,.95));
  border:1px solid rgba(120,150,210,.22);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:14px 10px;
  cursor:pointer;
  font-family:inherit;
  color:var(--text);
  transition:transform .18s cubic-bezier(.3,.7,.4,1),
             background .22s ease,
             border-color .22s ease,
             box-shadow .28s ease;
  position:relative;
  overflow:hidden;
}
.create-tile::before{
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform:skewX(-18deg);
  transition:left .7s cubic-bezier(.3,.7,.3,1);
  pointer-events:none;
}
.create-tile:hover::before{ left:130% }
.create-tile:hover{
  background:linear-gradient(155deg, rgba(60,90,160,.95), rgba(30,45,80,.95));
  border-color:rgba(160,195,255,.6);
  transform:translateY(-2px);
  box-shadow:
    0 10px 26px rgba(0,0,0,.45),
    0 0 22px rgba(74,109,184,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.create-tile:active{ transform:scale(.96) }
.create-tile .ct-icon{
  font-size:44px;
  line-height:1;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));
  transition:transform .25s cubic-bezier(.3,.7,.4,1);
}
.create-tile:hover .ct-icon{
  transform:scale(1.12);
}
.create-tile .ct-label{
  font-size:12.5px;
  font-weight:700;
  text-align:center;
  line-height:1.25;
  color:#fff;
  letter-spacing:.15px;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}

/* ============================================================
   РЕДАКТОР ПОСТА — верхняя панель принудительного режима
   ============================================================ */
.post-mode-tabs{ margin-top:2px }

/* ============================================================
   СПИСОК ПУБЛИЧНЫХ ЧАТОВ СООБЩЕСТВА — горизонтальная строка
   ============================================================ */
.comm-chats-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:4px 16px 8px;
}

.comm-chat-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-radius:16px;
  background:linear-gradient(155deg, rgba(26,37,66,.7), rgba(19,28,51,.85));
  border:1px solid var(--line);
  cursor:pointer;
  transition:transform .18s cubic-bezier(.3,.7,.4,1),
             border-color .22s ease,
             box-shadow .28s ease,
             background .22s ease;
}
.comm-chat-row:hover{
  border-color:rgba(120,150,210,.5);
  background:linear-gradient(155deg, rgba(35,50,88,.8), rgba(22,33,60,.9));
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.comm-chat-row:active{ transform:scale(.99) }

.comm-chat-row.featured{
  border-color:rgba(212,161,58,.45);
  box-shadow:0 0 0 1px rgba(212,161,58,.18), 0 6px 20px rgba(0,0,0,.3);
}

/* Обложка 16:9 слева */
.comm-chat-row-cover{
  position:relative;
  width:110px;
  aspect-ratio:16/9;
  flex-shrink:0;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
}
.comm-chat-row-cover img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.comm-chat-row-cover::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.35) 100%);
  pointer-events:none;
}
.comm-chat-row-emoji{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  opacity:.8;
}

/* Бейдж подборки/mute поверх обложки */
.comm-chat-row-badge{
  position:absolute;
  top:5px;left:5px;
  padding:2px 7px;
  border-radius:8px;
  font-size:10px;
  font-weight:800;
  background:linear-gradient(135deg,#d4a13a,#f0c765);
  color:#1a1207;
  z-index:2;
  box-shadow:0 3px 8px rgba(0,0,0,.4);
}
.comm-chat-row-badge.muted{
  background:rgba(60,60,70,.9);
  color:#c9d4e8;
}

/* Инфо */
.comm-chat-row-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-right:34px;
}
.comm-chat-row-name{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.comm-chat-row-meta{
  font-size:11.5px;
  color:var(--text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Кнопка ⋯ справа сверху */
.comm-chat-row-menu{
  position:absolute;
  top:8px;
  right:8px;
  width:30px;
  height:24px;
  padding:0;
  padding-bottom:4px;
  border-radius:12px;
  background:rgba(10,18,34,.55);
  border:1px solid rgba(120,150,210,.22);
  color:var(--text-dim);
  font-size:15px;
  font-weight:700;
  font-family:inherit;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.15s;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:3;
}
.comm-chat-row-menu:hover{
  background:rgba(74,109,184,.6);
  border-color:rgba(160,195,255,.55);
  color:#fff;
  box-shadow:0 0 12px rgba(120,160,230,.4);
}
.comm-chat-row-menu:active{ transform:scale(.92) }

/* ============================================================
   Квадратная кнопка-админы в хедере сообщества
   ============================================================ */
.comm-staff-btn{
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(74,109,184,.42);
  border:1px solid rgba(120,150,210,.45);
  color:#fff;
  font-size:18px;
  font-family:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.15s;
  flex-shrink:0;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  margin-left:auto;
}
.comm-staff-btn:hover{
  background:rgba(74,109,184,.72);
  border-color:rgba(160,195,255,.7);
  transform:scale(1.05);
  box-shadow:0 0 16px rgba(120,160,230,.5);
}
.comm-staff-btn:active{ transform:scale(.94) }

/* ============================================================
   Аватар создателя чата на обложке
   ============================================================ */
.comm-chat-row-creator{
  position:absolute;
  left:6px;
  bottom:6px;
  width:22px;
  height:22px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 3px 8px rgba(0,0,0,.55);
  z-index:2;
}
.comm-chat-row-creator img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}

/* ============================================================
   ЖЁСТКИЙ OVERRIDE: старые стили cp-grid / cp-card не должны ломать
   ============================================================ */
.cp-grid,
.comm-chats-list{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:4px 16px 8px !important;
  grid-template-columns:none !important;
}
.cp-card,
.comm-chat-row{
  aspect-ratio:auto !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  padding:10px !important;
  border-radius:16px !important;
  position:relative !important;
}
.cp-card .cp-cover,
.comm-chat-row-cover{
  position:relative !important;
  width:110px !important;
  min-width:110px !important;
  max-width:110px !important;
  aspect-ratio:16/9 !important;
  flex:0 0 110px !important;
  border-radius:10px !important;
  overflow:hidden !important;
  padding:0 !important;
}
.comm-chat-row-info{
  flex:1 !important;
  min-width:0 !important;
  padding-right:34px !important;
}

/* Прячем старую вертикальную cp-инфу */
.cp-card .cp-info{ display:none !important }

/* ============================================================
   Квадратная кнопка-админы в хедере сообщества
   ============================================================ */
.comm-staff-btn{
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(74,109,184,.42);
  border:1px solid rgba(120,150,210,.45);
  color:#fff;
  font-size:18px;
  font-family:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.15s;
  flex-shrink:0;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  margin-left:auto;
}
.comm-staff-btn:hover{
  background:rgba(74,109,184,.72);
  border-color:rgba(160,195,255,.7);
  transform:scale(1.05);
  box-shadow:0 0 16px rgba(120,160,230,.5);
}
.comm-staff-btn:active{ transform:scale(.94) }

/* ============================================================
   Аватар создателя чата на обложке
   ============================================================ */
.comm-chat-row-creator{
  position:absolute;
  left:6px;
  bottom:6px;
  width:22px;
  height:22px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 3px 8px rgba(0,0,0,.55);
  z-index:2;
}
.comm-chat-row-creator img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}

/* ============================================================
   ЖЁСТКИЙ OVERRIDE: старые стили cp-grid / cp-card не должны ломать
   ============================================================ */
.cp-grid,
.comm-chats-list{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:4px 16px 8px !important;
  grid-template-columns:none !important;
}
.cp-card,
.comm-chat-row{
  aspect-ratio:auto !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  padding:10px !important;
  border-radius:16px !important;
  position:relative !important;
}
.cp-card .cp-cover,
.comm-chat-row-cover{
  position:relative !important;
  width:110px !important;
  min-width:110px !important;
  max-width:110px !important;
  aspect-ratio:16/9 !important;
  flex:0 0 110px !important;
  border-radius:10px !important;
  overflow:hidden !important;
  padding:0 !important;
}
.comm-chat-row-info{
  flex:1 !important;
  min-width:0 !important;
  padding-right:34px !important;
}

/* Прячем старую вертикальную cp-инфу */
.cp-card .cp-info{ display:none !important }

/* ============================================================
   HERO-КАРТОЧКА ЧАТА СООБЩЕСТВА (сверху экрана чата)
   обложка 16:9 слева + название/участники + ⋯ справа сверху
   ============================================================ */
.comm-chat-hero{
  display:flex;
  align-items:center;
  gap:12px;
  margin:10px 16px 6px;
  padding:10px;
  border-radius:16px;
  background:linear-gradient(155deg, rgba(30,45,80,.75), rgba(19,28,51,.9));
  border:1px solid var(--line-strong);
  position:relative;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  animation: heroIn .4s cubic-bezier(.22,.7,.3,1) both;
}
@keyframes heroIn{
  from{ opacity:0; transform:translateY(-6px) }
  to  { opacity:1; transform:translateY(0) }
}

.comm-chat-hero-cover{
  position:relative;
  width:110px;
  min-width:110px;
  max-width:110px;
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  flex-shrink:0;
}
.comm-chat-hero-cover img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.comm-chat-hero-cover::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.4) 100%);
  pointer-events:none;
}
.comm-chat-hero-emoji{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  opacity:.85;
}
.comm-chat-hero-creator{
  position:absolute;
  left:5px;
  bottom:5px;
  width:22px;
  height:22px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 3px 8px rgba(0,0,0,.6);
  z-index:2;
}
.comm-chat-hero-creator img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}

.comm-chat-hero-info{
  flex:1;
  min-width:0;
  padding-right:32px;
}
.comm-chat-hero-name{
  font-size:14.5px;
  font-weight:800;
  color:var(--text);
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.comm-chat-hero-meta{
  font-size:11.5px;
  color:var(--text-dim);
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.comm-chat-hero-menu{
  position:absolute;
  top:8px;
  right:8px;
  width:30px;
  height:24px;
  padding:0;
  padding-bottom:4px;
  border-radius:12px;
  background:rgba(10,18,34,.6);
  border:1px solid rgba(120,150,210,.22);
  color:var(--text-dim);
  font-size:15px;
  font-weight:700;
  font-family:inherit;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.15s;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:3;
}
.comm-chat-hero-menu:hover{
  background:rgba(74,109,184,.65);
  border-color:rgba(160,195,255,.55);
  color:#fff;
  box-shadow:0 0 12px rgba(120,160,230,.45);
}
.comm-chat-hero-menu:active{ transform:scale(.92) }

/* ============================================================
   ХЕДЕР СООБЩЕСТВА — ровные квадратные кнопки справа
   ============================================================ */
.comm-top{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:calc(10px + env(safe-area-inset-top)) 16px 8px !important;
  min-height:56px;
}

.comm-top-back{
  width:42px !important;
  height:42px !important;
  border-radius:12px !important;
  font-size:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  flex-shrink:0;
}

.comm-top-action{
  height:42px !important;
  border-radius:12px !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:.18s cubic-bezier(.3,.7,.3,1) !important;
  margin-left:auto !important;
  padding:0 16px !important;
  border:1px solid rgba(120,150,210,.35) !important;
}

/* Квадратный вариант (⚙️ / 👥) */
.comm-top-action.comm-top-square{
  width:42px !important;
  padding:0 !important;
  font-size:18px !important;
  flex-shrink:0;
  background:linear-gradient(155deg, rgba(40,60,105,.85), rgba(20,30,55,.95)) !important;
  border:1px solid rgba(120,150,210,.35) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.comm-top-action.comm-top-square:hover{
  background:linear-gradient(155deg, rgba(60,90,160,.95), rgba(30,45,80,.95)) !important;
  border-color:rgba(160,195,255,.65) !important;
  transform:translateY(-1px) scale(1.04) !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.45),
    0 0 20px rgba(120,160,230,.5),
    inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.comm-top-action.comm-top-square:active{
  transform:scale(.94) !important;
}

/* ⚙️ настройки — голубоватый оттенок */
.comm-top-gear{
  color:#cfe0ff !important;
}

/* 👥 администрация — тот же стиль */
.comm-top-staff{
  color:#cfe0ff !important;
}

/* «Вступить» — не квадратная, primary */
.comm-top-action.primary{
  width:auto !important;
  padding:0 18px !important;
  font-size:13px !important;
  background:linear-gradient(135deg,#3a5aa0,#5d81c8) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(74,109,184,.4);
}
.comm-top-action.primary:hover{
  filter:brightness(1.12) !important;
}

/* ============================================================
   ХЕДЕР СООБЩЕСТВА — ровные квадратные кнопки справа
   ============================================================ */
.comm-top{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:calc(10px + env(safe-area-inset-top)) 16px 8px !important;
  min-height:56px;
}

.comm-top-back{
  width:42px !important;
  height:42px !important;
  border-radius:12px !important;
  font-size:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  flex-shrink:0;
}

.comm-top-action{
  height:42px !important;
  border-radius:12px !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:.18s cubic-bezier(.3,.7,.3,1) !important;
  margin-left:auto !important;
  padding:0 16px !important;
  border:1px solid rgba(120,150,210,.35) !important;
}

/* Квадратный вариант (⚙️ / 👥) */
.comm-top-action.comm-top-square{
  width:42px !important;
  padding:0 !important;
  font-size:18px !important;
  flex-shrink:0;
  background:linear-gradient(155deg, rgba(40,60,105,.85), rgba(20,30,55,.95)) !important;
  border:1px solid rgba(120,150,210,.35) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.comm-top-action.comm-top-square:hover{
  background:linear-gradient(155deg, rgba(60,90,160,.95), rgba(30,45,80,.95)) !important;
  border-color:rgba(160,195,255,.65) !important;
  transform:translateY(-1px) scale(1.04) !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.45),
    0 0 20px rgba(120,160,230,.5),
    inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.comm-top-action.comm-top-square:active{
  transform:scale(.94) !important;
}

/* ⚙️ настройки — голубоватый оттенок */
.comm-top-gear{
  color:#cfe0ff !important;
}

/* 👥 администрация — тот же стиль */
.comm-top-staff{
  color:#cfe0ff !important;
}

/* «Вступить» — не квадратная, primary */
.comm-top-action.primary{
  width:auto !important;
  padding:0 18px !important;
  font-size:13px !important;
  background:linear-gradient(135deg,#3a5aa0,#5d81c8) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(74,109,184,.4);
}
.comm-top-action.primary:hover{
  filter:brightness(1.12) !important;
}

/* ============================================================
   ХЕДЕР СООБЩЕСТВА — ровные квадратные кнопки справа
   ============================================================ */
.comm-top{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:calc(10px + env(safe-area-inset-top)) 16px 8px !important;
  min-height:56px;
}

.comm-top-back{
  width:42px !important;
  height:42px !important;
  border-radius:12px !important;
  font-size:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  flex-shrink:0;
}

.comm-top-action{
  height:42px !important;
  border-radius:12px !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:.18s cubic-bezier(.3,.7,.3,1) !important;
  margin-left:auto !important;
  padding:0 16px !important;
  border:1px solid rgba(120,150,210,.35) !important;
}

/* Квадратный вариант (⚙️ / 👥) */
.comm-top-action.comm-top-square{
  width:42px !important;
  padding:0 !important;
  font-size:18px !important;
  flex-shrink:0;
  background:linear-gradient(155deg, rgba(40,60,105,.85), rgba(20,30,55,.95)) !important;
  border:1px solid rgba(120,150,210,.35) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.comm-top-action.comm-top-square:hover{
  background:linear-gradient(155deg, rgba(60,90,160,.95), rgba(30,45,80,.95)) !important;
  border-color:rgba(160,195,255,.65) !important;
  transform:translateY(-1px) scale(1.04) !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.45),
    0 0 20px rgba(120,160,230,.5),
    inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.comm-top-action.comm-top-square:active{
  transform:scale(.94) !important;
}

/* ⚙️ настройки — голубоватый оттенок */
.comm-top-gear{
  color:#cfe0ff !important;
}

/* 👥 администрация — тот же стиль */
.comm-top-staff{
  color:#cfe0ff !important;
}

/* «Вступить» — не квадратная, primary */
.comm-top-action.primary{
  width:auto !important;
  padding:0 18px !important;
  font-size:13px !important;
  background:linear-gradient(135deg,#3a5aa0,#5d81c8) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(74,109,184,.4);
}
.comm-top-action.primary:hover{
  filter:brightness(1.12) !important;
}

/* ============================================================
   ХЕДЕР СООБЩЕСТВА — кнопки слева рядом с back
   ============================================================ */
.comm-top > div:last-child{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-left:10px !important;
}
.comm-top > div:last-child.push-right{
  margin-left:auto !important;
}
.comm-top-back{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:12px !important;
  padding:0 !important;
  font-size:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  background:rgba(20,35,70,.6) !important;
  border:1px solid rgba(120,150,210,.35) !important;
  color:#fff !important;
  cursor:pointer;
  transition:.18s;
}
.comm-top-back:hover{
  background:rgba(74,109,184,.55) !important;
  border-color:rgba(160,195,255,.6) !important;
}
.comm-top-action,
.comm-top-action.primary,
.comm-top-action.danger,
.comm-top-action.comm-top-square,
.comm-top-action.comm-top-gear,
.comm-top-action.comm-top-staff{
  display:none !important;
}
.comm-top-square{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  padding:0 !important;
  border-radius:12px !important;
  font-size:18px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  cursor:pointer !important;
  font-family:inherit !important;
  background:linear-gradient(155deg, rgba(40,60,105,.9), rgba(20,30,55,.95)) !important;
  border:1px solid rgba(120,150,210,.4) !important;
  color:#e4ebf7 !important;
  box-shadow:0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
  transition:.18s cubic-bezier(.3,.7,.4,1);
}
.comm-top-square:hover{
  background:linear-gradient(155deg, rgba(60,90,160,.98), rgba(30,45,80,.98)) !important;
  border-color:rgba(160,195,255,.7) !important;
  transform:translateY(-1px) scale(1.05) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.45), 0 0 22px rgba(120,160,230,.55) !important;
}
.comm-top-square:active{ transform:scale(.93) !important }
.comm-top-join{
  height:42px !important;
  padding:0 20px !important;
  border-radius:12px !important;
  font-size:13px !important;
  font-weight:700 !important;
  font-family:inherit !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  background:linear-gradient(135deg,#3a5aa0,#5d81c8) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(74,109,184,.45);
}

/* ============================================================
   ПУБЛИЧНЫЕ ЧАТЫ — квадратная сетка 2×2
   ============================================================ */
.comm-chats-list{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  padding:4px 16px 8px !important;
}
.comm-chat-sq{
  position:relative !important;
  aspect-ratio:1/1 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:linear-gradient(150deg,#2a3f6e,#0f1726) !important;
  border:1px solid var(--line) !important;
  cursor:pointer;
  transition:transform .18s cubic-bezier(.3,.7,.4,1), border-color .22s ease, box-shadow .28s ease;
}
.comm-chat-sq:hover{
  border-color:rgba(120,150,210,.5) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.4) !important;
}
.comm-chat-sq.featured{
  border-color:rgba(212,161,58,.5) !important;
  box-shadow:0 0 0 1px rgba(212,161,58,.2), 0 6px 18px rgba(0,0,0,.3) !important;
}
.comm-chat-sq > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.comm-chat-sq-grad{
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.88) 100%) !important;
  pointer-events:none !important;
}
.comm-chat-sq-badge{
  position:absolute !important;
  top:8px !important; left:8px !important;
  padding:3px 8px !important;
  border-radius:9px !important;
  background:linear-gradient(135deg,#d4a13a,#f0c765) !important;
  color:#1a1207 !important;
  font-size:10px !important; font-weight:800 !important;
  z-index:3 !important;
  box-shadow:0 3px 8px rgba(0,0,0,.4) !important;
}
.comm-chat-sq-badge.muted{ background:rgba(60,60,70,.9) !important; color:#c9d4e8 !important; }
.comm-chat-sq-creator{
  position:absolute !important;
  top:8px !important; right:8px !important;
  width:26px !important; height:26px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  background:linear-gradient(135deg,#4a6db8,#1a2542) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:12px !important;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.55) !important;
  box-shadow:0 3px 8px rgba(0,0,0,.55) !important;
  z-index:3 !important;
}
.comm-chat-sq-creator img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.comm-chat-sq-menu{
  position:absolute !important;
  top:8px !important; right:8px !important;
  width:30px !important; height:24px !important;
  padding:0 !important;
  padding-bottom:4px !important;
  border-radius:12px !important;
  background:rgba(10,18,34,.6) !important;
  border:1px solid rgba(120,150,210,.22) !important;
  color:#e4ebf7 !important;
  font-size:15px !important; font-weight:700 !important;
  font-family:inherit !important; line-height:1 !important;
  display:flex !important;
  align-items:center !important; justify-content:center !important;
  cursor:pointer !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  z-index:4 !important;
}
.comm-chat-sq-menu:hover{ background:rgba(74,109,184,.65) !important; }
.comm-chat-sq-info{
  position:absolute !important;
  left:10px !important; right:10px !important; bottom:10px !important;
  z-index:2 !important;
}
.comm-chat-sq-name{
  font-size:12.5px !important;
  font-weight:800 !important;
  color:#fff !important;
  line-height:1.2 !important;
  text-shadow:0 2px 6px rgba(0,0,0,.95) !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  word-break:break-word !important;
}
.comm-chat-sq-meta{
  font-size:10px !important;
  color:rgba(255,255,255,.82) !important;
  margin-top:3px !important;
  text-shadow:0 1px 4px rgba(0,0,0,.9) !important;
}
/* переопределяем старые comm-chat-row-* чтобы не мешали */
.comm-chat-row{ display:none !important }

/* ============================================================
   ОНЛАЙН — сетка 5 в ряд
   ============================================================ */
.online-overlay-list{
  display:grid !important;
  grid-template-columns:repeat(5, 1fr) !important;
  gap:14px 8px !important;
  padding:8px 16px 12px !important;
  justify-items:center !important;
}
.online-overlay-list .ol-item{ width:100% !important; max-width:64px !important; }
.online-overlay-list .ol-item .ol-av{
  width:52px !important; height:52px !important;
  margin:0 auto !important;
}

/* ============================================================
   СКРЫТЬ СТАРЫЕ post-card-poll (в превью)
   ============================================================ */
.post-card .post-card-poll,
.post-card .post-card-poll-badge{ display:none !important }

/* ============================================================
   ФИНАЛЬНЫЙ ФИКС ПАКЕТ
   ============================================================ */

/* --- 1. ХЕДЕР: кнопки настроек/админов прижать ВПРАВО --- */
.comm-top > div:last-child,
.comm-top > div:last-child.push-right{
  margin-left:auto !important;
  margin-right:0 !important;
}
/* back остаётся слева один */
.comm-top-back{ margin-right:0 !important }

/* --- 2. ОНЛАЙН-ТОЧКА В «НОВЫХ ПОЛЬЗОВАТЕЛЯХ» ПОВЕРХ --- */
.comm-online-strip .cosa{
  overflow:visible !important;
}
.comm-online-strip .cosa > img{
  border-radius:50% !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.comm-online-strip .cosa .dot{
  position:absolute !important;
  top:-1px !important;
  right:-1px !important;
  bottom:auto !important;
  left:auto !important;
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  box-shadow:0 0 6px rgba(63,208,122,.9) !important;
  border:0 !important;
  z-index:5 !important;
}

/* --- 3. РАМКИ ПРОФИЛЯ В ПРЕВЬЮ ПОСТОВ (не обрезаем) --- */
.post-card .avatar,
.post-card-author .avatar,
.post-tile .avatar,
.post-tile-info .avatar,
.comm-post-row .avatar,
.comm-online-strip .cosa{
  overflow:visible !important;
}
/* Внутренний img всё равно круглый */
.post-card .avatar > img,
.post-card-author .avatar > img,
.post-tile .avatar > img,
.post-tile-info .avatar > img{
  border-radius:50% !important;
}

/* --- 4. ПОСТЫ В ЛЕНТЕ — ВЕРНУТЬ БЛОЧНУЮ СТРУКТУРУ --- */
/* Убираем aspect 16:9 на карточке целиком */
.post-card{
  aspect-ratio:auto !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  display:block !important;
  position:relative !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background:linear-gradient(155deg, rgba(26,37,66,.6), rgba(19,28,51,.75)) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.3) !important;
}
/* Обложка — 16:9, в потоке сверху */
.post-card .post-card-cover{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9 !important;
  border-radius:0 !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  z-index:1 !important;
  display:block !important;
}
.post-card .post-card-cover img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
/* Убираем затемняющий градиент на карточке */
.post-card::after{ display:none !important }

/* Тело — в потоке */
.post-card .post-card-bottom{
  position:relative !important;
  inset:auto !important;
  left:auto !important; right:auto !important;
  bottom:auto !important;
  display:block !important;
  padding:0 !important;
}
.post-card .post-card-body{
  position:relative !important;
  inset:auto !important;
  left:auto !important; right:auto !important;
  bottom:auto !important;
  padding:10px 12px 4px !important;
  background:transparent !important;
}
.post-card .post-card-title{
  font-size:13.5px !important;
  font-weight:700 !important;
  color:var(--text) !important;
  line-height:1.3 !important;
  text-shadow:none !important;
  margin-bottom:4px !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.post-card .post-card-text{
  font-size:11.5px !important;
  color:var(--text-dim) !important;
  line-height:1.4 !important;
  text-shadow:none !important;
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
/* Футер — в потоке снизу */
.post-card .post-card-foot{
  position:relative !important;
  inset:auto !important;
  left:auto !important; right:auto !important;
  bottom:auto !important;
  margin:0 !important;
  padding:6px 12px 10px !important;
  background:transparent !important;
  border-top:none !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

/* --- 5. ПОСТЫ В ПРОФИЛЕ — тоже блочно --- */
.post-tile{
  aspect-ratio:auto !important;
  height:auto !important;
  min-height:0 !important;
  display:block !important;
  position:relative !important;
  border-radius:12px !important;
  overflow:hidden !important;
  margin:0 16px 10px !important;
  background:linear-gradient(155deg, rgba(26,37,66,.6), rgba(19,28,51,.75)) !important;
  border:1px solid var(--line) !important;
}
.post-tile .post-tile-cover{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  border-radius:0 !important;
  background-size:cover !important;
  background-position:center !important;
  display:block !important;
}
.post-tile .post-tile-gradient{ display:none !important }
.post-tile .post-tile-info{
  position:relative !important;
  padding:10px 12px 12px !important;
  background:transparent !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  z-index:2 !important;
}
.post-tile .post-tile-info .avatar{
  width:28px !important;
  height:28px !important;
  border-radius:50% !important;
  border:1.5px solid rgba(120,150,210,.35) !important;
  flex-shrink:0 !important;
}
.post-tile .post-tile-info-text{
  flex:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
}
.post-tile .post-tile-title{
  font-size:12.5px !important;
  font-weight:700 !important;
  color:var(--text) !important;
  text-shadow:none !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.post-tile .post-tile-meta{
  font-size:11px !important;
  color:var(--text-muted) !important;
}

/* ============================================================
   ФИКС ПАКЕТ №20
   ============================================================ */

/* Роль в профиле — над bio */
.profile-role-slot{
  display:flex;
  justify-content:center;
  margin-top:6px;
  margin-bottom:4px;
}
.profile-role-slot:empty{ display:none }

/* Время комментария — вниз вправо */
.wall-card .wall-card-time-bottom{
  display:block;
  text-align:right;
  font-size:10.5px;
  color:var(--text-muted);
  margin-top:6px;
  padding:0 2px;
}

/* Скрываем дубль названия в top-панели чата сообщества */
.chat-top-name-hidden,
.chat-top-info .chat-top-name-hidden{ display:none !important }

/* Кнопки фото/стикеров в community-dm */
.chat-photo-btn{
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  background:rgba(74,109,184,.35) !important;
  border:none !important;
  color:#fff !important;
  font-size:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  flex-shrink:0 !important;
}
.chat-photo-btn:hover{ background:rgba(74,109,184,.6) !important }

/* Кнопка "Написать" рядом с "Подписаться" — 50/50 */
.profile-cta-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
}
.profile-cta-row .btn-outline{
  width:100% !important;
}

/* ============================================================
   ЛИЧНЫЕ ЧАТЫ В СООБЩЕСТВЕ — отдельный блок
   ============================================================ */
.comm-personal-dms{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:4px 16px 10px;
}
.comm-personal-dms .chat-row{
  margin:0 !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  background:linear-gradient(155deg, rgba(26,37,66,.6), rgba(19,28,51,.75)) !important;
  border:1px solid var(--line) !important;
}
.comm-personal-dms .chat-row:hover{
  border-color:var(--line-strong) !important;
  background:linear-gradient(155deg, rgba(35,50,88,.8), rgba(22,33,60,.9)) !important;
}
.comm-personal-dms .chat-row .chat-row-name{
  font-size:13px !important;
  font-weight:700 !important;
}
.comm-personal-dms .chat-row .chat-row-last{
  font-size:11.5px !important;
  color:var(--text-dim) !important;
}

/* Пустое состояние личных переписок */
.comm-dm-empty{
  padding:16px 12px;
  text-align:center;
  font-size:12px;
  color:var(--text-muted);
  background:rgba(20,30,55,.35);
  border:1px dashed rgba(120,150,210,.25);
  border-radius:14px;
  line-height:1.5;
}

/* Разделитель между секциями в табе Чаты */
.comm-section-label{
  padding:14px 16px 6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--accent-3);
  letter-spacing:.3px;
  text-transform:uppercase;
  opacity:.9;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* ============================================================
   ТАБ "ЧАТЫ" СООБЩЕСТВА — только публичные
   Скрываем старые блоки личных чатов, если где-то остались
   ============================================================ */
.comm-chats-personal,
.comm-personal-dms,
.comm-dm-empty{
  display:none !important;
}

/* Public chats остаются как есть */
.comm-chats-list{ display:grid !important }

/* ============================================================
   ФИКС ПАКЕТ #23
   ============================================================ */
.chat-feed .msg-time{
  font-size:10px;
  color:var(--text-muted);
  padding:2px 8px 0;
  opacity:.85;
}
.msg-row.me .msg-time{ text-align:right }

/* Поиск чатов — центрируем (край уплыл) */
.chats-header + .search,
.chats-header ~ .search{
  margin:6px 16px 0 !important;
  width:calc(100% - 32px) !important;
  box-sizing:border-box !important;
}

/* ============================================================
   ФИКС #24
   ============================================================ */

/* Карточка сообщества в поиске: обложка 16:9 слева + инфо справа */
.comm-search-row{
  display:flex;
  align-items:stretch;
  gap:12px;
  padding:10px 12px;
  margin:0 16px 10px;
  border-radius:16px;
  background:linear-gradient(155deg, rgba(26,37,66,.65), rgba(19,28,51,.8));
  border:1px solid var(--line);
  cursor:pointer;
  transition:.15s;
}
.comm-search-row:hover{
  border-color:var(--line-strong);
  background:linear-gradient(155deg, rgba(35,50,88,.8), rgba(22,33,60,.9));
  transform:translateY(-1px);
}
.comm-search-cover{
  position:relative;
  flex:0 0 130px;
  width:130px;
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
}
.comm-search-cover > img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.comm-search-av{
  position:absolute;
  left:6px;bottom:6px;
  width:28px;height:28px;
  border-radius:8px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.55);
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.55);
}
.comm-search-av img{width:100%;height:100%;object-fit:cover;display:block}
.comm-search-info{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:3px;
  justify-content:center;
}
.comm-search-name{
  font-size:14px;font-weight:800;color:var(--text);
  line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.comm-search-meta{
  font-size:11.5px;color:var(--text-dim);
}
.comm-search-tagline{
  font-size:11.5px;color:var(--text-dim);
  line-height:1.35;
  margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.comm-search-tags{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;
}
.comm-search-tag{
  font-size:10px;
  padding:2px 8px;
  border-radius:8px;
  background:rgba(74,109,184,.25);
  border:1px solid rgba(120,150,210,.3);
  color:#cfe0ff;
  font-weight:600;
}

/* Теги в редакторе */
.edit-tags-box{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:0 16px 6px;
}
.edit-tag-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;
  border-radius:10px;
  background:rgba(74,109,184,.28);
  border:1px solid rgba(120,150,210,.4);
  color:#cfe0ff;font-size:12px;font-weight:600;
}
.edit-tag-x{
  cursor:pointer;color:#ff8b8b;font-size:11px;
  padding:0 2px;
}
.edit-tag-x:hover{color:#ffb3b3}
.edit-tag-add{
  padding:5px 12px;
  border-radius:10px;
  background:rgba(74,109,184,.15);
  border:1px dashed rgba(120,150,210,.4);
  color:var(--text-dim);font-size:12px;font-weight:600;
  cursor:pointer;font-family:inherit;
}
.edit-tag-add:hover{background:rgba(74,109,184,.3);color:var(--text)}

/* Название поста — сверху картинки, по центру */
.post-card .post-card-title-top{
  position:absolute !important;
  top:14px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  right:auto !important;
  z-index:3 !important;
  max-width:80% !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  text-align:center !important;
  text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 24px rgba(0,0,0,.6) !important;
  pointer-events:none !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.post-tile .post-tile-title-top{
  position:absolute !important;
  top:14px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  right:auto !important;
  z-index:3 !important;
  max-width:80% !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  text-align:center !important;
  text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 24px rgba(0,0,0,.6) !important;
  pointer-events:none !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

/* «печатает...» в статусах */
.chat-hero-status.typing,
.chat-top-status.typing{
  color:var(--accent-2) !important;
  font-style:italic;
}

/* ============================================================
   ЛЕНТА СООБЩЕСТВА — пост: обложка 16:9 + футер снизу
   [avatar] [title + devbadge] ......... [like] [comment]
   ============================================================ */
.post-card{
  aspect-ratio:auto !important;
  min-height:0 !important;
  height:auto !important;
  width:100% !important;
  position:relative !important;
  overflow:hidden !important;
  border-radius:12px !important;
  background:linear-gradient(155deg, rgba(26,37,66,.6), rgba(19,28,51,.75)) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.3) !important;
  display:block !important;
}
.post-card .post-card-cover{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  border-radius:0 !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  display:block !important;
  z-index:1 !important;
}
.post-card .post-card-cover img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.post-card::after{ display:none !important }

/* Скрываем старые слои от предыдущих патчей */
.post-card .post-card-bottom,
.post-card .post-card-body,
.post-card .post-card-title,
.post-card .post-card-text,
.post-card .post-card-title-top,
.post-card .post-card-poll,
.post-card .post-card-poll-badge{
  display:none !important;
}

/* Футер — горизонтальная строка */
.post-card .post-card-foot{
  position:relative !important;
  inset:auto !important;
  left:auto !important; right:auto !important; bottom:auto !important;
  padding:9px 11px !important;
  margin:0 !important;
  background:transparent !important;
  border:none !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

/* Аватар в футере — компактный */
.post-card .post-card-foot .avatar{
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  font-size:12px !important;
  border-radius:50% !important;
  border:1.5px solid rgba(120,150,210,.32) !important;
  flex-shrink:0 !important;
  overflow:visible !important;
}
.post-card .post-card-foot .avatar > img{
  border-radius:50% !important;
}

/* Инфо: название + devbadge/@ник */
.post-card .post-card-foot-info{
  flex:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
}
.post-card .post-card-foot-title{
  font-size:12.5px !important;
  font-weight:700 !important;
  color:var(--text) !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.post-card .post-card-foot-meta{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  font-size:10px !important;
  color:var(--text-muted) !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
  overflow:hidden !important;
}
.post-card .post-card-foot-meta .dev-badge{
  font-size:8.5px !important;
  height:13px !important;
  padding:0 6px !important;
  margin-right:2px !important;
  line-height:1 !important;
}

/* Кнопки лайк/коммент */
.post-card .post-card-action{
  min-width:36px !important;
  height:24px !important;
  padding:0 8px !important;
  border-radius:12px !important;
  background:rgba(0,0,0,.32) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  color:#fff !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  flex-shrink:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  font-family:inherit !important;
}
.post-card .post-card-action:hover{
  background:rgba(74,109,184,.55) !important;
}
.post-card .post-card-action.active{
  color:#ff8ba7 !important;
}

/* ============================================================
   ФИКС #27 — видимость заголовков в превью
   ============================================================ */

/* Явно разрешаем показ названия в футере ленты */
.post-card .post-card-foot .post-card-foot-title{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
  width:auto !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Явно разрешаем показ названия в превью профиля */
.post-tile .post-tile-info .post-tile-title{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  color:var(--text) !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* ============================================================
   КАРТОЧКА ПОСТА — единый стиль (профиль + лента)
   Обложка 16:9 + оверлей снизу с авой/названием/@ником и
   лайками/комментами справа
   ============================================================ */

.posts-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0 16px;
}

.post-card{
  position:relative !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  min-height:0 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:linear-gradient(150deg,#2a3f6e,#0f1726) !important;
  border:none !important;
  box-shadow:0 6px 22px rgba(0,0,0,.4) !important;
  cursor:pointer !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
}
.post-card .post-card-cover{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  border-radius:0 !important;
  z-index:1 !important;
}
.post-card .post-card-cover img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; display:block !important;
}

/* градиент снизу для читаемости текста */
.post-card .post-card-grad{
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 25%, transparent 45%, rgba(0,0,0,.88) 100%) !important;
  pointer-events:none !important;
  z-index:2 !important;
}

/* ⋯ сверху справа — БЕЗ подложки */
.post-card .post-card-menu{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  width:auto !important;
  height:auto !important;
  padding:2px 6px !important;
  border-radius:8px !important;
  background:transparent !important;
  border:none !important;
  color:#fff !important;
  font-size:20px !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-shadow:0 2px 6px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.5) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  z-index:5 !important;
  transition:transform .15s ease, opacity .15s ease !important;
  opacity:.85 !important;
}
.post-card .post-card-menu:hover{
  transform:scale(1.15) !important;
  opacity:1 !important;
  background:transparent !important;
  border:none !important;
}

/* Нижний оверлей */
.post-card .post-card-overlay{
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:11px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:10px !important;
  z-index:4 !important;
  pointer-events:none !important;
}
.post-card .post-card-overlay > *{ pointer-events:auto !important }

.post-card .post-card-overlay-left{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
  flex:1 !important;
}
.post-card .post-card-overlay-left .avatar{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  border-radius:50% !important;
  border:1.5px solid rgba(255,255,255,.55) !important;
  overflow:visible !important;
  flex-shrink:0 !important;
  box-shadow:0 3px 10px rgba(0,0,0,.5) !important;
}
.post-card .post-card-overlay-left .avatar > img{
  border-radius:50% !important;
}

.post-card .post-card-overlay-text{
  min-width:0 !important;
  flex:1 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:1px !important;
}
.post-card .post-card-overlay-title{
  color:#fff !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.95), 0 0 16px rgba(0,0,0,.6) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.post-card .post-card-overlay-nick{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  color:rgba(255,255,255,.82) !important;
  font-size:10.5px !important;
  text-shadow:0 1px 5px rgba(0,0,0,.9) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.post-card .post-card-overlay-nick .dev-badge{
  font-size:8px !important;
  height:12px !important;
  padding:0 5px !important;
  line-height:1 !important;
}

.post-card .post-card-overlay-right{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-shrink:0 !important;
}
.post-card .post-card-act{
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
  padding:3px 8px !important;
  border-radius:10px !important;
  background:rgba(0,0,0,.45) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:700 !important;
  font-family:inherit !important;
  line-height:1 !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  text-shadow:0 1px 3px rgba(0,0,0,.7) !important;
  cursor:pointer !important;
  transition:.15s !important;
}
.post-card .post-card-act:hover{
  background:rgba(74,109,184,.75) !important;
  border-color:rgba(160,195,255,.5) !important;
}
.post-card .post-card-act.active{
  color:#ff8ba7 !important;
}

/* Чистим старые слои, если где-то остались */
.post-card .post-card-foot,
.post-card .post-card-foot-info,
.post-card .post-card-foot-title,
.post-card .post-card-foot-meta,
.post-card .post-card-body,
.post-card .post-card-title,
.post-card .post-card-title-top,
.post-card .post-card-text,
.post-card .post-card-bottom,
.post-card .post-card-action,
.post-card .post-card-poll,
.post-card .post-card-poll-badge,
.post-card::after,
.post-card .post-tile-info,
.post-tile{ display:none !important }

/* post-tile прячем — используем post-card */

/* ============================================================
   РЕДАКТОР ПОСТА — панель инструментов, медиа, текст
   ============================================================ */

.post-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px 16px 8px;
  position:relative;
}
.post-tool-btn{
  padding:6px 12px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(20,29,51,.9), rgba(12,20,36,.95));
  border:1px solid rgba(120,150,210,.3);
  color:var(--text);
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
  white-space:nowrap;
}
.post-tool-btn:hover{
  background:linear-gradient(180deg, rgba(40,60,105,.95), rgba(25,40,75,.95));
  border-color:rgba(160,195,255,.6);
  color:#fff;
  transform:translateY(-1px);
}
.post-tool-btn:active{ transform:scale(.95) }

/* попап цветов */
.post-color-popup{
  position:absolute;
  top:100%;
  left:16px;
  z-index:50;
  padding:10px;
  border-radius:14px;
  background:rgba(10,18,34,.98);
  border:1px solid rgba(120,150,210,.4);
  box-shadow:0 12px 32px rgba(0,0,0,.6);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  animation:popIn .2s cubic-bezier(.3,.7,.3,1);
}
@keyframes popIn{
  from{ opacity:0; transform:scale(.9) }
  to  { opacity:1; transform:scale(1) }
}
.post-color-picker{
  display:grid;
  grid-template-columns:repeat(5, 28px);
  gap:6px;
}
.post-color-swatch{
  width:28px;
  height:28px;
  border-radius:9px;
  cursor:pointer;
  border:1.5px solid rgba(255,255,255,.25);
  transition:.15s;
}
.post-color-swatch:hover{
  transform:scale(1.12);
  border-color:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.5);
}

/* Обложка-превью */
.post-cover-preview{
  position:relative;
  margin:6px 16px 0;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(150deg, rgba(20,30,55,.7), rgba(12,20,36,.9));
  border:1px dashed rgba(120,150,210,.35);
  background-size:cover;
  background-position:center;
  transition:.15s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.post-cover-preview.has-img{
  border-style:solid;
  border-color:rgba(120,150,210,.4);
}
.post-cover-empty{
  color:var(--text-muted);
  font-size:13px;
  text-align:center;
}
.post-cover-hint{
  position:absolute;
  left:10px;
  bottom:8px;
  font-size:10.5px;
  color:#fff;
  background:rgba(0,0,0,.55);
  padding:3px 8px;
  border-radius:8px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.post-cover-tools{
  position:absolute;
  top:8px;
  right:8px;
  display:flex;
  gap:6px;
}
.post-cover-tools .edit-banner-btn{
  background:rgba(10,17,34,.85);
  color:#fff;
  border:1px solid rgba(120,150,210,.4);
  border-radius:10px;
  padding:6px 10px;
  font-size:11px;
  font-family:inherit;
  font-weight:600;
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.post-cover-tools .edit-banner-btn:hover{
  background:rgba(74,109,184,.7);
  border-color:rgba(160,195,255,.6);
}

/* Горизонтальный список картинок */
.post-images-row{
  display:flex;
  gap:6px;
  padding:8px 16px 4px;
  overflow-x:auto;
  scrollbar-width:none;
}
.post-images-row::-webkit-scrollbar{display:none}
.post-image-cell{
  flex:0 0 60px;
  width:60px;
  height:60px;
  border-radius:10px;
  background-size:cover;
  background-position:center;
  border:1.5px solid rgba(120,150,210,.3);
  position:relative;
  cursor:pointer;
  transition:.15s;
}
.post-image-cell.is-cover{
  border-color:#f0c765;
  box-shadow:0 0 0 1px #f0c765, 0 0 14px rgba(240,199,101,.4);
}
.post-image-del{
  position:absolute;
  top:-6px;
  right:-6px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(220,70,70,.95);
  color:#fff;
  border:none;
  font-size:11px;
  font-family:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.5);
  padding:0;
}
.post-image-cover{
  position:absolute;
  top:-6px;
  left:-6px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:linear-gradient(135deg,#f0c765,#d4a13a);
  color:#1a1207;
  border:none;
  font-size:11px;
  font-family:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.5);
  padding:0;
}

/* Текстовое поле поста */
.post-text-area{
  min-height:220px !important;
  padding:12px 14px !important;
  font-size:13px !important;
  line-height:1.5 !important;
  font-family:inherit !important;
  white-space:pre-wrap !important;
}

/* Отрендеренный формат */
.formatted-text,
.post-detail-text{
  font-size:13.5px;
  line-height:1.55;
  color:var(--text);
  white-space:pre-wrap;
  word-break:break-word;
  padding:0;
}
.formatted-text > span,
.post-detail-text > span{
  display:inline;
}
.formatted-text > span[style*="block"],
.post-detail-text > span[style*="block"]{
  display:block !important;
}
.post-inline-image{
  max-width:100%;
  border-radius:12px;
  margin:8px 0;
  display:block;
  cursor:pointer;
  transition:.15s;
}
.post-inline-image:hover{ filter:brightness(1.06) }

/* Sheet со списком картинок */
.post-sheet-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  max-height:50vh;
  overflow-y:auto;
  padding:2px 0;
}
.post-sheet-cell{
  aspect-ratio:1;
  border-radius:12px;
  background-size:cover;
  background-position:center;
  border:1.5px solid rgba(120,150,210,.3);
  position:relative;
}
.post-sheet-cover-tag{
  position:absolute;
  top:6px;
  left:6px;
  font-size:9.5px;
  font-weight:800;
  padding:2px 6px;
  border-radius:7px;
  background:linear-gradient(135deg,#d4a13a,#f0c765);
  color:#1a1207;
  z-index:2;
}
.post-sheet-actions{
  position:absolute;
  right:6px;
  bottom:6px;
  display:flex;
  gap:4px;
}
.post-sheet-btn{
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(10,17,34,.85);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  font-size:12px;
  font-family:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.post-sheet-btn:hover{ background:rgba(74,109,184,.9) }
.post-sheet-btn.danger{ background:rgba(220,70,70,.85) }
.post-sheet-btn.danger:hover{ background:rgba(220,70,70,1) }

/* ============================================================
   СЕТКА 3 КАРТИНОК В ПРЕВЬЮ
   ============================================================ */
.post-card.post-card--grid3{
  aspect-ratio:auto !important;
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
}
.post-card .post-card-grid3{
  display:flex !important;
  gap:2px !important;
  width:100% !important;
  height:auto !important;
}
.post-card .post-card-grid3-cell{
  flex:1 !important;
  aspect-ratio:1/1 !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  min-width:0 !important;
}
/* оверлей на grid3 — снизу поверх картинок */
.post-card.post-card--grid3 .post-card-grad{
  position:absolute !important;
  inset:auto 0 0 0 !important;
  height:60% !important;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.9) 100%) !important;
  z-index:2 !important;
  pointer-events:none !important;
}
.post-card.post-card--grid3 .post-card-overlay{
  position:relative !important;
  z-index:3 !important;
  background:linear-gradient(180deg, rgba(10,17,34,.5), rgba(10,17,34,.9)) !important;
  padding:10px 12px !important;
  margin:0 !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
}

/* ============================================================
   ФИНАЛЬНЫЕ ШВЫ #30
   ============================================================ */

/* PNG-обложка: фон карточки прозрачный, чтобы видеть прозрачность PNG */
.post-card.png-cover{
  background:repeating-conic-gradient(rgba(30,42,72,.6) 0% 25%, rgba(15,23,38,.6) 0% 50%) 50% / 18px 18px !important;
}

/* Сетка 2 картинок — 2 столбца */
.post-card.post-card--grid2 .post-card-grid3-cell:nth-child(3){ display:none !important }

/* Финальная сетка для inline картинок в посте */
.post-detail-images{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  margin-top:10px;
}
.post-detail-image-cell{
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  background:repeating-conic-gradient(rgba(30,42,72,.6) 0% 25%, rgba(15,23,38,.6) 0% 50%) 50% / 18px 18px;
  line-height:0;
}
.post-detail-image-cell img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}
.post-detail-image-cell:hover img{ filter:brightness(1.05) }

/* inline-картинки внутри текста — тоже с прозрачным фоном */
.post-inline-image{
  background:repeating-conic-gradient(rgba(30,42,72,.6) 0% 25%, rgba(15,23,38,.6) 0% 50%) 50% / 18px 18px;
  min-height:40px;
}

/* Заголовок превью — убрать "[[img=0]]"-подобные артефакты */
.post-card .post-card-overlay-title{
  text-transform:none !important;
}

/* В редакторе post-cover-preview прозрачный фон */
.post-cover-preview{
  background:repeating-conic-gradient(rgba(30,42,72,.6) 0% 25%, rgba(15,23,38,.6) 0% 50%) 50% / 18px 18px !important;
}
.post-cover-preview.has-img{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-image:var(--cover-img) !important;
}

/* ============================================================
   #31 — финальный пакет
   ============================================================ */

/* textarea — меньше скругление */
.post-text-area{
  border-radius:8px !important;
}

/* ============================================================
   Превью-миниатюры фото в редакторе
   ============================================================ */
.post-images-row{
  display:flex;
  gap:8px;
  padding:10px 16px 4px;
  overflow-x:auto;
  scrollbar-width:none;
}
.post-images-row::-webkit-scrollbar{ display:none }

.post-image-cell{
  flex:0 0 72px;
  width:72px;
  height:72px;
  border-radius:12px;
  background-size:cover;
  background-position:center;
  border:2px solid rgba(120,150,210,.3);
  position:relative;
  cursor:pointer;
  transition:.15s;
  background-color:#0a1424;
}
.post-image-cell:hover{
  transform:translateY(-2px);
  border-color:rgba(160,195,255,.6);
  box-shadow:0 6px 16px rgba(0,0,0,.5);
}
.post-image-cell.is-cover{
  border-color:#f0c765;
  box-shadow:0 0 0 1px #f0c765, 0 0 14px rgba(240,199,101,.4);
}
.post-image-num{
  position:absolute;
  top:-6px;
  left:-6px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:10px;
  background:rgba(10,17,34,.9);
  border:1px solid rgba(120,150,210,.5);
  color:#cfe0ff;
  font-size:10px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  font-family:ui-monospace,monospace;
}

.post-images-hint{
  padding:6px 16px 10px;
  font-size:11.5px;
  color:var(--accent-2);
  opacity:.9;
}

/* ============================================================
   Выбор фона поста
   ============================================================ */
.post-bg-row{
  display:flex;
  gap:8px;
  padding:6px 16px 12px;
  flex-wrap:wrap;
}
.post-bg-cell{
  width:48px;
  height:48px;
  border-radius:12px;
  cursor:pointer;
  border:2px solid rgba(120,150,210,.35);
  transition:.15s;
  position:relative;
  overflow:hidden;
}
.post-bg-cell:hover{
  transform:translateY(-2px) scale(1.04);
  border-color:rgba(160,195,255,.7);
}
.post-bg-cell.active{
  border-color:#5d81c8;
  box-shadow:0 0 0 2px #5d81c8, 0 0 14px rgba(93,129,200,.6);
}
.post-bg-cell.is-transparent{
  background:
    repeating-conic-gradient(rgba(120,150,210,.25) 0% 25%, rgba(30,42,72,.4) 0% 50%) 50% / 12px 12px !important;
}
.post-bg-cell.is-transparent::after{
  content:'∅';
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;font-weight:800;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}

/* Пост с фоном в просмотре */
.post-detail-bg-dark{
  background:linear-gradient(155deg,#0a1122,#060a14) !important;
  padding:14px 16px !important;
  border-radius:14px !important;
  border:1px solid rgba(120,150,210,.15);
}
.post-detail-bg-light{
  background:linear-gradient(155deg,#e8ecf5,#c8d4e8) !important;
  padding:14px 16px !important;
  border-radius:14px !important;
  color:#0a1424 !important;
}
.post-detail-bg-light .formatted-text,
.post-detail-bg-light .post-detail-text{
  color:#0a1424 !important;
}
.post-detail-bg-gradient{
  background:linear-gradient(135deg,#3a5aa0,#5d81c8) !important;
  padding:14px 16px !important;
  border-radius:14px !important;
}
.post-detail-bg-blue{
  background:linear-gradient(135deg,#1a2542,#2c4272) !important;
  padding:14px 16px !important;
  border-radius:14px !important;
}
.post-detail-bg-purple{
  background:linear-gradient(135deg,#4a2570,#7a3aa0) !important;
  padding:14px 16px !important;
  border-radius:14px !important;
}

/* ============================================================
   Sheet списка картинок — номер в углу
   ============================================================ */
.post-sheet-num{
  position:absolute;
  top:6px;
  right:6px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:11px;
  background:rgba(10,17,34,.9);
  border:1px solid rgba(120,150,210,.5);
  color:#cfe0ff;
  font-size:10px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:ui-monospace,monospace;
  z-index:3;
}

/* ============================================================
   ПОИСК СООБЩЕСТВ — 9:16 вертикальные карточки
   ============================================================ */
#screen .list {
  display:block;
}
/* контейнер-грид создаётся динамически — стилизуем через частный селектор */
.list:has(> .comm-search-card),
.list .comm-search-card{ }

/* если .list содержит comm-search-card — делаем его гридом */
.list{
  display:block;
}
.comm-search-card ~ .comm-search-card{ margin-top:10px; }

/* Настоящий грид: родитель + :has */
.list:has(.comm-search-card){
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
  padding:0 16px !important;
}

.comm-search-card{
  position:relative;
  aspect-ratio:9/16;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(150deg,#2a3f6e,#0f1726);
  border:1px solid var(--line);
  cursor:pointer;
  transition:transform .18s cubic-bezier(.3,.7,.4,1), border-color .2s, box-shadow .25s;
  display:flex;
  flex-direction:column;
}
.comm-search-card:hover{
  border-color:rgba(120,150,210,.5);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.comm-search-card-cover{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.comm-search-card-cover > img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.comm-search-card-cover::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.92) 100%);
  pointer-events:none;
}
.comm-search-card-av{
  position:absolute;
  top:10px;
  left:10px;
  width:36px;
  height:36px;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(135deg,#4a6db8,#1a2542);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  color:#fff;
  border:2px solid rgba(255,255,255,.45);
  box-shadow:0 4px 12px rgba(0,0,0,.55);
  z-index:2;
}
.comm-search-card-av img{ width:100%;height:100%;object-fit:cover;display:block }
.comm-search-card-online{
  position:absolute;
  top:10px;
  right:10px;
  padding:3px 8px;
  border-radius:10px;
  background:rgba(0,0,0,.6);
  color:#3fd07a;
  font-size:10.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:2;
}
.comm-search-card-online .dot{
  width:6px;height:6px;border-radius:50%;
  background:#3fd07a;
  box-shadow:0 0 6px #3fd07a;
  margin-right:2px;
}
.comm-search-card-info{
  position:relative;
  z-index:2;
  margin-top:auto;
  padding:10px 11px 12px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.comm-search-card-name{
  font-size:13px;
  font-weight:800;
  color:#fff;
  line-height:1.2;
  text-shadow:0 2px 8px rgba(0,0,0,.95);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
.comm-search-card-meta{
  font-size:10.5px;
  color:rgba(255,255,255,.85);
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.comm-search-card-tagline{
  font-size:10.5px;
  color:rgba(255,255,255,.75);
  line-height:1.3;
  margin-top:2px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.comm-search-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  margin-top:4px;
}
.comm-search-card-tag{
  font-size:9px;
  padding:2px 6px;
  border-radius:7px;
  background:rgba(74,109,184,.5);
  border:1px solid rgba(120,150,210,.4);
  color:#cfe0ff;
  font-weight:600;
}

/* ============================================================
   #33 — плюсик на картинках + фон-картинка
   ============================================================ */

/* Плюсик вместо #N на миниатюрах */
.post-image-plus{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(15,25,45,.85);
  border:2px solid rgba(255,255,255,.7);
  color:#fff;
  font-size:18px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  box-shadow:0 4px 12px rgba(0,0,0,.6);
  pointer-events:none;
  transition:.15s;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.post-image-plus::before{
  content:'+';
  line-height:1;
  margin-top:-2px;
}
.post-image-cell:hover .post-image-plus{
  background:rgba(74,109,184,.95);
  border-color:#fff;
  transform:translate(-50%,-50%) scale(1.15);
  box-shadow:0 0 20px rgba(120,160,230,.8);
}
/* Убираем номер если где-то остался */
.post-image-num{ display:none !important }

/* Фон-картинка в редакторе */
.post-bg-cell-img{
  background:repeating-conic-gradient(rgba(120,150,210,.25) 0% 25%, rgba(30,42,72,.4) 0% 50%) 50% / 12px 12px !important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.post-bg-cell-plus{
  font-size:20px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));
  pointer-events:none;
}

/* Превью выбранного фона */
.post-bg-preview{
  margin:6px 16px 12px;
  min-height:70px;
  border-radius:12px;
  border:1px dashed rgba(120,150,210,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  background:repeating-conic-gradient(rgba(120,150,210,.15) 0% 25%, rgba(30,42,72,.3) 0% 50%) 50% / 14px 14px;
  transition:.15s;
  position:relative;
  overflow:hidden;
}
.post-bg-preview.has-bg{
  border-style:solid;
  border-color:rgba(120,150,210,.5);
}
.post-bg-preview-empty,
.post-bg-preview-text{
  font-size:11.5px;
  font-weight:600;
  color:var(--text-muted);
  text-shadow:0 1px 4px rgba(0,0,0,.9);
  padding:6px 12px;
  background:rgba(0,0,0,.4);
  border-radius:8px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.post-bg-preview.has-bg .post-bg-preview-text{
  color:#fff;
}

/* Фон-картинка в просмотре поста */
.post-detail-bg-image{
  padding:18px 16px !important;
  border-radius:14px !important;
  color:#fff !important;
  text-shadow:0 1px 6px rgba(0,0,0,.85);
  position:relative;
  overflow:hidden;
  border:1px solid rgba(120,150,210,.2);
}
.post-detail-bg-image::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.75) 100%);
  pointer-events:none;
  z-index:0;
}
.post-detail-bg-image > *{
  position:relative;
  z-index:1;
}
.post-detail-bg-image .formatted-text,
.post-detail-bg-image .post-detail-text{
  color:#fff !important;
  text-shadow:0 1px 6px rgba(0,0,0,.85);
}

/* ============================================================
   МОЗАИКА 3 КАРТИНОК — 1 большая слева + 2 справа
   Точно как на макете
   ============================================================ */
.post-card.post-card--mosaic3{
  aspect-ratio:auto !important;
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
  padding:0 !important;
  background:linear-gradient(155deg, rgba(26,37,66,.65), rgba(19,28,51,.8)) !important;
  border:1px solid rgba(120,150,210,.2) !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

/* сама мозаика */
.post-card .post-card-mosaic{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:3px !important;
  width:100% !important;
  aspect-ratio:16/10 !important;
  background:rgba(10,17,34,.5);
  padding:3px !important;
  box-sizing:border-box;
}

/* большая картинка слева — 1 колонка, во всю высоту */
.post-card .post-card-mosaic-left{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-color:rgba(20,30,55,.6);
  border-radius:8px !important;
  min-width:0 !important;
  min-height:0 !important;
}

/* правая колонка — 2 картинки в столбик */
.post-card .post-card-mosaic-right{
  display:grid !important;
  grid-template-rows:1fr 1fr !important;
  gap:3px !important;
  min-width:0 !important;
  min-height:0 !important;
}
.post-card .post-card-mosaic-cell{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-color:rgba(20,30,55,.6);
  border-radius:8px !important;
  min-width:0 !important;
  min-height:0 !important;
}

/* В режиме мозаики — градиент не нужен снизу, у нас есть инфо-строка */
.post-card.post-card--mosaic3 .post-card-grad{
  display:none !important;
}

/* Инфо-панель снизу как на макете: [ава] [название + тег] ... [лайк] [коммент] */
.post-card.post-card--mosaic3 .post-card-overlay{
  position:relative !important;
  inset:auto !important;
  left:auto !important; right:auto !important;
  bottom:auto !important;
  z-index:3 !important;
  padding:10px 12px 12px !important;
  background:linear-gradient(180deg, rgba(19,28,51,.65), rgba(13,20,38,.95)) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}
.post-card.post-card--mosaic3 .post-card-overlay-left{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
  flex:1 !important;
}
.post-card.post-card--mosaic3 .post-card-overlay-left .avatar{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  border-radius:50% !important;
  border:2px solid rgba(120,150,210,.4) !important;
  flex-shrink:0 !important;
}
.post-card.post-card--mosaic3 .post-card-overlay-title{
  font-size:14px !important;
  font-weight:800 !important;
  color:var(--text) !important;
  text-shadow:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.post-card.post-card--mosaic3 .post-card-overlay-nick{
  font-size:11px !important;
  color:var(--text-dim) !important;
  text-shadow:none !important;
  margin-top:2px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.post-card.post-card--mosaic3 .post-card-overlay-right{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-shrink:0 !important;
}
.post-card.post-card--mosaic3 .post-card-act{
  background:transparent !important;
  border:none !important;
  color:var(--text-dim) !important;
  font-size:12px !important;
  font-weight:600 !important;
  padding:4px 6px !important;
  text-shadow:none !important;
}
.post-card.post-card--mosaic3 .post-card-act:hover{
  color:var(--text) !important;
  background:rgba(74,109,184,.2) !important;
}
.post-card.post-card--mosaic3 .post-card-act.active{
  color:#ff8ba7 !important;
}

/* Три точки — без подложки, справа сверху */
.post-card.post-card--mosaic3 .post-card-menu{
  top:10px !important;
  right:10px !important;
  z-index:5 !important;
}

/* ФИКС: убираем старые варианты overlay для mosaic3 */
.post-card.post-card--mosaic3 .post-card-overlay-left .avatar > img{
  border-radius:50% !important;
}

/* ============================================================
   Сетка 2 картинок — сохраняем как было
   ============================================================ */
.post-card.post-card--grid2 .post-card-grid3{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:3px !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
  padding:3px !important;
  background:rgba(10,17,34,.5);
  box-sizing:border-box;
}
.post-card.post-card--grid2 .post-card-grid3-cell{
  background-size:cover !important;
  background-position:center !important;
  border-radius:8px !important;
  aspect-ratio:auto !important;
}
.post-card.post-card--grid2 .post-card-grad{
  display:none !important;
}
.post-card.post-card--grid2 .post-card-overlay{
  position:relative !important;
  inset:auto !important;
  left:auto !important; right:auto !important; bottom:auto !important;
  padding:10px 12px 12px !important;
  background:linear-gradient(180deg, rgba(19,28,51,.65), rgba(13,20,38,.95)) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}

/* ============================================================
   МОЗАИКА 3 КАРТИНОК — ФОРС, как на макете
   ============================================================ */

.post-card.post-card--mosaic3{
  aspect-ratio:auto !important;
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
  padding:0 !important;
  margin:0 !important;
  background:linear-gradient(155deg, rgba(26,37,66,.65), rgba(19,28,51,.8)) !important;
  border:1px solid rgba(120,150,210,.2) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:0 6px 22px rgba(0,0,0,.4) !important;
  height:auto !important;
  min-height:0 !important;
}

.post-card.post-card--mosaic3 .post-card-mosaic{
  display:grid !important;
  grid-template-columns:2fr 1fr !important;
  grid-template-rows:1fr 1fr !important;
  gap:3px !important;
  width:100% !important;
  aspect-ratio:16/11 !important;
  height:auto !important;
  padding:3px !important;
  background:rgba(10,17,34,.5) !important;
  box-sizing:border-box !important;
}

.post-card.post-card--mosaic3 .post-card-mosaic-left{
  grid-column:1 / 2 !important;
  grid-row:1 / 3 !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-color:rgba(20,30,55,.6) !important;
  border-radius:8px !important;
  min-width:0 !important;
  min-height:0 !important;
  display:block !important;
}

.post-card.post-card--mosaic3 .post-card-mosaic-right{
  grid-column:2 / 3 !important;
  grid-row:1 / 3 !important;
  display:grid !important;
  grid-template-rows:1fr 1fr !important;
  gap:3px !important;
  min-width:0 !important;
  min-height:0 !important;
}

.post-card.post-card--mosaic3 .post-card-mosaic-cell{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-color:rgba(20,30,55,.6) !important;
  border-radius:8px !important;
  min-width:0 !important;
  min-height:0 !important;
  display:block !important;
}

.post-card.post-card--mosaic3 .post-card-grad{
  display:none !important;
}

/* Нижняя инфо-панель как на макете */
.post-card.post-card--mosaic3 .post-card-overlay{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  top:auto !important;
  z-index:3 !important;
  padding:12px 14px 12px !important;
  background:linear-gradient(180deg, rgba(19,28,51,.65), rgba(13,20,38,.95)) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin:0 !important;
  border-radius:0 !important;
}

.post-card.post-card--mosaic3 .post-card-overlay-left{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
  flex:1 !important;
}

.post-card.post-card--mosaic3 .post-card-overlay-left .avatar{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:50% !important;
  border:1.5px solid rgba(120,150,210,.4) !important;
  flex-shrink:0 !important;
  overflow:visible !important;
}
.post-card.post-card--mosaic3 .post-card-overlay-left .avatar > img{
  border-radius:50% !important;
}

.post-card.post-card--mosaic3 .post-card-overlay-text{
  min-width:0 !important;
  flex:1 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:1px !important;
}

.post-card.post-card--mosaic3 .post-card-overlay-title{
  font-size:14px !important;
  font-weight:800 !important;
  color:var(--text) !important;
  line-height:1.2 !important;
  text-shadow:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  margin:0 !important;
}

.post-card.post-card--mosaic3 .post-card-overlay-nick{
  font-size:11px !important;
  color:var(--text-dim) !important;
  text-shadow:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  margin-top:2px !important;
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
}
.post-card.post-card--mosaic3 .post-card-overlay-nick .dev-badge{
  font-size:8px !important;
  height:12px !important;
  padding:0 5px !important;
}

.post-card.post-card--mosaic3 .post-card-overlay-right{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  flex-shrink:0 !important;
}

.post-card.post-card--mosaic3 .post-card-act{
  background:transparent !important;
  border:none !important;
  color:var(--text-dim) !important;
  font-size:12px !important;
  font-weight:700 !important;
  padding:4px 8px !important;
  text-shadow:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
  cursor:pointer !important;
  font-family:inherit !important;
}
.post-card.post-card--mosaic3 .post-card-act:hover{
  color:var(--text) !important;
  background:rgba(74,109,184,.15) !important;
  border-radius:8px !important;
}
.post-card.post-card--mosaic3 .post-card-act.active{
  color:#ff8ba7 !important;
}

.post-card.post-card--mosaic3 .post-card-menu{
  top:10px !important;
  right:10px !important;
  z-index:5 !important;
}

/* ============================================================
   СКРУГЛЕНИЕ — обложка 16:9 чуть меньше, мозаика не трогаем
   ============================================================ */

/* Пост-карточка с одной картинкой/обложкой — уменьшаем скругление */
.post-card:not(.post-card--mosaic3):not(.post-card--grid2){
  border-radius:8px !important;
}

/* Верх обложки в таких постах — тоже 8px */
.post-card:not(.post-card--mosaic3):not(.post-card--grid2) .post-card-cover{
  border-top-left-radius:8px !important;
  border-top-right-radius:8px !important;
}

/* Оверлей (инфо-панель) снизу — нижние углы тоже 8px */
.post-card:not(.post-card--mosaic3):not(.post-card--grid2) .post-card-overlay,
.post-card:not(.post-card--mosaic3):not(.post-card--grid2) .post-card-bottom,
.post-card:not(.post-card--mosaic3):not(.post-card--grid2) .post-card-foot{
  border-bottom-left-radius:8px !important;
  border-bottom-right-radius:8px !important;
}

/* Превью-карточки в профиле с обложкой */
.posts-list .post-card:not(.post-card--mosaic3):not(.post-card--grid2){
  border-radius:8px !important;
}
.posts-list .post-card:not(.post-card--mosaic3):not(.post-card--grid2) .post-card-cover{
  border-top-left-radius:8px !important;
  border-top-right-radius:8px !important;
}


/* ============================================================
   КНОПКА "?" И СПРАВКА ПО ИНСТРУМЕНТАМ
   ============================================================ */
.edit-section-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
}
.post-help-btn{
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(74,109,184,.35);
  border:1px solid rgba(120,150,210,.5);
  color:#fff;
  font-family:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:.15s;
  line-height:1;
}
.post-help-btn:hover{
  background:rgba(74,109,184,.75);
  border-color:rgba(160,195,255,.8);
  transform:scale(1.1);
  box-shadow:0 0 12px rgba(120,160,230,.5);
}
.post-help-btn:active{ transform:scale(.94) }

/* Контент Sheet'а с инструментами */
.tools-help{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:65vh;
  overflow-y:auto;
  padding:2px 0 8px;
}
.tools-help-group{
  font-size:10.5px;
  font-weight:700;
  color:var(--accent-3);
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:12px 6px 6px;
  opacity:.9;
}
.tools-help-group:first-child{ padding-top:4px }

.tools-help-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(74,109,184,.06);
  border:1px solid rgba(120,150,210,.12);
}
.tools-help-icon{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:9px;
  background:linear-gradient(135deg, rgba(74,109,184,.5), rgba(93,129,200,.3));
  border:1px solid rgba(120,150,210,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:800;
  color:#cfe0ff;
  font-family:inherit;
  flex-shrink:0;
}
.tools-help-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.tools-help-title{
  font-size:13px;
  font-weight:700;
  color:var(--text);
}
.tools-help-desc{
  font-size:11.5px;
  color:var(--text-dim);
  line-height:1.4;
}
.tools-help-tip{
  margin-top:8px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(74,109,184,.12);
  border-left:3px solid var(--accent-2);
  font-size:11.5px;
  color:var(--accent-3);
  line-height:1.5;
}


/* ============================================================
   КОШЕЛЁК — СВЕТЛАЯ ТЕМА + ТОНКИЙ ТЕКСТ + НОВАЯ МОНЕТКА
   ============================================================ */

/* Экран кошелька */
:root[data-theme="light"] .wallet-tabs{
  background:rgba(255,255,255,.75) !important;
  border:1px solid rgba(59,130,246,.2) !important;
}
:root[data-theme="light"] .wallet-tab{ color:#4a5d8f !important }
:root[data-theme="light"] .wallet-tab.active{ color:#0a1f5c !important }
:root[data-theme="light"] .wallet-tabs-ind{
  background:linear-gradient(135deg,#3b82f6,#5a9dff) !important;
}

/* Баланс — светлая карточка */
:root[data-theme="light"] .wallet-balance{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(240,199,101,.18) 0%, transparent 60%),
    linear-gradient(135deg,#ffffff,#f4f7fc) !important;
  border:1px solid rgba(200,150,40,.4) !important;
  box-shadow:0 10px 32px rgba(200,150,40,.15), 0 4px 12px rgba(59,130,246,.08) !important;
}
:root[data-theme="light"] .wallet-balance .wlb-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-bottom:8px !important;
  filter:drop-shadow(0 4px 12px rgba(200,150,40,.35));
}
:root[data-theme="light"] .wallet-balance .wlb-num{
  color:#8a5a10 !important;
  font-weight:600 !important;
  font-size:36px !important;
  letter-spacing:.5px !important;
  text-shadow:0 2px 12px rgba(200,150,40,.25) !important;
}
:root[data-theme="light"] .wallet-balance .wlb-lbl{
  color:#4a5d8f !important;
  font-weight:500 !important;
}

/* Купон */
:root[data-theme="light"] .wallet-coupon{
  background:linear-gradient(135deg,rgba(59,130,246,.10),rgba(90,157,255,.06)) !important;
  border:1px dashed rgba(59,130,246,.5) !important;
}
:root[data-theme="light"] .wallet-coupon.used{
  background:rgba(232,238,251,.55) !important;
  border-style:solid !important;
}
:root[data-theme="light"] .wallet-coupon .wc-title{ color:#0a1f5c !important }
:root[data-theme="light"] .wallet-coupon .wc-sub{ color:#4a5d8f !important }

/* Кнопка «Перейти в магазин» */
:root[data-theme="light"] .wallet-coupon .wc-badge{
  background:linear-gradient(135deg,#f0c765,#d4a13a) !important;
  color:#1a1207 !important;
}

/* Магазин рамок */
:root[data-theme="light"] .shop-grid .shop-frame{
  background:linear-gradient(155deg,#ffffff,#f4f7fc) !important;
  border:1px solid rgba(59,130,246,.2) !important;
}
:root[data-theme="light"] .shop-grid .shop-frame:hover{
  border-color:rgba(59,130,246,.5) !important;
}
:root[data-theme="light"] .shop-frame-name{
  color:#0a1f5c !important;
  font-weight:600 !important;
}
:root[data-theme="light"] .shop-frame-price{
  background:linear-gradient(135deg,rgba(240,199,101,.35),rgba(212,161,58,.25)) !important;
  border:1px solid rgba(200,150,40,.5) !important;
  color:#8a5a10 !important;
  font-weight:600 !important;
}
:root[data-theme="light"] .shop-frame-price:hover{
  background:linear-gradient(135deg,rgba(240,199,101,.55),rgba(212,161,58,.4)) !important;
}

/* ============================================================
   ТЁМНАЯ ТЕМА — тоже обновить шрифты тоньше
   ============================================================ */
.wallet-balance .wlb-num{
  font-weight:600 !important;
  letter-spacing:.5px !important;
}
.wallet-balance .wlb-lbl{
  font-weight:500 !important;
}

/* Иконка монеты в шапке профиля */
.cnum-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-right:5px !important;
  vertical-align:middle !important;
}
.cnum-icon svg{
  display:block !important;
}

/* Тоньше шрифт цифр в шапке профиля */
.coins-badge .cnum{
  font-weight:600 !important;
  letter-spacing:.4px !important;
}



/* ============================================================
   ЛОГОТИП НА СПЛЭШЕ — картинка
   ============================================================ */
.logo-block .logo-image{
  display:block !important;
  width:340px !important;
  max-width:88vw !important;
  height:auto !important;
  animation: logoFloat 3.4s ease-in-out infinite;
  will-change: transform;
  filter: drop-shadow(0 6px 20px rgba(59,130,246,.35));
}
@media (max-width:500px){
  .logo-block .logo-image{
    width:280px !important;
  }
}

/* Светлая тема — мягче тень */
:root[data-theme="light"] .logo-block .logo-image{
  filter: drop-shadow(0 6px 24px rgba(59,130,246,.28));
}

/* Если картинка не загрузилась — вернуть красивую анимацию тексту */
.logo-block .logo-word{
  animation: logoFloat 3.4s ease-in-out infinite;
  will-change: transform;
}


/* ============================================================
   ИКОНКА МОНЕТКИ В ШАПКЕ ПРОФИЛЯ — выравнивание
   (фикс для тёмной и светлой темы)
   ============================================================ */

/* Плашка монетки — фиксированный flex */
.coins-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  height:30px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  flex-direction:row !important;
}

/* Иконка — не сжимается, не растягивается */
.coins-badge .cnum-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  flex:0 0 18px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  vertical-align:middle !important;
  position:static !important;
  transform:none !important;
}
.coins-badge .cnum-icon img,
.coins-badge .cnum-icon svg{
  display:block !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  margin:0 !important;
  padding:0 !important;
}

/* Число — без сжатия */
.coins-badge .cnum{
  display:inline-block !important;
  flex:0 0 auto !important;
  line-height:1 !important;
  vertical-align:middle !important;
  position:static !important;
}

/* Тёмная тема — все стили сохраняются, только выравнивание */
:root:not([data-theme="light"]) .coins-badge{
  background:linear-gradient(135deg, rgba(212,161,58,.35), rgba(240,199,101,.25)) !important;
  border:1px solid rgba(240,199,101,.6) !important;
  color:#ffe9a8 !important;
}
:root:not([data-theme="light"]) .coins-badge .cnum{
  color:#ffffff !important;
}

/* Светлая тема */
:root[data-theme="light"] .coins-badge{
  background:linear-gradient(135deg,rgba(250,200,80,.35),rgba(240,199,101,.28)) !important;
  border:1px solid rgba(200,150,40,.5) !important;
  color:#8a5a10 !important;
}
:root[data-theme="light"] .coins-badge .cnum{
  color:#8a5a10 !important;
}

/* Обводка круглой кнопки рядом с монеткой (⚙️) — одинаковая высота */
.profile-actions-row .icon-btn-circle{
  height:30px !important;
  width:30px !important;
  min-width:30px !important;
}

/* Общий контейнер справа — выравнивание по центру */
.profile-actions-row > div:last-child{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}


/* ============================================================
   ШАПКА ПРОФИЛЯ — ЖЁСТКОЕ ВЫРАВНИВАНИЕ
   Плашка монетки всегда справа, содержимое по центру
   ============================================================ */

/* Весь ряд — back слева, монетка+шестерня справа */
.profile-actions-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  width:100% !important;
  padding:0 12px !important;
  box-sizing:border-box !important;
  position:absolute !important;
  top:calc(12px + env(safe-area-inset-top)) !important;
  left:0 !important;
  right:0 !important;
}

/* Первый ребёнок — back кнопка (слева) */
.profile-actions-row > .icon-btn-circle:first-child{
  flex:0 0 auto !important;
  margin-right:auto !important;
}

/* Правый блок — монетка + шестерня */
.profile-actions-row > div,
.profile-actions-row > div:last-child{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-left:auto !important;
  margin-right:0 !important;
  flex-shrink:0 !important;
}

/* Сама плашка монетки */
.coins-badge{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  height:30px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  flex-shrink:0 !important;
  box-sizing:border-box !important;
}
.coins-badge > *{
  flex-shrink:0 !important;
}

/* Иконка монеты */
.coins-badge .cnum-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
}
.coins-badge .cnum-icon img,
.coins-badge .cnum-icon svg{
  display:block !important;
  width:18px !important;
  height:18px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  margin:0 !important;
  padding:0 !important;
}

/* Число */
.coins-badge .cnum{
  display:inline-block !important;
  line-height:1 !important;
  flex:0 0 auto !important;
  vertical-align:middle !important;
}

/* Шестерёнка — та же высота */
.profile-actions-row .icon-btn-circle{
  height:30px !important;
  width:30px !important;
  min-width:30px !important;
  flex-shrink:0 !important;
}

/* На всякий случай — и для темы, и без */
.profile-banner-wrap{
  position:relative !important;
}


/* ============================================================
   КОШЕЛЁК — БОЛЬШАЯ МОНЕТКА ПО ЦЕНТРУ (тёмная + светлая)
   ============================================================ */

.wallet-balance{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  text-align:center !important;
}

.wallet-balance .wlb-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:auto !important;
  margin:0 auto 6px !important;
  padding:0 !important;
  line-height:1 !important;
  flex-shrink:0 !important;
}

.wallet-balance .wlb-icon img,
.wallet-balance .wlb-icon svg{
  display:block !important;
  width:64px !important;
  height:64px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  margin:0 auto !important;
  padding:0 !important;
  filter:drop-shadow(0 6px 16px rgba(200,150,40,.5));
}

.wallet-balance .wlb-num{
  display:block !important;
  text-align:center !important;
  margin:0 !important;
  line-height:1.1 !important;
}

.wallet-balance .wlb-lbl{
  display:block !important;
  text-align:center !important;
  margin:0 !important;
}

/* Тёмная тема — золотое свечение монетки */
:root:not([data-theme="light"]) .wallet-balance .wlb-icon img,
:root:not([data-theme="light"]) .wallet-balance .wlb-icon svg{
  filter:drop-shadow(0 6px 20px rgba(240,199,101,.7));
}

/* Светлая тема */
:root[data-theme="light"] .wallet-balance .wlb-icon img,
:root[data-theme="light"] .wallet-balance .wlb-icon svg{
  filter:drop-shadow(0 6px 18px rgba(200,150,40,.45));
}



/* ============================================================
   УНИВЕРСАЛЬНАЯ РАМКА — img или video (webm/gif/png)
   ============================================================ */
.frame-overlay,
.frame-item-overlay,
.sfp-overlay{
  position:absolute !important;
  inset:-12% !important;
  width:124% !important;
  height:124% !important;
  pointer-events:none !important;
  z-index:5 !important;
  display:block !important;
}

.frame-overlay .frame-media,
.frame-overlay > img,
.frame-overlay > video,
.frame-item-overlay .frame-media,
.frame-item-overlay > img,
.frame-item-overlay > video,
.sfp-overlay .frame-media,
.sfp-overlay > img,
.sfp-overlay > video{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  border-radius:50% !important;
  background:transparent !important;
  pointer-events:none !important;
}

/* Видео-рамка без обводки и не растягивается */
.frame-overlay video,
.frame-item-overlay video,
.sfp-overlay video{
  outline:none !important;
  border:none !important;
}

/* Превью рамки в магазине — позиционирование */
.sfp-overlay{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
}

/* Превью рамки в выборе — тоже */
.frame-item-overlay{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:100% !important;
  height:100% !important;
  inset:auto !important;
}

/* Fallback — анимированная CSS-обводка если ни png/webm/gif не нашёлся */
@keyframes fallbackFrameRotate{
  0%   { box-shadow: 0 0 0 3px #ff4d6d, 0 0 22px rgba(255,77,109,.8); }
  25%  { box-shadow: 0 0 0 3px #ffd93d, 0 0 22px rgba(255,217,61,.8); }
  50%  { box-shadow: 0 0 0 3px #6bff8f, 0 0 22px rgba(107,255,143,.8); }
  75%  { box-shadow: 0 0 0 3px #4db8ff, 0 0 22px rgba(77,184,255,.8); }
  100% { box-shadow: 0 0 0 3px #b58fff, 0 0 22px rgba(181,143,255,.8); }
}



/* ============================================================
   ФИНАЛЬНЫЕ ПРАВИЛА РАМОК — img / video / gif
   ============================================================ */
.avatar,
.avatar.sq{
  overflow:visible !important;
  position:relative !important;
}

/* Обёртка рамки */
.frame-overlay{
  position:absolute !important;
  inset:-12% !important;
  width:124% !important;
  height:124% !important;
  pointer-events:none !important;
  z-index:6 !important;
  display:block !important;
}

/* Сам медиа-элемент (video/img) внутри */
.frame-overlay > video,
.frame-overlay > img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  background:transparent !important;
  border:none !important;
  outline:none !important;
  pointer-events:none !important;
}

/* Отдельно для превью в выборе рамок */
.frame-item-prev{
  position:relative !important;
  overflow:visible !important;
}
.frame-item-overlay{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
  z-index:3 !important;
}
.frame-item-overlay > video,
.frame-item-overlay > img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  background:transparent !important;
  border:none !important;
}

/* Магазин — превью рамки */
.shop-frame-prev{
  position:relative !important;
  overflow:visible !important;
}
.sfp-overlay{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
  z-index:3 !important;
}
.sfp-overlay > video,
.sfp-overlay > img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  background:transparent !important;
  border:none !important;
}


/* ============================================================
   ТЁМНАЯ ТЕМА — НОВАЯ ПАЛИТРА (синий → голубой)
   #00002A · #1A3F75 · #2A5A9C · #4E6A9C · #4EA4CC
   ============================================================ */

:root:not([data-theme="light"]){
  --bg-app:#00002A;
  --bg-phone-1:#0A1A48;
  --bg-phone-2:#00002A;
  --surface-1:#0D1D45;
  --surface-2:#13275A;
  --surface-3:#1A3F75;
  --surface-4:#2A5A9C;
  --line:rgba(78,164,204,.14);
  --line-strong:rgba(78,164,204,.30);
  --text:#E6F0FB;
  --text-dim:#A5B8D4;
  --text-muted:#6D82A4;
  --accent:#4EA4CC;
  --accent-2:#6DB8E0;
  --accent-3:#4E6A9C;
  --accent-grad:linear-gradient(135deg,#1A3F75 0%,#4EA4CC 100%);
  --accent-grad-soft:linear-gradient(135deg,rgba(26,63,117,.35),rgba(78,164,204,.35));
}

/* Фон приложения — глубокий синий с лёгким градиентом */
:root:not([data-theme="light"]) body{
  background:#00002A !important;
}
:root:not([data-theme="light"]) body::before{
  background:linear-gradient(
    130deg,
    #00002A 0%,
    #0A1A48 25%,
    #1A3F75 50%,
    #0A1A48 75%,
    #00002A 100%
  ) !important;
  background-size:400% 400% !important;
  animation:flowBg 22s ease-in-out infinite !important;
}
:root:not([data-theme="light"]) body::after{
  background:radial-gradient(
    ellipse at 50% 0%,
    rgba(78,164,204,.28) 0%,
    rgba(26,63,117,.18) 30%,
    rgba(0,0,42,0) 70%
  ) !important;
  animation:flowGlow 16s ease-in-out infinite !important;
  filter:blur(30px) !important;
}
:root:not([data-theme="light"]) .phone{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(78,164,204,.18) 0%, transparent 55%),
    radial-gradient(90% 50% at 50% 100%, rgba(42,90,156,.14) 0%, transparent 60%),
    linear-gradient(170deg,#0A1A48 0%,#00002A 60%,#000018 100%) !important;
  box-shadow:0 32px 80px rgba(0,0,42,.85), inset 0 0 0 1px rgba(78,164,204,.10) !important;
}
:root:not([data-theme="light"]) .screen::-webkit-scrollbar-thumb{
  background:rgba(78,164,204,.3) !important;
}

/* Карточки */
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .chat-row,
:root:not([data-theme="light"]) .user-row,
:root:not([data-theme="light"]) .comm-chat-row,
:root:not([data-theme="light"]) .comm-search-row,
:root:not([data-theme="light"]) .comm-hero,
:root:not([data-theme="light"]) .comm-leader,
:root:not([data-theme="light"]) .comm-tile-916,
:root:not([data-theme="light"]) .my-comm-card,
:root:not([data-theme="light"]) .comm-card-lg,
:root:not([data-theme="light"]) .notif-row,
:root:not([data-theme="light"]) .wall-card,
:root:not([data-theme="light"]) .diag-tile,
:root:not([data-theme="light"]) .stat-tile,
:root:not([data-theme="light"]) .staff-row,
:root:not([data-theme="light"]) .settings-section,
:root:not([data-theme="light"]) .shop-frame,
:root:not([data-theme="light"]) .frame-item,
:root:not([data-theme="light"]) .cp-card,
:root:not([data-theme="light"]) .chat-bubble-card,
:root:not([data-theme="light"]) .pod-main,
:root:not([data-theme="light"]) .pod-mini,
:root:not([data-theme="light"]) .rule-card,
:root:not([data-theme="light"]) .rule-add-box,
:root:not([data-theme="light"]) .leader-card,
:root:not([data-theme="light"]) .edit-top-item,
:root:not([data-theme="light"]) .wallet-coupon,
:root:not([data-theme="light"]) .profile-pinned-card{
  background:linear-gradient(155deg, rgba(26,63,117,.85), rgba(13,29,69,.9)) !important;
  border-color:rgba(78,164,204,.20) !important;
}

/* Инпуты */
:root:not([data-theme="light"]) .input,
:root:not([data-theme="light"]) .search,
:root:not([data-theme="light"]) textarea.input{
  background:linear-gradient(180deg, rgba(26,63,117,.6), rgba(13,29,69,.9)) !important;
  border-color:rgba(78,164,204,.30) !important;
  color:#E6F0FB !important;
}
:root:not([data-theme="light"]) .input:focus,
:root:not([data-theme="light"]) .search:focus{
  border-color:rgba(78,164,204,.65) !important;
  box-shadow:0 0 0 3px rgba(78,164,204,.18) !important;
}

/* Кнопки primary */
:root:not([data-theme="light"]) .btn-outline.solid,
:root:not([data-theme="light"]) .btn.primary,
:root:not([data-theme="light"]) .comm-top-join,
:root:not([data-theme="light"]) .comm-nav-btn.primary,
:root:not([data-theme="light"]) .chat-send,
:root:not([data-theme="light"]) .user-overlay-btn.primary{
  background:linear-gradient(135deg,#1A3F75,#4EA4CC) !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(78,164,204,.45) !important;
}

/* Хедер сообщества */
:root:not([data-theme="light"]) .comm-top-back,
:root:not([data-theme="light"]) .comm-top-square,
:root:not([data-theme="light"]) .comm-staff-btn,
:root:not([data-theme="light"]) .icon-btn-circle{
  background:linear-gradient(155deg, rgba(26,63,117,.9), rgba(13,29,69,.95)) !important;
  border-color:rgba(78,164,204,.35) !important;
  color:#A5B8D4 !important;
}
:root:not([data-theme="light"]) .comm-top-back:hover,
:root:not([data-theme="light"]) .comm-top-square:hover,
:root:not([data-theme="light"]) .comm-staff-btn:hover,
:root:not([data-theme="light"]) .icon-btn-circle:hover{
  background:linear-gradient(155deg,#4EA4CC,#6DB8E0) !important;
  color:#fff !important;
  border-color:transparent !important;
}

/* Нижняя навигация */
:root:not([data-theme="light"]) .bottom-nav,
:root:not([data-theme="light"]) .comm-nav{
  background:linear-gradient(180deg, rgba(10,26,72,.95), rgba(0,0,42,.98)) !important;
  border-top-color:rgba(78,164,204,.22) !important;
}
:root:not([data-theme="light"]) .nav-btn{ color:#6D82A4 !important }
:root:not([data-theme="light"]) .nav-btn.active{ color:#4EA4CC !important }
:root:not([data-theme="light"]) .nav-btn.primary .nav-icon{
  background:linear-gradient(135deg,#1A3F75,#4EA4CC) !important;
}

/* Табы */
:root:not([data-theme="light"]) .comm-tabs-box,
:root:not([data-theme="light"]) .friends-tabs,
:root:not([data-theme="light"]) .tabs,
:root:not([data-theme="light"]) .wallet-tabs{
  background:rgba(13,29,69,.7) !important;
  border-color:rgba(78,164,204,.20) !important;
}
:root:not([data-theme="light"]) .comm-tabs-indicator,
:root:not([data-theme="light"]) .friends-tabs-ind,
:root:not([data-theme="light"]) .tabs-ind,
:root:not([data-theme="light"]) .wallet-tabs-ind{
  background:linear-gradient(90deg,#1A3F75 0%,#4EA4CC 50%,#6DB8E0 100%) !important;
}

/* Пузыри чата */
:root:not([data-theme="light"]) .msg-bubble{
  background:linear-gradient(155deg, rgba(26,63,117,.9), rgba(13,29,69,.95)) !important;
  border-color:rgba(78,164,204,.20) !important;
}
:root:not([data-theme="light"]) .msg-row.me .msg-bubble{
  background:linear-gradient(135deg,#1A3F75,#4EA4CC) !important;
  border-color:transparent !important;
}

/* Drawer */
:root:not([data-theme="light"]) .drawer{
  background:linear-gradient(175deg,#0A1A48,#00002A) !important;
  border-right-color:rgba(78,164,204,.25) !important;
}
:root:not([data-theme="light"]) .drawer-nav-item{
  background:rgba(26,63,117,.35) !important;
  border-color:rgba(78,164,204,.20) !important;
}
:root:not([data-theme="light"]) .drawer-nav-item:hover{
  background:rgba(78,164,204,.22) !important;
  border-color:rgba(78,164,204,.5) !important;
}

/* Sheet */
:root:not([data-theme="light"]) .sheet{
  background:linear-gradient(180deg,#0A1A48,#00002A) !important;
  border-top-color:rgba(78,164,204,.3) !important;
}

/* Оверлей пользователя / тосты */
:root:not([data-theme="light"]) .user-overlay-btn{
  background:rgba(26,63,117,.55) !important;
  border-color:rgba(78,164,204,.25) !important;
}
:root:not([data-theme="light"]) .toast{
  background:linear-gradient(135deg,#1A3F75,#4EA4CC) !important;
}

/* Кошелёк */
:root:not([data-theme="light"]) .wallet-balance{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(78,164,204,.30) 0%, transparent 60%),
    linear-gradient(135deg,#1A3F75,#0A1A48) !important;
  border-color:rgba(78,164,204,.5) !important;
}
:root:not([data-theme="light"]) .wlb-num{ color:#6DB8E0 !important }


/* ============================================================
   КНОПКА УВЕДОМЛЕНИЙ — вернуть колокольчик
   ============================================================ */
.notif-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#8FA8D4 !important;
}
.notif-btn span{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:inherit !important;
}
:root[data-theme="light"] .notif-btn{
  color:#2563eb !important;
}


/* ============================================================
   КАНОНИЧНАЯ ТЁМНАЯ ПАЛИТРА (возврат к исходной)
   ============================================================ */
:root{
  --bg-app:#04060b;
  --bg-phone-1:#0a1122;
  --bg-phone-2:#060a14;
  --surface-1:#0c1424;
  --surface-2:#131c33;
  --surface-3:#1a2542;
  --surface-4:#22305a;
  --line:rgba(120,150,210,0.10);
  --line-strong:rgba(120,150,210,0.22);
  --text:#d6deee;
  --text-dim:#8a97b3;
  --text-muted:#5c6880;
  --accent:#4a6db8;
  --accent-2:#6b8fd4;
  --accent-3:#93b1e5;
  --accent-grad:linear-gradient(135deg,#3a5aa0 0%,#5d81c8 100%);
}

:root:not([data-theme="light"]) body{
  background:#04060b !important;
}
:root:not([data-theme="light"]) body::before{
  background:linear-gradient(130deg,#050c1f 0%,#071530 20%,#0a1e44 40%,#0e2a5e 60%,#0a1e44 80%,#071530 100%) !important;
  background-size:400% 400% !important;
  animation:flowBg 22s ease-in-out infinite !important;
}
:root:not([data-theme="light"]) body::after{
  background:radial-gradient(ellipse at 50% 0%, rgba(90,166,255,.28) 0%, rgba(59,130,246,.14) 30%, rgba(10,22,60,0) 70%) !important;
  animation:flowGlow 16s ease-in-out infinite !important;
  filter:blur(30px) !important;
}
:root:not([data-theme="light"]) .phone{
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(74,109,184,.14) 0%,transparent 55%),
    radial-gradient(90% 50% at 50% 100%,rgba(74,109,184,.08) 0%,transparent 60%),
    linear-gradient(170deg,#0a1122 0%,#060a14 60%,#03060d 100%) !important;
  box-shadow:0 32px 80px rgba(0,0,0,.8),inset 0 0 0 1px rgba(120,150,210,.06) !important;
}


/* ============================================================
   ВСЕ ИКОНКИ БЕЛЫЕ
   ============================================================ */
.uix-icon,
.uix-icon svg,
.uix-icon svg path,
.nav-icon.uix-icon,
.nav-icon.uix-icon svg,
.nav-icon.uix-icon svg path{
  color:#ffffff !important;
  stroke:#ffffff !important;
  fill:none !important;
}

.nav-btn .nav-icon.uix-icon{
  color:#ffffff !important;
}
.nav-btn.active .nav-icon.uix-icon{
  color:#ffffff !important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.7)) !important;
  transform:scale(1.1) !important;
}


/* ============================================================
   ПАЛИТРЫ АКЦЕНТОВ — выбор в настройках
   ============================================================ */

/* По умолчанию (сине-фиолетовая) — как сейчас */
:root, :root[data-accent="default"]{
  --accent:#4a6db8;
  --accent-2:#6b8fd4;
  --accent-3:#93b1e5;
  --accent-grad:linear-gradient(135deg,#3a5aa0 0%,#5d81c8 100%);
}

/* Амино — фиолетово-розовая */
:root[data-accent="amino"]{
  --accent:#a866c8;
  --accent-2:#c088e0;
  --accent-3:#dbb0ee;
  --accent-grad:linear-gradient(135deg,#7a3aa0 0%,#a866c8 100%);
}

/* Классика — чёрно-белая */
:root[data-accent="classic"]{
  --accent:#a0a0a0;
  --accent-2:#c8c8c8;
  --accent-3:#e0e0e0;
  --accent-grad:linear-gradient(135deg,#5a5a5a 0%,#8a8a8a 100%);
}

/* Красная */
:root[data-accent="red"]{
  --accent:#d45a5a;
  --accent-2:#e88080;
  --accent-3:#f0a8a8;
  --accent-grad:linear-gradient(135deg,#a83636 0%,#d45a5a 100%);
}

/* Применение к кнопкам и активным элементам */
.btn-outline.solid,
.btn.primary,
.comm-top-join,
.comm-nav-btn.primary,
.chat-send,
.user-overlay-btn.primary,
.wallet-balance .btn-outline.solid,
.edit-actions .btn-outline.solid{
  background:var(--accent-grad) !important;
}

.nav-btn.active .nav-icon,
.nav-btn.active{
  color:var(--accent-2) !important;
}

.nav-btn.primary .nav-icon{
  background:var(--accent-grad) !important;
}

.comm-tabs-indicator,
.friends-tabs-ind,
.tabs-ind,
.wallet-tabs-ind{
  background-image:var(--accent-grad) !important;
  background:var(--accent-grad) !important;
}

.comm-top-action.primary,
.comm-staff-gear:hover{
  background:var(--accent-grad) !important;
}

.icon-btn-circle:hover{
  background:var(--accent-grad) !important;
  color:#fff !important;
  border-color:transparent !important;
}

.toast{
  background:var(--accent-grad) !important;
}

.drawer-nav-item:hover{
  border-color:var(--accent-2) !important;
}

.profile-actions-row .coins-badge{
  border-color:var(--accent-2) !important;
}

/* Светлая тема — акценты тоже меняются */
:root[data-theme="light"][data-accent="amino"]{
  --accent:#8a3aa8;
  --accent-2:#a866c8;
  --accent-3:#c890e0;
}
:root[data-theme="light"][data-accent="classic"]{
  --accent:#5a5a5a;
  --accent-2:#8a8a8a;
  --accent-3:#b0b0b0;
}
:root[data-theme="light"][data-accent="red"]{
  --accent:#a83636;
  --accent-2:#d45a5a;
  --accent-3:#e88080;
}

/* ============================================================
   ПИКЕР ЦВЕТА ТЕМЫ В НАСТРОЙКАХ
   ============================================================ */
.accent-picker{
  display:flex;
  gap:12px;
  padding:14px;
  flex-wrap:wrap;
  justify-content:center;
  border-top:1px solid rgba(120,150,210,.1);
}
.accent-item{
  width:52px;
  height:52px;
  border-radius:50%;
  cursor:pointer;
  border:2px solid transparent;
  transition:.2s cubic-bezier(.3,.7,.3,1);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.accent-item:hover{
  transform:scale(1.08);
}
.accent-item.active{
  border-color:#ffffff;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.35),
    0 0 16px rgba(255,255,255,.4);
}
.accent-item.active::after{
  content:'✓';
  position:absolute;
  color:#fff;
  font-size:20px;
  font-weight:900;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.accent-item .accent-label{
  position:absolute;
  bottom:-18px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  color:var(--text-dim);
  white-space:nowrap;
  font-weight:600;
}
.accent-item[data-accent="default"]{ background:linear-gradient(135deg,#3a5aa0,#5d81c8); }
.accent-item[data-accent="amino"]{ background:linear-gradient(135deg,#7a3aa0,#a866c8); }
.accent-item[data-accent="classic"]{ background:linear-gradient(135deg,#5a5a5a,#8a8a8a); }
.accent-item[data-accent="red"]{ background:linear-gradient(135deg,#a83636,#d45a5a); }


/* ============================================================
   ПИКЕР АКЦЕНТА — компактные кружки
   ============================================================ */
.accent-picker{
  display:flex !important;
  gap:10px !important;
  padding:12px 14px 20px !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
}
.accent-picker::-webkit-scrollbar{ display:none !important }

.accent-item{
  width:36px !important;
  height:36px !important;
  border-radius:50% !important;
  border:2px solid transparent !important;
  flex-shrink:0 !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:transform .18s cubic-bezier(.3,.7,.3,1), border-color .18s, box-shadow .22s !important;
  cursor:pointer !important;
}
.accent-item:hover{
  transform:scale(1.12) !important;
}
.accent-item.active{
  border-color:#ffffff !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.4),
    0 0 12px rgba(255,255,255,.5) !important;
}
.accent-item.active::after{
  content:'✓' !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:900 !important;
  text-shadow:0 1px 3px rgba(0,0,0,.7) !important;
}

.accent-item .accent-label{
  position:absolute !important;
  bottom:-16px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  font-size:9.5px !important;
  color:var(--text-dim) !important;
  white-space:nowrap !important;
  font-weight:600 !important;
  letter-spacing:.2px !important;
}

/* Светлая тема — активный кружок с тёмной обводкой */
:root[data-theme="light"] .accent-item.active{
  border-color:rgba(0,0,0,.6) !important;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.2),
    0 2px 8px rgba(0,0,0,.2) !important;
}
:root[data-theme="light"] .accent-item.active::after{
  text-shadow:0 1px 3px rgba(255,255,255,.9) !important;
}


/* ПИКЕР — ЦЕНТР */
.accent-picker{
  justify-content:center !important;
  flex-wrap:wrap !important;
  overflow-x:visible !important;
  gap:12px !important;
  padding:14px 14px 26px !important;
}


/* ============================================================
   ТЕМА АМИНО (полная) — фиолетово-розовая
   ============================================================ */
:root[data-accent="amino"]:not([data-theme="light"]){
  --bg-app:#150724;
  --bg-phone-1:#1a0a2a;
  --bg-phone-2:#0f041a;
  --surface-1:#251038;
  --surface-2:#2e1442;
  --surface-3:#3a1a52;
  --surface-4:#4a2668;
  --line:rgba(200,120,230,.12);
  --line-strong:rgba(200,120,230,.28);
  --text:#f0e0f5;
  --text-dim:#c8a0d8;
  --text-muted:#8a68a0;
  --accent:#a866c8;
  --accent-2:#c088e0;
  --accent-3:#dbb0ee;
  --accent-grad:linear-gradient(135deg,#7a3aa0 0%,#c088e0 100%);
}

:root[data-accent="amino"]:not([data-theme="light"]) body{
  background:#150724 !important;
}
:root[data-accent="amino"]:not([data-theme="light"]) body::before{
  background:linear-gradient(130deg,#150724 0%,#251038 25%,#3a1a52 50%,#251038 75%,#150724 100%) !important;
  background-size:400% 400% !important;
  animation:flowBg 22s ease-in-out infinite !important;
}
:root[data-accent="amino"]:not([data-theme="light"]) body::after{
  background:radial-gradient(ellipse at 50% 0%, rgba(200,120,230,.28) 0%, rgba(122,58,160,.14) 30%, transparent 70%) !important;
  animation:flowGlow 16s ease-in-out infinite !important;
  filter:blur(30px) !important;
}
:root[data-accent="amino"]:not([data-theme="light"]) .phone{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(200,120,230,.14) 0%, transparent 55%),
    radial-gradient(90% 50% at 50% 100%, rgba(122,58,160,.10) 0%, transparent 60%),
    linear-gradient(170deg,#1a0a2a 0%,#0f041a 60%,#08020f 100%) !important;
  box-shadow:0 32px 80px rgba(0,0,0,.85), inset 0 0 0 1px rgba(200,120,230,.10) !important;
}
:root[data-accent="amino"]:not([data-theme="light"]) .screen::-webkit-scrollbar-thumb{
  background:rgba(200,120,230,.3) !important;
}

/* Карточки */
:root[data-accent="amino"]:not([data-theme="light"]) .card,
:root[data-accent="amino"]:not([data-theme="light"]) .chat-row,
:root[data-accent="amino"]:not([data-theme="light"]) .user-row,
:root[data-accent="amino"]:not([data-theme="light"]) .comm-chat-row,
:root[data-accent="amino"]:not([data-theme="light"]) .comm-search-row,
:root[data-accent="amino"]:not([data-theme="light"]) .comm-hero,
:root[data-accent="amino"]:not([data-theme="light"]) .comm-leader,
:root[data-accent="amino"]:not([data-theme="light"]) .comm-tile-916,
:root[data-accent="amino"]:not([data-theme="light"]) .my-comm-card,
:root[data-accent="amino"]:not([data-theme="light"]) .comm-card-lg,
:root[data-accent="amino"]:not([data-theme="light"]) .notif-row,
:root[data-accent="amino"]:not([data-theme="light"]) .wall-card,
:root[data-accent="amino"]:not([data-theme="light"]) .diag-tile,
:root[data-accent="amino"]:not([data-theme="light"]) .stat-tile,
:root[data-accent="amino"]:not([data-theme="light"]) .staff-row,
:root[data-accent="amino"]:not([data-theme="light"]) .settings-section,
:root[data-accent="amino"]:not([data-theme="light"]) .shop-frame,
:root[data-accent="amino"]:not([data-theme="light"]) .frame-item,
:root[data-accent="amino"]:not([data-theme="light"]) .cp-card,
:root[data-accent="amino"]:not([data-theme="light"]) .chat-bubble-card,
:root[data-accent="amino"]:not([data-theme="light"]) .pod-main,
:root[data-accent="amino"]:not([data-theme="light"]) .pod-mini,
:root[data-accent="amino"]:not([data-theme="light"]) .rule-card,
:root[data-accent="amino"]:not([data-theme="light"]) .rule-add-box,
:root[data-accent="amino"]:not([data-theme="light"]) .leader-card,
:root[data-accent="amino"]:not([data-theme="light"]) .edit-top-item,
:root[data-accent="amino"]:not([data-theme="light"]) .profile-pinned-card{
  background:linear-gradient(155deg, rgba(58,26,82,.75), rgba(37,16,56,.85)) !important;
  border-color:rgba(200,120,230,.20) !important;
}

/* Инпуты */
:root[data-accent="amino"]:not([data-theme="light"]) .input,
:root[data-accent="amino"]:not([data-theme="light"]) .search,
:root[data-accent="amino"]:not([data-theme="light"]) textarea.input{
  background:linear-gradient(180deg, rgba(46,20,66,.9), rgba(37,16,56,.95)) !important;
  border-color:rgba(200,120,230,.30) !important;
  color:#f0e0f5 !important;
}
:root[data-accent="amino"]:not([data-theme="light"]) .input:focus,
:root[data-accent="amino"]:not([data-theme="light"]) .search:focus{
  border-color:rgba(200,120,230,.65) !important;
  box-shadow:0 0 0 3px rgba(200,120,230,.18) !important;
}

/* Хедер сообщества */
:root[data-accent="amino"]:not([data-theme="light"]) .comm-top-back,
:root[data-accent="amino"]:not([data-theme="light"]) .comm-top-square,
:root[data-accent="amino"]:not([data-theme="light"]) .comm-staff-btn,
:root[data-accent="amino"]:not([data-theme="light"]) .icon-btn-circle{
  background:linear-gradient(155deg, rgba(58,26,82,.9), rgba(37,16,56,.95)) !important;
  border-color:rgba(200,120,230,.35) !important;
  color:#dbb0ee !important;
}
:root[data-accent="amino"]:not([data-theme="light"]) .comm-top-back:hover,
:root[data-accent="amino"]:not([data-theme="light"]) .comm-top-square:hover,
:root[data-accent="amino"]:not([data-theme="light"]) .comm-staff-btn:hover,
:root[data-accent="amino"]:not([data-theme="light"]) .icon-btn-circle:hover{
  background:linear-gradient(155deg,#a866c8,#c088e0) !important;
  color:#fff !important;
  border-color:transparent !important;
}

/* Навигация */
:root[data-accent="amino"]:not([data-theme="light"]) .bottom-nav,
:root[data-accent="amino"]:not([data-theme="light"]) .comm-nav{
  background:linear-gradient(180deg, rgba(26,10,42,.95), rgba(15,4,26,.98)) !important;
  border-top-color:rgba(200,120,230,.22) !important;
}

/* Табы */
:root[data-accent="amino"]:not([data-theme="light"]) .comm-tabs-box,
:root[data-accent="amino"]:not([data-theme="light"]) .friends-tabs,
:root[data-accent="amino"]:not([data-theme="light"]) .tabs,
:root[data-accent="amino"]:not([data-theme="light"]) .wallet-tabs{
  background:rgba(37,16,56,.7) !important;
  border-color:rgba(200,120,230,.20) !important;
}

/* Пузыри чата */
:root[data-accent="amino"]:not([data-theme="light"]) .msg-bubble{
  background:linear-gradient(155deg, rgba(58,26,82,.85), rgba(37,16,56,.92)) !important;
  border-color:rgba(200,120,230,.20) !important;
}
:root[data-accent="amino"]:not([data-theme="light"]) .msg-row.me .msg-bubble{
  background:linear-gradient(135deg,#7a3aa0,#c088e0) !important;
  border-color:transparent !important;
}

/* Drawer / Sheet */
:root[data-accent="amino"]:not([data-theme="light"]) .drawer{
  background:linear-gradient(175deg,#1a0a2a,#0f041a) !important;
  border-right-color:rgba(200,120,230,.25) !important;
}
:root[data-accent="amino"]:not([data-theme="light"]) .drawer-nav-item{
  background:rgba(58,26,82,.35) !important;
  border-color:rgba(200,120,230,.20) !important;
}
:root[data-accent="amino"]:not([data-theme="light"]) .drawer-nav-item:hover{
  background:rgba(200,120,230,.22) !important;
  border-color:rgba(200,120,230,.5) !important;
}
:root[data-accent="amino"]:not([data-theme="light"]) .sheet{
  background:linear-gradient(180deg,#1a0a2a,#0f041a) !important;
  border-top-color:rgba(200,120,230,.3) !important;
}

/* Кошелёк */
:root[data-accent="amino"]:not([data-theme="light"]) .wallet-balance{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(200,120,230,.28) 0%, transparent 60%),
    linear-gradient(135deg,#3a1a52,#1a0a2a) !important;
  border-color:rgba(200,120,230,.45) !important;
}
:root[data-accent="amino"]:not([data-theme="light"]) .wlb-num{ color:#c088e0 !important }


/* ============================================================
   ТЕМА КЛАССИКА (полная) — чёрно-белая
   ============================================================ */
:root[data-accent="classic"]:not([data-theme="light"]){
  --bg-app:#0a0a0a;
  --bg-phone-1:#141414;
  --bg-phone-2:#0a0a0a;
  --surface-1:#141414;
  --surface-2:#1a1a1a;
  --surface-3:#222222;
  --surface-4:#2e2e2e;
  --line:rgba(200,200,200,.10);
  --line-strong:rgba(200,200,200,.22);
  --text:#e8e8e8;
  --text-dim:#a0a0a0;
  --text-muted:#686868;
  --accent:#a0a0a0;
  --accent-2:#c8c8c8;
  --accent-3:#e0e0e0;
  --accent-grad:linear-gradient(135deg,#4a4a4a 0%,#8a8a8a 100%);
}

:root[data-accent="classic"]:not([data-theme="light"]) body{
  background:#0a0a0a !important;
}
:root[data-accent="classic"]:not([data-theme="light"]) body::before{
  background:linear-gradient(130deg,#0a0a0a 0%,#141414 25%,#1a1a1a 50%,#141414 75%,#0a0a0a 100%) !important;
  background-size:400% 400% !important;
  animation:flowBg 22s ease-in-out infinite !important;
}
:root[data-accent="classic"]:not([data-theme="light"]) body::after{
  background:radial-gradient(ellipse at 50% 0%, rgba(200,200,200,.15) 0%, rgba(100,100,100,.08) 30%, transparent 70%) !important;
  animation:flowGlow 16s ease-in-out infinite !important;
  filter:blur(30px) !important;
}
:root[data-accent="classic"]:not([data-theme="light"]) .phone{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(200,200,200,.08) 0%, transparent 55%),
    radial-gradient(90% 50% at 50% 100%, rgba(100,100,100,.06) 0%, transparent 60%),
    linear-gradient(170deg,#141414 0%,#0a0a0a 60%,#050505 100%) !important;
  box-shadow:0 32px 80px rgba(0,0,0,.9), inset 0 0 0 1px rgba(200,200,200,.06) !important;
}
:root[data-accent="classic"]:not([data-theme="light"]) .screen::-webkit-scrollbar-thumb{
  background:rgba(200,200,200,.25) !important;
}

/* Карточки */
:root[data-accent="classic"]:not([data-theme="light"]) .card,
:root[data-accent="classic"]:not([data-theme="light"]) .chat-row,
:root[data-accent="classic"]:not([data-theme="light"]) .user-row,
:root[data-accent="classic"]:not([data-theme="light"]) .comm-chat-row,
:root[data-accent="classic"]:not([data-theme="light"]) .comm-search-row,
:root[data-accent="classic"]:not([data-theme="light"]) .comm-hero,
:root[data-accent="classic"]:not([data-theme="light"]) .comm-leader,
:root[data-accent="classic"]:not([data-theme="light"]) .comm-tile-916,
:root[data-accent="classic"]:not([data-theme="light"]) .my-comm-card,
:root[data-accent="classic"]:not([data-theme="light"]) .comm-card-lg,
:root[data-accent="classic"]:not([data-theme="light"]) .notif-row,
:root[data-accent="classic"]:not([data-theme="light"]) .wall-card,
:root[data-accent="classic"]:not([data-theme="light"]) .diag-tile,
:root[data-accent="classic"]:not([data-theme="light"]) .stat-tile,
:root[data-accent="classic"]:not([data-theme="light"]) .staff-row,
:root[data-accent="classic"]:not([data-theme="light"]) .settings-section,
:root[data-accent="classic"]:not([data-theme="light"]) .shop-frame,
:root[data-accent="classic"]:not([data-theme="light"]) .frame-item,
:root[data-accent="classic"]:not([data-theme="light"]) .cp-card,
:root[data-accent="classic"]:not([data-theme="light"]) .chat-bubble-card,
:root[data-accent="classic"]:not([data-theme="light"]) .pod-main,
:root[data-accent="classic"]:not([data-theme="light"]) .pod-mini,
:root[data-accent="classic"]:not([data-theme="light"]) .rule-card,
:root[data-accent="classic"]:not([data-theme="light"]) .rule-add-box,
:root[data-accent="classic"]:not([data-theme="light"]) .leader-card,
:root[data-accent="classic"]:not([data-theme="light"]) .edit-top-item,
:root[data-accent="classic"]:not([data-theme="light"]) .profile-pinned-card{
  background:linear-gradient(155deg, rgba(34,34,34,.75), rgba(20,20,20,.85)) !important;
  border-color:rgba(200,200,200,.15) !important;
}

/* Инпуты */
:root[data-accent="classic"]:not([data-theme="light"]) .input,
:root[data-accent="classic"]:not([data-theme="light"]) .search,
:root[data-accent="classic"]:not([data-theme="light"]) textarea.input{
  background:linear-gradient(180deg, rgba(34,34,34,.9), rgba(20,20,20,.95)) !important;
  border-color:rgba(200,200,200,.25) !important;
  color:#e8e8e8 !important;
}
:root[data-accent="classic"]:not([data-theme="light"]) .input:focus,
:root[data-accent="classic"]:not([data-theme="light"]) .search:focus{
  border-color:rgba(200,200,200,.55) !important;
  box-shadow:0 0 0 3px rgba(200,200,200,.15) !important;
}

/* Хедер сообщества */
:root[data-accent="classic"]:not([data-theme="light"]) .comm-top-back,
:root[data-accent="classic"]:not([data-theme="light"]) .comm-top-square,
:root[data-accent="classic"]:not([data-theme="light"]) .comm-staff-btn,
:root[data-accent="classic"]:not([data-theme="light"]) .icon-btn-circle{
  background:linear-gradient(155deg, rgba(34,34,34,.9), rgba(20,20,20,.95)) !important;
  border-color:rgba(200,200,200,.30) !important;
  color:#e0e0e0 !important;
}
:root[data-accent="classic"]:not([data-theme="light"]) .comm-top-back:hover,
:root[data-accent="classic"]:not([data-theme="light"]) .comm-top-square:hover,
:root[data-accent="classic"]:not([data-theme="light"]) .comm-staff-btn:hover,
:root[data-accent="classic"]:not([data-theme="light"]) .icon-btn-circle:hover{
  background:linear-gradient(155deg,#8a8a8a,#c8c8c8) !important;
  color:#0a0a0a !important;
  border-color:transparent !important;
}

/* Навигация */
:root[data-accent="classic"]:not([data-theme="light"]) .bottom-nav,
:root[data-accent="classic"]:not([data-theme="light"]) .comm-nav{
  background:linear-gradient(180deg, rgba(20,20,20,.95), rgba(10,10,10,.98)) !important;
  border-top-color:rgba(200,200,200,.18) !important;
}

/* Табы */
:root[data-accent="classic"]:not([data-theme="light"]) .comm-tabs-box,
:root[data-accent="classic"]:not([data-theme="light"]) .friends-tabs,
:root[data-accent="classic"]:not([data-theme="light"]) .tabs,
:root[data-accent="classic"]:not([data-theme="light"]) .wallet-tabs{
  background:rgba(20,20,20,.7) !important;
  border-color:rgba(200,200,200,.15) !important;
}

/* Пузыри чата */
:root[data-accent="classic"]:not([data-theme="light"]) .msg-bubble{
  background:linear-gradient(155deg, rgba(34,34,34,.9), rgba(20,20,20,.95)) !important;
  border-color:rgba(200,200,200,.15) !important;
}
:root[data-accent="classic"]:not([data-theme="light"]) .msg-row.me .msg-bubble{
  background:linear-gradient(135deg,#4a4a4a,#8a8a8a) !important;
  border-color:transparent !important;
}

/* Drawer / Sheet */
:root[data-accent="classic"]:not([data-theme="light"]) .drawer{
  background:linear-gradient(175deg,#141414,#0a0a0a) !important;
  border-right-color:rgba(200,200,200,.20) !important;
}
:root[data-accent="classic"]:not([data-theme="light"]) .drawer-nav-item{
  background:rgba(34,34,34,.35) !important;
  border-color:rgba(200,200,200,.15) !important;
}
:root[data-accent="classic"]:not([data-theme="light"]) .drawer-nav-item:hover{
  background:rgba(200,200,200,.15) !important;
  border-color:rgba(200,200,200,.4) !important;
}
:root[data-accent="classic"]:not([data-theme="light"]) .sheet{
  background:linear-gradient(180deg,#141414,#0a0a0a) !important;
  border-top-color:rgba(200,200,200,.25) !important;
}

/* Кошелёк */
:root[data-accent="classic"]:not([data-theme="light"]) .wallet-balance{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(200,200,200,.20) 0%, transparent 60%),
    linear-gradient(135deg,#222222,#141414) !important;
  border-color:rgba(200,200,200,.4) !important;
}
:root[data-accent="classic"]:not([data-theme="light"]) .wlb-num{ color:#c8c8c8 !important }


/* ============================================================
   ТЕМА КРАСНАЯ (полная)
   ============================================================ */
:root[data-accent="red"]:not([data-theme="light"]){
  --bg-app:#1a0505;
  --bg-phone-1:#2a0c0c;
  --bg-phone-2:#150404;
  --surface-1:#2a0c0c;
  --surface-2:#381010;
  --surface-3:#4a1a1a;
  --surface-4:#5e2424;
  --line:rgba(220,120,120,.12);
  --line-strong:rgba(220,120,120,.28);
  --text:#f5e0e0;
  --text-dim:#d8a0a0;
  --text-muted:#a06868;
  --accent:#d45a5a;
  --accent-2:#e88080;
  --accent-3:#f0a8a8;
  --accent-grad:linear-gradient(135deg,#a83636 0%,#e88080 100%);
}

:root[data-accent="red"]:not([data-theme="light"]) body{
  background:#1a0505 !important;
}
:root[data-accent="red"]:not([data-theme="light"]) body::before{
  background:linear-gradient(130deg,#1a0505 0%,#2a0c0c 25%,#4a1a1a 50%,#2a0c0c 75%,#1a0505 100%) !important;
  background-size:400% 400% !important;
  animation:flowBg 22s ease-in-out infinite !important;
}
:root[data-accent="red"]:not([data-theme="light"]) body::after{
  background:radial-gradient(ellipse at 50% 0%, rgba(220,120,120,.28) 0%, rgba(168,54,54,.14) 30%, transparent 70%) !important;
  animation:flowGlow 16s ease-in-out infinite !important;
  filter:blur(30px) !important;
}
:root[data-accent="red"]:not([data-theme="light"]) .phone{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(220,120,120,.14) 0%, transparent 55%),
    radial-gradient(90% 50% at 50% 100%, rgba(168,54,54,.10) 0%, transparent 60%),
    linear-gradient(170deg,#2a0c0c 0%,#150404 60%,#0a0202 100%) !important;
  box-shadow:0 32px 80px rgba(0,0,0,.9), inset 0 0 0 1px rgba(220,120,120,.10) !important;
}
:root[data-accent="red"]:not([data-theme="light"]) .screen::-webkit-scrollbar-thumb{
  background:rgba(220,120,120,.3) !important;
}

/* Карточки */
:root[data-accent="red"]:not([data-theme="light"]) .card,
:root[data-accent="red"]:not([data-theme="light"]) .chat-row,
:root[data-accent="red"]:not([data-theme="light"]) .user-row,
:root[data-accent="red"]:not([data-theme="light"]) .comm-chat-row,
:root[data-accent="red"]:not([data-theme="light"]) .comm-search-row,
:root[data-accent="red"]:not([data-theme="light"]) .comm-hero,
:root[data-accent="red"]:not([data-theme="light"]) .comm-leader,
:root[data-accent="red"]:not([data-theme="light"]) .comm-tile-916,
:root[data-accent="red"]:not([data-theme="light"]) .my-comm-card,
:root[data-accent="red"]:not([data-theme="light"]) .comm-card-lg,
:root[data-accent="red"]:not([data-theme="light"]) .notif-row,
:root[data-accent="red"]:not([data-theme="light"]) .wall-card,
:root[data-accent="red"]:not([data-theme="light"]) .diag-tile,
:root[data-accent="red"]:not([data-theme="light"]) .stat-tile,
:root[data-accent="red"]:not([data-theme="light"]) .staff-row,
:root[data-accent="red"]:not([data-theme="light"]) .settings-section,
:root[data-accent="red"]:not([data-theme="light"]) .shop-frame,
:root[data-accent="red"]:not([data-theme="light"]) .frame-item,
:root[data-accent="red"]:not([data-theme="light"]) .cp-card,
:root[data-accent="red"]:not([data-theme="light"]) .chat-bubble-card,
:root[data-accent="red"]:not([data-theme="light"]) .pod-main,
:root[data-accent="red"]:not([data-theme="light"]) .pod-mini,
:root[data-accent="red"]:not([data-theme="light"]) .rule-card,
:root[data-accent="red"]:not([data-theme="light"]) .rule-add-box,
:root[data-accent="red"]:not([data-theme="light"]) .leader-card,
:root[data-accent="red"]:not([data-theme="light"]) .edit-top-item,
:root[data-accent="red"]:not([data-theme="light"]) .profile-pinned-card{
  background:linear-gradient(155deg, rgba(74,26,26,.75), rgba(42,12,12,.85)) !important;
  border-color:rgba(220,120,120,.20) !important;
}

/* Инпуты */
:root[data-accent="red"]:not([data-theme="light"]) .input,
:root[data-accent="red"]:not([data-theme="light"]) .search,
:root[data-accent="red"]:not([data-theme="light"]) textarea.input{
  background:linear-gradient(180deg, rgba(56,16,16,.9), rgba(42,12,12,.95)) !important;
  border-color:rgba(220,120,120,.30) !important;
  color:#f5e0e0 !important;
}
:root[data-accent="red"]:not([data-theme="light"]) .input:focus,
:root[data-accent="red"]:not([data-theme="light"]) .search:focus{
  border-color:rgba(220,120,120,.65) !important;
  box-shadow:0 0 0 3px rgba(220,120,120,.18) !important;
}

/* Хедер сообщества */
:root[data-accent="red"]:not([data-theme="light"]) .comm-top-back,
:root[data-accent="red"]:not([data-theme="light"]) .comm-top-square,
:root[data-accent="red"]:not([data-theme="light"]) .comm-staff-btn,
:root[data-accent="red"]:not([data-theme="light"]) .icon-btn-circle{
  background:linear-gradient(155deg, rgba(74,26,26,.9), rgba(42,12,12,.95)) !important;
  border-color:rgba(220,120,120,.35) !important;
  color:#f0a8a8 !important;
}
:root[data-accent="red"]:not([data-theme="light"]) .comm-top-back:hover,
:root[data-accent="red"]:not([data-theme="light"]) .comm-top-square:hover,
:root[data-accent="red"]:not([data-theme="light"]) .comm-staff-btn:hover,
:root[data-accent="red"]:not([data-theme="light"]) .icon-btn-circle:hover{
  background:linear-gradient(155deg,#d45a5a,#e88080) !important;
  color:#fff !important;
  border-color:transparent !important;
}

/* Навигация */
:root[data-accent="red"]:not([data-theme="light"]) .bottom-nav,
:root[data-accent="red"]:not([data-theme="light"]) .comm-nav{
  background:linear-gradient(180deg, rgba(42,12,12,.95), rgba(21,4,4,.98)) !important;
  border-top-color:rgba(220,120,120,.22) !important;
}

/* Табы */
:root[data-accent="red"]:not([data-theme="light"]) .comm-tabs-box,
:root[data-accent="red"]:not([data-theme="light"]) .friends-tabs,
:root[data-accent="red"]:not([data-theme="light"]) .tabs,
:root[data-accent="red"]:not([data-theme="light"]) .wallet-tabs{
  background:rgba(42,12,12,.7) !important;
  border-color:rgba(220,120,120,.20) !important;
}

/* Пузыри чата */
:root[data-accent="red"]:not([data-theme="light"]) .msg-bubble{
  background:linear-gradient(155deg, rgba(74,26,26,.85), rgba(42,12,12,.92)) !important;
  border-color:rgba(220,120,120,.20) !important;
}
:root[data-accent="red"]:not([data-theme="light"]) .msg-row.me .msg-bubble{
  background:linear-gradient(135deg,#a83636,#e88080) !important;
  border-color:transparent !important;
}

/* Drawer / Sheet */
:root[data-accent="red"]:not([data-theme="light"]) .drawer{
  background:linear-gradient(175deg,#2a0c0c,#150404) !important;
  border-right-color:rgba(220,120,120,.25) !important;
}
:root[data-accent="red"]:not([data-theme="light"]) .drawer-nav-item{
  background:rgba(74,26,26,.35) !important;
  border-color:rgba(220,120,120,.20) !important;
}
:root[data-accent="red"]:not([data-theme="light"]) .drawer-nav-item:hover{
  background:rgba(220,120,120,.22) !important;
  border-color:rgba(220,120,120,.5) !important;
}
:root[data-accent="red"]:not([data-theme="light"]) .sheet{
  background:linear-gradient(180deg,#2a0c0c,#150404) !important;
  border-top-color:rgba(220,120,120,.3) !important;
}

/* Кошелёк */
:root[data-accent="red"]:not([data-theme="light"]) .wallet-balance{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(220,120,120,.28) 0%, transparent 60%),
    linear-gradient(135deg,#4a1a1a,#1a0505) !important;
  border-color:rgba(220,120,120,.45) !important;
}
:root[data-accent="red"]:not([data-theme="light"]) .wlb-num{ color:#e88080 !important }


/* ============================================================
   КНОПКИ И ГРАДИЕНТЫ ПОД КАЖДУЮ ТЕМУ
   ============================================================ */

/* ============ АМИНО (фиолетово-розовая) ============ */
:root[data-accent="amino"] .btn-outline.solid,
:root[data-accent="amino"] .btn.primary,
:root[data-accent="amino"] .comm-top-join,
:root[data-accent="amino"] .comm-nav-btn.primary,
:root[data-accent="amino"] .chat-send,
:root[data-accent="amino"] .user-overlay-btn.primary,
:root[data-accent="amino"] .edit-actions .btn-outline.solid,
:root[data-accent="amino"] .wallet-balance .btn-outline.solid{
  background:linear-gradient(135deg,#7a3aa0 0%,#c088e0 100%) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:
    0 6px 18px rgba(168,102,200,.4),
    0 2px 8px rgba(200,120,230,.25) !important;
}
:root[data-accent="amino"] .btn-outline.solid:hover,
:root[data-accent="amino"] .btn.primary:hover,
:root[data-accent="amino"] .chat-send:hover{
  box-shadow:
    0 10px 28px rgba(168,102,200,.5),
    0 4px 14px rgba(200,120,230,.3) !important;
  filter:brightness(1.1) !important;
}
:root[data-accent="amino"] .btn-outline{
  background:rgba(168,102,200,.10) !important;
  border-color:rgba(168,102,200,.4) !important;
  color:#dbb0ee !important;
}
:root[data-accent="amino"] .btn-outline:hover{
  background:rgba(168,102,200,.22) !important;
  border-color:rgba(200,120,230,.7) !important;
}
:root[data-accent="amino"] .comm-tabs-indicator,
:root[data-accent="amino"] .friends-tabs-ind,
:root[data-accent="amino"] .tabs-ind,
:root[data-accent="amino"] .wallet-tabs-ind{
  background:linear-gradient(90deg,#7a3aa0 0%,#a866c8 50%,#c088e0 100%) !important;
  box-shadow:0 4px 14px rgba(168,102,200,.45) !important;
}
:root[data-accent="amino"] .nav-btn.active{ color:#c088e0 !important }
:root[data-accent="amino"] .nav-btn.primary .nav-icon{
  background:linear-gradient(135deg,#7a3aa0,#c088e0) !important;
  box-shadow:0 6px 18px rgba(168,102,200,.55) !important;
}
:root[data-accent="amino"] .comm-nav-btn:hover{
  border-color:rgba(168,102,200,.5) !important;
}
:root[data-accent="amino"] .toast{
  background:linear-gradient(135deg,#7a3aa0,#c088e0) !important;
  box-shadow:0 12px 36px rgba(168,102,200,.5) !important;
}
:root[data-accent="amino"] .comm-hero-prog > i,
:root[data-accent="amino"] .comm-banner::after{
  background:linear-gradient(90deg,#7a3aa0,#c088e0) !important;
}
:root[data-accent="amino"] .coins-badge{
  border-color:rgba(200,120,230,.6) !important;
}
:root[data-accent="amino"] .input:focus,
:root[data-accent="amino"] .search:focus{
  border-color:rgba(200,120,230,.7) !important;
  box-shadow:0 0 0 3px rgba(200,120,230,.18) !important;
}
:root[data-accent="amino"] .role-badge.admin{
  background:linear-gradient(90deg,#c088e0,#7a3aa0) !important;
}
:root[data-accent="amino"] .msg-row.me .msg-bubble{
  box-shadow:0 4px 12px rgba(168,102,200,.35) !important;
}

/* ============ КЛАССИКА (чёрно-белая) ============ */
:root[data-accent="classic"] .btn-outline.solid,
:root[data-accent="classic"] .btn.primary,
:root[data-accent="classic"] .comm-top-join,
:root[data-accent="classic"] .comm-nav-btn.primary,
:root[data-accent="classic"] .chat-send,
:root[data-accent="classic"] .user-overlay-btn.primary,
:root[data-accent="classic"] .edit-actions .btn-outline.solid{
  background:linear-gradient(135deg,#4a4a4a 0%,#8a8a8a 100%) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.4),
    0 2px 8px rgba(200,200,200,.12) !important;
}
:root[data-accent="classic"] .btn-outline.solid:hover,
:root[data-accent="classic"] .btn.primary:hover{
  box-shadow:
    0 10px 28px rgba(0,0,0,.5),
    0 4px 14px rgba(200,200,200,.18) !important;
  filter:brightness(1.15) !important;
}
:root[data-accent="classic"] .btn-outline{
  background:rgba(200,200,200,.08) !important;
  border-color:rgba(200,200,200,.35) !important;
  color:#e0e0e0 !important;
}
:root[data-accent="classic"] .btn-outline:hover{
  background:rgba(200,200,200,.18) !important;
}
:root[data-accent="classic"] .comm-tabs-indicator,
:root[data-accent="classic"] .friends-tabs-ind,
:root[data-accent="classic"] .tabs-ind,
:root[data-accent="classic"] .wallet-tabs-ind{
  background:linear-gradient(90deg,#4a4a4a 0%,#8a8a8a 50%,#c8c8c8 100%) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.5) !important;
}
:root[data-accent="classic"] .nav-btn.active{ color:#c8c8c8 !important }
:root[data-accent="classic"] .nav-btn.primary .nav-icon{
  background:linear-gradient(135deg,#4a4a4a,#8a8a8a) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.5) !important;
}
:root[data-accent="classic"] .toast{
  background:linear-gradient(135deg,#3a3a3a,#6a6a6a) !important;
}
:root[data-accent="classic"] .comm-hero-prog > i{
  background:linear-gradient(90deg,#4a4a4a,#8a8a8a) !important;
}
:root[data-accent="classic"] .coins-badge{
  border-color:rgba(200,200,200,.5) !important;
}
:root[data-accent="classic"] .input:focus,
:root[data-accent="classic"] .search:focus{
  border-color:rgba(200,200,200,.6) !important;
  box-shadow:0 0 0 3px rgba(200,200,200,.12) !important;
}
:root[data-accent="classic"] .role-badge.admin{
  background:linear-gradient(90deg,#8a8a8a,#4a4a4a) !important;
}
:root[data-accent="classic"] .msg-row.me .msg-bubble{
  box-shadow:0 4px 12px rgba(0,0,0,.4) !important;
}

/* ============ КРАСНАЯ ============ */
:root[data-accent="red"] .btn-outline.solid,
:root[data-accent="red"] .btn.primary,
:root[data-accent="red"] .comm-top-join,
:root[data-accent="red"] .comm-nav-btn.primary,
:root[data-accent="red"] .chat-send,
:root[data-accent="red"] .user-overlay-btn.primary,
:root[data-accent="red"] .edit-actions .btn-outline.solid{
  background:linear-gradient(135deg,#a83636 0%,#e88080 100%) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:
    0 6px 18px rgba(212,90,90,.4),
    0 2px 8px rgba(168,54,54,.25) !important;
}
:root[data-accent="red"] .btn-outline.solid:hover,
:root[data-accent="red"] .btn.primary:hover,
:root[data-accent="red"] .chat-send:hover{
  box-shadow:
    0 10px 28px rgba(212,90,90,.5),
    0 4px 14px rgba(168,54,54,.3) !important;
  filter:brightness(1.1) !important;
}
:root[data-accent="red"] .btn-outline{
  background:rgba(212,90,90,.10) !important;
  border-color:rgba(212,90,90,.4) !important;
  color:#f0a8a8 !important;
}
:root[data-accent="red"] .btn-outline:hover{
  background:rgba(212,90,90,.22) !important;
  border-color:rgba(220,120,120,.7) !important;
}
:root[data-accent="red"] .comm-tabs-indicator,
:root[data-accent="red"] .friends-tabs-ind,
:root[data-accent="red"] .tabs-ind,
:root[data-accent="red"] .wallet-tabs-ind{
  background:linear-gradient(90deg,#a83636 0%,#d45a5a 50%,#e88080 100%) !important;
  box-shadow:0 4px 14px rgba(212,90,90,.45) !important;
}
:root[data-accent="red"] .nav-btn.active{ color:#e88080 !important }
:root[data-accent="red"] .nav-btn.primary .nav-icon{
  background:linear-gradient(135deg,#a83636,#e88080) !important;
  box-shadow:0 6px 18px rgba(212,90,90,.55) !important;
}
:root[data-accent="red"] .comm-nav-btn:hover{
  border-color:rgba(212,90,90,.5) !important;
}
:root[data-accent="red"] .toast{
  background:linear-gradient(135deg,#a83636,#e88080) !important;
  box-shadow:0 12px 36px rgba(212,90,90,.5) !important;
}
:root[data-accent="red"] .comm-hero-prog > i{
  background:linear-gradient(90deg,#a83636,#e88080) !important;
}
:root[data-accent="red"] .coins-badge{
  border-color:rgba(220,120,120,.6) !important;
}
:root[data-accent="red"] .input:focus,
:root[data-accent="red"] .search:focus{
  border-color:rgba(220,120,120,.7) !important;
  box-shadow:0 0 0 3px rgba(220,120,120,.18) !important;
}
:root[data-accent="red"] .role-badge.admin{
  background:linear-gradient(90deg,#e88080,#a83636) !important;
}
:root[data-accent="red"] .msg-row.me .msg-bubble{
  box-shadow:0 4px 12px rgba(212,90,90,.35) !important;
}


/* ============================================================
   КНОПКИ И ГРАДИЕНТЫ ПОД КАЖДУЮ ТЕМУ
   ============================================================ */

/* ============ АМИНО (фиолетово-розовая) ============ */
:root[data-accent="amino"] .btn-outline.solid,
:root[data-accent="amino"] .btn.primary,
:root[data-accent="amino"] .comm-top-join,
:root[data-accent="amino"] .comm-nav-btn.primary,
:root[data-accent="amino"] .chat-send,
:root[data-accent="amino"] .user-overlay-btn.primary,
:root[data-accent="amino"] .edit-actions .btn-outline.solid,
:root[data-accent="amino"] .wallet-balance .btn-outline.solid{
  background:linear-gradient(135deg,#7a3aa0 0%,#c088e0 100%) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:
    0 6px 18px rgba(168,102,200,.4),
    0 2px 8px rgba(200,120,230,.25) !important;
}
:root[data-accent="amino"] .btn-outline.solid:hover,
:root[data-accent="amino"] .btn.primary:hover,
:root[data-accent="amino"] .chat-send:hover{
  box-shadow:
    0 10px 28px rgba(168,102,200,.5),
    0 4px 14px rgba(200,120,230,.3) !important;
  filter:brightness(1.1) !important;
}
:root[data-accent="amino"] .btn-outline{
  background:rgba(168,102,200,.10) !important;
  border-color:rgba(168,102,200,.4) !important;
  color:#dbb0ee !important;
}
:root[data-accent="amino"] .btn-outline:hover{
  background:rgba(168,102,200,.22) !important;
  border-color:rgba(200,120,230,.7) !important;
}
:root[data-accent="amino"] .comm-tabs-indicator,
:root[data-accent="amino"] .friends-tabs-ind,
:root[data-accent="amino"] .tabs-ind,
:root[data-accent="amino"] .wallet-tabs-ind{
  background:linear-gradient(90deg,#7a3aa0 0%,#a866c8 50%,#c088e0 100%) !important;
  box-shadow:0 4px 14px rgba(168,102,200,.45) !important;
}
:root[data-accent="amino"] .nav-btn.active{ color:#c088e0 !important }
:root[data-accent="amino"] .nav-btn.primary .nav-icon{
  background:linear-gradient(135deg,#7a3aa0,#c088e0) !important;
  box-shadow:0 6px 18px rgba(168,102,200,.55) !important;
}
:root[data-accent="amino"] .comm-nav-btn:hover{
  border-color:rgba(168,102,200,.5) !important;
}
:root[data-accent="amino"] .toast{
  background:linear-gradient(135deg,#7a3aa0,#c088e0) !important;
  box-shadow:0 12px 36px rgba(168,102,200,.5) !important;
}
:root[data-accent="amino"] .comm-hero-prog > i,
:root[data-accent="amino"] .comm-banner::after{
  background:linear-gradient(90deg,#7a3aa0,#c088e0) !important;
}
:root[data-accent="amino"] .coins-badge{
  border-color:rgba(200,120,230,.6) !important;
}
:root[data-accent="amino"] .input:focus,
:root[data-accent="amino"] .search:focus{
  border-color:rgba(200,120,230,.7) !important;
  box-shadow:0 0 0 3px rgba(200,120,230,.18) !important;
}
:root[data-accent="amino"] .role-badge.admin{
  background:linear-gradient(90deg,#c088e0,#7a3aa0) !important;
}
:root[data-accent="amino"] .msg-row.me .msg-bubble{
  box-shadow:0 4px 12px rgba(168,102,200,.35) !important;
}

/* ============ КЛАССИКА (чёрно-белая) ============ */
:root[data-accent="classic"] .btn-outline.solid,
:root[data-accent="classic"] .btn.primary,
:root[data-accent="classic"] .comm-top-join,
:root[data-accent="classic"] .comm-nav-btn.primary,
:root[data-accent="classic"] .chat-send,
:root[data-accent="classic"] .user-overlay-btn.primary,
:root[data-accent="classic"] .edit-actions .btn-outline.solid{
  background:linear-gradient(135deg,#4a4a4a 0%,#8a8a8a 100%) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.4),
    0 2px 8px rgba(200,200,200,.12) !important;
}
:root[data-accent="classic"] .btn-outline.solid:hover,
:root[data-accent="classic"] .btn.primary:hover{
  box-shadow:
    0 10px 28px rgba(0,0,0,.5),
    0 4px 14px rgba(200,200,200,.18) !important;
  filter:brightness(1.15) !important;
}
:root[data-accent="classic"] .btn-outline{
  background:rgba(200,200,200,.08) !important;
  border-color:rgba(200,200,200,.35) !important;
  color:#e0e0e0 !important;
}
:root[data-accent="classic"] .btn-outline:hover{
  background:rgba(200,200,200,.18) !important;
}
:root[data-accent="classic"] .comm-tabs-indicator,
:root[data-accent="classic"] .friends-tabs-ind,
:root[data-accent="classic"] .tabs-ind,
:root[data-accent="classic"] .wallet-tabs-ind{
  background:linear-gradient(90deg,#4a4a4a 0%,#8a8a8a 50%,#c8c8c8 100%) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.5) !important;
}
:root[data-accent="classic"] .nav-btn.active{ color:#c8c8c8 !important }
:root[data-accent="classic"] .nav-btn.primary .nav-icon{
  background:linear-gradient(135deg,#4a4a4a,#8a8a8a) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.5) !important;
}
:root[data-accent="classic"] .toast{
  background:linear-gradient(135deg,#3a3a3a,#6a6a6a) !important;
}
:root[data-accent="classic"] .comm-hero-prog > i{
  background:linear-gradient(90deg,#4a4a4a,#8a8a8a) !important;
}
:root[data-accent="classic"] .coins-badge{
  border-color:rgba(200,200,200,.5) !important;
}
:root[data-accent="classic"] .input:focus,
:root[data-accent="classic"] .search:focus{
  border-color:rgba(200,200,200,.6) !important;
  box-shadow:0 0 0 3px rgba(200,200,200,.12) !important;
}
:root[data-accent="classic"] .role-badge.admin{
  background:linear-gradient(90deg,#8a8a8a,#4a4a4a) !important;
}
:root[data-accent="classic"] .msg-row.me .msg-bubble{
  box-shadow:0 4px 12px rgba(0,0,0,.4) !important;
}

/* ============ КРАСНАЯ ============ */
:root[data-accent="red"] .btn-outline.solid,
:root[data-accent="red"] .btn.primary,
:root[data-accent="red"] .comm-top-join,
:root[data-accent="red"] .comm-nav-btn.primary,
:root[data-accent="red"] .chat-send,
:root[data-accent="red"] .user-overlay-btn.primary,
:root[data-accent="red"] .edit-actions .btn-outline.solid{
  background:linear-gradient(135deg,#a83636 0%,#e88080 100%) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:
    0 6px 18px rgba(212,90,90,.4),
    0 2px 8px rgba(168,54,54,.25) !important;
}
:root[data-accent="red"] .btn-outline.solid:hover,
:root[data-accent="red"] .btn.primary:hover,
:root[data-accent="red"] .chat-send:hover{
  box-shadow:
    0 10px 28px rgba(212,90,90,.5),
    0 4px 14px rgba(168,54,54,.3) !important;
  filter:brightness(1.1) !important;
}
:root[data-accent="red"] .btn-outline{
  background:rgba(212,90,90,.10) !important;
  border-color:rgba(212,90,90,.4) !important;
  color:#f0a8a8 !important;
}
:root[data-accent="red"] .btn-outline:hover{
  background:rgba(212,90,90,.22) !important;
  border-color:rgba(220,120,120,.7) !important;
}
:root[data-accent="red"] .comm-tabs-indicator,
:root[data-accent="red"] .friends-tabs-ind,
:root[data-accent="red"] .tabs-ind,
:root[data-accent="red"] .wallet-tabs-ind{
  background:linear-gradient(90deg,#a83636 0%,#d45a5a 50%,#e88080 100%) !important;
  box-shadow:0 4px 14px rgba(212,90,90,.45) !important;
}
:root[data-accent="red"] .nav-btn.active{ color:#e88080 !important }
:root[data-accent="red"] .nav-btn.primary .nav-icon{
  background:linear-gradient(135deg,#a83636,#e88080) !important;
  box-shadow:0 6px 18px rgba(212,90,90,.55) !important;
}
:root[data-accent="red"] .comm-nav-btn:hover{
  border-color:rgba(212,90,90,.5) !important;
}
:root[data-accent="red"] .toast{
  background:linear-gradient(135deg,#a83636,#e88080) !important;
  box-shadow:0 12px 36px rgba(212,90,90,.5) !important;
}
:root[data-accent="red"] .comm-hero-prog > i{
  background:linear-gradient(90deg,#a83636,#e88080) !important;
}
:root[data-accent="red"] .coins-badge{
  border-color:rgba(220,120,120,.6) !important;
}
:root[data-accent="red"] .input:focus,
:root[data-accent="red"] .search:focus{
  border-color:rgba(220,120,120,.7) !important;
  box-shadow:0 0 0 3px rgba(220,120,120,.18) !important;
}
:root[data-accent="red"] .role-badge.admin{
  background:linear-gradient(90deg,#e88080,#a83636) !important;
}
:root[data-accent="red"] .msg-row.me .msg-bubble{
  box-shadow:0 4px 12px rgba(212,90,90,.35) !important;
}


/* ============================================================
   ЧАТЫ — ПОЛНЫЙ OVERRIDE ПОД ТЕМУ
   ============================================================ */

/* Кнопки в шапке чата — под тему */
html[data-accent="amino"] .chat-top .icon-btn-circle,
html[data-accent="amino"] .chat-hero .icon-btn-circle{
  background:linear-gradient(155deg, rgba(58,26,82,.9), rgba(37,16,56,.95)) !important;
  border-color:rgba(200,120,230,.4) !important;
  color:#dbb0ee !important;
}
html[data-accent="amino"] .chat-top .icon-btn-circle:hover,
html[data-accent="amino"] .chat-hero .icon-btn-circle:hover{
  background:linear-gradient(135deg,#a866c8,#c088e0) !important;
  color:#fff !important;
  border-color:transparent !important;
}

html[data-accent="classic"] .chat-top .icon-btn-circle,
html[data-accent="classic"] .chat-hero .icon-btn-circle{
  background:linear-gradient(155deg, rgba(34,34,34,.9), rgba(20,20,20,.95)) !important;
  border-color:rgba(200,200,200,.3) !important;
  color:#e0e0e0 !important;
}
html[data-accent="classic"] .chat-top .icon-btn-circle:hover,
html[data-accent="classic"] .chat-hero .icon-btn-circle:hover{
  background:linear-gradient(135deg,#8a8a8a,#c8c8c8) !important;
  color:#0a0a0a !important;
  border-color:transparent !important;
}

html[data-accent="red"] .chat-top .icon-btn-circle,
html[data-accent="red"] .chat-hero .icon-btn-circle{
  background:linear-gradient(155deg, rgba(74,26,26,.9), rgba(42,12,12,.95)) !important;
  border-color:rgba(220,120,120,.4) !important;
  color:#f0a8a8 !important;
}
html[data-accent="red"] .chat-top .icon-btn-circle:hover,
html[data-accent="red"] .chat-hero .icon-btn-circle:hover{
  background:linear-gradient(135deg,#d45a5a,#e88080) !important;
  color:#fff !important;
  border-color:transparent !important;
}

/* Фон чата под тему */
html[data-accent="amino"] .chat-screen{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(200,120,230,.10) 0%, transparent 60%),
    linear-gradient(170deg,#1a0a2a 0%,#0f041a 60%,#08020f 100%) !important;
}
html[data-accent="classic"] .chat-screen{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(200,200,200,.06) 0%, transparent 60%),
    linear-gradient(170deg,#141414 0%,#0a0a0a 60%,#050505 100%) !important;
}
html[data-accent="red"] .chat-screen{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(220,120,120,.10) 0%, transparent 60%),
    linear-gradient(170deg,#2a0c0c 0%,#150404 60%,#0a0202 100%) !important;
}

/* Верхняя панель чата */
html[data-accent="amino"] .chat-top{
  background:linear-gradient(180deg, rgba(26,10,42,.95), rgba(26,10,42,.65)) !important;
  border-bottom-color:rgba(200,120,230,.15) !important;
}
html[data-accent="classic"] .chat-top{
  background:linear-gradient(180deg, rgba(20,20,20,.95), rgba(20,20,20,.65)) !important;
  border-bottom-color:rgba(200,200,200,.12) !important;
}
html[data-accent="red"] .chat-top{
  background:linear-gradient(180deg, rgba(42,12,12,.95), rgba(42,12,12,.65)) !important;
  border-bottom-color:rgba(220,120,120,.15) !important;
}

/* Hero-карточка чата */
html[data-accent="amino"] .chat-hero{
  background:linear-gradient(155deg, rgba(58,26,82,.9), rgba(37,16,56,.95)) !important;
  border-color:rgba(200,120,230,.25) !important;
}
html[data-accent="classic"] .chat-hero{
  background:linear-gradient(155deg, rgba(34,34,34,.9), rgba(20,20,20,.95)) !important;
  border-color:rgba(200,200,200,.2) !important;
}
html[data-accent="red"] .chat-hero{
  background:linear-gradient(155deg, rgba(74,26,26,.9), rgba(42,12,12,.95)) !important;
  border-color:rgba(220,120,120,.25) !important;
}

/* Мои пузыри — в акцентном градиенте */
html[data-accent="amino"] .msg-row.me .msg-bubble{
  background:linear-gradient(135deg,#7a3aa0,#c088e0) !important;
  background-image:linear-gradient(135deg,#7a3aa0,#c088e0) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 4px 12px rgba(168,102,200,.4) !important;
}
html[data-accent="classic"] .msg-row.me .msg-bubble{
  background:linear-gradient(135deg,#4a4a4a,#8a8a8a) !important;
  background-image:linear-gradient(135deg,#4a4a4a,#8a8a8a) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 4px 12px rgba(0,0,0,.4) !important;
}
html[data-accent="red"] .msg-row.me .msg-bubble{
  background:linear-gradient(135deg,#a83636,#e88080) !important;
  background-image:linear-gradient(135deg,#a83636,#e88080) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 4px 12px rgba(212,90,90,.4) !important;
}

/* Пузыри собеседника — под поверхность темы */
html[data-accent="amino"] .msg-bubble{
  background:linear-gradient(155deg, rgba(58,26,82,.85), rgba(37,16,56,.92)) !important;
  border-color:rgba(200,120,230,.2) !important;
  color:#f0e0f5 !important;
}
html[data-accent="classic"] .msg-bubble{
  background:linear-gradient(155deg, rgba(34,34,34,.9), rgba(20,20,20,.95)) !important;
  border-color:rgba(200,200,200,.15) !important;
  color:#e8e8e8 !important;
}
html[data-accent="red"] .msg-bubble{
  background:linear-gradient(155deg, rgba(74,26,26,.85), rgba(42,12,12,.92)) !important;
  border-color:rgba(220,120,120,.2) !important;
  color:#f5e0e0 !important;
}

/* Панель ввода */
html[data-accent="amino"] .chat-input-row{
  background:linear-gradient(180deg, rgba(26,10,42,.65), rgba(15,4,26,.98)) !important;
  border-top-color:rgba(200,120,230,.15) !important;
}
html[data-accent="classic"] .chat-input-row{
  background:linear-gradient(180deg, rgba(20,20,20,.65), rgba(10,10,10,.98)) !important;
  border-top-color:rgba(200,200,200,.12) !important;
}
html[data-accent="red"] .chat-input-row{
  background:linear-gradient(180deg, rgba(42,12,12,.65), rgba(21,4,4,.98)) !important;
  border-top-color:rgba(220,120,120,.15) !important;
}

/* Поле ввода внутри */
html[data-accent="amino"] .chat-input-wrap{
  background:linear-gradient(180deg, rgba(58,26,82,.7), rgba(37,16,56,.85)) !important;
  border-color:rgba(200,120,230,.3) !important;
}
html[data-accent="classic"] .chat-input-wrap{
  background:linear-gradient(180deg, rgba(34,34,34,.7), rgba(20,20,20,.85)) !important;
  border-color:rgba(200,200,200,.25) !important;
}
html[data-accent="red"] .chat-input-wrap{
  background:linear-gradient(180deg, rgba(74,26,26,.7), rgba(42,12,12,.85)) !important;
  border-color:rgba(220,120,120,.3) !important;
}

/* Кнопка отправки */
html[data-accent="amino"] .chat-send{
  background:linear-gradient(135deg,#7a3aa0,#c088e0) !important;
  background-image:linear-gradient(135deg,#7a3aa0,#c088e0) !important;
  box-shadow:0 4px 14px rgba(168,102,200,.5) !important;
}
html[data-accent="classic"] .chat-send{
  background:linear-gradient(135deg,#4a4a4a,#8a8a8a) !important;
  background-image:linear-gradient(135deg,#4a4a4a,#8a8a8a) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.5) !important;
}
html[data-accent="red"] .chat-send{
  background:linear-gradient(135deg,#a83636,#e88080) !important;
  background-image:linear-gradient(135deg,#a83636,#e88080) !important;
  box-shadow:0 4px 14px rgba(212,90,90,.5) !important;
}

/* Время и ники */
html[data-accent="amino"] .msg-time{ color:#a08ab8 !important }
html[data-accent="classic"] .msg-time{ color:#8a8a8a !important }
html[data-accent="red"] .msg-time{ color:#c8a0a0 !important }

html[data-accent="amino"] .msg-row.me .msg-name{ color:#c088e0 !important }
html[data-accent="classic"] .msg-row.me .msg-name{ color:#c8c8c8 !important }
html[data-accent="red"] .msg-row.me .msg-name{ color:#e88080 !important }

html[data-accent="amino"] .date-sep{ color:#8a68a0 !important }
html[data-accent="classic"] .date-sep{ color:#686868 !important }
html[data-accent="red"] .date-sep{ color:#a06868 !important }

/* Скролл чата */
html[data-accent="amino"] .chat-feed::-webkit-scrollbar-thumb{ background:rgba(200,120,230,.25) !important }
html[data-accent="classic"] .chat-feed::-webkit-scrollbar-thumb{ background:rgba(200,200,200,.2) !important }
html[data-accent="red"] .chat-feed::-webkit-scrollbar-thumb{ background:rgba(220,120,120,.25) !important }


/* ============================================================
   ФОН СООБЩЕСТВА + КНОПКА ПОДПИСЧИКОВ + ГРАДИЕНТ ЧАТА ПОД ТЕМУ
   ============================================================ */

/* ============ АМИНО ============ */
html[data-accent="amino"] .comm-screen,
html[data-accent="amino"] .comm-screen.themed{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(200,120,230,.15) 0%, transparent 60%),
    radial-gradient(90% 50% at 50% 100%, rgba(168,102,200,.10) 0%, transparent 60%),
    linear-gradient(170deg,#1a0a2a 0%,#0f041a 60%,#08020f 100%) !important;
}
html[data-accent="amino"] .counter-pill{
  background:rgba(168,102,200,.14) !important;
  border-color:rgba(200,120,230,.3) !important;
  color:#dbb0ee !important;
}
html[data-accent="amino"] .counter-pill:hover{
  background:rgba(168,102,200,.28) !important;
  border-color:rgba(200,120,230,.6) !important;
}
html[data-accent="amino"] .chat-feed,
html[data-accent="amino"] .chat-screen{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(200,120,230,.14) 0%, transparent 55%),
    linear-gradient(170deg,#1a0a2a 0%,#0f041a 60%,#08020f 100%) !important;
  background-image:
    radial-gradient(120% 60% at 50% 0%, rgba(200,120,230,.14) 0%, transparent 55%),
    linear-gradient(170deg,#1a0a2a 0%,#0f041a 60%,#08020f 100%) !important;
}

/* ============ КЛАССИКА ============ */
html[data-accent="classic"] .comm-screen,
html[data-accent="classic"] .comm-screen.themed{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(200,200,200,.08) 0%, transparent 60%),
    radial-gradient(90% 50% at 50% 100%, rgba(120,120,120,.06) 0%, transparent 60%),
    linear-gradient(170deg,#141414 0%,#0a0a0a 60%,#050505 100%) !important;
}
html[data-accent="classic"] .counter-pill{
  background:rgba(200,200,200,.10) !important;
  border-color:rgba(200,200,200,.28) !important;
  color:#e0e0e0 !important;
}
html[data-accent="classic"] .counter-pill:hover{
  background:rgba(200,200,200,.20) !important;
  border-color:rgba(200,200,200,.5) !important;
}
html[data-accent="classic"] .chat-feed,
html[data-accent="classic"] .chat-screen{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(200,200,200,.08) 0%, transparent 55%),
    linear-gradient(170deg,#141414 0%,#0a0a0a 60%,#050505 100%) !important;
  background-image:
    radial-gradient(120% 60% at 50% 0%, rgba(200,200,200,.08) 0%, transparent 55%),
    linear-gradient(170deg,#141414 0%,#0a0a0a 60%,#050505 100%) !important;
}

/* ============ КРАСНАЯ ============ */
html[data-accent="red"] .comm-screen,
html[data-accent="red"] .comm-screen.themed{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(220,120,120,.15) 0%, transparent 60%),
    radial-gradient(90% 50% at 50% 100%, rgba(168,54,54,.10) 0%, transparent 60%),
    linear-gradient(170deg,#2a0c0c 0%,#150404 60%,#0a0202 100%) !important;
}
html[data-accent="red"] .counter-pill{
  background:rgba(212,90,90,.14) !important;
  border-color:rgba(220,120,120,.3) !important;
  color:#f0a8a8 !important;
}
html[data-accent="red"] .counter-pill:hover{
  background:rgba(212,90,90,.28) !important;
  border-color:rgba(220,120,120,.6) !important;
}
html[data-accent="red"] .chat-feed,
html[data-accent="red"] .chat-screen{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(220,120,120,.14) 0%, transparent 55%),
    linear-gradient(170deg,#2a0c0c 0%,#150404 60%,#0a0202 100%) !important;
  background-image:
    radial-gradient(120% 60% at 50% 0%, rgba(220,120,120,.14) 0%, transparent 55%),
    linear-gradient(170deg,#2a0c0c 0%,#150404 60%,#0a0202 100%) !important;
}

/* ============ СВЕТЛАЯ + ЦВЕТНЫЕ АКЦЕНТЫ ============ */
:root[data-theme="light"][data-accent="amino"]{
  --accent:#8a3aa8;
  --accent-2:#a866c8;
  --accent-grad:linear-gradient(135deg,#7a3aa0 0%,#a866c8 100%);
}
:root[data-theme="light"][data-accent="classic"]{
  --accent:#5a5a5a;
  --accent-2:#8a8a8a;
  --accent-grad:linear-gradient(135deg,#4a4a4a 0%,#8a8a8a 100%);
}
:root[data-theme="light"][data-accent="red"]{
  --accent:#a83636;
  --accent-2:#d45a5a;
  --accent-grad:linear-gradient(135deg,#a83636 0%,#d45a5a 100%);
}


/* ============================================================
   УБРАТЬ ЗАТЕМНЕНИЕ С КАРТИНОК ПОСТОВ
   ============================================================ */

.post-card .post-card-grad,
.post-card.post-card--mosaic3 .post-card-grad,
.post-card.post-card--grid2 .post-card-grad{
  background:transparent !important;
  background-image:none !important;
  display:none !important;
  opacity:0 !important;
}

/* Оверлей внизу — прозрачный */
.post-card .post-card-overlay,
.post-card.post-card--mosaic3 .post-card-overlay,
.post-card.post-card--grid2 .post-card-overlay{
  background:transparent !important;
  background-image:none !important;
}

/* Затемнение с бейджей подборки */
.post-card .post-card-featured-badge,
.post-card .post-card-hidden-badge{
  background:rgba(0,0,0,.55) !important;
}

/* В самом просмотре поста — тоже убрать затемнение */
.post-detail-cover::after{
  display:none !important;
  background:transparent !important;
}

/* Обложка поста в ленте — чистая картинка */
.post-card .post-card-cover::after{
  display:none !important;
}

/* Мозаика — тоже без затемнения */
.post-card.post-card--mosaic3 .post-card-mosaic::after{
  display:none !important;
}

/* Комментарий/лайк/ники — с тенью текста для читаемости без затемнения */
.post-card .post-card-overlay-title{
  text-shadow:0 2px 8px rgba(0,0,0,.95), 0 0 20px rgba(0,0,0,.8) !important;
}
.post-card .post-card-overlay-nick{
  text-shadow:0 1px 5px rgba(0,0,0,.95) !important;
}
.post-card .post-card-act{
  background:rgba(0,0,0,.5) !important;
  border:1px solid rgba(255,255,255,.15) !important;
}


/* ============================================================
   ВЕРНУТЬ ЗАТЕМНЕНИЕ ПОСТАМ + УБРАТЬ У БАННЕРА СООБЩЕСТВА
   ============================================================ */

/* ============ 1. ПОСТАМ — ВЕРНУТЬ ГРАДИЕНТ СНИЗУ ============ */
.post-card .post-card-grad,
.post-card.post-card--mosaic3 .post-card-grad,
.post-card.post-card--grid2 .post-card-grad{
  display:block !important;
  opacity:1 !important;
  position:absolute !important;
  inset:auto 0 0 0 !important;
  top:auto !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:60% !important;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 100%) !important;
  background-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 100%) !important;
  pointer-events:none !important;
  z-index:2 !important;
}

/* Тёмная тема — плотнее */
:root:not([data-theme="light"]) .post-card .post-card-grad{
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.85) 100%) !important;
}

/* Светлая тема — мягче */
:root[data-theme="light"] .post-card .post-card-grad{
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.65) 100%) !important;
}

/* ============ 2. БАННЕР СООБЩЕСТВА — УБРАТЬ ФИОЛЕТОВОЕ ЗАТЕМНЕНИЕ ============ */
.comm-banner::after,
.comm-hero-banner::after,
.comm-leader-banner::after{
  background:transparent !important;
  background-image:none !important;
  opacity:0 !important;
  display:none !important;
}

.comm-banner,
.comm-hero-banner,
.comm-leader-banner{
  filter:none !important;
}

/* Светлая/тёмная тема — тоже без затемнения баннера */
:root[data-theme="light"] .comm-banner::after,
:root[data-theme="light"] .comm-hero-banner::after,
:root[data-theme="light"] .comm-leader-banner::after{
  display:none !important;
}

html[data-accent="amino"] .comm-banner::after,
html[data-accent="classic"] .comm-banner::after,
html[data-accent="red"] .comm-banner::after{
  display:none !important;
}

/* Текст поверх баннера — оставляем с тенью, чтобы читался */
.comm-banner-name,
.comm-banner-sub{
  text-shadow:0 2px 8px rgba(0,0,0,.9), 0 0 16px rgba(0,0,0,.6) !important;
}

/* Аватар на баннере — с тенью для отделения от картинки */
.comm-banner-av{
  box-shadow:
    0 8px 22px rgba(0,0,0,.55),
    0 0 0 2px rgba(255,255,255,.25) !important;
}

/* ============ 3. КАРТОЧКИ В ЛЕНТЕ — БЕЗ ПОДЛОЖКИ ============ */
.comm-hero-banner,
.comm-leader-banner{
  background-color:transparent !important;
}

/* Оставляем лёгкое затемнение только под текстом имени в карточке-лидере */
.comm-leader::after,
.comm-hero::after{
  background:linear-gradient(180deg, transparent 75%, rgba(0,0,0,.35) 100%) !important;
  opacity:1 !important;
}


/* ============================================================
   КАРТОЧКИ СООБЩЕСТВ В ПОИСКЕ — уменьшить в 2 раза
   ============================================================ */
.list:has(.comm-search-card){
  grid-template-columns:repeat(3, 1fr) !important;
  gap:8px !important;
  padding:0 12px !important;
}
.comm-search-card{
  aspect-ratio:9/16 !important;
  border-radius:12px !important;
}
.comm-search-card-av{
  width:24px !important;
  height:24px !important;
  top:6px !important;
  left:6px !important;
  border-radius:7px !important;
  font-size:11px !important;
  border-width:1.5px !important;
}
.comm-search-card-online{
  font-size:9px !important;
  padding:2px 5px !important;
  top:6px !important;
  right:6px !important;
}
.comm-search-card-info{
  padding:6px 7px 8px !important;
}
.comm-search-card-name{
  font-size:10.5px !important;
  -webkit-line-clamp:2 !important;
  line-height:1.15 !important;
}
.comm-search-card-meta{
  font-size:9px !important;
  margin-top:1px !important;
}
.comm-search-card-tagline{
  font-size:9px !important;
  -webkit-line-clamp:1 !important;
  margin-top:1px !important;
}
.comm-search-card-tags{
  gap:2px !important;
  margin-top:3px !important;
}
.comm-search-card-tag{
  font-size:8px !important;
  padding:1px 4px !important;
  border-radius:5px !important;
}

/* ============================================================
   КАРТОЧКА «СЕЙЧАС АКТУАЛЬНО» — показать имя + участники + полосу
   ============================================================ */
.comm-hero-body,
.comm-hero-name,
.comm-hero-meta{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
.comm-hero-body{
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  bottom:12px !important;
  z-index:3 !important;
  padding:0 !important;
  background:none !important;
}
.comm-hero-name{
  color:#fff !important;
  font-size:16px !important;
  font-weight:800 !important;
  text-shadow:0 2px 6px rgba(0,0,0,.95), 0 0 16px rgba(0,0,0,.7) !important;
  margin-bottom:3px !important;
}
.comm-hero-meta{
  color:rgba(255,255,255,.9) !important;
  font-size:11.5px !important;
  text-shadow:0 1px 4px rgba(0,0,0,.95) !important;
  display:flex !important;
  gap:10px !important;
  align-items:center !important;
}

/* ============================================================
   ПОЛОСА АКТИВНОСТИ — 7 сегментов с градиентом
   ============================================================ */
.woon-activity-bar{
  display:flex !important;
  gap:3px !important;
  height:6px !important;
  width:100% !important;
  margin-top:8px !important;
  padding:0 !important;
}
.woon-activity-bar .wab-seg{
  flex:1 !important;
  height:100% !important;
  border-radius:3px !important;
  background:rgba(255,255,255,.12) !important;
  overflow:hidden !important;
  position:relative !important;
}
.woon-activity-bar .wab-seg.on{
  background:linear-gradient(90deg, #4EA4CC 0%, #7A5AC8 100%) !important;
  box-shadow:0 0 6px rgba(122,90,200,.6) !important;
}
/* В светлой теме контрастнее */
:root[data-theme="light"] .woon-activity-bar .wab-seg{
  background:rgba(59,130,246,.15) !important;
}
:root[data-theme="light"] .woon-activity-bar .wab-seg.on{
  background:linear-gradient(90deg, #3b82f6 0%, #a866c8 100%) !important;
  box-shadow:0 0 6px rgba(122,90,200,.5) !important;
}



/* ============================================================
   ЭКРАН ИНФО О СООБЩЕСТВЕ
   ============================================================ */
.cinfo-card{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  padding:16px !important;
  margin:8px 16px 0 !important;
  border-radius:16px !important;
  background:linear-gradient(155deg, rgba(26,37,66,.75), rgba(19,28,51,.9)) !important;
  border:1px solid rgba(120,150,210,.2) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.3) !important;
}

.cinfo-av{
  position:relative !important;
  width:76px !important;
  height:76px !important;
  min-width:76px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:linear-gradient(135deg,#4a6db8,#1a2542) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:36px !important;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.15) !important;
  flex-shrink:0 !important;
}
.cinfo-av img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.cinfo-av-dot{
  position:absolute !important;
  top:6px !important;
  right:6px !important;
  width:12px !important;
  height:12px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  border:2px solid var(--bg-phone-2,#060a14) !important;
  box-shadow:0 0 8px rgba(63,208,122,.9) !important;
  z-index:5 !important;
}

.cinfo-info{
  flex:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
}

.cinfo-name-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}
.cinfo-name{
  font-size:15px !important;
  font-weight:800 !important;
  color:var(--text) !important;
  line-height:1.2 !important;
}
.cinfo-tagline-badge{
  font-size:10px !important;
  font-weight:700 !important;
  padding:3px 9px !important;
  border-radius:9px !important;
  background:linear-gradient(135deg, rgba(74,109,184,.4), rgba(107,143,212,.3)) !important;
  border:1px solid rgba(120,150,210,.4) !important;
  color:var(--accent-3) !important;
  white-space:nowrap !important;
}

.cinfo-activity-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.cinfo-activity-bar{
  display:flex !important;
  gap:2px !important;
  flex:1 !important;
  height:5px !important;
  max-width:180px !important;
}
.cinfo-seg{
  flex:1 !important;
  height:100% !important;
  border-radius:3px !important;
  background:rgba(255,255,255,.1) !important;
}
.cinfo-seg.on{
  background:linear-gradient(90deg,#4EA4CC 0%,#7A5AC8 100%) !important;
  box-shadow:0 0 6px rgba(122,90,200,.5) !important;
}
.cinfo-activity-label{
  font-size:10.5px !important;
  color:var(--text-dim) !important;
  white-space:nowrap !important;
}

.cinfo-members{
  font-size:11.5px !important;
  color:var(--text-dim) !important;
}

.cinfo-section{
  margin:0 16px !important;
  padding:14px 16px !important;
  border-radius:14px !important;
  background:linear-gradient(155deg, rgba(26,37,66,.5), rgba(19,28,51,.7)) !important;
  border:1px solid rgba(120,150,210,.12) !important;
}
.cinfo-section-title{
  font-size:11px !important;
  font-weight:700 !important;
  color:var(--accent-3) !important;
  text-transform:uppercase !important;
  letter-spacing:.4px !important;
  margin-bottom:8px !important;
}
.cinfo-description{
  font-size:13px !important;
  color:var(--text) !important;
  line-height:1.5 !important;
  white-space:pre-wrap !important;
  word-break:break-word !important;
}
.cinfo-empty{
  font-size:12.5px !important;
  color:var(--text-muted) !important;
  text-align:center !important;
  padding:20px 0 !important;
}

.cinfo-tags{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
}
.cinfo-tag{
  font-size:11px !important;
  padding:3px 9px !important;
  border-radius:9px !important;
  background:rgba(74,109,184,.25) !important;
  border:1px solid rgba(120,150,210,.3) !important;
  color:var(--accent-3) !important;
  font-weight:600 !important;
}

/* Светлая тема */
:root[data-theme="light"] .cinfo-card{
  background:linear-gradient(155deg,#ffffff,#f4f7fc) !important;
  border-color:rgba(59,130,246,.2) !important;
}
:root[data-theme="light"] .cinfo-section{
  background:linear-gradient(155deg,#ffffff,#f4f7fc) !important;
  border-color:rgba(59,130,246,.15) !important;
}
:root[data-theme="light"] .cinfo-name{ color:#0a1f5c !important }
:root[data-theme="light"] .cinfo-members{ color:#4a5d8f !important }
:root[data-theme="light"] .cinfo-description{ color:#0a1f5c !important }

/* Тема Амино */
html[data-accent="amino"] .cinfo-card{
  background:linear-gradient(155deg, rgba(58,26,82,.85), rgba(37,16,56,.95)) !important;
  border-color:rgba(200,120,230,.25) !important;
}
html[data-accent="amino"] .cinfo-section{
  background:linear-gradient(155deg, rgba(58,26,82,.6), rgba(37,16,56,.75)) !important;
}
html[data-accent="amino"] .cinfo-seg.on{
  background:linear-gradient(90deg,#7a3aa0 0%,#c088e0 100%) !important;
}
html[data-accent="amino"] .cinfo-tagline-badge{
  background:linear-gradient(135deg, rgba(168,102,200,.4), rgba(200,120,230,.3)) !important;
  border-color:rgba(200,120,230,.4) !important;
  color:#dbb0ee !important;
}

/* Тема Классика */
html[data-accent="classic"] .cinfo-card{
  background:linear-gradient(155deg, rgba(34,34,34,.9), rgba(20,20,20,.95)) !important;
  border-color:rgba(200,200,200,.2) !important;
}
html[data-accent="classic"] .cinfo-section{
  background:linear-gradient(155deg, rgba(34,34,34,.7), rgba(20,20,20,.85)) !important;
}
html[data-accent="classic"] .cinfo-seg.on{
  background:linear-gradient(90deg,#8a8a8a 0%,#c8c8c8 100%) !important;
}

/* Тема Красная */
html[data-accent="red"] .cinfo-card{
  background:linear-gradient(155deg, rgba(74,26,26,.85), rgba(42,12,12,.95)) !important;
  border-color:rgba(220,120,120,.25) !important;
}
html[data-accent="red"] .cinfo-section{
  background:linear-gradient(155deg, rgba(74,26,26,.6), rgba(42,12,12,.75)) !important;
}
html[data-accent="red"] .cinfo-seg.on{
  background:linear-gradient(90deg,#d45a5a 0%,#e88080 100%) !important;
}



/* ============================================================
   ПОЛОСА АКТИВА — ЕДИНЫЙ СКРУГЛЁННЫЙ ПРЯМОУГОЛЬНИК
   ============================================================ */

/* --- На экране "О сообществе" --- */
.cinfo-activity-bar,
.woon-activity-bar{
  display:flex !important;
  gap:2px !important;
  padding:3px !important;
  border-radius:999px !important;
  background:rgba(120,150,210,.12) !important;
  border:1px solid rgba(120,150,210,.18) !important;
  overflow:hidden !important;
  height:auto !important;
  align-items:stretch !important;
}
.cinfo-seg,
.wab-seg{
  flex:1 !important;
  height:6px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.08) !important;
  transition:background .3s ease, box-shadow .3s ease !important;
}
.cinfo-seg.on,
.wab-seg.on{
  background:linear-gradient(90deg,#4EA4CC 0%,#7A5AC8 100%) !important;
  box-shadow:0 0 8px rgba(122,90,200,.6), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.cinfo-activity-bar{
  max-width:100% !important;
  margin-top:0 !important;
}

/* --- На hero-карточке в ленте --- */
.comm-hero .woon-activity-bar{
  max-width:100% !important;
  margin-top:10px !important;
  padding:3px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
}

/* --- На маленьких карточках в поиске --- */
.comm-search-card .woon-activity-bar{
  padding:2px !important;
  margin-top:6px !important;
  background:rgba(0,0,0,.25) !important;
  border:1px solid rgba(255,255,255,.1) !important;
}
.comm-search-card .wab-seg{
  height:4px !important;
  border-radius:999px !important;
}

/* ============================================================
   СЛОГАН НА ЭКРАНЕ "О СООБЩЕСТВЕ" — отдельный блок
   ============================================================ */
.cinfo-tagline-section{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 16px !important;
  padding:12px 16px !important;
  border-radius:14px !important;
  background:linear-gradient(155deg, rgba(122,90,200,.15), rgba(78,164,204,.10)) !important;
  border:1px solid rgba(140,120,220,.25) !important;
}
.cinfo-tagline-icon{
  font-size:16px !important;
  flex-shrink:0 !important;
}
.cinfo-tagline-text{
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--text) !important;
  line-height:1.4 !important;
  font-style:italic !important;
}

/* ============================================================
   ОПИСАНИЕ — БОЛЬШОЕ ПО ВЫСОТЕ
   ============================================================ */
.cinfo-desc-block{
  min-height:320px !important;
  display:flex !important;
  flex-direction:column !important;
}
.cinfo-description{
  flex:1 !important;
  font-size:13.5px !important;
  line-height:1.55 !important;
  color:var(--text) !important;
  white-space:pre-wrap !important;
  word-break:break-word !important;
}
.cinfo-empty{
  flex:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:13px !important;
  color:var(--text-muted) !important;
  text-align:center !important;
  font-style:italic !important;
}

/* Убираем старый бейдж-слоган (если где-то остался) */
.cinfo-tagline-badge{
  display:none !important;
}

/* ============================================================
   Светлая тема
   ============================================================ */
:root[data-theme="light"] .cinfo-tagline-section{
  background:linear-gradient(155deg, rgba(168,102,200,.12), rgba(59,130,246,.08)) !important;
  border-color:rgba(140,120,220,.35) !important;
}
:root[data-theme="light"] .cinfo-tagline-text{ color:#0a1f5c !important }
:root[data-theme="light"] .cinfo-activity-bar,
:root[data-theme="light"] .woon-activity-bar{
  background:rgba(59,130,246,.10) !important;
  border-color:rgba(59,130,246,.2) !important;
}
:root[data-theme="light"] .cinfo-seg,
:root[data-theme="light"] .wab-seg{
  background:rgba(59,130,246,.12) !important;
}

/* ============================================================
   Тема Амино
   ============================================================ */
html[data-accent="amino"] .cinfo-tagline-section{
  background:linear-gradient(155deg, rgba(168,102,200,.25), rgba(200,120,230,.15)) !important;
  border-color:rgba(200,120,230,.4) !important;
}
html[data-accent="amino"] .cinfo-seg.on,
html[data-accent="amino"] .wab-seg.on{
  background:linear-gradient(90deg,#7a3aa0 0%,#c088e0 100%) !important;
  box-shadow:0 0 8px rgba(168,102,200,.6) !important;
}

/* ============================================================
   Тема Классика
   ============================================================ */
html[data-accent="classic"] .cinfo-seg.on,
html[data-accent="classic"] .wab-seg.on{
  background:linear-gradient(90deg,#8a8a8a 0%,#c8c8c8 100%) !important;
  box-shadow:0 0 8px rgba(200,200,200,.5) !important;
}

/* ============================================================
   Тема Красная
   ============================================================ */
html[data-accent="red"] .cinfo-tagline-section{
  background:linear-gradient(155deg, rgba(212,90,90,.18), rgba(232,128,128,.10)) !important;
  border-color:rgba(220,120,120,.4) !important;
}
html[data-accent="red"] .cinfo-seg.on,
html[data-accent="red"] .wab-seg.on{
  background:linear-gradient(90deg,#d45a5a 0%,#e88080 100%) !important;
  box-shadow:0 0 8px rgba(212,90,90,.6) !important;
}



/* ============================================================
   ФИНАЛЬНЫЙ ФИКС — КОМПАКТНАЯ ПОЛОСА АКТИВА
   ============================================================ */

/* Единый стиль для всех полос: тонкий, аккуратный */
.woon-activity-bar,
.cinfo-activity-bar{
  display:flex !important;
  gap:2px !important;
  padding:2px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.08) !important;
  border:none !important;
  height:auto !important;
  width:100% !important;
  max-width:180px !important;
  margin:5px 0 0 !important;
}
.woon-activity-bar .wab-seg,
.cinfo-activity-bar .cinfo-seg{
  flex:1 !important;
  height:4px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
}
.woon-activity-bar .wab-seg.on,
.cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg,#4EA4CC 0%,#7A5AC8 100%) !important;
  box-shadow:0 0 6px rgba(122,90,200,.55) !important;
}

/* В карточках поиска — ещё компактнее */
.comm-search-card .woon-activity-bar{
  max-width:100% !important;
  padding:1.5px !important;
  margin-top:4px !important;
}
.comm-search-card .wab-seg{
  height:3px !important;
}

/* В hero-карточке в ленте — небольшая */
.comm-hero .woon-activity-bar{
  max-width:140px !important;
  margin-top:8px !important;
  padding:2px !important;
}

/* ============================================================
   ИНФО-ЭКРАН СООБЩЕСТВА — КОМПАКТНО ПО МАКЕТУ
   ============================================================ */

.cinfo-card{
  display:flex !important;
  align-items:flex-start !important;
  gap:14px !important;
  padding:14px !important;
  margin:8px 16px 0 !important;
  border-radius:16px !important;
  background:linear-gradient(155deg, rgba(26,37,66,.75), rgba(19,28,51,.9)) !important;
  border:1px solid rgba(120,150,210,.2) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.3) !important;
}

.cinfo-av{
  width:64px !important;
  height:64px !important;
  min-width:64px !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background:linear-gradient(135deg,#4a6db8,#1a2542) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:28px !important;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.12) !important;
  flex-shrink:0 !important;
  position:relative !important;
}
.cinfo-av img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.cinfo-av-dot{
  position:absolute !important;
  top:4px !important;
  right:4px !important;
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  border:2px solid var(--bg-phone-2,#060a14) !important;
  box-shadow:0 0 6px rgba(63,208,122,.9) !important;
}

.cinfo-info{
  flex:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
}

.cinfo-name-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.cinfo-name{
  font-size:18px !important;
  font-weight:800 !important;
  color:var(--text) !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
}

.cinfo-members{
  font-size:12px !important;
  color:var(--text-dim) !important;
  margin-top:6px !important;
  text-transform:uppercase !important;
  letter-spacing:.5px !important;
  font-weight:600 !important;
}

/* Полоса под участниками — маленькая */
.cinfo-card .cinfo-activity-bar{
  max-width:180px !important;
  margin:6px 0 0 !important;
}

/* Слоган — обычная строка */
.cinfo-tagline-inline{
  font-size:13px !important;
  color:var(--text) !important;
  margin-top:10px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
}

/* Теги-пилюли */
.cinfo-tags-inline{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-top:8px !important;
}
.cinfo-tag{
  font-size:11.5px !important;
  padding:5px 12px !important;
  border-radius:10px !important;
  background:rgba(120,150,210,.18) !important;
  border:1px solid rgba(120,150,210,.25) !important;
  color:var(--text) !important;
  font-weight:600 !important;
}
.cinfo-tag::before{
  content:'#';
  opacity:.7;
  margin-right:1px;
}

/* Старое скрываем */
.cinfo-tagline-section,
.cinfo-tagline-badge{
  display:none !important;
}

/* Описание — компактнее и меньше высотой */
.cinfo-section{
  margin:12px 16px 0 !important;
  padding:14px 16px !important;
  border-radius:14px !important;
  background:linear-gradient(155deg, rgba(26,37,66,.5), rgba(19,28,51,.7)) !important;
  border:1px solid rgba(120,150,210,.12) !important;
}
.cinfo-section-title{
  font-size:12px !important;
  font-weight:700 !important;
  color:var(--text) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  margin-bottom:10px !important;
}
.cinfo-desc-block{
  min-height:180px !important;
}
.cinfo-description{
  font-size:13px !important;
  line-height:1.5 !important;
  color:var(--text-dim) !important;
}
.cinfo-empty{
  font-size:13px !important;
  color:var(--text-muted) !important;
  text-align:center !important;
  padding:30px 0 !important;
  font-style:normal !important;
}

/* Светлая тема */
:root[data-theme="light"] .cinfo-card{
  background:linear-gradient(155deg,#ffffff,#f4f7fc) !important;
  border-color:rgba(59,130,246,.2) !important;
}
:root[data-theme="light"] .cinfo-name{ color:#0a1f5c !important }
:root[data-theme="light"] .cinfo-members{ color:#4a5d8f !important }
:root[data-theme="light"] .cinfo-tagline-inline{ color:#0a1f5c !important }
:root[data-theme="light"] .cinfo-section{
  background:linear-gradient(155deg,#ffffff,#f4f7fc) !important;
}
:root[data-theme="light"] .cinfo-section-title{ color:#0a1f5c !important }
:root[data-theme="light"] .cinfo-description{ color:#4a5d8f !important }
:root[data-theme="light"] .woon-activity-bar,
:root[data-theme="light"] .cinfo-activity-bar{
  background:rgba(59,130,246,.10) !important;
}
:root[data-theme="light"] .cinfo-seg,
:root[data-theme="light"] .wab-seg{
  background:rgba(59,130,246,.12) !important;
}

/* Амино */
html[data-accent="amino"] .cinfo-card{
  background:linear-gradient(155deg, rgba(58,26,82,.85), rgba(37,16,56,.95)) !important;
  border-color:rgba(200,120,230,.25) !important;
}
html[data-accent="amino"] .cinfo-seg.on,
html[data-accent="amino"] .wab-seg.on{
  background:linear-gradient(90deg,#7a3aa0 0%,#c088e0 100%) !important;
}
html[data-accent="amino"] .cinfo-tag{
  background:rgba(168,102,200,.2) !important;
  border-color:rgba(200,120,230,.35) !important;
}

/* Классика */
html[data-accent="classic"] .cinfo-seg.on,
html[data-accent="classic"] .wab-seg.on{
  background:linear-gradient(90deg,#8a8a8a 0%,#c8c8c8 100%) !important;
}

/* Красная */
html[data-accent="red"] .cinfo-seg.on,
html[data-accent="red"] .wab-seg.on{
  background:linear-gradient(90deg,#d45a5a 0%,#e88080 100%) !important;
}
html[data-accent="red"] .cinfo-tag{
  background:rgba(212,90,90,.2) !important;
  border-color:rgba(220,120,120,.35) !important;
}



/* ============================================================
   ГОРИЗОНТАЛЬНЫЕ КАРТОЧКИ СООБЩЕСТВ В ПОИСКЕ (по макету)
   ============================================================ */

/* Отключаем прежний grid для списка */
.list:has(.comm-list-row){
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:8px 16px 20px !important;
  grid-template-columns:none !important;
}

.comm-list-row{
  display:flex !important;
  gap:12px !important;
  padding:10px !important;
  border-radius:16px !important;
  background:linear-gradient(155deg, rgba(26,37,66,.7), rgba(19,28,51,.85)) !important;
  border:1px solid rgba(120,150,210,.18) !important;
  cursor:pointer !important;
  transition:transform .18s cubic-bezier(.3,.7,.4,1), border-color .2s !important;
  align-items:stretch !important;
}
.comm-list-row:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(120,150,210,.45) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.4) !important;
}

/* Обложка 9:16 слева */
.comm-list-cover{
  position:relative !important;
  width:100px !important;
  min-width:100px !important;
  aspect-ratio:9/16 !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background:linear-gradient(150deg,#2a3f6e,#0f1726) !important;
  flex-shrink:0 !important;
}
.comm-list-cover img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.comm-list-cover::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.35) 100%) !important;
  pointer-events:none !important;
}

/* Иконка поверх обложки */
.comm-list-av{
  position:absolute !important;
  top:6px !important;
  left:6px !important;
  width:28px !important;
  height:28px !important;
  border-radius:9px !important;
  overflow:hidden !important;
  border:2px solid rgba(255,255,255,.5) !important;
  background:linear-gradient(135deg,#4a6db8,#1a2542) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:14px !important;
  color:#fff !important;
  box-shadow:0 3px 10px rgba(0,0,0,.55) !important;
  z-index:2 !important;
}
.comm-list-av img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Онлайн-бейдж */
.comm-list-online{
  position:absolute !important;
  top:6px !important;
  right:6px !important;
  padding:2px 7px !important;
  border-radius:9px !important;
  background:rgba(0,0,0,.65) !important;
  color:#3fd07a !important;
  font-size:10px !important;
  font-weight:700 !important;
  display:flex !important;
  align-items:center !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  z-index:2 !important;
}
.comm-list-online .dot{
  width:5px !important;
  height:5px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  box-shadow:0 0 6px #3fd07a !important;
  margin-right:2px !important;
}

/* Инфо справа */
.comm-list-info{
  flex:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  justify-content:center !important;
  padding:2px 0 !important;
}

.comm-list-name{
  font-size:18px !important;
  font-weight:800 !important;
  color:var(--text) !important;
  line-height:1.15 !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
  word-break:break-word !important;
}

.comm-list-members{
  font-size:12px !important;
  color:var(--text-dim) !important;
  margin-top:8px !important;
  text-transform:uppercase !important;
  letter-spacing:.5px !important;
  font-weight:600 !important;
}

.comm-list-row .woon-activity-bar{
  max-width:160px !important;
  margin-top:6px !important;
  padding:2px !important;
}

.comm-list-tagline{
  font-size:13px !important;
  color:var(--text) !important;
  margin-top:10px !important;
  font-weight:500 !important;
  line-height:1.3 !important;
}

.comm-list-tags{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-top:10px !important;
}
.comm-list-tag{
  font-size:11.5px !important;
  padding:5px 12px !important;
  border-radius:10px !important;
  background:rgba(120,150,210,.18) !important;
  border:1px solid rgba(120,150,210,.28) !important;
  color:var(--text) !important;
  font-weight:600 !important;
  white-space:nowrap !important;
}

/* Светлая тема */
:root[data-theme="light"] .comm-list-row{
  background:linear-gradient(155deg,#ffffff,#f4f7fc) !important;
  border-color:rgba(59,130,246,.2) !important;
}
:root[data-theme="light"] .comm-list-name{ color:#0a1f5c !important }
:root[data-theme="light"] .comm-list-members{ color:#4a5d8f !important }
:root[data-theme="light"] .comm-list-tagline{ color:#0a1f5c !important }
:root[data-theme="light"] .comm-list-tag{
  background:rgba(59,130,246,.12) !important;
  border-color:rgba(59,130,246,.3) !important;
  color:#2563eb !important;
}

/* Амино */
html[data-accent="amino"] .comm-list-row{
  background:linear-gradient(155deg, rgba(58,26,82,.75), rgba(37,16,56,.9)) !important;
  border-color:rgba(200,120,230,.22) !important;
}
html[data-accent="amino"] .comm-list-tag{
  background:rgba(168,102,200,.2) !important;
  border-color:rgba(200,120,230,.35) !important;
}

/* Классика */
html[data-accent="classic"] .comm-list-row{
  background:linear-gradient(155deg, rgba(34,34,34,.85), rgba(20,20,20,.95)) !important;
  border-color:rgba(200,200,200,.2) !important;
}

/* Красная */
html[data-accent="red"] .comm-list-row{
  background:linear-gradient(155deg, rgba(74,26,26,.75), rgba(42,12,12,.9)) !important;
  border-color:rgba(220,120,120,.22) !important;
}
html[data-accent="red"] .comm-list-tag{
  background:rgba(212,90,90,.2) !important;
  border-color:rgba(220,120,120,.35) !important;
}



/* ============================================================
   ПОЛОСЫ АКТИВНОСТИ — 7 КРАСИВЫХ СЕГМЕНТОВ
   ============================================================ */

/* Контейнер */
.woon-activity-bar,
.cinfo-activity-bar{
  display:flex !important;
  gap:3px !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  border:none !important;
  height:auto !important;
  width:100% !important;
  max-width:220px !important;
  margin-top:8px !important;
}

/* Каждый сегмент — отдельная капсула */
.woon-activity-bar .wab-seg,
.cinfo-activity-bar .cinfo-seg{
  flex:1 !important;
  height:5px !important;
  min-height:5px !important;
  border-radius:3px !important;
  background:rgba(120,150,210,.14) !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
  transition:
    background .35s cubic-bezier(.3,.7,.3,1),
    box-shadow .35s cubic-bezier(.3,.7,.3,1),
    transform .25s cubic-bezier(.3,.7,.3,1) !important;
  position:relative !important;
  overflow:hidden !important;
}

/* Заполненный сегмент — градиент + свечение + лёгкий блик */
.woon-activity-bar .wab-seg.on,
.cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #4EA4CC 0%, #7A5AC8 100%) !important;
  box-shadow:
    0 0 8px rgba(122,90,200,.55),
    0 0 4px rgba(78,164,204,.4),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}
/* Пробегающий блик по каждому заполненному сегменту */
.woon-activity-bar .wab-seg.on::after,
.cinfo-activity-bar .cinfo-seg.on::after{
  content:'' !important;
  position:absolute !important;
  top:0 !important; left:-100% !important;
  width:80% !important; height:100% !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent) !important;
  animation: actShimmer 3s ease-in-out infinite !important;
}
@keyframes actShimmer{
  0%   { left:-100% }
  100% { left:200% }
}
/* Задержка для каскада */
.woon-activity-bar .wab-seg.on:nth-child(1)::after,
.cinfo-activity-bar .cinfo-seg.on:nth-child(1)::after{ animation-delay:0s }
.woon-activity-bar .wab-seg.on:nth-child(2)::after,
.cinfo-activity-bar .cinfo-seg.on:nth-child(2)::after{ animation-delay:.15s }
.woon-activity-bar .wab-seg.on:nth-child(3)::after,
.cinfo-activity-bar .cinfo-seg.on:nth-child(3)::after{ animation-delay:.3s }
.woon-activity-bar .wab-seg.on:nth-child(4)::after,
.cinfo-activity-bar .cinfo-seg.on:nth-child(4)::after{ animation-delay:.45s }
.woon-activity-bar .wab-seg.on:nth-child(5)::after,
.cinfo-activity-bar .cinfo-seg.on:nth-child(5)::after{ animation-delay:.6s }
.woon-activity-bar .wab-seg.on:nth-child(6)::after,
.cinfo-activity-bar .cinfo-seg.on:nth-child(6)::after{ animation-delay:.75s }
.woon-activity-bar .wab-seg.on:nth-child(7)::after,
.cinfo-activity-bar .cinfo-seg.on:nth-child(7)::after{ animation-delay:.9s }

/* На карточке в ленте — маленькая */
.comm-hero .woon-activity-bar{
  max-width:160px !important;
  gap:2px !important;
  margin-top:10px !important;
}
.comm-hero .wab-seg{ height:4px !important }

/* В поиске — ещё компактнее */
.comm-list-row .woon-activity-bar{
  max-width:150px !important;
  gap:2px !important;
  margin-top:6px !important;
}
.comm-list-row .wab-seg{ height:4px !important }

/* Светлая тема — пустые сегменты темнее */
:root[data-theme="light"] .woon-activity-bar .wab-seg,
:root[data-theme="light"] .cinfo-activity-bar .cinfo-seg{
  background:rgba(59,130,246,.15) !important;
}

/* Амино — градиент фиолет-розовый */
html[data-accent="amino"] .woon-activity-bar .wab-seg.on,
html[data-accent="amino"] .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #7a3aa0 0%, #c088e0 100%) !important;
  box-shadow:
    0 0 8px rgba(200,120,230,.6),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* Классика — серый */
html[data-accent="classic"] .woon-activity-bar .wab-seg.on,
html[data-accent="classic"] .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #8a8a8a 0%, #c8c8c8 100%) !important;
  box-shadow:
    0 0 8px rgba(200,200,200,.5),
    inset 0 1px 0 rgba(255,255,255,.4) !important;
}

/* Красная */
html[data-accent="red"] .woon-activity-bar .wab-seg.on,
html[data-accent="red"] .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #d45a5a 0%, #e88080 100%) !important;
  box-shadow:
    0 0 8px rgba(220,120,120,.6),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* ============================================================
   ПОКАЗАТЕЛЬ УРОВНЯ рядом с полосой
   ============================================================ */
.cinfo-activity-row{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:8px !important;
}
.cinfo-activity-bar{
  flex:1 !important;
  max-width:200px !important;
}
.cinfo-activity-level{
  font-size:11px !important;
  font-weight:700 !important;
  color:var(--accent-3) !important;
  white-space:nowrap !important;
  font-family:ui-monospace,monospace !important;
  letter-spacing:.5px !important;
}


/* ============================================================
   ПОЛОСА АКТИВНОСТИ — ЕДИНАЯ ПЛАШКА С ДЕЛЕНИЯМИ
   (как на макете — один скруглённый прямоугольник,
    внутри которого 7 сегментов активности)
   ============================================================ */

.woon-activity-bar,
.cinfo-activity-bar{
  display:flex !important;
  gap:0 !important;
  padding:0 !important;
  height:9px !important;
  width:100% !important;
  max-width:180px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  background:rgba(120,150,210,.15) !important;
  border:1px solid rgba(120,150,210,.22) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25) !important;
  position:relative !important;
  margin-top:8px !important;
}

/* Внутри контейнера — 7 сегментов, с разделителями между ними */
.woon-activity-bar .wab-seg,
.cinfo-activity-bar .cinfo-seg{
  flex:1 !important;
  height:100% !important;
  border-radius:0 !important;
  background:transparent !important;
  border:none !important;
  position:relative !important;
  overflow:hidden !important;
  transition:background .35s cubic-bezier(.3,.7,.3,1) !important;
}

/* Разделитель между сегментами — тонкая тёмная полоска */
.woon-activity-bar .wab-seg + .wab-seg::before,
.cinfo-activity-bar .cinfo-seg + .cinfo-seg::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  top:1px !important;
  bottom:1px !important;
  width:1.5px !important;
  background:rgba(10,17,34,.85) !important;
  border-radius:1px !important;
  z-index:2 !important;
}

/* Активный сегмент — залит градиентом */
.woon-activity-bar .wab-seg.on,
.cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #4EA4CC 0%, #7A5AC8 100%) !important;
  box-shadow:none !important;
}

/* Блик пробегающий — по всей плашке */
.woon-activity-bar::after,
.cinfo-activity-bar::after{
  content:'' !important;
  position:absolute !important;
  top:0 !important; left:-30% !important;
  width:25% !important; height:100% !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent) !important;
  animation: actSweep 3.5s ease-in-out infinite !important;
  pointer-events:none !important;
  z-index:5 !important;
}
@keyframes actSweep{
  0%   { left:-30% }
  50%  { left:120% }
  100% { left:120% }
}

/* Внутренний лёгкий градиент для объёма */
.woon-activity-bar::before,
.cinfo-activity-bar::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 50%, rgba(0,0,0,.15) 100%) !important;
  pointer-events:none !important;
  z-index:4 !important;
}

/* В hero-карточке ленты */
.comm-hero .woon-activity-bar{
  max-width:170px !important;
  height:8px !important;
  margin-top:10px !important;
}

/* В поиске — компактнее */
.comm-list-row .woon-activity-bar{
  max-width:170px !important;
  height:8px !important;
  margin-top:8px !important;
}

/* Уровень N/7 */
.cinfo-activity-level{
  font-size:11px !important;
  font-weight:700 !important;
  color:var(--accent-3) !important;
  font-family:ui-monospace,monospace !important;
  letter-spacing:.5px !important;
}

/* Светлая тема — плашка светлее, разделители белее */
:root[data-theme="light"] .woon-activity-bar,
:root[data-theme="light"] .cinfo-activity-bar{
  background:rgba(59,130,246,.12) !important;
  border-color:rgba(59,130,246,.25) !important;
}
:root[data-theme="light"] .woon-activity-bar .wab-seg + .wab-seg::before,
:root[data-theme="light"] .cinfo-activity-bar .cinfo-seg + .cinfo-seg::before{
  background:rgba(255,255,255,.85) !important;
}

/* Амино */
html[data-accent="amino"] .woon-activity-bar .wab-seg.on,
html[data-accent="amino"] .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #7a3aa0 0%, #c088e0 100%) !important;
}
html[data-accent="amino"] .woon-activity-bar,
html[data-accent="amino"] .cinfo-activity-bar{
  background:rgba(200,120,230,.12) !important;
  border-color:rgba(200,120,230,.25) !important;
}

/* Классика */
html[data-accent="classic"] .woon-activity-bar .wab-seg.on,
html[data-accent="classic"] .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #8a8a8a 0%, #c8c8c8 100%) !important;
}
html[data-accent="classic"] .woon-activity-bar,
html[data-accent="classic"] .cinfo-activity-bar{
  background:rgba(200,200,200,.1) !important;
  border-color:rgba(200,200,200,.2) !important;
}

/* Красная */
html[data-accent="red"] .woon-activity-bar .wab-seg.on,
html[data-accent="red"] .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #d45a5a 0%, #e88080 100%) !important;
}
html[data-accent="red"] .woon-activity-bar,
html[data-accent="red"] .cinfo-activity-bar{
  background:rgba(220,120,120,.12) !important;
  border-color:rgba(220,120,120,.25) !important;
}


/* ============================================================
   ПОЛОСА АКТИВНОСТИ — ВЫШЕ И МАТОВАЯ
   ============================================================ */

.woon-activity-bar,
.cinfo-activity-bar{
  display:flex !important;
  gap:0 !important;
  padding:0 !important;
  height:16px !important;
  width:100% !important;
  max-width:200px !important;
  border-radius:8px !important;
  overflow:hidden !important;
  background:rgba(120,150,210,.10) !important;
  border:1px solid rgba(120,150,210,.18) !important;
  box-shadow:none !important;
  position:relative !important;
  margin-top:10px !important;
}

/* Убираем блик и объём */
.woon-activity-bar::after,
.cinfo-activity-bar::after,
.woon-activity-bar::before,
.cinfo-activity-bar::before{
  display:none !important;
  content:none !important;
}

/* Сегменты — плоские, без свечения */
.woon-activity-bar .wab-seg,
.cinfo-activity-bar .cinfo-seg{
  flex:1 !important;
  height:100% !important;
  border-radius:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  transition:background .35s cubic-bezier(.3,.7,.3,1) !important;
  position:relative !important;
  overflow:hidden !important;
}

/* Разделители — тонкие, тёмные */
.woon-activity-bar .wab-seg + .wab-seg::before,
.cinfo-activity-bar .cinfo-seg + .cinfo-seg::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  top:2px !important;
  bottom:2px !important;
  width:1.5px !important;
  background:rgba(10,17,34,.7) !important;
  border-radius:1px !important;
  z-index:2 !important;
}

/* Активные — плоская заливка без свечения */
.woon-activity-bar .wab-seg.on,
.cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #4EA4CC 0%, #7A5AC8 100%) !important;
  box-shadow:none !important;
}

/* Убираем индивидуальные блики сегментов */
.woon-activity-bar .wab-seg.on::after,
.cinfo-activity-bar .cinfo-seg.on::after{
  display:none !important;
  content:none !important;
  animation:none !important;
}

/* В hero-карточке ленты */
.comm-hero .woon-activity-bar{
  max-width:190px !important;
  height:14px !important;
  margin-top:10px !important;
  border-radius:7px !important;
}

/* В поиске */
.comm-list-row .woon-activity-bar{
  max-width:190px !important;
  height:14px !important;
  margin-top:8px !important;
  border-radius:7px !important;
}

/* В инфо-соо */
.cinfo-activity-bar{
  max-width:220px !important;
  height:16px !important;
  border-radius:8px !important;
}

/* Светлая тема */
:root[data-theme="light"] .woon-activity-bar,
:root[data-theme="light"] .cinfo-activity-bar{
  background:rgba(59,130,246,.10) !important;
  border-color:rgba(59,130,246,.20) !important;
}
:root[data-theme="light"] .woon-activity-bar .wab-seg + .wab-seg::before,
:root[data-theme="light"] .cinfo-activity-bar .cinfo-seg + .cinfo-seg::before{
  background:rgba(255,255,255,.8) !important;
}

/* Амино */
html[data-accent="amino"] .woon-activity-bar .wab-seg.on,
html[data-accent="amino"] .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #7a3aa0 0%, #c088e0 100%) !important;
}

/* Классика */
html[data-accent="classic"] .woon-activity-bar .wab-seg.on,
html[data-accent="classic"] .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #8a8a8a 0%, #c8c8c8 100%) !important;
}

/* Красная */
html[data-accent="red"] .woon-activity-bar .wab-seg.on,
html[data-accent="red"] .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #d45a5a 0%, #e88080 100%) !important;
}


/* ============================================================
   ПОЛОСА АКТИВНОСТИ — ВЫШЕ И МАТОВАЯ
   ============================================================ */

.woon-activity-bar,
.cinfo-activity-bar{
  display:flex !important;
  gap:0 !important;
  padding:0 !important;
  height:16px !important;
  width:100% !important;
  max-width:200px !important;
  border-radius:8px !important;
  overflow:hidden !important;
  background:rgba(120,150,210,.10) !important;
  border:1px solid rgba(120,150,210,.18) !important;
  box-shadow:none !important;
  position:relative !important;
  margin-top:10px !important;
}

/* Убираем блик и объём */
.woon-activity-bar::after,
.cinfo-activity-bar::after,
.woon-activity-bar::before,
.cinfo-activity-bar::before{
  display:none !important;
  content:none !important;
}

/* Сегменты — плоские, без свечения */
.woon-activity-bar .wab-seg,
.cinfo-activity-bar .cinfo-seg{
  flex:1 !important;
  height:100% !important;
  border-radius:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  transition:background .35s cubic-bezier(.3,.7,.3,1) !important;
  position:relative !important;
  overflow:hidden !important;
}

/* Разделители — тонкие, тёмные */
.woon-activity-bar .wab-seg + .wab-seg::before,
.cinfo-activity-bar .cinfo-seg + .cinfo-seg::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  top:2px !important;
  bottom:2px !important;
  width:1.5px !important;
  background:rgba(10,17,34,.7) !important;
  border-radius:1px !important;
  z-index:2 !important;
}

/* Активные — плоская заливка без свечения */
.woon-activity-bar .wab-seg.on,
.cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #4EA4CC 0%, #7A5AC8 100%) !important;
  box-shadow:none !important;
}

/* Убираем индивидуальные блики сегментов */
.woon-activity-bar .wab-seg.on::after,
.cinfo-activity-bar .cinfo-seg.on::after{
  display:none !important;
  content:none !important;
  animation:none !important;
}

/* В hero-карточке ленты */
.comm-hero .woon-activity-bar{
  max-width:190px !important;
  height:14px !important;
  margin-top:10px !important;
  border-radius:7px !important;
}

/* В поиске */
.comm-list-row .woon-activity-bar{
  max-width:190px !important;
  height:14px !important;
  margin-top:8px !important;
  border-radius:7px !important;
}

/* В инфо-соо */
.cinfo-activity-bar{
  max-width:220px !important;
  height:16px !important;
  border-radius:8px !important;
}

/* Светлая тема */
:root[data-theme="light"] .woon-activity-bar,
:root[data-theme="light"] .cinfo-activity-bar{
  background:rgba(59,130,246,.10) !important;
  border-color:rgba(59,130,246,.20) !important;
}
:root[data-theme="light"] .woon-activity-bar .wab-seg + .wab-seg::before,
:root[data-theme="light"] .cinfo-activity-bar .cinfo-seg + .cinfo-seg::before{
  background:rgba(255,255,255,.8) !important;
}

/* Амино */
html[data-accent="amino"] .woon-activity-bar .wab-seg.on,
html[data-accent="amino"] .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #7a3aa0 0%, #c088e0 100%) !important;
}

/* Классика */
html[data-accent="classic"] .woon-activity-bar .wab-seg.on,
html[data-accent="classic"] .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #8a8a8a 0%, #c8c8c8 100%) !important;
}

/* Красная */
html[data-accent="red"] .woon-activity-bar .wab-seg.on,
html[data-accent="red"] .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #d45a5a 0%, #e88080 100%) !important;
}


/* ============================================================
   ПОЛОСА АКТИВНОСТИ — ЕЩЁ УЖЕ (-40%)
   ============================================================ */

.woon-activity-bar,
.cinfo-activity-bar{
  height:12px !important;
  min-width:60px !important;
  max-width:80px !important;
  border-radius:6px !important;
  margin-top:6px !important;
  padding:0 !important;
}

/* В hero ленты */
.comm-hero .woon-activity-bar{
  height:10px !important;
  min-width:50px !important;
  max-width:70px !important;
  margin-top:6px !important;
  border-radius:5px !important;
}

/* В поиске */
.comm-list-row .woon-activity-bar{
  height:10px !important;
  min-width:50px !important;
  max-width:70px !important;
  margin-top:5px !important;
  border-radius:5px !important;
}

/* В инфо-соо */
.cinfo-activity-bar{
  height:12px !important;
  min-width:65px !important;
  max-width:85px !important;
  border-radius:6px !important;
}

/* Разделители тоньше, отступы сверху/снизу меньше */
.woon-activity-bar .wab-seg + .wab-seg::before,
.cinfo-activity-bar .cinfo-seg + .cinfo-seg::before{
  top:1.5px !important;
  bottom:1.5px !important;
  width:1px !important;
}



/* ============================================================
   HERO-КАРТОЧКА СООБЩЕСТВА — полоса выше + обводка + "в сети" вправо
   ============================================================ */

/* Полоса внутри карточки — чуть выше */
.comm-hero-activity.woon-activity-bar{
  height:14px !important;
  max-width:130px !important;
  min-width:100px !important;
  margin-top:8px !important;
  border-radius:7px !important;
}

/* Градиентная обводка через двойной фон */
.comm-hero-activity.woon-activity-bar{
  background:
    linear-gradient(rgba(10,17,34,.55), rgba(10,17,34,.55)) padding-box,
    linear-gradient(90deg, #4EA4CC 0%, #7A5AC8 100%) border-box !important;
  border:1.5px solid transparent !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,.35),
    0 0 12px rgba(122,90,200,.25) !important;
}

/* Внутренние сегменты внутри обводки */
.comm-hero-activity .wab-seg{
  background:transparent !important;
}
.comm-hero-activity .wab-seg.on{
  background:linear-gradient(90deg, #4EA4CC 0%, #7A5AC8 100%) !important;
  box-shadow:0 0 6px rgba(122,90,200,.5) !important;
}

/* Разделители — тоньше, но заметные */
.comm-hero-activity .wab-seg + .wab-seg::before{
  background:rgba(0,0,0,.55) !important;
  top:2px !important;
  bottom:2px !important;
}

/* "N в сети" — вправо вниз */
.comm-hero .comm-hero-online{
  position:absolute !important;
  right:14px !important;
  bottom:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:4px 10px !important;
  border-radius:10px !important;
  background:rgba(0,0,0,.5) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  color:#5cffa0 !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  text-shadow:0 1px 4px rgba(0,0,0,.9) !important;
  z-index:4 !important;
  border:1px solid rgba(63,208,122,.35) !important;
}
.comm-hero .comm-hero-online .on-dot{
  width:7px !important;
  height:7px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  box-shadow:0 0 8px rgba(63,208,122,.9) !important;
  flex-shrink:0 !important;
}

/* Мета без "в сети" — только участники */
.comm-hero-meta{
  display:flex !important;
  gap:10px !important;
  align-items:center !important;
}
/* Убираем старый .on у меты если остался */
.comm-hero-meta .on{
  display:none !important;
}

/* Светлая тема — обводка и фон */
:root[data-theme="light"] .comm-hero-activity.woon-activity-bar{
  background:
    linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)) padding-box,
    linear-gradient(90deg, #3b82f6 0%, #a866c8 100%) border-box !important;
  border-color:transparent !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,.12),
    0 0 12px rgba(122,90,200,.15) !important;
}
:root[data-theme="light"] .comm-hero .comm-hero-online{
  background:rgba(255,255,255,.9) !important;
  color:#22a06b !important;
  border-color:rgba(34,160,107,.35) !important;
  text-shadow:none !important;
}

/* Амино — обводка фиолет-розовая */
html[data-accent="amino"] .comm-hero-activity.woon-activity-bar{
  background:
    linear-gradient(rgba(10,5,20,.55), rgba(10,5,20,.55)) padding-box,
    linear-gradient(90deg, #7a3aa0 0%, #c088e0 100%) border-box !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,.4),
    0 0 12px rgba(200,120,230,.3) !important;
}
html[data-accent="amino"] .comm-hero-activity .wab-seg.on{
  background:linear-gradient(90deg, #7a3aa0 0%, #c088e0 100%) !important;
}

/* Классика */
html[data-accent="classic"] .comm-hero-activity.woon-activity-bar{
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)) padding-box,
    linear-gradient(90deg, #8a8a8a 0%, #c8c8c8 100%) border-box !important;
}
html[data-accent="classic"] .comm-hero-activity .wab-seg.on{
  background:linear-gradient(90deg, #8a8a8a 0%, #c8c8c8 100%) !important;
}

/* Красная */
html[data-accent="red"] .comm-hero-activity.woon-activity-bar{
  background:
    linear-gradient(rgba(20,5,5,.55), rgba(20,5,5,.55)) padding-box,
    linear-gradient(90deg, #d45a5a 0%, #e88080 100%) border-box !important;
}
html[data-accent="red"] .comm-hero-activity .wab-seg.on{
  background:linear-gradient(90deg, #d45a5a 0%, #e88080 100%) !important;
}



/* ============================================================
   HERO — строка: [полоса] [N в сети] на одной высоте
   ============================================================ */

.comm-hero-actrow{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:8px !important;
  width:100% !important;
}

.comm-hero-actrow .comm-hero-activity.woon-activity-bar{
  height:14px !important;
  max-width:130px !important;
  min-width:100px !important;
  margin:0 !important;
  border-radius:7px !important;
  flex-shrink:0 !important;
  align-self:center !important;
}

/* "N в сети" — без плашки, просто текст рядом */
.comm-hero-actrow .comm-hero-online{
  position:static !important;
  right:auto !important;
  bottom:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  color:#5cffa0 !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  text-shadow:0 1px 4px rgba(0,0,0,.95) !important;
  white-space:nowrap !important;
  height:14px !important;
  line-height:14px !important;
}

.comm-hero-actrow .comm-hero-online .on-dot{
  width:7px !important;
  height:7px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  box-shadow:0 0 6px rgba(63,208,122,.9) !important;
  flex-shrink:0 !important;
}

/* Светлая тема — тёмно-зелёный текст */
:root[data-theme="light"] .comm-hero-actrow .comm-hero-online{
  color:#22a06b !important;
  text-shadow:0 1px 4px rgba(255,255,255,.7) !important;
}

/* Амино — фиолетовая обводка полосы (уже была) */
html[data-accent="amino"] .comm-hero-activity.woon-activity-bar{
  background:
    linear-gradient(rgba(10,5,20,.55), rgba(10,5,20,.55)) padding-box,
    linear-gradient(90deg, #7a3aa0 0%, #c088e0 100%) border-box !important;
}
html[data-accent="amino"] .comm-hero-activity .wab-seg.on{
  background:linear-gradient(90deg, #7a3aa0 0%, #c088e0 100%) !important;
}

/* Классика */
html[data-accent="classic"] .comm-hero-activity.woon-activity-bar{
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)) padding-box,
    linear-gradient(90deg, #8a8a8a 0%, #c8c8c8 100%) border-box !important;
}
html[data-accent="classic"] .comm-hero-activity .wab-seg.on{
  background:linear-gradient(90deg, #8a8a8a 0%, #c8c8c8 100%) !important;
}

/* Красная */
html[data-accent="red"] .comm-hero-activity.woon-activity-bar{
  background:
    linear-gradient(rgba(20,5,5,.55), rgba(20,5,5,.55)) padding-box,
    linear-gradient(90deg, #d45a5a 0%, #e88080 100%) border-box !important;
}
html[data-accent="red"] .comm-hero-activity .wab-seg.on{
  background:linear-gradient(90deg, #d45a5a 0%, #e88080 100%) !important;
}


/* ============================================================
   3. ИНФО-СОО — красивая вёрстка
   ============================================================ */

.cinfo-card{
  display:flex !important;
  gap:14px !important;
  padding:16px !important;
  margin:12px 16px 0 !important;
  border-radius:18px !important;
  background:linear-gradient(155deg, rgba(26,37,66,.85), rgba(19,28,51,.95)) !important;
  border:1px solid rgba(120,150,210,.22) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 4px 12px rgba(0,0,0,.25) !important;
  overflow:visible !important;
}

.cinfo-av{
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.4),
    0 0 0 2px rgba(255,255,255,.15) !important;
}

.cinfo-info{
  flex:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
}

.cinfo-name{
  font-size:17px !important;
  font-weight:800 !important;
  color:var(--text) !important;
  line-height:1.2 !important;
  word-break:break-word !important;
}

.cinfo-members{
  font-size:12px !important;
  color:var(--text-dim) !important;
  font-weight:600 !important;
}

.cinfo-activity-row{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:4px !important;
}

.cinfo-tagline-inline{
  font-size:13px !important;
  color:var(--text) !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  margin-top:6px !important;
}

.cinfo-tags-inline{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-top:6px !important;
}

/* Секция описания */
.cinfo-section{
  margin:14px 16px 0 !important;
  padding:16px !important;
  border-radius:16px !important;
  background:linear-gradient(155deg, rgba(26,37,66,.6), rgba(19,28,51,.75)) !important;
  border:1px solid rgba(120,150,210,.15) !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,.25),
    0 2px 8px rgba(0,0,0,.15) !important;
  overflow:visible !important;
}

.cinfo-section-title{
  font-size:13px !important;
  font-weight:700 !important;
  color:var(--text) !important;
  margin-bottom:12px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.cinfo-desc-block{
  min-height:200px !important;
  display:flex !important;
  flex-direction:column !important;
}

.cinfo-description{
  font-size:13.5px !important;
  line-height:1.55 !important;
  color:var(--text-dim) !important;
  word-break:break-word !important;
}

.cinfo-empty{
  flex:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:13px !important;
  color:var(--text-muted) !important;
  padding:30px 0 !important;
}

/* Светлая тема */
:root[data-theme="light"] .cinfo-card{
  background:linear-gradient(155deg,#ffffff,#f4f7fc) !important;
  border-color:rgba(59,130,246,.2) !important;
  box-shadow:
    0 10px 30px rgba(59,130,246,.12),
    0 4px 12px rgba(59,130,246,.08) !important;
}
:root[data-theme="light"] .cinfo-section{
  background:linear-gradient(155deg,#ffffff,#f4f7fc) !important;
  border-color:rgba(59,130,246,.15) !important;
  box-shadow:
    0 6px 20px rgba(59,130,246,.08),
    0 2px 8px rgba(59,130,246,.05) !important;
}
:root[data-theme="light"] .cinfo-name{ color:#0a1f5c !important }
:root[data-theme="light"] .cinfo-members{ color:#4a5d8f !important }
:root[data-theme="light"] .cinfo-tagline-inline{ color:#0a1f5c !important }
:root[data-theme="light"] .cinfo-section-title{ color:#0a1f5c !important }
:root[data-theme="light"] .cinfo-description{ color:#4a5d8f !important }
:root[data-theme="light"] .cinfo-empty{ color:#8fa0c8 !important }

/* Тёмные темы — свои градиенты */
html[data-accent="amino"] .cinfo-card{
  background:linear-gradient(155deg, rgba(58,26,82,.85), rgba(37,16,56,.95)) !important;
  border-color:rgba(200,120,230,.25) !important;
}
html[data-accent="amino"] .cinfo-section{
  background:linear-gradient(155deg, rgba(58,26,82,.6), rgba(37,16,56,.75)) !important;
  border-color:rgba(200,120,230,.2) !important;
}

html[data-accent="classic"] .cinfo-card{
  background:linear-gradient(155deg, rgba(34,34,34,.9), rgba(20,20,20,.95)) !important;
  border-color:rgba(200,200,200,.2) !important;
}
html[data-accent="classic"] .cinfo-section{
  background:linear-gradient(155deg, rgba(34,34,34,.7), rgba(20,20,20,.85)) !important;
}

html[data-accent="red"] .cinfo-card{
  background:linear-gradient(155deg, rgba(74,26,26,.85), rgba(42,12,12,.95)) !important;
  border-color:rgba(220,120,120,.25) !important;
}
html[data-accent="red"] .cinfo-section{
  background:linear-gradient(155deg, rgba(74,26,26,.6), rgba(42,12,12,.75)) !important;
  border-color:rgba(220,120,120,.2) !important;
}



/* ============================================================
   ИНФО-СОО — ФОН-ОБЛОЖКА 40% + УЗКАЯ ПОЛОСА + ПОДПИСИ
   ============================================================ */

.cinfo-card{
  position:relative !important;
  overflow:hidden !important;
  display:block !important;
  padding:0 !important;
  margin:12px 16px 0 !important;
  border-radius:18px !important;
  border:1px solid rgba(120,150,210,.22) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 4px 12px rgba(0,0,0,.25) !important;
  min-height:180px !important;
}

/* Фон — обложка с затемнением 40% */
.cinfo-card .cinfo-bg{
  position:absolute !important;
  inset:0 !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  z-index:0 !important;
}
.cinfo-card .cinfo-bg::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:rgba(10,17,34,.4) !important;
}

/* Контент поверх фона */
.cinfo-card .cinfo-inner{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  gap:14px !important;
  padding:16px !important;
  align-items:flex-start !important;
}

.cinfo-av{
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.5),
    0 0 0 2px rgba(255,255,255,.25) !important;
  flex-shrink:0 !important;
  position:relative !important;
}

.cinfo-av-dot{
  position:absolute !important;
  top:4px !important;
  right:4px !important;
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  border:2px solid rgba(0,0,0,.4) !important;
  box-shadow:0 0 8px rgba(63,208,122,.9) !important;
  z-index:5 !important;
}

.cinfo-info{
  flex:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}

/* Текст на фоне — белый с тенью */
.cinfo-card .cinfo-name{
  font-size:17px !important;
  font-weight:800 !important;
  color:#ffffff !important;
  line-height:1.2 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.95), 0 0 16px rgba(0,0,0,.7) !important;
  word-break:break-word !important;
}

.cinfo-card .cinfo-members{
  font-size:12px !important;
  color:rgba(255,255,255,.85) !important;
  font-weight:600 !important;
  text-shadow:0 1px 4px rgba(0,0,0,.9) !important;
}

.cinfo-card .cinfo-tagline-inline{
  font-size:13px !important;
  color:rgba(255,255,255,.92) !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  margin-top:6px !important;
  text-shadow:0 1px 6px rgba(0,0,0,.95) !important;
}

.cinfo-card .cinfo-tags-inline{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-top:6px !important;
}
.cinfo-card .cinfo-tag{
  font-size:11px !important;
  padding:4px 10px !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  color:#ffffff !important;
  font-weight:600 !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
  text-shadow:0 1px 3px rgba(0,0,0,.7) !important;
}

/* Полоса — на 30% уже */
.cinfo-card .cinfo-activity-bar{
  height:10px !important;
  max-width:110px !important;
  min-width:80px !important;
  margin-top:8px !important;
  border-radius:5px !important;
  flex-shrink:0 !important;
  align-self:flex-start !important;
  background:rgba(0,0,0,.35) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  padding:0 !important;
}
.cinfo-card .cinfo-activity-bar .cinfo-seg{
  height:100% !important;
  background:rgba(255,255,255,.08) !important;
}
.cinfo-card .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #4EA4CC 0%, #7A5AC8 100%) !important;
}
.cinfo-card .cinfo-activity-bar .cinfo-seg + .cinfo-seg::before{
  background:rgba(0,0,0,.7) !important;
  top:1.5px !important;
  bottom:1.5px !important;
  width:1px !important;
}

/* Подпись "активность" */
.cinfo-activity-label-text{
  font-size:10.5px !important;
  color:rgba(255,255,255,.7) !important;
  margin-top:4px !important;
  letter-spacing:.3px !important;
  text-transform:lowercase !important;
  text-shadow:0 1px 3px rgba(0,0,0,.9) !important;
}

/* "N в сети" снизу */
.cinfo-online{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  margin-top:8px !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  color:#5cffa0 !important;
  text-shadow:0 1px 4px rgba(0,0,0,.95) !important;
  align-self:flex-start !important;
}
.cinfo-online-dot{
  width:7px !important;
  height:7px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  box-shadow:0 0 8px rgba(63,208,122,.9) !important;
  flex-shrink:0 !important;
}

/* Секции описания — без фона, светлая */
.cinfo-section{
  margin:14px 16px 0 !important;
  padding:16px !important;
  border-radius:16px !important;
  background:linear-gradient(155deg, rgba(26,37,66,.6), rgba(19,28,51,.75)) !important;
  border:1px solid rgba(120,150,210,.15) !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,.25),
    0 2px 8px rgba(0,0,0,.15) !important;
}

.cinfo-section-title{
  font-size:13px !important;
  font-weight:700 !important;
  color:var(--text) !important;
  margin-bottom:12px !important;
}

.cinfo-desc-block{
  min-height:180px !important;
  display:flex !important;
  flex-direction:column !important;
}

.cinfo-description{
  font-size:13.5px !important;
  line-height:1.55 !important;
  color:var(--text-dim) !important;
}

.cinfo-empty{
  flex:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:13px !important;
  color:var(--text-muted) !important;
  padding:30px 0 !important;
}

/* Светлая тема — фон затемнён 40% от светлого */
:root[data-theme="light"] .cinfo-card .cinfo-bg::after{
  background:rgba(255,255,255,.4) !important;
}
:root[data-theme="light"] .cinfo-card .cinfo-name{
  color:#0a1f5c !important;
  text-shadow:0 2px 8px rgba(255,255,255,.95) !important;
}
:root[data-theme="light"] .cinfo-card .cinfo-members{
  color:#4a5d8f !important;
  text-shadow:0 1px 4px rgba(255,255,255,.9) !important;
}
:root[data-theme="light"] .cinfo-card .cinfo-tagline-inline{
  color:#0a1f5c !important;
  text-shadow:0 1px 6px rgba(255,255,255,.95) !important;
}
:root[data-theme="light"] .cinfo-card .cinfo-tag{
  background:rgba(255,255,255,.6) !important;
  border-color:rgba(59,130,246,.25) !important;
  color:#2563eb !important;
}
:root[data-theme="light"] .cinfo-activity-label-text{
  color:rgba(10,31,92,.7) !important;
  text-shadow:0 1px 4px rgba(255,255,255,.8) !important;
}
:root[data-theme="light"] .cinfo-online{
  color:#1a8a52 !important;
  text-shadow:0 1px 4px rgba(255,255,255,.9) !important;
}
:root[data-theme="light"] .cinfo-section{
  background:linear-gradient(155deg,#ffffff,#f4f7fc) !important;
}
:root[data-theme="light"] .cinfo-section-title{ color:#0a1f5c !important }
:root[data-theme="light"] .cinfo-description{ color:#4a5d8f !important }

/* Амино — градиент полосы */
html[data-accent="amino"] .cinfo-card .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #7a3aa0 0%, #c088e0 100%) !important;
}

/* Классика */
html[data-accent="classic"] .cinfo-card .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #8a8a8a 0%, #c8c8c8 100%) !important;
}

/* Красная */
html[data-accent="red"] .cinfo-card .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #d45a5a 0%, #e88080 100%) !important;
}


/* ============================================================
   ПОЛОСЫ АКТИВНОСТИ — УМЕНЬШИТЬ ВЫСОТУ
   ============================================================ */

/* Инфо-соо — было 20px, делаем 9px */
.cinfo-card .cinfo-activity-bar,
.cinfo-activity-bar{
  height:9px !important;
  max-width:110px !important;
  min-width:80px !important;
  border-radius:5px !important;
  padding:0 !important;
}

/* Hero в ленте — было 18px */
.comm-hero-activity.woon-activity-bar{
  height:8px !important;
  max-width:130px !important;
  min-width:100px !important;
  border-radius:4px !important;
}

/* Карточки поиска — было 16px */
.comm-list-row .woon-activity-bar,
.woon-activity-bar{
  height:7px !important;
  border-radius:4px !important;
}

/* Разделители — плотнее по новой высоте */
.cinfo-activity-bar .cinfo-seg + .cinfo-seg::before,
.woon-activity-bar .wab-seg + .wab-seg::before{
  top:1.5px !important;
  bottom:1.5px !important;
  width:1px !important;
}


/* ============================================================
   ФИКС: БЕЙДЖ УВЕДОМЛЕНИЙ НЕ СКРЫВАЕТСЯ
   ============================================================ */

/* Жёстко скрываем .hidden — на всё */
.hidden,
.hidden *,
.notif-badge.hidden{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  overflow:hidden !important;
  pointer-events:none !important;
  position:absolute !important;
  top:-9999px !important;
  left:-9999px !important;
}

/* Сам бейдж — показывается только когда НЕ hidden */
.notif-btn .notif-badge:not(.hidden){
  position:absolute !important;
  top:-4px !important;
  right:-4px !important;
  left:auto !important;
  bottom:auto !important;
  width:auto !important;
  height:auto !important;
  min-width:18px !important;
  height:18px !important;
  padding:0 5px !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  background:linear-gradient(135deg,#d24a4a,#b83a3a) !important;
  color:#fff !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  border-radius:9px !important;
  align-items:center !important;
  justify-content:center !important;
  border:2px solid var(--bg-phone-2,#060a14) !important;
  box-shadow:0 2px 8px rgba(210,74,74,.5) !important;
  z-index:5 !important;
  pointer-events:none !important;
}



/* ============================================================
   ПОЛОСА АКТИВА — ЕДИНЫЙ СКРУГЛЁННЫЙ ПРЯМОУГОЛЬНИК
   ============================================================ */

/* --- На экране "О сообществе" --- */
.cinfo-activity-bar,
.woon-activity-bar{
  display:flex !important;
  gap:2px !important;
  padding:3px !important;
  border-radius:999px !important;
  background:rgba(120,150,210,.12) !important;
  border:1px solid rgba(120,150,210,.18) !important;
  overflow:hidden !important;
  height:auto !important;
  align-items:stretch !important;
}
.cinfo-seg,
.wab-seg{
  flex:1 !important;
  height:6px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.08) !important;
  transition:background .3s ease, box-shadow .3s ease !important;
}
.cinfo-seg.on,
.wab-seg.on{
  background:linear-gradient(90deg,#4EA4CC 0%,#7A5AC8 100%) !important;
  box-shadow:0 0 8px rgba(122,90,200,.6), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.cinfo-activity-bar{
  max-width:100% !important;
  margin-top:0 !important;
}

/* --- На hero-карточке в ленте --- */
.comm-hero .woon-activity-bar{
  max-width:100% !important;
  margin-top:10px !important;
  padding:3px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
}

/* --- На маленьких карточках в поиске --- */
.comm-search-card .woon-activity-bar{
  padding:2px !important;
  margin-top:6px !important;
  background:rgba(0,0,0,.25) !important;
  border:1px solid rgba(255,255,255,.1) !important;
}
.comm-search-card .wab-seg{
  height:4px !important;
  border-radius:999px !important;
}

/* ============================================================
   СЛОГАН НА ЭКРАНЕ "О СООБЩЕСТВЕ" — отдельный блок
   ============================================================ */
.cinfo-tagline-section{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 16px !important;
  padding:12px 16px !important;
  border-radius:14px !important;
  background:linear-gradient(155deg, rgba(122,90,200,.15), rgba(78,164,204,.10)) !important;
  border:1px solid rgba(140,120,220,.25) !important;
}
.cinfo-tagline-icon{
  font-size:16px !important;
  flex-shrink:0 !important;
}
.cinfo-tagline-text{
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--text) !important;
  line-height:1.4 !important;
  font-style:italic !important;
}

/* ============================================================
   ОПИСАНИЕ — БОЛЬШОЕ ПО ВЫСОТЕ
   ============================================================ */
.cinfo-desc-block{
  min-height:320px !important;
  display:flex !important;
  flex-direction:column !important;
}
.cinfo-description{
  flex:1 !important;
  font-size:13.5px !important;
  line-height:1.55 !important;
  color:var(--text) !important;
  white-space:pre-wrap !important;
  word-break:break-word !important;
}
.cinfo-empty{
  flex:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:13px !important;
  color:var(--text-muted) !important;
  text-align:center !important;
  font-style:italic !important;
}

/* Убираем старый бейдж-слоган (если где-то остался) */
.cinfo-tagline-badge{
  display:none !important;
}

/* ============================================================
   Светлая тема
   ============================================================ */
:root[data-theme="light"] .cinfo-tagline-section{
  background:linear-gradient(155deg, rgba(168,102,200,.12), rgba(59,130,246,.08)) !important;
  border-color:rgba(140,120,220,.35) !important;
}
:root[data-theme="light"] .cinfo-tagline-text{ color:#0a1f5c !important }
:root[data-theme="light"] .cinfo-activity-bar,
:root[data-theme="light"] .woon-activity-bar{
  background:rgba(59,130,246,.10) !important;
  border-color:rgba(59,130,246,.2) !important;
}
:root[data-theme="light"] .cinfo-seg,
:root[data-theme="light"] .wab-seg{
  background:rgba(59,130,246,.12) !important;
}

/* ============================================================
   Тема Амино
   ============================================================ */
html[data-accent="amino"] .cinfo-tagline-section{
  background:linear-gradient(155deg, rgba(168,102,200,.25), rgba(200,120,230,.15)) !important;
  border-color:rgba(200,120,230,.4) !important;
}
html[data-accent="amino"] .cinfo-seg.on,
html[data-accent="amino"] .wab-seg.on{
  background:linear-gradient(90deg,#7a3aa0 0%,#c088e0 100%) !important;
  box-shadow:0 0 8px rgba(168,102,200,.6) !important;
}

/* ============================================================
   Тема Классика
   ============================================================ */
html[data-accent="classic"] .cinfo-seg.on,
html[data-accent="classic"] .wab-seg.on{
  background:linear-gradient(90deg,#8a8a8a 0%,#c8c8c8 100%) !important;
  box-shadow:0 0 8px rgba(200,200,200,.5) !important;
}

/* ============================================================
   Тема Красная
   ============================================================ */
html[data-accent="red"] .cinfo-tagline-section{
  background:linear-gradient(155deg, rgba(212,90,90,.18), rgba(232,128,128,.10)) !important;
  border-color:rgba(220,120,120,.4) !important;
}
html[data-accent="red"] .cinfo-seg.on,
html[data-accent="red"] .wab-seg.on{
  background:linear-gradient(90deg,#d45a5a 0%,#e88080 100%) !important;
  box-shadow:0 0 8px rgba(212,90,90,.6) !important;
}



/* ============================================================
   ФИНАЛЬНЫЙ ФИКС ИНФО-СОО + ПОЛОСА АКТИВНОСТИ
   ============================================================ */

/* Баннер 16:9 сверху карточки */
.cinfo-banner{
  position:relative !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
  overflow:hidden !important;
  background:linear-gradient(150deg,#2a3f6e,#0f1726) !important;
  flex-shrink:0 !important;
}
.cinfo-banner img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.cinfo-banner::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.35) 100%) !important;
  pointer-events:none !important;
}

/* ============================================================
   РЯД [полоса] [онлайн]
   ============================================================ */
.cinfo-actrow{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin-top:10px !important;
  width:100% !important;
}

/* Полоса — цельная, высотой 18px, свой градиент */
.cinfo-actrow .cinfo-activity-bar{
  display:flex !important;
  height:18px !important;
  width:100% !important;
  max-width:160px !important;
  border-radius:9px !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
  background:rgba(30,45,80,.4) !important;
  border:none !important;
  flex-shrink:0 !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4) !important;
  position:relative !important;
}

/* Единый градиент (голубой → фиолетовый) для всей полосы */
.cinfo-actrow .cinfo-activity-bar::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg, #4EA4CC 0%, #7A5AC8 100%) !important;
  opacity:0 !important;
  transition:opacity .4s ease !important;
  pointer-events:none !important;
  z-index:0 !important;
}

/* Сегменты — полупрозрачные разделители */
.cinfo-actrow .cinfo-seg{
  flex:1 !important;
  height:100% !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  position:relative !important;
  z-index:1 !important;
}
.cinfo-actrow .cinfo-seg + .cinfo-seg::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  top:2px !important;
  bottom:2px !important;
  width:1.5px !important;
  background:rgba(255,255,255,.25) !important;
  border-radius:1px !important;
  z-index:2 !important;
}

/* Заполненный сегмент — через псевдоэлемент полосы, цвет заливки
   берётся из общего градиента, а сегмент становится "ярче" */
.cinfo-actrow .cinfo-activity-bar .cinfo-seg.on{
  background:linear-gradient(90deg, #4EA4CC 0%, #7A5AC8 100%) !important;
  background-attachment:fixed !important;
}

/* Более простой подход: пусть каждый on-сегмент имеет свой градиент
   пропорционально позиции, чтобы полоса выглядела цельной */
.cinfo-actrow .cinfo-activity-bar .cinfo-seg.on:nth-child(1){ background:linear-gradient(90deg, #4EA4CC 0%, #5A82CE 100%) !important; }
.cinfo-actrow .cinfo-activity-bar .cinfo-seg.on:nth-child(2){ background:linear-gradient(90deg, #5A82CE 0%, #6575D6 100%) !important; }
.cinfo-actrow .cinfo-activity-bar .cinfo-seg.on:nth-child(3){ background:linear-gradient(90deg, #6575D6 0%, #7070DC 100%) !important; }
.cinfo-actrow .cinfo-activity-bar .cinfo-seg.on:nth-child(4){ background:linear-gradient(90deg, #7070DC 0%, #7A5AC8 100%) !important; }
.cinfo-actrow .cinfo-activity-bar .cinfo-seg.on:nth-child(5){ background:linear-gradient(90deg, #7A5AC8 0%, #8E55CC 100%) !important; }
.cinfo-actrow .cinfo-activity-bar .cinfo-seg.on:nth-child(6){ background:linear-gradient(90deg, #8E55CC 0%, #A250CE 100%) !important; }
.cinfo-actrow .cinfo-activity-bar .cinfo-seg.on:nth-child(7){ background:linear-gradient(90deg, #A250CE 0%, #B565D0 100%) !important; }

/* Онлайн справа */
.cinfo-actrow .cinfo-online{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:none !important;
  color:#5cffa0 !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  text-shadow:0 1px 4px rgba(0,0,0,.95) !important;
  white-space:nowrap !important;
  flex-shrink:0 !important;
}
.cinfo-actrow .cinfo-online-dot{
  width:8px !important;
  height:8px !important;
  border-radius:50% !important;
  background:#3fd07a !important;
  box-shadow:0 0 8px rgba(63,208,122,.95) !important;
  flex-shrink:0 !important;
}

/* Подпись */
.cinfo-activity-label-text{
  font-size:10.5px !important;
  color:var(--text-dim) !important;
  margin-top:6px !important;
  letter-spacing:.3px !important;
  text-transform:lowercase !important;
}

/* Светлая тема */
:root[data-theme="light"] .cinfo-actrow .cinfo-activity-bar{
  background:rgba(200,215,240,.6) !important;
}
:root[data-theme="light"] .cinfo-actrow .cinfo-seg + .cinfo-seg::before{
  background:rgba(255,255,255,.7) !important;
}
:root[data-theme="light"] .cinfo-actrow .cinfo-online{
  color:#1a8a52 !important;
  text-shadow:0 1px 4px rgba(255,255,255,.9) !important;
}
:root[data-theme="light"] .cinfo-activity-label-text{
  color:#4a5d8f !important;
}



/* ============================================================
   ВОЗВРАТ ФОНА-ОБЛОЖКИ (баннер 16:9 отключён)
   ============================================================ */

/* Прячем баннер — используем фон-обложку */
.cinfo-banner{ display:none !important }

/* Карточка — фон-обложка с затемнением 40% */
.cinfo-card{
  position:relative !important;
  overflow:hidden !important;
  display:block !important;
  padding:0 !important;
  margin:12px 16px 0 !important;
  border-radius:18px !important;
  border:1px solid rgba(120,150,210,.22) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 4px 12px rgba(0,0,0,.25) !important;
  min-height:200px !important;
  background:linear-gradient(155deg, rgba(26,37,66,.85), rgba(19,28,51,.95)) !important;
}

/* Фон-обложка */
.cinfo-card .cinfo-bg{
  position:absolute !important;
  inset:0 !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  z-index:0 !important;
}
.cinfo-card .cinfo-bg::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:rgba(10,17,34,.4) !important;
}

/* Контент поверх */
.cinfo-card .cinfo-inner{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  gap:14px !important;
  padding:16px !important;
  align-items:flex-start !important;
}

/* Аватар */
.cinfo-av{
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.5),
    0 0 0 2px rgba(255,255,255,.25) !important;
  flex-shrink:0 !important;
  position:relative !important;
  background:linear-gradient(135deg,#4a6db8,#1a2542) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:32px !important;
  color:#fff !important;
}
.cinfo-av img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Тексты — белые с тенью */
.cinfo-card .cinfo-name{
  font-size:17px !important;
  font-weight:800 !important;
  color:#ffffff !important;
  line-height:1.2 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.95), 0 0 16px rgba(0,0,0,.7) !important;
  word-break:break-word !important;
}
.cinfo-card .cinfo-members{
  font-size:12px !important;
  color:rgba(255,255,255,.85) !important;
  font-weight:600 !important;
  text-shadow:0 1px 4px rgba(0,0,0,.9) !important;
  margin-top:4px !important;
}
.cinfo-card .cinfo-tagline-inline{
  font-size:13px !important;
  color:rgba(255,255,255,.92) !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  margin-top:8px !important;
  text-shadow:0 1px 6px rgba(0,0,0,.95) !important;
}
.cinfo-card .cinfo-tags-inline{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-top:8px !important;
}
.cinfo-card .cinfo-tag{
  font-size:11px !important;
  padding:4px 10px !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  color:#ffffff !important;
  font-weight:600 !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
  text-shadow:0 1px 3px rgba(0,0,0,.7) !important;
}

/* Светлая тема */
:root[data-theme="light"] .cinfo-card .cinfo-bg::after{
  background:rgba(255,255,255,.4) !important;
}
:root[data-theme="light"] .cinfo-card .cinfo-name{
  color:#0a1f5c !important;
  text-shadow:0 2px 8px rgba(255,255,255,.95) !important;
}
:root[data-theme="light"] .cinfo-card .cinfo-members{
  color:#4a5d8f !important;
  text-shadow:0 1px 4px rgba(255,255,255,.9) !important;
}
:root[data-theme="light"] .cinfo-card .cinfo-tagline-inline{
  color:#0a1f5c !important;
  text-shadow:0 1px 6px rgba(255,255,255,.95) !important;
}
:root[data-theme="light"] .cinfo-card .cinfo-tag{
  background:rgba(255,255,255,.6) !important;
  border-color:rgba(59,130,246,.25) !important;
  color:#2563eb !important;
}
:root[data-theme="light"] .cinfo-activity-label-text{
  color:rgba(10,31,92,.7) !important;
  text-shadow:0 1px 4px rgba(255,255,255,.8) !important;
}



/* ============================================================
   ПОЛОСА АКТИВНОСТИ — ЕДИНЫЙ ГРАДИЕНТ (не по сегментам)
   ============================================================ */

/* Отключаем индивидуальные градиенты сегментов */
.cinfo-actrow .cinfo-activity-bar .cinfo-seg.on:nth-child(1),
.cinfo-actrow .cinfo-activity-bar .cinfo-seg.on:nth-child(2),
.cinfo-actrow .cinfo-activity-bar .cinfo-seg.on:nth-child(3),
.cinfo-actrow .cinfo-activity-bar .cinfo-seg.on:nth-child(4),
.cinfo-actrow .cinfo-activity-bar .cinfo-seg.on:nth-child(5),
.cinfo-actrow .cinfo-activity-bar .cinfo-seg.on:nth-child(6),
.cinfo-actrow .cinfo-activity-bar .cinfo-seg.on:nth-child(7),
.woon-activity-bar .wab-seg.on,
.cinfo-activity-bar .cinfo-seg.on{
  background:transparent !important;
}

/* Контейнеры — позиционирование для fill */
.cinfo-activity-bar,
.woon-activity-bar{
  position:relative !important;
  overflow:hidden !important;
}

/* ФИЛЛ — единый градиент, ширина задаётся из JS */
.cinfo-activity-bar .cinfo-fill,
.woon-activity-bar .wab-fill{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  height:100% !important;
  background:linear-gradient(90deg, #4EA4CC 0%, #5A82CE 30%, #7A5AC8 70%, #A250CE 100%) !important;
  background-size:200% 100% !important;
  border-radius:inherit !important;
  transition:width .5s cubic-bezier(.3,.7,.3,1) !important;
  z-index:0 !important;
  pointer-events:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 0 12px rgba(122,90,200,.4) !important;
}

/* Сегменты поверх филла — только разделители */
.cinfo-activity-bar .cinfo-seg,
.woon-activity-bar .wab-seg{
  position:relative !important;
  z-index:1 !important;
  background:transparent !important;
}

/* Разделители — тонкие белые полупрозрачные */
.cinfo-activity-bar .cinfo-seg + .cinfo-seg::before,
.woon-activity-bar .wab-seg + .wab-seg::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  top:2px !important;
  bottom:2px !important;
  width:1px !important;
  background:rgba(255,255,255,.25) !important;
  z-index:2 !important;
  border-radius:1px !important;
}

/* Пустой фон контейнера */
.cinfo-actrow .cinfo-activity-bar{
  background:rgba(30,45,80,.4) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4) !important;
}

/* Светлая тема */
:root[data-theme="light"] .cinfo-actrow .cinfo-activity-bar{
  background:rgba(200,215,240,.6) !important;
}
:root[data-theme="light"] .cinfo-activity-bar .cinfo-seg + .cinfo-seg::before,
:root[data-theme="light"] .woon-activity-bar .wab-seg + .wab-seg::before{
  background:rgba(255,255,255,.7) !important;
}


/* ============================================================
   ПОЛОСА АКТИВНОСТИ — НАСЫЩЕННЫЙ ГРАДИЕНТ + КРАСИВЫЕ РАЗДЕЛИТЕЛИ
   ============================================================ */

/* Контейнер полосы — с градиентной обводкой через двойной фон */
.cinfo-actrow .cinfo-activity-bar,
.woon-activity-bar.comm-hero-activity{
  position:relative !important;
  overflow:hidden !important;
  height:18px !important;
  border-radius:10px !important;
  padding:0 !important;
  box-shadow:
    0 4px 14px rgba(122,90,200,.35),
    0 0 24px rgba(78,164,204,.25),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
  background:
    linear-gradient(rgba(15,22,45,.65), rgba(15,22,45,.65)) padding-box,
    linear-gradient(135deg, rgba(78,164,204,.85) 0%, rgba(122,90,200,.85) 50%, rgba(162,80,206,.85) 100%) border-box !important;
  border:1.5px solid transparent !important;
}

/* ФИЛЛ — насыщенный градиент с анимацией */
.cinfo-activity-bar .cinfo-fill,
.woon-activity-bar .wab-fill{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  height:100% !important;
  background:linear-gradient(
    90deg,
    #00B8E6 0%,
    #2E7DFF 25%,
    #5D4DE8 55%,
    #8B3BE8 80%,
    #C420B8 100%
  ) !important;
  background-size:200% 100% !important;
  border-radius:inherit !important;
  transition:width .6s cubic-bezier(.3,.7,.3,1) !important;
  z-index:0 !important;
  pointer-events:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 0 20px rgba(93,77,232,.6),
    0 0 40px rgba(162,80,206,.35) !important;
  animation:fillGlow 3s ease-in-out infinite !important;
}
@keyframes fillGlow{
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.4),
      inset 0 -1px 0 rgba(0,0,0,.2),
      0 0 20px rgba(93,77,232,.6),
      0 0 40px rgba(162,80,206,.35);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.5),
      inset 0 -1px 0 rgba(0,0,0,.2),
      0 0 26px rgba(93,77,232,.85),
      0 0 50px rgba(162,80,206,.5);
  }
}

/* Лёгкий пробегающий блик по филлу */
.cinfo-activity-bar .cinfo-fill::after,
.woon-activity-bar .wab-fill::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.15) 45%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,.15) 55%,
    transparent 100%
  ) !important;
  background-size:200% 100% !important;
  animation:sweepShine 3.5s ease-in-out infinite !important;
  pointer-events:none !important;
  border-radius:inherit !important;
}
@keyframes sweepShine{
  0%   { background-position:200% 0 }
  100% { background-position:-100% 0 }
}

/* РАЗДЕЛИТЕЛИ — теперь мягкие, красивые, полупрозрачные */
.cinfo-activity-bar .cinfo-seg + .cinfo-seg::before,
.woon-activity-bar .wab-seg + .wab-seg::before{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:4px !important;
  bottom:4px !important;
  width:1px !important;
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(255,255,255,.35) 20%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.35) 80%,
    transparent 100%
  ) !important;
  border-radius:1px !important;
  transform:translateX(-50%) !important;
  z-index:2 !important;
  opacity:.7 !important;
  box-shadow:0 0 4px rgba(255,255,255,.3) !important;
}

/* Сегменты — прозрачные, только для позиционирования */
.cinfo-activity-bar .cinfo-seg,
.woon-activity-bar .wab-seg{
  background:transparent !important;
  position:relative !important;
  z-index:1 !important;
}

/* Светлая тема — та же полоса, но чуть светлее фон контейнера */
:root[data-theme="light"] .cinfo-actrow .cinfo-activity-bar,
:root[data-theme="light"] .woon-activity-bar.comm-hero-activity{
  background:
    linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.75)) padding-box,
    linear-gradient(135deg, rgba(59,130,246,.85) 0%, rgba(122,90,200,.85) 50%, rgba(162,80,206,.85) 100%) border-box !important;
  border:1.5px solid transparent !important;
  box-shadow:
    0 4px 14px rgba(122,90,200,.25),
    0 0 20px rgba(78,164,204,.15) !important;
}

/* И остальные размеры — увеличим скругления */
.cinfo-activity-bar,
.woon-activity-bar{
  border-radius:10px !important;
}
.comm-list-row .woon-activity-bar,
.woon-activity-bar{
  height:14px !important;
  border-radius:8px !important;
}
.comm-hero-activity.woon-activity-bar{
  height:16px !important;
  border-radius:9px !important;
}
.cinfo-actrow .cinfo-activity-bar{
  height:18px !important;
  border-radius:10px !important;
}



/* ============================================================
   ИНФО-СОО — ФИНАЛЬНЫЕ ПРАВКИ
   ============================================================ */

/* Полоса активности — на 35% уже + толще обводка */
.cinfo-actrow .cinfo-activity-bar{
  height:20px !important;
  max-width:105px !important;
  min-width:75px !important;
  border-radius:10px !important;
  border-width:2.5px !important;
  background:
    linear-gradient(rgba(15,22,45,.65), rgba(15,22,45,.65)) padding-box,
    linear-gradient(135deg, rgba(78,164,204,.95) 0%, rgba(122,90,200,.95) 50%, rgba(162,80,206,.95) 100%) border-box !important;
  border-style:solid !important;
  border-color:transparent !important;
  box-shadow:
    0 4px 16px rgba(122,90,200,.45),
    0 0 28px rgba(78,164,204,.3),
    inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* Разделители — с новой высотой */
.cinfo-actrow .cinfo-activity-bar .cinfo-seg + .cinfo-seg::before{
  top:4px !important;
  bottom:4px !important;
}

/* Кнопка входа/открытия — между карточкой и описанием */
.cinfo-action-wrap{
  margin:14px 16px 0 !important;
  padding:0 !important;
}

.cinfo-btn{
  width:100% !important;
  padding:14px 20px !important;
  border-radius:14px !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.3px !important;
  box-shadow:
    0 6px 18px rgba(78,164,204,.35),
    0 2px 8px rgba(0,0,0,.25) !important;
}
.cinfo-btn:hover{
  box-shadow:
    0 10px 26px rgba(78,164,204,.5),
    0 4px 12px rgba(0,0,0,.3) !important;
}

/* Светлая тема */
:root[data-theme="light"] .cinfo-actrow .cinfo-activity-bar{
  background:
    linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)) padding-box,
    linear-gradient(135deg, rgba(59,130,246,.95) 0%, rgba(122,90,200,.95) 50%, rgba(162,80,206,.95) 100%) border-box !important;
}
:root[data-theme="light"] .cinfo-btn{
  box-shadow:
    0 6px 18px rgba(122,90,200,.25),
    0 2px 8px rgba(0,0,0,.1) !important;
}

/* Амино — обводка фиолет-розовая */
html[data-accent="amino"] .cinfo-actrow .cinfo-activity-bar{
  background:
    linear-gradient(rgba(15,10,30,.65), rgba(15,10,30,.65)) padding-box,
    linear-gradient(135deg, rgba(122,58,160,.95) 0%, rgba(200,120,230,.95) 100%) border-box !important;
}

/* Красная */
html[data-accent="red"] .cinfo-actrow .cinfo-activity-bar{
  background:
    linear-gradient(rgba(25,5,5,.65), rgba(25,5,5,.65)) padding-box,
    linear-gradient(135deg, rgba(212,90,90,.95) 0%, rgba(232,128,128,.95) 100%) border-box !important;
}



/* ============================================================
   ПОЛОСА АКТИВНОСТИ — ОБЫЧНЫЙ ВИД (7 on-сегментов)
   ============================================================ */

/* Скрываем fill-слой если где-то остался */
.cinfo-fill,
.wab-fill{
  display:none !important;
}

/* Контейнер — цельная плашка */
.cinfo-actrow .cinfo-activity-bar,
.woon-activity-bar{
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  gap:0 !important;
  padding:0 !important;
  border-radius:8px !important;
  background:rgba(30,45,80,.5) !important;
  border:1.5px solid transparent !important;
  background-image:
    linear-gradient(rgba(30,45,80,.5), rgba(30,45,80,.5)),
    linear-gradient(135deg, rgba(78,164,204,.7) 0%, rgba(122,90,200,.7) 100%) !important;
  background-origin:border-box !important;
  background-clip:padding-box, border-box !important;
  box-shadow:
    0 3px 10px rgba(0,0,0,.25),
    inset 0 1px 2px rgba(0,0,0,.3) !important;
}

/* Инфо-соо — высота 14px */
.cinfo-actrow .cinfo-activity-bar{
  height:14px !important;
  max-width:130px !important;
  min-width:95px !important;
}

/* Hero ленты */
.comm-hero-activity.woon-activity-bar{
  height:12px !important;
  max-width:130px !important;
}

/* Поиск */
.comm-list-row .woon-activity-bar{
  height:10px !important;
}

/* Сегменты — прозрачные в покое */
.cinfo-activity-bar .cinfo-seg,
.woon-activity-bar .wab-seg{
  flex:1 !important;
  height:100% !important;
  background:transparent !important;
  border-radius:0 !important;
  position:relative !important;
  z-index:1 !important;
}

/* Активные — залиты градиентом */
.cinfo-activity-bar .cinfo-seg.on,
.woon-activity-bar .wab-seg.on{
  background:linear-gradient(90deg, #4EA4CC 0%, #7A5AC8 100%) !important;
  background-image:linear-gradient(90deg, #4EA4CC 0%, #7A5AC8 100%) !important;
}

/* Разделители — тонкие полупрозрачные */
.cinfo-activity-bar .cinfo-seg + .cinfo-seg::before,
.woon-activity-bar .wab-seg + .wab-seg::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  top:2px !important;
  bottom:2px !important;
  width:1px !important;
  background:rgba(255,255,255,.25) !important;
  border-radius:1px !important;
  z-index:3 !important;
}

/* Тема амино */
html[data-accent="amino"] .cinfo-activity-bar .cinfo-seg.on,
html[data-accent="amino"] .woon-activity-bar .wab-seg.on{
  background:linear-gradient(90deg, #7a3aa0 0%, #c088e0 100%) !important;
}

/* Классика */
html[data-accent="classic"] .cinfo-activity-bar .cinfo-seg.on,
html[data-accent="classic"] .woon-activity-bar .wab-seg.on{
  background:linear-gradient(90deg, #8a8a8a 0%, #c8c8c8 100%) !important;
}

/* Красная */
html[data-accent="red"] .cinfo-activity-bar .cinfo-seg.on,
html[data-accent="red"] .woon-activity-bar .wab-seg.on{
  background:linear-gradient(90deg, #d45a5a 0%, #e88080 100%) !important;
}

/* Светлая тема */
:root[data-theme="light"] .cinfo-actrow .cinfo-activity-bar,
:root[data-theme="light"] .woon-activity-bar{
  background:rgba(200,215,240,.7) !important;
  background-image:
    linear-gradient(rgba(200,215,240,.7), rgba(200,215,240,.7)),
    linear-gradient(135deg, rgba(59,130,246,.7) 0%, rgba(122,90,200,.7) 100%) !important;
  background-origin:border-box !important;
  background-clip:padding-box, border-box !important;
}


/* ============================================================
   АВАТАРКИ В ПРОФИЛЯХ — УМЕНЬШИТЬ НА 4
   ============================================================ */

/* Глобальный профиль — было 85px → 81px */
.profile-hero .avatar.av-2xl,
.profile-hero .avatar.av-xl{
  width:81px !important;
  height:81px !important;
  font-size:36px !important;
}

/* Локальный профиль в сообществе (тот же класс) */
.comm-screen .profile-hero .avatar.av-2xl,
.comm-screen .profile-hero .avatar.av-xl{
  width:81px !important;
  height:81px !important;
  font-size:36px !important;
}

/* Превью в информации о сообществе — было 72px → 68px */
.cinfo-av{
  width:68px !important;
  height:68px !important;
  min-width:68px !important;
  font-size:30px !important;
}

/* Если где-то в других местах используется av-2xl — не трогаем */
/* Плюс — центральный круг в редакторе профиля остаётся как был */



/* ============================================================
   ПОЛОСА АКТИВНОСТИ — ПУСТАЯ (нет активности)
   ============================================================ */

.cinfo-activity-bar.is-empty,
.woon-activity-bar.is-empty{
  opacity:.45 !important;
  background-image:
    linear-gradient(rgba(30,45,80,.5), rgba(30,45,80,.5)),
    linear-gradient(135deg, rgba(120,150,210,.4) 0%, rgba(120,150,210,.4) 100%) !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,.15),
    inset 0 1px 2px rgba(0,0,0,.2) !important;
  border-color:rgba(120,150,210,.2) !important;
}

.cinfo-activity-bar.is-empty .cinfo-seg,
.woon-activity-bar.is-empty .wab-seg{
  background:transparent !important;
}

.cinfo-activity-bar.is-empty .cinfo-seg + .cinfo-seg::before,
.woon-activity-bar.is-empty .wab-seg + .wab-seg::before{
  background:rgba(255,255,255,.15) !important;
  opacity:.5 !important;
}

/* Светлая тема — пустая полоса светлая, прозрачная */
:root[data-theme="light"] .cinfo-activity-bar.is-empty,
:root[data-theme="light"] .woon-activity-bar.is-empty{
  background-image:
    linear-gradient(rgba(200,215,240,.7), rgba(200,215,240,.7)),
    linear-gradient(135deg, rgba(59,130,246,.3) 0%, rgba(122,90,200,.3) 100%) !important;
  opacity:.55 !important;
}
:root[data-theme="light"] .cinfo-activity-bar.is-empty .cinfo-seg + .cinfo-seg::before,
:root[data-theme="light"] .woon-activity-bar.is-empty .wab-seg + .wab-seg::before{
  background:rgba(100,120,160,.3) !important;
}


/* ============================================================
   ПОЛОСА АКТИВНОСТИ — ПРОСТАЯ ТЁМНАЯ, БЕЗ ГРАДИЕНТОВ
   ============================================================ */

/* Контейнер — просто тёмная плашка */
.cinfo-actrow .cinfo-activity-bar,
.woon-activity-bar{
  background:rgba(15,22,45,.7) !important;
  background-image:none !important;
  border:1px solid rgba(120,150,210,.25) !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,.3),
    inset 0 1px 2px rgba(0,0,0,.35) !important;
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  gap:0 !important;
  padding:0 !important;
}

/* Каждый сегмент — просто заливка, без градиентов */
.cinfo-activity-bar .cinfo-seg,
.woon-activity-bar .wab-seg{
  flex:1 !important;
  height:100% !important;
  background:transparent !important;
  background-image:none !important;
  border-radius:0 !important;
  position:relative !important;
}

/* Активный сегмент — просто голубая заливка */
.cinfo-activity-bar .cinfo-seg.on,
.woon-activity-bar .wab-seg.on{
  background:#5A82CE !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Разделители — просто тёмные полоски */
.cinfo-activity-bar .cinfo-seg + .cinfo-seg::before,
.woon-activity-bar .wab-seg + .wab-seg::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:1.5px !important;
  background:rgba(15,22,45,.95) !important;
  background-image:none !important;
  border-radius:0 !important;
  z-index:3 !important;
  opacity:1 !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Пустая полоса — просто полупрозрачная */
.cinfo-activity-bar.is-empty,
.woon-activity-bar.is-empty{
  opacity:.5 !important;
  background:rgba(15,22,45,.5) !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Убираем все border-box градиенты */
.cinfo-actrow .cinfo-activity-bar,
.woon-activity-bar.comm-hero-activity{
  background-image:none !important;
  background-clip:border-box !important;
}

/* Тёмная тема — по умолчанию */
:root:not([data-theme="light"]) .cinfo-actrow .cinfo-activity-bar,
:root:not([data-theme="light"]) .woon-activity-bar{
  background:rgba(15,22,45,.75) !important;
  border-color:rgba(120,150,210,.28) !important;
}
:root:not([data-theme="light"]) .cinfo-activity-bar .cinfo-seg.on,
:root:not([data-theme="light"]) .woon-activity-bar .wab-seg.on{
  background:#5A82CE !important;
}

/* Светлая тема */
:root[data-theme="light"] .cinfo-actrow .cinfo-activity-bar,
:root[data-theme="light"] .woon-activity-bar{
  background:rgba(200,215,240,.85) !important;
  border-color:rgba(59,130,246,.3) !important;
}
:root[data-theme="light"] .cinfo-activity-bar .cinfo-seg.on,
:root[data-theme="light"] .woon-activity-bar .wab-seg.on{
  background:#3b82f6 !important;
}
:root[data-theme="light"] .cinfo-activity-bar .cinfo-seg + .cinfo-seg::before,
:root[data-theme="light"] .woon-activity-bar .wab-seg + .wab-seg::before{
  background:rgba(255,255,255,.9) !important;
}

/* Тема амино */
html[data-accent="amino"] .cinfo-activity-bar .cinfo-seg.on,
html[data-accent="amino"] .woon-activity-bar .wab-seg.on{
  background:#a866c8 !important;
  background-image:none !important;
}

/* Классика */
html[data-accent="classic"] .cinfo-activity-bar .cinfo-seg.on,
html[data-accent="classic"] .woon-activity-bar .wab-seg.on{
  background:#8a8a8a !important;
  background-image:none !important;
}

/* Красная */
html[data-accent="red"] .cinfo-activity-bar .cinfo-seg.on,
html[data-accent="red"] .woon-activity-bar .wab-seg.on{
  background:#d45a5a !important;
  background-image:none !important;
}


/* ============================================================
   ПОЛОСА АКТИВНОСТИ — ПРОСТАЯ ТЁМНАЯ, БЕЗ ГРАДИЕНТОВ
   ============================================================ */

/* Контейнер — просто тёмная плашка */
.cinfo-actrow .cinfo-activity-bar,
.woon-activity-bar{
  background:rgba(15,22,45,.7) !important;
  background-image:none !important;
  border:1px solid rgba(120,150,210,.25) !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,.3),
    inset 0 1px 2px rgba(0,0,0,.35) !important;
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  gap:0 !important;
  padding:0 !important;
}

/* Каждый сегмент — просто заливка, без градиентов */
.cinfo-activity-bar .cinfo-seg,
.woon-activity-bar .wab-seg{
  flex:1 !important;
  height:100% !important;
  background:transparent !important;
  background-image:none !important;
  border-radius:0 !important;
  position:relative !important;
}

/* Активный сегмент — просто голубая заливка */
.cinfo-activity-bar .cinfo-seg.on,
.woon-activity-bar .wab-seg.on{
  background:#5A82CE !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Разделители — просто тёмные полоски */
.cinfo-activity-bar .cinfo-seg + .cinfo-seg::before,
.woon-activity-bar .wab-seg + .wab-seg::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:1.5px !important;
  background:rgba(15,22,45,.95) !important;
  background-image:none !important;
  border-radius:0 !important;
  z-index:3 !important;
  opacity:1 !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Пустая полоса — просто полупрозрачная */
.cinfo-activity-bar.is-empty,
.woon-activity-bar.is-empty{
  opacity:.5 !important;
  background:rgba(15,22,45,.5) !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Убираем все border-box градиенты */
.cinfo-actrow .cinfo-activity-bar,
.woon-activity-bar.comm-hero-activity{
  background-image:none !important;
  background-clip:border-box !important;
}

/* Тёмная тема — по умолчанию */
:root:not([data-theme="light"]) .cinfo-actrow .cinfo-activity-bar,
:root:not([data-theme="light"]) .woon-activity-bar{
  background:rgba(15,22,45,.75) !important;
  border-color:rgba(120,150,210,.28) !important;
}
:root:not([data-theme="light"]) .cinfo-activity-bar .cinfo-seg.on,
:root:not([data-theme="light"]) .woon-activity-bar .wab-seg.on{
  background:#5A82CE !important;
}

/* Светлая тема */
:root[data-theme="light"] .cinfo-actrow .cinfo-activity-bar,
:root[data-theme="light"] .woon-activity-bar{
  background:rgba(200,215,240,.85) !important;
  border-color:rgba(59,130,246,.3) !important;
}
:root[data-theme="light"] .cinfo-activity-bar .cinfo-seg.on,
:root[data-theme="light"] .woon-activity-bar .wab-seg.on{
  background:#3b82f6 !important;
}
:root[data-theme="light"] .cinfo-activity-bar .cinfo-seg + .cinfo-seg::before,
:root[data-theme="light"] .woon-activity-bar .wab-seg + .wab-seg::before{
  background:rgba(255,255,255,.9) !important;
}

/* Тема амино */
html[data-accent="amino"] .cinfo-activity-bar .cinfo-seg.on,
html[data-accent="amino"] .woon-activity-bar .wab-seg.on{
  background:#a866c8 !important;
  background-image:none !important;
}

/* Классика */
html[data-accent="classic"] .cinfo-activity-bar .cinfo-seg.on,
html[data-accent="classic"] .woon-activity-bar .wab-seg.on{
  background:#8a8a8a !important;
  background-image:none !important;
}

/* Красная */
html[data-accent="red"] .cinfo-activity-bar .cinfo-seg.on,
html[data-accent="red"] .woon-activity-bar .wab-seg.on{
  background:#d45a5a !important;
  background-image:none !important;
}
const fs = require('fs');

// ============================================================
// Временно фиксируем заливку полосы на 50%
// ============================================================
const cssPath = 'public/style.css';
let css = fs.readFileSync(cssPath, 'utf8');
fs.copyFileSync(cssPath, cssPath + '.bak_half');

const add = `


/* ============================================================
   АВАТАРКИ В ПРОФИЛЯХ — УМЕНЬШИТЬ НА 4
   ============================================================ */

/* Глобальный профиль — было 85px → 81px */
.profile-hero .avatar.av-2xl,
.profile-hero .avatar.av-xl{
  width:81px !important;
  height:81px !important;
  font-size:36px !important;
}

/* Локальный профиль в сообществе (тот же класс) */
.comm-screen .profile-hero .avatar.av-2xl,
.comm-screen .profile-hero .avatar.av-xl{
  width:81px !important;
  height:81px !important;
  font-size:36px !important;
}

/* Превью в информации о сообществе — было 72px → 68px */
.cinfo-av{
  width:68px !important;
  height:68px !important;
  min-width:68px !important;
  font-size:30px !important;
}

/* Если где-то в других местах используется av-2xl — не трогаем */
/* Плюс — центральный круг в редакторе профиля остаётся как был */


/* ============================================================
   ПУБЛИЧНЫЕ ЧАТЫ — ФОРМАТ 16:9
   ============================================================ */

/* Заменяем aspect-ratio с 1:1 на 16:9 */
.comm-chat-sq{
  aspect-ratio:16/9 !important;
  border-radius:14px !important;
  width:100% !important;
}

/* Обложка заполняет всю ширину */
.comm-chat-sq > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Градиент снизу — чтобы текст читался */
.comm-chat-sq-grad{
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg, transparent 35%, rgba(0,0,0,.85) 100%) !important;
  pointer-events:none !important;
}

/* Информация внизу */
.comm-chat-sq-info{
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:10px !important;
  z-index:2 !important;
}
.comm-chat-sq-name{
  font-size:14px !important;
  font-weight:800 !important;
  -webkit-line-clamp:1 !important;
}
.comm-chat-sq-meta{
  font-size:11px !important;
  margin-top:2px !important;
}

/* Кнопка ⋯ — сверху справа */
.comm-chat-sq-menu{
  top:8px !important;
  right:8px !important;
}

/* Аватар создателя — сверху справа рядом с ⋯ */
.comm-chat-sq-creator{
  top:8px !important;
  right:44px !important;
  width:26px !important;
  height:26px !important;
  font-size:12px !important;
}

/* Сетка — 1 колонка (полная ширина карточки) */
.comm-chats-list{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  padding:4px 16px 8px !important;
}

/* На широких экранах — 2 колонки */
@media (min-width:560px){
  .comm-chats-list{
    grid-template-columns:1fr 1fr !important;
  }
}



/* ============================================================
   ГОЛОСОВЫЕ СООБЩЕНИЯ
   ============================================================ */

/* Кнопка записи в панели ввода */
.chat-voice-btn{
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  background:rgba(74,109,184,.35) !important;
  border:none !important;
  color:#fff !important;
  font-size:16px !important;
  cursor:pointer !important;
  flex-shrink:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:inherit !important;
  transition:.15s !important;
}
.chat-voice-btn:hover{
  background:rgba(74,109,184,.6) !important;
  transform:scale(1.05) !important;
}
.chat-voice-btn:active{
  transform:scale(.94) !important;
}

/* ============================================================
   ПАНЕЛЬ ЗАПИСИ
   ============================================================ */
.voice-rec-panel{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:14px !important;
  padding:14px 22px 26px !important;
}
.voice-rec-title{
  font-size:13px !important;
  color:var(--text-dim) !important;
  font-weight:600 !important;
  letter-spacing:.4px !important;
  text-transform:uppercase !important;
}
.voice-rec-timer{
  font-size:44px !important;
  font-weight:800 !important;
  color:#fff !important;
  font-variant-numeric:tabular-nums !important;
  letter-spacing:2px !important;
  text-shadow:0 4px 16px rgba(210,74,74,.5) !important;
}
.voice-rec-pulse{
  display:flex !important;
  gap:5px !important;
  align-items:center !important;
  height:44px !important;
}
.voice-rec-pulse .vrp-bar{
  width:4px !important;
  height:20% !important;
  border-radius:2px !important;
  background:linear-gradient(180deg, #ff4d6d, #d24a4a) !important;
  animation:vrpWave 1.2s ease-in-out infinite !important;
}
.voice-rec-pulse .vrp-bar:nth-child(1){ animation-delay:0s }
.voice-rec-pulse .vrp-bar:nth-child(2){ animation-delay:.15s }
.voice-rec-pulse .vrp-bar:nth-child(3){ animation-delay:.3s }
.voice-rec-pulse .vrp-bar:nth-child(4){ animation-delay:.45s }
.voice-rec-pulse .vrp-bar:nth-child(5){ animation-delay:.6s }
@keyframes vrpWave{
  0%, 100% { height:20%; opacity:.5 }
  50%      { height:100%; opacity:1 }
}
.voice-rec-controls{
  display:flex !important;
  gap:16px !important;
  align-items:center !important;
  margin-top:4px !important;
}
.voice-rec-btn{
  width:58px !important;
  height:58px !important;
  border-radius:50% !important;
  border:none !important;
  font-size:22px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:inherit !important;
  transition:.18s cubic-bezier(.3,.7,.3,1) !important;
}
.voice-rec-btn:active{
  transform:scale(.92) !important;
}
.voice-rec-btn.cancel{
  background:rgba(210,74,74,.15) !important;
  color:#ff8b8b !important;
  border:1.5px solid rgba(210,74,74,.45) !important;
}
.voice-rec-btn.cancel:hover{
  background:rgba(210,74,74,.28) !important;
}
.voice-rec-btn.send{
  background:linear-gradient(135deg, #22a06b, #3fd07a) !important;
  color:#fff !important;
  box-shadow:0 6px 20px rgba(34,160,107,.5) !important;
}
.voice-rec-btn.send:hover{
  filter:brightness(1.1) !important;
  box-shadow:0 8px 24px rgba(34,160,107,.7) !important;
}

/* ============================================================
   ПЛЕЕР В BUBBLE
   ============================================================ */
.voice-bubble{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px 12px 8px 8px !important;
  border-radius:22px !important;
  background:linear-gradient(155deg, rgba(35,50,88,.95), rgba(22,33,60,.98)) !important;
  border:1px solid rgba(120,150,210,.15) !important;
  min-width:200px !important;
  max-width:280px !important;
  position:relative !important;
  overflow:hidden !important;
  transition:background .2s !important;
}
.voice-bubble::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:var(--progress, 0%) !important;
  background:linear-gradient(90deg, rgba(93,129,200,.35), rgba(120,160,230,.25)) !important;
  transition:width .15s linear !important;
  pointer-events:none !important;
  z-index:0 !important;
}
.msg-row.me .voice-bubble{
  background:linear-gradient(135deg, #3a5aa0, #5d81c8) !important;
  border-color:transparent !important;
}
.msg-row.me .voice-bubble::before{
  background:linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.25)) !important;
}

/* Кнопка play */
.voice-play{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg, #4EA4CC, #5d81c8) !important;
  border:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  flex-shrink:0 !important;
  z-index:2 !important;
  transition:.15s !important;
  padding:0 !important;
  box-shadow:0 3px 10px rgba(0,0,0,.35) !important;
}
.voice-play:hover{
  transform:scale(1.08) !important;
}
.voice-play:active{
  transform:scale(.94) !important;
}
.voice-bubble.playing .voice-play{
  background:linear-gradient(135deg, #d24a4a, #ff5c5c) !important;
}

/* Волна */
.voice-wave{
  display:flex !important;
  align-items:center !important;
  gap:2px !important;
  height:32px !important;
  flex:1 !important;
  z-index:1 !important;
}
.voice-wave-bar{
  flex:1 !important;
  min-width:2px !important;
  max-width:3px !important;
  background:rgba(255,255,255,.5) !important;
  border-radius:2px !important;
  transition:height .15s ease !important;
}
.voice-bubble.playing .voice-wave-bar{
  animation:voiceWave 1.2s ease-in-out infinite !important;
}
.voice-bubble.playing .voice-wave-bar:nth-child(odd){
  animation-delay:.15s !important;
}
.voice-bubble.playing .voice-wave-bar:nth-child(3n){
  animation-delay:.3s !important;
}
@keyframes voiceWave{
  0%, 100% { transform:scaleY(.7) }
  50%      { transform:scaleY(1.15) }
}

/* Время */
.voice-time{
  font-size:11.5px !important;
  color:rgba(255,255,255,.9) !important;
  font-weight:600 !important;
  flex-shrink:0 !important;
  font-variant-numeric:tabular-nums !important;
  z-index:1 !important;
  min-width:32px !important;
  text-align:right !important;
}
.msg-row.me .voice-time{
  color:#fff !important;
}

/* Светлая тема */
:root[data-theme="light"] .voice-bubble{
  background:linear-gradient(155deg, #ffffff, #e8eefb) !important;
  border-color:rgba(59,130,246,.2) !important;
}
:root[data-theme="light"] .voice-bubble::before{
  background:linear-gradient(90deg, rgba(59,130,246,.18), rgba(90,157,255,.12)) !important;
}
:root[data-theme="light"] .voice-wave-bar{
  background:rgba(10,31,92,.4) !important;
}
:root[data-theme="light"] .voice-time{
  color:#0a1f5c !important;
}

/* Чат-войс кнопка в светлой теме */
:root[data-theme="light"] .chat-voice-btn{
  background:rgba(59,130,246,.15) !important;
  color:#2563eb !important;
}
:root[data-theme="light"] .chat-voice-btn:hover{
  background:rgba(59,130,246,.3) !important;
}


/* ============================================================
   ПУБЛИЧНЫЕ ЧАТЫ — ФОРМАТ 16:9
   ============================================================ */

/* Заменяем aspect-ratio с 1:1 на 16:9 */
.comm-chat-sq{
  aspect-ratio:16/9 !important;
  border-radius:14px !important;
  width:100% !important;
}

/* Обложка заполняет всю ширину */
.comm-chat-sq > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Градиент снизу — чтобы текст читался */
.comm-chat-sq-grad{
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg, transparent 35%, rgba(0,0,0,.85) 100%) !important;
  pointer-events:none !important;
}

/* Информация внизу */
.comm-chat-sq-info{
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:10px !important;
  z-index:2 !important;
}
.comm-chat-sq-name{
  font-size:14px !important;
  font-weight:800 !important;
  -webkit-line-clamp:1 !important;
}
.comm-chat-sq-meta{
  font-size:11px !important;
  margin-top:2px !important;
}

/* Кнопка ⋯ — сверху справа */
.comm-chat-sq-menu{
  top:8px !important;
  right:8px !important;
}

/* Аватар создателя — сверху справа рядом с ⋯ */
.comm-chat-sq-creator{
  top:8px !important;
  right:44px !important;
  width:26px !important;
  height:26px !important;
  font-size:12px !important;
}

/* Сетка — 1 колонка (полная ширина карточки) */
.comm-chats-list{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  padding:4px 16px 8px !important;
}

/* На широких экранах — 2 колонки */
@media (min-width:560px){
  .comm-chats-list{
    grid-template-columns:1fr 1fr !important;
  }
}



/* ============================================================
   ОТПРАВКА ГОЛОСОВОГО — спиннер + статус + анимации
   ============================================================ */

/* Кнопка ✓ становится спиннером */
.chat-input-row.voice-mode .voice-bar-btn.send.loading{
  background:rgba(34,160,107,.35) !important;
  box-shadow:
    0 0 0 3px rgba(34,160,107,.2),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
  pointer-events:none !important;
}

/* Вращающийся индикатор внутри кнопки */
.voice-bar-btn.send .vbs-spin{
  animation:vbsSpin .9s linear infinite !important;
  transform-origin:center !important;
}
@keyframes vbsSpin{
  from { transform:rotate(0deg) }
  to   { transform:rotate(360deg) }
}

/* Панель в режиме отправки — приглушаем */
.chat-input-row.voice-mode.sending{
  opacity:.92 !important;
}

/* Скрыть элементы */
.voice-bar-info .hidden,
.voice-rec-dot.hidden,
.voice-bar-timer.hidden,
.voice-bar-wave.hidden{
  display:none !important;
}

/* Центральный блок — статус */
.voice-bar-status{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:1 !important;
  color:#22a06b !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.3px !important;
}
.voice-bar-status.hidden{
  display:none !important;
}

/* Пульсирующая точка "Отправка…" */
.voice-bar-status .vbs-dot{
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg, #22a06b, #3fd07a) !important;
  box-shadow:0 0 8px rgba(63,208,122,.8) !important;
  animation:vbsPulse 1s ease-in-out infinite !important;
}
@keyframes vbsPulse{
  0%, 100% {
    transform:scale(1);
    box-shadow:0 0 8px rgba(63,208,122,.8);
  }
  50% {
    transform:scale(1.35);
    box-shadow:0 0 16px rgba(63,208,122,1);
  }
}

/* Галочка "Отправлено" */
.voice-bar-status .vbs-check{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg, #22a06b, #3fd07a) !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:900 !important;
  box-shadow:0 2px 8px rgba(63,208,122,.6) !important;
  animation:vbsCheckPop .35s cubic-bezier(.3,.7,.3,1) !important;
}
@keyframes vbsCheckPop{
  0%   { transform:scale(0.3); opacity:0 }
  60%  { transform:scale(1.15); opacity:1 }
  100% { transform:scale(1); opacity:1 }
}

.voice-bar-status .vbs-text{
  color:#22a06b !important;
  animation:vbsTextFade .3s ease !important;
}
@keyframes vbsTextFade{
  from { opacity:0; transform:translateX(-4px) }
  to   { opacity:1; transform:translateX(0) }
}

.voice-bar-status.ok .vbs-text{
  color:#3fd07a !important;
}

/* ============================================================
   ПОЯВЛЕНИЕ BUBBLE В ЧАТЕ — scale-in
   ============================================================ */
.msg-row .voice-bubble{
  animation:voiceBubbleIn .38s cubic-bezier(.22,.7,.3,1) both !important;
}
@keyframes voiceBubbleIn{
  0%   { opacity:0; transform:scale(.85) translateY(6px) }
  60%  { opacity:1; transform:scale(1.03) translateY(-1px) }
  100% { opacity:1; transform:scale(1) translateY(0) }
}

/* Светлая тема */
:root[data-theme="light"] .voice-bar-status{
  color:#1a8a52 !important;
}
:root[data-theme="light"] .voice-bar-status .vbs-dot{
  background:linear-gradient(135deg, #1a8a52, #3fd07a) !important;
}
:root[data-theme="light"] .voice-bar-status .vbs-check{
  background:linear-gradient(135deg, #1a8a52, #3fd07a) !important;
}
:root[data-theme="light"] .voice-bar-status .vbs-text{
  color:#1a8a52 !important;
}
:root[data-theme="light"] .voice-bar-status.ok .vbs-text{
  color:#3fd07a !important;
}

/* Тема амино — фиолетовая кнопка при отправке */
html[data-accent="amino"] .chat-input-row.voice-mode .voice-bar-btn.send.loading{
  background:rgba(168,102,200,.35) !important;
}
html[data-accent="amino"] .voice-bar-status{
  color:#c088e0 !important;
}
html[data-accent="amino"] .voice-bar-status .vbs-check{
  background:linear-gradient(135deg, #7a3aa0, #c088e0) !important;
}
html[data-accent="amino"] .voice-bar-status .vbs-dot{
  background:linear-gradient(135deg, #7a3aa0, #c088e0) !important;
}

/* Красная */
html[data-accent="red"] .voice-bar-status{
  color:#e88080 !important;
}
html[data-accent="red"] .voice-bar-status .vbs-check{
  background:linear-gradient(135deg, #a83636, #e88080) !important;
}
html[data-accent="red"] .voice-bar-status .vbs-dot{
  background:linear-gradient(135deg, #a83636, #e88080) !important;
}



/* ============================================================
   ИНТЕРФЕЙС ЗАПИСИ — КРАСИВЫЙ
   ============================================================ */

/* Панель — плавное свечение пока идёт запись */
.chat-input-row.voice-mode{
  background:linear-gradient(180deg, rgba(10,17,34,.9), rgba(5,9,17,.98)) !important;
  border-top:1px solid rgba(255,77,109,.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 -4px 20px rgba(255,77,109,.08) !important;
  transition:box-shadow .3s ease, border-color .3s ease !important;
}
.chat-input-row.voice-mode.voice-ending{
  border-top-color:rgba(255,77,109,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 -4px 20px rgba(255,77,109,.25) !important;
  animation:voiceEndingPulse .9s ease-in-out infinite !important;
}
@keyframes voiceEndingPulse{
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 -4px 20px rgba(255,77,109,.25) }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 -4px 30px rgba(255,77,109,.5) }
}

/* Красная точка с радаром */
.voice-rec-dot-wrap{
  position:relative !important;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
}
.voice-rec-dot{
  position:relative !important;
  width:9px !important;
  height:9px !important;
  border-radius:50% !important;
  background:#ff4d6d !important;
  box-shadow:0 0 10px rgba(255,77,109,.95) !important;
  z-index:2 !important;
  animation:recDotBreath 1.4s ease-in-out infinite !important;
}
@keyframes recDotBreath{
  0%, 100% { transform:scale(1); opacity:1 }
  50%      { transform:scale(.85); opacity:.85 }
}
.voice-rec-dot-pulse{
  position:absolute !important;
  inset:0 !important;
  border-radius:50% !important;
  border:1.5px solid rgba(255,77,109,.7) !important;
  animation:recRadar 1.8s cubic-bezier(.3,.7,.3,1) infinite !important;
  pointer-events:none !important;
}
.voice-rec-dot-pulse.d2{
  animation-delay:.9s !important;
}
@keyframes recRadar{
  0%   { transform:scale(.5); opacity:1 }
  80%  { transform:scale(2.2); opacity:0 }
  100% { transform:scale(2.2); opacity:0 }
}

/* Таймер */
.chat-input-row.voice-mode .voice-bar-timer{
  font-size:13px !important;
  font-weight:800 !important;
  color:#ff8b8b !important;
  min-width:48px !important;
  letter-spacing:.6px !important;
  text-shadow:0 0 8px rgba(255,77,109,.4) !important;
  transition:color .2s !important;
}
.chat-input-row.voice-mode.voice-ending .voice-bar-timer{
  color:#ff5c7c !important;
  animation:timerBlink .6s ease-in-out infinite !important;
}
@keyframes timerBlink{
  0%, 100% { opacity:1 }
  50%      { opacity:.4 }
}

/* Волна — теперь LIVE (реальная громкость) */
.chat-input-row.voice-mode .voice-bar-wave.live{
  flex:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:1.5px !important;
  height:30px !important;
  min-width:0 !important;
  padding:0 4px !important;
}
.chat-input-row.voice-mode .vbw-bar.live{
  flex:1 !important;
  min-width:2px !important;
  max-width:3px !important;
  height:15% !important;
  border-radius:2px !important;
  background:linear-gradient(180deg, #ff5c7c 0%, #d24a6a 100%) !important;
  box-shadow:0 0 4px rgba(255,77,109,.5) !important;
  transition:height .08s linear, opacity .08s linear !important;
  transform-origin:center !important;
  will-change:height, opacity !important;
}

/* Центральная часть — усиленная */
.chat-input-row.voice-mode .voice-bar-info{
  background:linear-gradient(180deg, rgba(20,25,45,.98), rgba(12,18,34,.98)) !important;
  border:1px solid rgba(255,77,109,.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 20px rgba(255,77,109,.05) !important;
  padding:0 10px !important;
  gap:8px !important;
  transition:border-color .3s ease, box-shadow .3s ease !important;
}
.chat-input-row.voice-mode.voice-ending .voice-bar-info{
  border-color:rgba(255,77,109,.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 24px rgba(255,77,109,.12) !important;
}

/* Светлая тема */
:root[data-theme="light"] .chat-input-row.voice-mode{
  background:linear-gradient(180deg, #ffffff, #f4f7fc) !important;
  border-top-color:rgba(220,80,80,.25) !important;
}
:root[data-theme="light"] .chat-input-row.voice-mode .voice-bar-info{
  background:linear-gradient(180deg, #ffffff, #f4f7fc) !important;
  border-color:rgba(220,80,80,.25) !important;
}
:root[data-theme="light"] .chat-input-row.voice-mode .voice-bar-timer{
  color:#c23a3a !important;
  text-shadow:0 0 8px rgba(220,80,80,.3) !important;
}
:root[data-theme="light"] .chat-input-row.voice-mode .vbw-bar.live{
  background:linear-gradient(180deg, #e05050, #b83030) !important;
  box-shadow:0 0 4px rgba(220,80,80,.5) !important;
}
:root[data-theme="light"] .voice-rec-dot{
  background:#e05050 !important;
  box-shadow:0 0 10px rgba(220,80,80,.9) !important;
}
:root[data-theme="light"] .voice-rec-dot-pulse{
  border-color:rgba(220,80,80,.7) !important;
}



/* ============================================================
   ГОЛОСОВЫЕ — ФИНАЛЬНЫЕ ФИШКИ
   ============================================================ */

/* --- Свайп влево для отмены записи --- */
.chat-input-row.voice-mode{
  position:relative !important;
  overflow:hidden !important;
}
.chat-input-row.voice-mode .voice-bar-info{
  position:relative !important;
  transition:transform .2s cubic-bezier(.3,.7,.3,1) !important;
}
.chat-input-row.voice-mode.swiping-cancel .voice-bar-info{
  transform:translateX(calc(var(--swipe-progress, 0) * -40px)) !important;
}
.voice-swipe-hint{
  position:absolute !important;
  right:-140px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:6px 12px !important;
  background:rgba(210,74,74,.15) !important;
  border:1px solid rgba(210,74,74,.4) !important;
  border-radius:16px !important;
  color:#ff8b8b !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .15s !important;
}

/* --- Волна в bubble (клик по ней = перемотка) --- */
.voice-wave{
  cursor:pointer !important;
  transition:transform .15s !important;
}
.voice-wave:hover{
  transform:scaleY(1.05) !important;
}
.voice-wave-bar.passed{
  background:linear-gradient(180deg, #5A82CE 0%, #4EA4CC 100%) !important;
  box-shadow:0 0 6px rgba(90,130,206,.7) !important;
}
.msg-row.me .voice-wave-bar.passed{
  background:linear-gradient(180deg, #ffffff 0%, #d4e2ff 100%) !important;
  box-shadow:0 0 6px rgba(255,255,255,.6) !important;
}

/* --- Правый столбец с временем и скоростью --- */
.voice-right{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:2px !important;
  flex-shrink:0 !important;
  z-index:1 !important;
}

.voice-time{
  cursor:pointer !important;
  transition:color .15s !important;
  user-select:none !important;
}
.voice-time:hover{
  color:#fff !important;
}

.voice-speed{
  font-size:9.5px !important;
  font-weight:800 !important;
  padding:1px 5px !important;
  border-radius:6px !important;
  background:rgba(255,255,255,.12) !important;
  color:rgba(255,255,255,.75) !important;
  cursor:pointer !important;
  letter-spacing:.3px !important;
  transition:.15s !important;
  user-select:none !important;
}
.voice-speed:hover{
  background:rgba(255,255,255,.22) !important;
  color:#fff !important;
}
.voice-speed.active{
  background:linear-gradient(135deg, #4EA4CC, #5A82CE) !important;
  color:#fff !important;
  box-shadow:0 0 8px rgba(90,130,206,.6) !important;
}
.msg-row.me .voice-speed{
  background:rgba(255,255,255,.22) !important;
  color:rgba(255,255,255,.9) !important;
}
.msg-row.me .voice-speed.active{
  background:rgba(255,255,255,.4) !important;
  color:#fff !important;
}

/* Светлая тема */
:root[data-theme="light"] .voice-wave-bar.passed{
  background:linear-gradient(180deg, #2563eb 0%, #3b82f6 100%) !important;
  box-shadow:0 0 6px rgba(37,99,235,.5) !important;
}
:root[data-theme="light"] .voice-speed{
  background:rgba(10,31,92,.08) !important;
  color:#4a5d8f !important;
}
:root[data-theme="light"] .voice-speed:hover{
  background:rgba(10,31,92,.15) !important;
  color:#0a1f5c !important;
}
:root[data-theme="light"] .voice-speed.active{
  background:linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color:#fff !important;
}
:root[data-theme="light"] .voice-swipe-hint{
  background:rgba(200,60,60,.15) !important;
  border-color:rgba(200,60,60,.4) !important;
  color:#c23a3a !important;
}

/* Амино — фиолетовая скорость */
html[data-accent="amino"] .voice-speed.active{
  background:linear-gradient(135deg, #7a3aa0, #c088e0) !important;
}
html[data-accent="amino"] .voice-wave-bar.passed{
  background:linear-gradient(180deg, #a866c8 0%, #c088e0 100%) !important;
  box-shadow:0 0 6px rgba(168,102,200,.7) !important;
}

/* Красная */
html[data-accent="red"] .voice-speed.active{
  background:linear-gradient(135deg, #a83636, #e88080) !important;
}
html[data-accent="red"] .voice-wave-bar.passed{
  background:linear-gradient(180deg, #d45a5a 0%, #e88080 100%) !important;
  box-shadow:0 0 6px rgba(212,90,90,.7) !important;
}

/* Классика */
html[data-accent="classic"] .voice-speed.active{
  background:linear-gradient(135deg, #4a4a4a, #8a8a8a) !important;
}
html[data-accent="classic"] .voice-wave-bar.passed{
  background:linear-gradient(180deg, #8a8a8a 0%, #c8c8c8 100%) !important;
}


/* ============================================================
   ПАНЕЛЬ ЗАПИСИ — РАСТЯНУТА, КРУПНЫЕ СКРУГЛЕНИЯ
   ============================================================ */

/* Ряд ввода — на всю ширину, минимум отступов */
.chat-input-row.voice-mode{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
  background:linear-gradient(180deg, rgba(10,17,34,.95), rgba(5,9,17,.98)) !important;
  border-top:1px solid rgba(255,77,109,.2) !important;
}

/* Центральный блок — растянут, крупные скругления */
.chat-input-row.voice-mode .voice-bar-info{
  flex:1 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  height:56px !important;
  padding:0 20px !important;
  border-radius:28px !important;
  background:linear-gradient(180deg, rgba(22,29,52,.98), rgba(14,20,36,.98)) !important;
  border:1.5px solid rgba(255,77,109,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 30px rgba(255,77,109,.06),
    0 4px 20px rgba(0,0,0,.35) !important;
  min-width:0 !important;
}

.chat-input-row.voice-mode.voice-ending .voice-bar-info{
  border-color:rgba(255,77,109,.6) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 30px rgba(255,77,109,.14),
    0 4px 24px rgba(255,77,109,.25) !important;
}

/* Кнопки — крупнее и круглее */
.chat-input-row.voice-mode .voice-bar-btn{
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  border-radius:50% !important;
  font-size:20px !important;
}

/* Отмена */
.chat-input-row.voice-mode .voice-bar-btn.cancel{
  background:rgba(210,74,74,.14) !important;
  border:1.5px solid rgba(210,74,74,.45) !important;
  color:#ff8b8b !important;
}
.chat-input-row.voice-mode .voice-bar-btn.cancel:hover{
  background:rgba(210,74,74,.32) !important;
  transform:scale(1.04) !important;
}

/* Отправить */
.chat-input-row.voice-mode .voice-bar-btn.send{
  background:linear-gradient(135deg, #22a06b, #3fd07a) !important;
  color:#fff !important;
  box-shadow:
    0 6px 22px rgba(34,160,107,.55),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.chat-input-row.voice-mode .voice-bar-btn.send:hover{
  filter:brightness(1.1) !important;
  transform:scale(1.04) !important;
  box-shadow:
    0 8px 26px rgba(34,160,107,.75),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* Волна — выше и шире */
.chat-input-row.voice-mode .voice-bar-wave.live{
  flex:1 !important;
  height:38px !important;
  gap:2px !important;
  padding:0 6px !important;
}
.chat-input-row.voice-mode .vbw-bar.live{
  min-width:3px !important;
  max-width:4px !important;
  border-radius:2px !important;
  background:linear-gradient(180deg, #ff5c7c 0%, #d24a6a 100%) !important;
  box-shadow:0 0 6px rgba(255,77,109,.6) !important;
}

/* Таймер — крупнее */
.chat-input-row.voice-mode .voice-bar-timer{
  font-size:15px !important;
  min-width:56px !important;
  font-weight:800 !important;
  letter-spacing:.8px !important;
}

/* Точка с радаром — крупнее */
.voice-rec-dot-wrap{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
}
.voice-rec-dot{
  width:11px !important;
  height:11px !important;
}

/* Светлая тема */
:root[data-theme="light"] .chat-input-row.voice-mode{
  background:linear-gradient(180deg, #ffffff, #eef3fb) !important;
  border-top-color:rgba(220,80,80,.2) !important;
}
:root[data-theme="light"] .chat-input-row.voice-mode .voice-bar-info{
  background:linear-gradient(180deg, #ffffff, #f4f7fc) !important;
  border-color:rgba(220,80,80,.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 30px rgba(220,80,80,.04),
    0 4px 18px rgba(10,31,92,.08) !important;
}

/* Амино — фиолетовый акцент */
html[data-accent="amino"] .chat-input-row.voice-mode .voice-bar-info{
  border-color:rgba(200,120,230,.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 30px rgba(200,120,230,.08),
    0 4px 20px rgba(0,0,0,.35) !important;
}
html[data-accent="amino"] .chat-input-row.voice-mode .voice-bar-btn.send{
  background:linear-gradient(135deg, #7a3aa0, #c088e0) !important;
  box-shadow:0 6px 22px rgba(168,102,200,.55) !important;
}

/* Красная — красный акцент */
html[data-accent="red"] .chat-input-row.voice-mode .voice-bar-btn.send{
  background:linear-gradient(135deg, #a83636, #e88080) !important;
  box-shadow:0 6px 22px rgba(212,90,90,.55) !important;
}

/* Классика */
html[data-accent="classic"] .chat-input-row.voice-mode .voice-bar-btn.send{
  background:linear-gradient(135deg, #4a4a4a, #8a8a8a) !important;
  box-shadow:0 6px 22px rgba(0,0,0,.5) !important;
}


/* ============================================================
   ФИКС: убрать квадратный фон у input в чате
   ============================================================ */

.chat-input-wrap,
.chat-input-wrap .input,
.chat-input-row .input,
.chat-input-row input,
.chat-input-row textarea{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}

.chat-input-wrap .input:focus,
.chat-input-row .input:focus,
.chat-input-row input:focus,
.chat-input-row textarea:focus{
  background:transparent !important;
  background-color:transparent !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
}

.chat-input-wrap .input::placeholder,
.chat-input-row .input::placeholder,
.chat-input-row input::placeholder{
  color:var(--text-muted) !important;
  opacity:.7 !important;
}


/* ============================================================
   ВОЗВРАТ: фон у input внутри chat-input-wrap
   ============================================================ */

.chat-input-wrap .input,
.chat-input-wrap input,
.chat-input-wrap textarea{
  background:linear-gradient(180deg, rgba(20,29,51,.9), rgba(12,20,36,.9)) !important;
  background-color:rgba(20,29,51,.9) !important;
  border:1px solid rgba(120,150,210,.22) !important;
  border-radius:12px !important;
  padding:7px 12px !important;
  color:var(--text) !important;
}

.chat-input-wrap .input:focus,
.chat-input-wrap input:focus,
.chat-input-wrap textarea:focus{
  background:linear-gradient(180deg, rgba(26,37,66,.95), rgba(19,28,51,.95)) !important;
  border-color:rgba(107,143,212,.55) !important;
  box-shadow:0 0 0 3px rgba(74,109,184,.15) !important;
  outline:none !important;
}

/* Светлая тема */
:root[data-theme="light"] .chat-input-wrap .input,
:root[data-theme="light"] .chat-input-wrap input,
:root[data-theme="light"] .chat-input-wrap textarea{
  background:linear-gradient(180deg,#ffffff,#f4f7fc) !important;
  border-color:rgba(59,130,246,.25) !important;
  color:#0a1f5c !important;
}
:root[data-theme="light"] .chat-input-wrap .input:focus,
:root[data-theme="light"] .chat-input-wrap input:focus{
  border-color:rgba(59,130,246,.6) !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.12) !important;
}


/* ============================================================
   ПАНЕЛЬ СООБЩЕНИЙ — РАСТЯНУТА И ВЫРОВНЕНА
   ============================================================ */

.chat-input-row{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
  width:100% !important;
  box-sizing:border-box !important;
}

/* Обёртка input — растягивается на всё свободное место */
.chat-input-wrap{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  padding:0 !important;
  gap:0 !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
}

/* Сам input — растянут, выровнен, с фоном и скруглением */
.chat-input-wrap .input,
.chat-input-wrap input,
.chat-input-wrap textarea{
  width:100% !important;
  box-sizing:border-box !important;
  background:linear-gradient(180deg, rgba(20,29,51,.9), rgba(12,20,36,.9)) !important;
  border:1px solid rgba(120,150,210,.25) !important;
  border-radius:22px !important;
  padding:11px 18px !important;
  color:var(--text) !important;
  font-size:13.5px !important;
  line-height:1.4 !important;
  outline:none !important;
  height:44px !important;
  transition:.15s !important;
}

.chat-input-wrap .input:focus,
.chat-input-wrap input:focus{
  border-color:rgba(107,143,212,.6) !important;
  background:linear-gradient(180deg, rgba(26,37,66,.95), rgba(19,28,51,.95)) !important;
  box-shadow:0 0 0 3px rgba(74,109,184,.15) !important;
}

.chat-input-wrap .input::placeholder,
.chat-input-wrap input::placeholder{
  color:var(--text-muted) !important;
}

/* Кнопки 🎤 и ➤ — выровнены по центру вертикали, одинаковые */
.chat-input-row .chat-voice-btn,
.chat-input-row .chat-send,
.chat-input-row .chat-photo-btn{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  padding:0 !important;
  align-self:center !important;
}

/* Скрываем строку "печатает" внутри wrap — она ломает выравнивание */
.chat-input-wrap .chat-input-tools{
  padding:0 !important;
  min-height:0 !important;
}
.chat-input-wrap .chat-input-typing{
  padding:0 6px !important;
  min-height:0 !important;
}

/* Светлая тема */
:root[data-theme="light"] .chat-input-wrap .input,
:root[data-theme="light"] .chat-input-wrap input{
  background:linear-gradient(180deg, #ffffff, #f4f7fc) !important;
  border-color:rgba(59,130,246,.25) !important;
  color:#0a1f5c !important;
}
:root[data-theme="light"] .chat-input-wrap .input:focus,
:root[data-theme="light"] .chat-input-wrap input:focus{
  border-color:rgba(59,130,246,.6) !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.12) !important;
}



/* ============================================================
   АВТОРИЗАЦИЯ ПО КОДУ ИЗ ПИСЬМА
   ============================================================ */
.reg-wrap .input[inputmode="numeric"]{
  font-family:ui-monospace,monospace !important;
  letter-spacing:8px !important;
  font-size:24px !important;
  text-align:center !important;
  padding:14px 20px !important;
  height:56px !important;
  background:linear-gradient(180deg, rgba(20,29,51,.9), rgba(12,20,36,.9)) !important;
  border:1.5px solid rgba(120,150,210,.35) !important;
  border-radius:14px !important;
  color:var(--accent-3) !important;
}
.reg-wrap .input[inputmode="numeric"]:focus{
  border-color:rgba(107,143,212,.7) !important;
  box-shadow:0 0 0 3px rgba(74,109,184,.2) !important;
}
.reg-wrap .input[inputmode="numeric"]::placeholder{
  color:var(--text-muted) !important;
  letter-spacing:10px !important;
  font-weight:400 !important;
}

:root[data-theme="light"] .reg-wrap .input[inputmode="numeric"]{
  background:#ffffff !important;
  color:#2563eb !important;
}



/* ============================================================
   LIVE ACTIVITY — плавная полоса
   ============================================================ */
.woon-activity-bar,
.cinfo-activity-bar {
  transition: --act-fill .6s ease, width .6s ease, background .4s ease;
}
.woon-activity-bar .wab-seg,
.cinfo-activity-bar .cinfo-seg {
  transition: background .35s ease, opacity .35s ease;
}