/* ═══════════════════════════════════════════
   UNISPACE — COSMIC THEME 🌌 v2
═══════════════════════════════════════════ */

:root {
    --bg:        #060b18;
    --bg2:       #0d1526;
    --bg3:       #142035;
    --surface:   #1a2744;
    --surface2:  #243555;
    --border:    rgba(139,92,246,0.12);
    --accent:    #8b5cf6;
    --accent2:   #ec4899;
    --accent3:   #06b6d4;
    --text:      #f1f5f9;
    --text2:     #cbd5e1;
    --text3:     #64748b;
    --radius:    16px;
    --radius-sm: 10px;
    --sidebar-w: 240px;
    --right-w:   260px;
    --shadow:    0 10px 40px rgba(0,0,0,0.6);
    --font-head: 'Unbounded', sans-serif;
    --font-body: 'Onest', sans-serif;
    --glow-accent: rgba(139,92,246,0.25);
}

#tab-messengers,
#vkConnectModal {
    display: none !important;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* ════════════════════════════════
   ЗВЁЗДНЫЙ КОСМИЧЕСКИЙ ФОН (Canvas)
════════════════════════════════ */
.starfield-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Nebula glow overlays */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(ellipse 600px 400px at 15% 20%, rgba(139,92,246,0.10) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 85% 65%, rgba(236,72,153,0.07) 0%, transparent 70%),
        radial-gradient(ellipse 400px 300px at 50% 85%, rgba(6,182,212,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 300px 300px at 70% 10%, rgba(251,191,36,0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(circle 2px at 20% 30%, rgba(255,255,255,0.3), transparent),
        radial-gradient(circle 1.5px at 60% 15%, rgba(139,92,246,0.5), transparent),
        radial-gradient(circle 2px at 80% 70%, rgba(6,182,212,0.4), transparent),
        radial-gradient(circle 1px at 35% 80%, rgba(236,72,153,0.4), transparent);
    pointer-events: none;
    z-index: 0;
}

/* ──────── UTILITIES ──────── */
.hidden { display: none !important; }
.screen { width: 100%; min-height: 100vh; position: relative; z-index: 1; }
.screen.hidden { display: none; }
.screen.active { display: flex; }

/* ════════════════════════════════
   LOGIN SCREEN
════════════════════════════════ */
#screen-login {
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.login-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.login-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.18;
    animation: blobFloat 12s ease-in-out infinite alternate;
}
.b1 { width: 500px; height: 500px; background: var(--accent); top: -150px; left: -150px; }
.b2 { width: 400px; height: 400px; background: var(--accent2); bottom: -120px; right: -100px; animation-delay: -4s; }
.b3 { width: 350px; height: 350px; background: var(--accent3); top: 40%; left: 60%; animation-delay: -8s; }

@keyframes blobFloat {
    from { transform: translate(0, 0) rotate(0deg) scale(1); }
    to   { transform: translate(40px, 30px) rotate(5deg) scale(1.15); }
}

/* ── Сетка-горизонт ── */
.login-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(139,92,246,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139,92,246,0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 70%);
    animation: gridPulse 8s ease-in-out infinite alternate;
}
@keyframes gridPulse {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}

/* ── Орбиты ── */
.login-orbits {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(139,92,246,0.15);
    animation: orbitSpin linear infinite;
}
.orbit-1 { width: 560px; height: 560px; animation-duration: 22s; border-color: rgba(139,92,246,0.12); }
.orbit-2 { width: 780px; height: 780px; animation-duration: 36s; animation-direction: reverse; border-color: rgba(236,72,153,0.08); border-style: dashed; }
.orbit-3 { width: 1020px; height: 1020px; animation-duration: 54s; border-color: rgba(6,182,212,0.06); }
@keyframes orbitSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.orbit-dot {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.od1 { background: var(--accent); box-shadow: 0 0 12px 4px rgba(139,92,246,0.7); }
.od2 { width: 6px; height: 6px; top: -3px; background: var(--accent2); box-shadow: 0 0 10px 3px rgba(236,72,153,0.6); }
.od3 { width: 5px; height: 5px; top: -2.5px; background: var(--accent3); box-shadow: 0 0 8px 3px rgba(6,182,212,0.5); }

/* ── Плавающие частицы ── */
.login-particles { position: absolute; inset: 0; pointer-events: none; }
.lp {
    position: absolute;
    font-size: 14px;
    opacity: 0;
    animation: lpFloat 6s ease-in-out infinite;
    color: rgba(139,92,246,0.5);
    filter: drop-shadow(0 0 6px currentColor);
}
.lp1  { top: 15%; left: 8%;  animation-delay: 0s;    animation-duration: 7s; }
.lp2  { top: 25%; left: 88%; animation-delay: 0.8s;  animation-duration: 9s; color: rgba(236,72,153,0.45); }
.lp3  { top: 70%; left: 5%;  animation-delay: 1.6s;  animation-duration: 8s; }
.lp4  { top: 80%; left: 90%; animation-delay: 2.4s;  animation-duration: 6.5s; color: rgba(6,182,212,0.45); }
.lp5  { top: 45%; left: 92%; animation-delay: 3.2s;  animation-duration: 10s; }
.lp6  { top: 55%; left: 3%;  animation-delay: 4s;    animation-duration: 7.5s; color: rgba(236,72,153,0.4); }
.lp7  { top: 10%; left: 50%; animation-delay: 0.5s;  animation-duration: 11s; color: rgba(6,182,212,0.4); }
.lp8  { top: 88%; left: 40%; animation-delay: 1.2s;  animation-duration: 8.5s; }
@keyframes lpFloat {
    0%   { opacity: 0; transform: translateY(0) rotate(0deg) scale(0.8); }
    20%  { opacity: 0.8; }
    50%  { opacity: 0.6; transform: translateY(-22px) rotate(180deg) scale(1.1); }
    80%  { opacity: 0.7; }
    100% { opacity: 0; transform: translateY(-44px) rotate(360deg) scale(0.8); }
}

/* ── Карточка входа ── */
.login-card {
    position: relative;
    background: rgba(20,32,53,0.82);
    backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(139,92,246,0.22);
    border-radius: 28px;
    padding: 48px 44px;
    width: 480px;
    max-width: 95vw;
    text-align: center;
    box-shadow: var(--shadow), 0 0 80px rgba(139,92,246,0.1), 0 0 160px rgba(139,92,246,0.04), inset 0 1px 0 rgba(255,255,255,0.06);
    animation: cardIn 0.8s cubic-bezier(0.22,1,0.36,1);
    z-index: 10;
}
/* Блики на карточке */
.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,0.5), rgba(236,72,153,0.3), transparent);
    border-radius: 28px 28px 0 0;
}
.login-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 29px;
    background: linear-gradient(135deg, rgba(139,92,246,0.08), transparent 50%, rgba(236,72,153,0.06));
    pointer-events: none;
    z-index: -1;
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(40px) scale(0.93); filter: blur(4px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ── Логотип с анимацией ── */
.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    animation: logoIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
@keyframes logoIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: none; }
}

.logo-hex-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon {
    font-size: 32px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(139,92,246,0.5));
}

.logo-icon--animated {
    animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(139,92,246,0.5)); }
    50%       { filter: drop-shadow(0 0 18px rgba(139,92,246,0.9)) drop-shadow(0 0 32px rgba(236,72,153,0.4)); }
}

.logo-hex-ring {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    background: linear-gradient(135deg, rgba(139,92,246,0.5), rgba(236,72,153,0.3)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: hexRingSpin 8s linear infinite;
}
@keyframes hexRingSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.logo-text {
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--text), var(--text2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
}

.login-sub {
    color: var(--text3);
    font-size: 14px;
    margin-bottom: 40px;
    animation: subIn 0.9s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}
@keyframes subIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Staggered field animations */
.auth-form.active .input-wrap:nth-child(1) { animation: fieldIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.25s both; }
.auth-form.active .input-wrap:nth-child(2) { animation: fieldIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.35s both; }
.auth-form.active .input-wrap:nth-child(3) { animation: fieldIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.45s both; }
.auth-form.active .input-row             { animation: fieldIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.35s both; }
.auth-form.active .btn-primary           { animation: fieldIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.5s both; }
.auth-form.active .auth-tabs             { animation: fieldIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.3s both; }
@keyframes fieldIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: none; }
}

.input-wrap {
    position: relative;
    margin-bottom: 20px;
}

.input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    pointer-events: none;
    opacity: 0.6;
}

.input-wrap input {
    width: 100%;
    padding: 16px 16px 16px 48px;
    background: rgba(20,32,53,0.6);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    transition: all 0.3s;
    outline: none;
}

.input-wrap input:focus {
    border-color: var(--accent);
    background: rgba(20,32,53,0.8);
    box-shadow: 0 0 0 4px rgba(139,92,246,0.15), 0 0 20px rgba(139,92,246,0.1);
}

.btn-primary {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.3s;
    margin-top: 8px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(139,92,246,0.45);
}
.btn-primary:active { transform: translateY(0); }
.btn-arrow { font-size: 20px; }

/* ════════════════════════════════
   MAIN LAYOUT
════════════════════════════════ */
#screen-main {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

/* ──────── LEFT SIDEBAR ──────── */
.sidebar-left {
    width: var(--sidebar-w);
    background: rgba(13,21,38,0.85);
    backdrop-filter: blur(24px) saturate(1.4);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 28px 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 32px;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text2);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}

.nav-item::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent3), var(--accent));
    transform: translateY(-50%);
    transition: height 0.25s ease, opacity 0.25s ease;
    opacity: 0;
}

.nav-item:hover {
    background: rgba(139,92,246,0.1);
    color: var(--text);
}

.nav-item.active {
    background: rgba(139,92,246,0.18);
    color: var(--accent);
    box-shadow: 0 0 24px rgba(139,92,246,0.15), inset 0 0 0 1px rgba(139,92,246,0.15);
}

.nav-item.active::before {
    height: 24px;
    opacity: 1;
}

.nav-icon { font-size: 20px; }

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    background: rgba(26,39,68,0.5);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 14px;
    font-weight: 500;
    color: var(--text2);
    margin-top: 16px;
    cursor: pointer;
    transition: all 0.25s;
}

.sidebar-user:hover {
    background: rgba(139,92,246,0.12);
    border-color: rgba(139,92,246,0.3);
}

.sidebar-logout {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--text2);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.sidebar-logout:hover {
    background: rgba(236,72,153,0.12);
    border-color: rgba(236,72,153,0.28);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-user-edit {
    font-size: 11px;
    color: var(--accent);
    opacity: 0.7;
    margin-top: 2px;
}

.user-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    overflow: hidden;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ──────── CONTENT AREA ──────── */
.content-area {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    height: 100vh;
    background: rgba(6,11,24,0.4);
    position: relative;
}

.content-area::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 0%, rgba(6,182,212,0.08), transparent 35%),
        radial-gradient(circle at 80% 20%, rgba(139,92,246,0.08), transparent 30%);
    z-index: 0;
}

/* ──────── RIGHT SIDEBAR ──────── */
.sidebar-right {
    width: var(--right-w);
    background: rgba(13,21,38,0.85);
    backdrop-filter: blur(24px) saturate(1.4);
    border-left: 1px solid var(--border);
    padding: 28px 18px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
}

.sidebar-section h4 {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 14px;
}

.active-groups-list, .online-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.active-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text2);
    padding: 8px 12px;
    background: rgba(26,39,68,0.4);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.active-group-chip:hover {
    background: rgba(139,92,246,0.15);
    border-color: var(--accent);
    color: var(--text);
}

.online-item {
    font-size: 13px;
    color: var(--text2);
    display: flex;
    align-items: center;
    gap: 10px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot.green { background: #22d3ee; box-shadow: 0 0 10px rgba(34,211,238,0.6); }

/* ════════════════════════════════
   TABS
════════════════════════════════ */
.tab { display: none; flex-direction: column; height: 100%; position: relative; z-index: 1; }
.tab.active { display: flex; animation: tabIn 0.35s cubic-bezier(0.22,1,0.36,1); }

@keyframes tabIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.tab-header {
    padding: 28px 32px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    background: rgba(13,21,38,0.7);
    backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.tab-header h2 {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--text), var(--text2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tab-header--mission {
    gap: 20px 24px;
}

.tab-header-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 720px;
}

.tab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(148,163,184,0.78);
    font-weight: 700;
}

.tab-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, rgba(6,182,212,0.85), transparent);
}

.tab-subtitle {
    max-width: 640px;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(203,213,225,0.82);
}

.tab-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.tab-pill {
    min-width: 144px;
    padding: 11px 14px;
    border-radius: 16px;
    border: 1px solid rgba(139,92,246,0.16);
    background: linear-gradient(180deg, rgba(20,32,53,0.94), rgba(12,20,36,0.88));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 28px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tab-pill span {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148,163,184,0.78);
}

.tab-pill strong {
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
}

.mission-grid {
    padding: 18px 32px 0;
    display: grid;
    grid-template-columns: minmax(240px, 1.45fr) repeat(3, minmax(150px, 1fr));
    gap: 14px;
    position: relative;
    z-index: 1;
}

.mission-card {
    position: relative;
    overflow: hidden;
    min-height: 132px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(139,92,246,0.14);
    background: linear-gradient(180deg, rgba(21,31,54,0.94), rgba(12,20,35,0.88));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 42px rgba(0,0,0,0.22);
}

.mission-card::before {
    content: '';
    position: absolute;
    inset: auto -34px -58px auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,0.22), transparent 72%);
    opacity: 0.9;
    animation: missionFloat 8s ease-in-out infinite;
}

.mission-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255,255,255,0.05), transparent 34%),
        radial-gradient(circle at 84% 18%, rgba(6,182,212,0.12), transparent 26%);
    pointer-events: none;
}

.mission-card--hero {
    padding-right: 88px;
}

.mission-card--teal::before {
    background: radial-gradient(circle, rgba(6,182,212,0.22), transparent 72%);
}

.mission-card-kicker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(148,163,184,0.82);
}

.mission-card-kicker::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(6,182,212,0.3);
    box-shadow: 0 0 0 4px rgba(6,182,212,0.06);
}

.mission-card h3,
.mission-card p,
.mission-stat-label,
.mission-stat-foot,
.mission-card strong {
    position: relative;
    z-index: 1;
}

.mission-card h3 {
    font-family: var(--font-head);
    font-size: 19px;
    line-height: 1.35;
    margin-bottom: 10px;
    color: var(--text);
}

.mission-card p {
    max-width: 44ch;
    font-size: 14px;
    line-height: 1.68;
    color: rgba(203,213,225,0.8);
}

.mission-card--stat {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
}

.mission-stat-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148,163,184,0.76);
}

.mission-card strong {
    font-family: var(--font-head);
    font-size: 30px;
    line-height: 1;
    color: var(--text);
}

.mission-stat-foot {
    font-size: 12px;
    color: rgba(148,163,184,0.78);
}

@keyframes missionFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-10px, -8px, 0) scale(1.06); }
}

/* ════════════════════════════════
   WALL TAB
════════════════════════════════ */
.post-composer {
    margin: 24px 32px 0;
    background: rgba(26,39,68,0.45);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    gap: 16px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.post-composer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(139,92,246,0.07), transparent 38%, rgba(6,182,212,0.06));
    pointer-events: none;
}

.post-composer:focus-within {
    border-color: rgba(139,92,246,0.4);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.1), 0 8px 30px rgba(0,0,0,0.2);
}

.composer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 17px;
    flex-shrink: 0;
    overflow: hidden;
}

.composer-body {
    flex: 1;
    min-width: 0;
}

.composer-body textarea {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    resize: none;
    min-height: 70px;
    line-height: 1.6;
}

.composer-body textarea::placeholder { color: var(--text3); }

.composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.composer-tags { display: flex; gap: 8px; flex-wrap: wrap; }

.tag-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--text3);
    font-size: 12px;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s;
    width: auto;
    margin: 0;
}

.tag-btn:hover { border-color: var(--accent); color: var(--accent); }

.tag-btn.active {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border-color: transparent;
    color: #fff;
}

.composer-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    flex-wrap: wrap;
}

.btn-attach {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(139,92,246,0.12);
    border: none;
    color: var(--text2);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    margin: 0;
}

.btn-attach:hover { background: rgba(139,92,246,0.25); transform: scale(1.08); }

.btn-post {
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    border: none;
    border-radius: 20px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: auto;
    margin: 0;
}

.btn-post:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(139,92,246,0.4);
}

.attach-preview-wrap {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.attach-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(26,39,68,0.5);
    border: 1px solid var(--border);
}

.attach-preview-item img { width: 100%; height: 100%; object-fit: cover; }

.attach-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: none;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
}

.attach-remove-btn:hover { background: var(--accent2); }

.wall-tools {
    padding: 18px 32px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wall-search-bar {
    width: min(520px, 100%);
    flex: 1 1 320px;
}

.wall-search-status {
    padding: 10px 32px 0;
    color: var(--text3);
    font-size: 13px;
    line-height: 1.6;
}

.wall-reset-btn {
    margin-top: 0;
    white-space: nowrap;
}

/* Filters */
.wall-filters {
    padding: 14px 32px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text2);
    font-size: 13px;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s;
    width: auto;
    margin: 0;
}

.filter-btn:hover {
    color: var(--text);
    border-color: var(--accent);
    background: rgba(139,92,246,0.08);
}

.filter-btn.active {
    background: rgba(139,92,246,0.18);
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(139,92,246,0.15);
}

/* Feed */
.wall-feed {
    padding: 20px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.post-card {
    background: rgba(26,39,68,0.4);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    animation: postIn 0.4s ease;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.post-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,0.55), rgba(6,182,212,0.4), transparent);
    opacity: 0.7;
}

.post-card:hover {
    border-color: rgba(139,92,246,0.3);
    box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(139,92,246,0.08);
    transform: translateY(-2px);
}

@keyframes postIn {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: none; }
}

.post-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.post-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.post-meta { flex: 1; }
.post-author { font-weight: 600; font-size: 15px; color: var(--text); }
.post-time { font-size: 12px; color: var(--text3); margin-top: 2px; }

.post-tag {
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
}

.tag-all   { background: rgba(139,92,246,0.15); color: var(--accent); }
.tag-study { background: rgba(6,182,212,0.15); color: var(--accent3); }
.tag-event { background: rgba(236,72,153,0.15); color: var(--accent2); }
.tag-fun   { background: rgba(251,191,36,0.15); color: #fbbf24; }

.post-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text2);
    margin-bottom: 12px;
}

.post-image {
    margin: 12px 0;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0,0,0,0.2);
}

.post-image img {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
    cursor: zoom-in;
    transition: opacity 0.2s;
    display: block;
}

.post-image img:hover { opacity: 0.92; }

.post-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.post-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text3);
    font-size: 13px;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s;
    width: auto;
    margin: 0;
}

.post-action-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(139,92,246,0.08);
}

.post-action-btn.liked {
    background: rgba(236,72,153,0.12);
    border-color: var(--accent2);
    color: var(--accent2);
}

/* ════════════════════════════════
   GROUPS TAB
════════════════════════════════ */
.search-bar {
    position: relative;
    width: 280px;
}

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    opacity: 0.5;
}

.search-bar input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    background: rgba(26,39,68,0.5);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    transition: all 0.3s;
}

.search-bar input:focus {
    border-color: var(--accent);
    background: rgba(26,39,68,0.7);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
}

.groups-stats { padding: 14px 32px; }
.stat-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text3); }
.stat-chip span { color: var(--accent); font-weight: 600; }

.group-grid {
    padding: 12px 32px 32px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.group-section-label {
    grid-column: 1/-1;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 12px;
    padding: 0 4px;
}

.group-card {
    background: rgba(26,39,68,0.4);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: postIn 0.4s ease;
    position: relative;
    overflow: hidden;
}

.group-card::after {
    content: '';
    position: absolute;
    inset: auto -30px -40px auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6,182,212,0.12), transparent 70%);
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.8;
}

.group-card:hover {
    transform: translateY(-3px);
    border-color: rgba(139,92,246,0.4);
    box-shadow: 0 12px 36px rgba(0,0,0,0.35), 0 0 0 1px rgba(139,92,246,0.1);
}

.group-card:hover::after {
    transform: scale(1.08);
}

.group-card--chat { border-left: 3px solid var(--accent3); }

.group-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.group-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    overflow: hidden;
}

.group-card-signal {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(6,182,212,0.14);
    background: rgba(6,182,212,0.08);
    color: rgba(165,243,252,0.88);
    font-size: 11px;
    white-space: nowrap;
}

.group-card-name {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-badge-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(6,182,212,0.18);
    color: var(--accent3);
    padding: 2px 8px;
    border-radius: 10px;
}

.group-card-desc { font-size: 12px; color: var(--text3); line-height: 1.6; }

.group-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.group-card-meta-chip {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(139,92,246,0.08);
    border: 1px solid rgba(139,92,246,0.12);
    color: var(--text2);
    font-size: 11px;
}

.group-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    flex-wrap: wrap;
    gap: 8px;
}

.group-card-members { font-size: 11px; color: var(--text3); }

.btn-join {
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 12px;
    font-family: var(--font-head);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: auto;
    margin: 0;
}

.btn-join:hover {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 16px rgba(139,92,246,0.4);
}

.btn-join.joined { background: var(--accent); color: #fff; }

.btn-join:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-join--ghost {
    border-color: rgba(125,211,252,0.25);
    color: #c4f1ff;
    background: rgba(125,211,252,0.08);
}

.btn-join--ghost:hover {
    background: rgba(125,211,252,0.16);
    color: #fff;
    box-shadow: 0 4px 16px rgba(56,189,248,0.22);
}

.btn-join--pulse {
    animation: joinPulse 0.9s ease;
}

@keyframes joinPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(139,92,246,0); }
    35% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(139,92,246,0.16); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(139,92,246,0); }
}

/* ════════════════════════════════
   CHATS TAB
════════════════════════════════ */
.chats-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.chats-list {
    width: 260px;
    border-right: 1px solid var(--border);
    background: rgba(13,21,38,0.6);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.chats-list-header {
    padding: 24px 18px 16px;
    border-bottom: 1px solid var(--border);
}

.chats-list-header h3 {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

#chatsListItems {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.chat-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 4px;
}

.chat-list-item:hover { background: rgba(139,92,246,0.08); }

.chat-list-item.active {
    background: rgba(139,92,246,0.16);
    box-shadow: 0 0 18px rgba(139,92,246,0.15);
}

.chat-list-body {
    min-width: 0;
    flex: 1;
}

.chat-list-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
}

.chat-list-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.chat-list-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-list-last {
    font-size: 12px;
    color: var(--text3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-list-time {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text3);
}

.chat-list-kicker {
    flex-shrink: 0;
    align-self: flex-start;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(125,211,252,0.18);
    background: rgba(125,211,252,0.08);
    color: #b7e8ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Chat panel */
.chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background:
        radial-gradient(circle at top right, rgba(56,189,248,0.09), transparent 34%),
        linear-gradient(180deg, rgba(8,13,27,0.48), rgba(6,11,24,0.34));
    border-left: 1px solid rgba(125,211,252,0.05);
}

.chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: var(--text3);
}

.chat-empty-icon { font-size: 56px; }
.chat-empty p { font-size: 15px; color: var(--text3); }

.btn-secondary {
    padding: 12px 28px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: rgba(26,39,68,0.5);
    color: var(--text2);
    font-family: var(--font-body);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    width: auto;
    margin: 0;
}

.btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(139,92,246,0.12);
}

.chat-active {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

.chat-header {
    padding: 16px 24px;
    background: rgba(13,21,38,0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.chat-header-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(125,211,252,0.2);
    background: rgba(125,211,252,0.08);
    color: #d1f4ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chat-header-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 16px;
    overflow: hidden;
}

.chat-header-name { font-size: 16px; font-weight: 600; color: var(--text); }

.chat-header-status {
    font-size: 12px;
    color: var(--accent3);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.chat-header-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent3);
    box-shadow: 0 0 6px var(--accent3);
}

.chat-readonly-note {
    margin: 12px 24px 0;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(125,211,252,0.18);
    background: rgba(125,211,252,0.08);
    color: #d9f6ff;
    font-size: 12px;
    line-height: 1.6;
}

.chat-close-btn {
    background: transparent;
    border: none;
    color: var(--text3);
    font-size: 18px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    width: auto;
    margin: 0;
    line-height: 1;
    transition: all 0.2s;
}

.chat-close-btn:hover { background: rgba(139,92,246,0.15); color: var(--text); }

.messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.messages-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
}

.messages-empty-card {
    width: min(430px, 100%);
    padding: 28px 26px;
    border-radius: 24px;
    border: 1px solid rgba(125,211,252,0.12);
    background:
        radial-gradient(circle at top right, rgba(56,189,248,0.12), transparent 42%),
        linear-gradient(180deg, rgba(16,25,45,0.9), rgba(10,16,31,0.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    text-align: center;
}

.messages-empty-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(125,211,252,0.14);
    background: rgba(125,211,252,0.08);
    color: #c7f2ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.messages-empty-icon {
    font-size: 42px;
    margin-top: 18px;
}

.messages-empty-title {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.messages-empty-text {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text3);
}

.message-bubble {
    display: flex;
    flex-direction: column;
    max-width: 70%;
    animation: msgIn 0.25s ease;
}

@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.message-bubble.own { align-self: flex-end; }
.message-bubble.other { align-self: flex-start; }

.bubble-content {
    padding: 11px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
}

.message-bubble.own .bubble-content {
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 8px rgba(139,92,246,0.3);
}

.message-bubble.other .bubble-content {
    background: rgba(26,39,68,0.6);
    backdrop-filter: blur(10px);
    color: var(--text);
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(139,92,246,0.08);
}

.bubble-meta {
    font-size: 10px;
    color: var(--text3);
    margin-top: 4px;
    padding: 0 6px;
}

.message-bubble.own .bubble-meta { text-align: right; }

.bubble-name {
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 4px;
    padding: 0 6px;
}

.bubble-image {
    margin: 6px 0;
    border-radius: 12px;
    overflow: hidden;
}

.bubble-image img {
    max-width: 280px;
    max-height: 240px;
    border-radius: 12px;
    object-fit: cover;
    cursor: zoom-in;
    transition: opacity 0.2s;
}

.bubble-image img:hover { opacity: 0.88; }

.chat-attach-preview {
    padding: 12px 24px;
    background: rgba(13,21,38,0.7);
    border-top: 1px solid var(--border);
}

.chat-input-bar {
    padding: 14px 20px;
    background: rgba(13,21,38,0.8);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-attach-chat, .btn-emoji-chat {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(139,92,246,0.12);
    border: none;
    color: var(--text2);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.btn-attach-chat:hover, .btn-emoji-chat:hover {
    background: rgba(139,92,246,0.25);
    transform: scale(1.08);
}

.btn-emoji-chat.active {
    background: rgba(139,92,246,0.3);
    color: var(--accent);
}

.chat-input-bar input {
    flex: 1;
    padding: 12px 18px;
    background: rgba(26,39,68,0.5);
    border: 1px solid var(--border);
    border-radius: 24px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    transition: all 0.3s;
}

.chat-input-bar input:focus {
    border-color: var(--accent);
    background: rgba(26,39,68,0.7);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
}

.send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    box-shadow: 0 4px 14px rgba(139,92,246,0.4);
}

.send-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(139,92,246,0.5); }
.send-btn:active { transform: scale(0.95); }

/* ════════════════════════════════
   EMOJI PICKER
════════════════════════════════ */
.emoji-picker {
    position: absolute;
    bottom: 72px;
    left: 20px;
    right: 20px;
    max-width: 400px;
    background: rgba(13,21,38,0.97);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(139,92,246,0.1);
    z-index: 50;
    overflow: hidden;
    /* Smooth show/hide via transform+opacity — no layout shift */
    opacity: 1;
    transform: translateY(0) scale(1);
    transform-origin: bottom left;
    transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.22,1,0.36,1);
    pointer-events: auto;
}
.emoji-picker.emoji-picker--hidden {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    pointer-events: none;
}
.emoji-picker.emoji-picker--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.emoji-picker-header {
    padding: 12px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--border);
}

.emoji-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
}

.emoji-tab {
    padding: 6px 8px;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.emoji-tab:hover { background: rgba(139,92,246,0.15); }
.emoji-tab.active { background: rgba(139,92,246,0.25); }

.emoji-search {
    width: 100%;
    padding: 8px 12px;
    background: rgba(26,39,68,0.5);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.emoji-search:focus { border-color: var(--accent); }

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 10px;
    max-height: 240px;
    overflow-y: auto;
}

.emoji-item {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
    border: none;
    background: transparent;
    padding: 0;
}

.emoji-item:hover {
    background: rgba(139,92,246,0.2);
    transform: scale(1.15);
}

/* ════════════════════════════════
   PROFILE MODAL
════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    animation: fadeIn 0.2s ease;
}

.modal-card {
    background: rgba(13,21,38,0.95);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 80px rgba(139,92,246,0.06);
    max-width: 480px;
    width: 90%;
    animation: cardIn 0.3s ease;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px 16px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text3);
    font-size: 18px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    transition: all 0.2s;
    width: auto;
    margin: 0;
}

.modal-close:hover { background: rgba(139,92,246,0.15); color: var(--text); }

.profile-modal-body {
    padding: 28px;
}

.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.profile-avatar-large {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 34px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(139,92,246,0.3);
}

.profile-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-change-avatar {
    font-size: 13px;
    color: var(--accent);
    cursor: pointer;
    transition: opacity 0.2s;
    font-family: var(--font-body);
}

.btn-change-avatar:hover { opacity: 0.8; }

.profile-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.profile-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.profile-field input,
.profile-field textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(26,39,68,0.5);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    transition: all 0.3s;
}

.profile-field input:focus,
.profile-field textarea:focus {
    border-color: var(--accent);
    background: rgba(26,39,68,0.7);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
}

.profile-field input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.profile-field textarea {
    resize: vertical;
    min-height: 70px;
    line-height: 1.6;
}

.profile-field-hint {
    margin-top: 6px;
    color: var(--text3);
    font-size: 12px;
    line-height: 1.5;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 28px 24px;
}

.modal-footer .btn-primary {
    width: auto;
    padding: 12px 32px;
}

.modal-footer .btn-secondary {
    padding: 12px 24px;
}

/* ════════════════════════════════
   LIGHTBOX
════════════════════════════════ */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
    animation: fadeIn 0.2s ease;
    backdrop-filter: blur(12px);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.lightbox img {
    max-width: 90vw;
    max-height: 88vh;
    border-radius: var(--radius);
    box-shadow: 0 30px 100px rgba(0,0,0,0.8);
    object-fit: contain;
    pointer-events: none;
}

/* ════════════════════════════════
   EMPTY STATE
════════════════════════════════ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 24px;
    color: var(--text3);
    text-align: center;
}

.empty-state-icon { font-size: 48px; opacity: 0.5; }
.empty-state p { font-size: 15px; }

/* ════════════════════════════════
   SCROLLBAR
════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(139,92,246,0.25);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.45); }

/* ════════════════════════════════
   AUTH TABS & FORMS
════════════════════════════════ */
.auth-tabs { display:flex; gap:4px; margin-bottom:28px; background:rgba(26,39,68,0.5); border-radius:12px; padding:4px; }
.auth-tab { flex:1; padding:12px; border:none; border-radius:10px; background:transparent; color:var(--text3); font-family:var(--font-head); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.25s; }
.auth-tab:hover { color:var(--text2); }
.auth-tab.active { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; box-shadow:0 4px 16px rgba(139,92,246,0.35); }
.auth-form {
    display: none;
    opacity: 0;
    transform: translateX(20px);
}
.auth-form.active {
    display: block;
    animation: authFormIn 0.28s cubic-bezier(0.22,1,0.36,1) forwards;
}
.auth-form--exit {
    animation: authFormOut 0.22s cubic-bezier(0.4,0,1,1) forwards !important;
    pointer-events: none;
}
.auth-form--enter {
    opacity: 0 !important;
    transform: translateX(20px) !important;
}
@keyframes authFormIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes authFormOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-20px); }
}
.auth-error { background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.3); border-radius:10px; padding:10px 16px; color:#f87171; font-size:13px; margin-bottom:14px; text-align:left; animation:fadeIn 0.2s ease; }
.input-row { display:flex; gap:12px; }
.input-row .input-wrap { flex:1; }

/* ════════════════════════════════
   CHAT AVATARS
════════════════════════════════ */
.msg-row { display:flex; align-items:flex-end; gap:10px; }
.msg-row-own { flex-direction:row-reverse; }
.msg-row-other { flex-direction:row; }
.msg-avatar-sm { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:#fff; flex-shrink:0; overflow:hidden; }
.msg-avatar-sm img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.msg-body { min-width:0; max-width:100%; }

/* ════════════════════════════════
   COLLAPSIBLE COMMENTS
════════════════════════════════ */
.comment-section {
    overflow:hidden;
    transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
    max-height:700px;
    opacity:1;
}
.comment-section.collapsed {
    max-height:0;
    opacity:0;
}
.comment-section-inner {
    padding-top:12px;
}
.post-comments {
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:360px;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:4px;
    scroll-behavior:smooth;
}
.post-comments::-webkit-scrollbar { width:4px; }
.post-comments::-webkit-scrollbar-track { background:transparent; }
.post-comments::-webkit-scrollbar-thumb { background:rgba(139,92,246,0.3); border-radius:2px; }
.post-comments::-webkit-scrollbar-thumb:hover { background:rgba(139,92,246,0.5); }
.comment-item { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; background:rgba(13,21,38,0.4); border-radius:12px; border:1px solid rgba(139,92,246,0.06); animation:msgIn 0.2s ease; position:relative; }
.comment-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; color:#fff; flex-shrink:0; }
.comment-body { flex:1; min-width:0; }
.comment-author { font-size:12px; font-weight:600; color:var(--accent); margin-right:8px; }
.comment-text { font-size:13px; color:var(--text2); line-height:1.5; word-break:break-word; }
.comment-time { font-size:10px; color:var(--text3); margin-left:8px; }
.comment-delete-btn { position:absolute; top:8px; right:8px; width:20px; height:20px; border-radius:50%; background:rgba(239,68,68,0.1); border:none; color:var(--text3); font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:all 0.2s; padding:0; }
.comment-item:hover .comment-delete-btn { opacity:1; }
.comment-delete-btn:hover { background:rgba(239,68,68,0.3); color:#f87171; }

.comment-composer { display:flex; gap:10px; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.comment-input { flex:1; padding:10px 16px; background:rgba(26,39,68,0.5); border:1px solid var(--border); border-radius:20px; color:var(--text); font-family:var(--font-body); font-size:13px; outline:none; transition:all 0.3s; }
.comment-input:focus { border-color:var(--accent); background:rgba(26,39,68,0.7); box-shadow:0 0 0 3px rgba(139,92,246,0.1); }
.comment-send-btn { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); border:none; color:#fff; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; flex-shrink:0; padding:0; }
.comment-send-btn:hover { transform:scale(1.08); box-shadow:0 4px 12px rgba(139,92,246,0.4); }

/* Post avatar with image support */
.post-avatar { overflow:hidden; }
.post-avatar img.avatar-img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* Comment avatar with image support */
.comment-avatar { overflow:hidden; }
.comment-avatar img.avatar-img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* Comment header row */
.comment-header-row { display:flex; align-items:center; gap:8px; margin-bottom:2px; }

/* Comment actions row (like + reply) */
.comment-actions-row {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:6px;
}
.comment-like-btn {
    display:flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:14px;
    border:1px solid var(--border); background:transparent;
    color:var(--text3); font-size:12px; font-family:var(--font-body);
    cursor:pointer; transition:all 0.2s;
}
.comment-like-btn:hover { border-color:var(--accent2); color:var(--accent2); background:rgba(236,72,153,0.08); }
.comment-like-btn.comment-liked { background:rgba(236,72,153,0.12); border-color:var(--accent2); color:var(--accent2); }

.comment-reply-btn {
    padding:3px 10px; border-radius:14px;
    border:1px solid var(--border); background:transparent;
    color:var(--text3); font-size:12px; font-family:var(--font-body);
    cursor:pointer; transition:all 0.2s;
}
.comment-reply-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(139,92,246,0.08); }

.comment-reply-indicator {
    font-size:11px; color:var(--accent); margin-right:4px;
}

/* Nested comment styling */
.comment-nested {
    border-left:2px solid rgba(139,92,246,0.15);
}

/* Reply composer (inline) */
.reply-composer {
    display:flex; gap:8px; align-items:center;
    margin-top:6px; margin-bottom:6px; padding:8px 12px;
    background:rgba(13,21,38,0.3); border-radius:12px;
    border:1px solid var(--border);
}
.reply-composer.hidden { display:none; }
.reply-input { flex:1; }
.reply-cancel-btn {
    width:28px; height:28px; border-radius:50%;
    background:rgba(239,68,68,0.1); border:none;
    color:var(--text3); font-size:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.2s; flex-shrink:0; padding:0;
}
.reply-cancel-btn:hover { background:rgba(239,68,68,0.25); color:#f87171; }

/* Like button animation */
.post-action-btn .like-icon { transition:transform 0.2s; display:inline-block; }
.post-action-btn.liked .like-icon { animation:likePopIn 0.3s ease; }
@keyframes likePopIn { 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} }

/* ════════════════════════════════
   GROUP PAGE
════════════════════════════════ */
.btn-back {
    padding:8px 16px; border-radius:20px; border:1px solid var(--border);
    background:rgba(26,39,68,0.5); color:var(--text2); font-family:var(--font-body);
    font-size:13px; cursor:pointer; transition:all 0.2s; width:auto; margin:0;
}
.btn-back:hover { border-color:var(--accent); color:var(--accent); background:rgba(139,92,246,0.1); }

.group-page-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px;
    margin: 20px 32px 0;
    background: linear-gradient(180deg, rgba(24,36,61,0.94), rgba(12,20,34,0.9));
    border: 1px solid rgba(139,92,246,0.14);
    border-radius: 24px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(0,0,0,0.22);
}

.group-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 20%, rgba(6,182,212,0.14), transparent 24%),
        radial-gradient(circle at 12% 82%, rgba(139,92,246,0.18), transparent 28%),
        linear-gradient(120deg, rgba(255,255,255,0.04), transparent 38%);
    pointer-events: none;
}

.group-page-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 30px rgba(0,0,0,0.24);
}
.group-page-info {
    flex: 1;
    min-width: 200px;
    position: relative;
    z-index: 1;
}

.group-page-info h3 {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}

.group-page-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.group-page-badge {
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(139,92,246,0.18);
    background: rgba(139,92,246,0.12);
    color: var(--text2);
    font-size: 12px;
}

.group-page-badge--ghost {
    background: rgba(6,182,212,0.08);
    border-color: rgba(6,182,212,0.16);
}

.group-page-desc {
    font-size: 14px;
    color: var(--text2);
    line-height: 1.7;
    margin-bottom: 10px;
    max-width: 58ch;
}

.group-page-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text2);
}

.group-page-stat-sep { color: var(--text3); }

.group-page-actions { display:flex; gap:10px; flex-wrap:wrap; }
.group-page-access-note {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text2);
    max-width: 480px;
}
.group-page-wall { padding:24px 32px 32px; }
.post-composer--compact { margin:0 0 20px; padding:18px; }
.post-composer.is-locked {
    opacity: 0.78;
    border-color: rgba(125,211,252,0.14);
    box-shadow: inset 0 0 0 1px rgba(125,211,252,0.08);
}
.btn-attach.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.group-card-btns { display:flex; gap:6px; flex-wrap:wrap; }

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 1100px) {
    .sidebar-right { display: none; }
    .mission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mission-card--hero { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .tab-header { padding: 24px 24px 18px; }
    .mission-grid,
    .wall-feed,
    .groups-stats,
    .group-grid,
    .group-page-wall,
    .profile-page-posts-header,
    .profile-page-groups {
        padding-left: 24px;
        padding-right: 24px;
    }

    .group-page-hero {
        margin: 18px 24px 0;
        padding: 28px 24px;
    }
}

@media (max-width: 700px) {
    .sidebar-left { width: 70px; padding: 20px 10px; }
    .logo-text, .nav-label, .sidebar-user-info { display: none; }
    .nav-item { justify-content: center; padding: 12px; }
    .chats-list { width: 200px; }
    .emoji-picker { left: 10px; right: 10px; }
    .sidebar-logout { padding: 12px 0; font-size: 0; }
    .sidebar-logout::before { content: '⏻'; font-size: 16px; }
    .tab-header { padding: 22px 20px 18px; }
    .tab-pills { width: 100%; justify-content: flex-start; }
    .tab-pill { flex: 1 1 140px; }
    .mission-grid {
        padding: 16px 20px 0;
        grid-template-columns: 1fr;
    }
    .mission-card,
    .mission-card--hero {
        min-height: unset;
        padding: 18px 18px 20px;
    }
    .post-composer,
    .wall-feed,
    .groups-stats,
    .group-grid,
    .group-page-wall,
    .profile-page-posts-header,
    .profile-page-groups {
        margin-left: 20px;
        margin-right: 20px;
        padding-left: 0;
        padding-right: 0;
    }
    .post-composer { margin-top: 18px; }
    .group-page-hero {
        margin: 16px 20px 0;
        padding: 24px 20px;
    }
    .profile-page-cover { margin: 0 20px; }
    .profile-page-main {
        padding: 0 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .profile-page-info { padding-top: 0; }
    .profile-page-avatar { width: 88px; height: 88px; }
    .profile-cover-meta { left: 18px; right: 18px; bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .starfield-canvas,
    .login-orbits,
    .login-particles,
    .login-grid {
        display: none !important;
    }
}

/* ════════════════════════════════
   MEDIA ATTACHMENTS — Posts & Bubbles
════════════════════════════════ */

/* Post audio — uses .custom-audio-player */
.post-audio { max-width: 100%; }
.post-video {
    margin: 10px 0;
    background: rgba(13,21,38,0.5);
    border: 1px solid rgba(139,92,246,0.12);
    border-radius: 14px;
    padding: 12px 16px;
    overflow: hidden;
}
.post-file-label {
    font-size: 12px;
    color: var(--text3);
    margin-bottom: 8px;
    font-family: var(--font-body);
}
.post-video-player {
    width: 100%;
    max-height: 300px;
    border-radius: 10px;
    outline: none;
    background: #000;
    display: block;
    margin-bottom: 8px;
}
.post-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}
.post-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(139,92,246,0.1);
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 20px;
    color: var(--text2);
    font-size: 12px;
    font-family: var(--font-body);
    text-decoration: none;
    transition: all 0.2s;
    max-width: 220px;
    overflow: hidden;
}
.post-file-chip:hover {
    background: rgba(139,92,246,0.2);
    border-color: var(--accent);
    color: var(--text);
    transform: translateY(-1px);
}
.post-file-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Attach preview for audio/video/file */
.attach-preview-item {
    position: relative;
    min-width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(26,39,68,0.5);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
}
.attach-file-icon { font-size: 24px; line-height: 1; }
.attach-file-name {
    font-size: 10px;
    color: var(--text3);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 68px;
    font-family: var(--font-body);
}
.attach-preview-audio { border-color: rgba(139,92,246,0.3); background: rgba(139,92,246,0.08); }
.attach-preview-video { border-color: rgba(236,72,153,0.3); background: rgba(236,72,153,0.08); }
.attach-preview-file  { border-color: rgba(6,182,212,0.3);  background: rgba(6,182,212,0.08); }

/* Chat bubble media — audio now uses .custom-audio-player */
.bubble-file-label {
    font-size: 11px;
    color: var(--text3);
    margin-bottom: 6px;
    font-family: var(--font-body);
}
.bubble-video {
    margin: 6px 0;
}
.bubble-video-player {
    width: 260px;
    max-width: 100%;
    border-radius: 12px;
    outline: none;
    background: #000;
    display: block;
}
.bubble-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0;
    padding: 7px 12px;
    background: rgba(139,92,246,0.1);
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 16px;
    color: var(--text2);
    font-size: 11px;
    font-family: var(--font-body);
    text-decoration: none;
    transition: all 0.2s;
    max-width: 200px;
    overflow: hidden;
}
.bubble-file-chip:hover {
    background: rgba(139,92,246,0.2);
    color: var(--text);
}
.bubble-file-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ════════════════════════════════
   CUSTOM AUDIO PLAYER
════════════════════════════════ */
.custom-audio-player {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(236,72,153,0.08));
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 16px;
    padding: 12px 16px;
    margin: 8px 0;
    backdrop-filter: blur(10px);
    transition: border-color 0.3s, box-shadow 0.3s;
    min-width: 240px;
    max-width: 360px;
    position: relative;
    overflow: hidden;
}
.custom-audio-player::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(139,92,246,0.0), rgba(236,72,153,0.0));
    transition: background 0.4s;
    pointer-events: none;
}
.custom-audio-player.cap-playing {
    border-color: rgba(139,92,246,0.45);
    box-shadow: 0 0 24px rgba(139,92,246,0.2), 0 4px 16px rgba(0,0,0,0.3);
}
.custom-audio-player.cap-playing::before {
    background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(236,72,153,0.04));
}

/* Play/Pause button */
.cap-play {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s, box-shadow 0.18s;
    box-shadow: 0 4px 12px rgba(139,92,246,0.4);
    padding: 0;
    position: relative;
    z-index: 1;
}
.cap-play:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(139,92,246,0.55);
}
.cap-play:active { transform: scale(0.95); }
.cap-play svg {
    width: 16px;
    height: 16px;
    fill: #fff;
    display: block;
}
.cap-icon-play polygon { fill: #fff; }
.cap-icon-pause rect   { fill: #fff; }

/* Info section */
.cap-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cap-title {
    font-size: 12px;
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--text2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* Progress bar */
.cap-bar-wrap {
    cursor: pointer;
    padding: 6px 0;
    position: relative;
}
.cap-bar-bg {
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    position: relative;
    overflow: visible;
}
.cap-bar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-radius: 2px;
    transition: width 0.1s linear;
}
.cap-bar-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(139,92,246,0.6);
    transition: left 0.1s linear, width 0.15s, height 0.15s;
    pointer-events: none;
}
.cap-bar-wrap:hover .cap-bar-thumb {
    width: 13px;
    height: 13px;
}
.cap-bar-wrap:hover .cap-bar-bg { height: 5px; }

/* Times */
.cap-times {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text3);
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    padding: 0 1px;
}

/* Playing wave animation on the play button */
.cap-playing .cap-play {
    animation: capPulse 1.8s ease-in-out infinite;
}
@keyframes capPulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(139,92,246,0.4); }
    50%       { box-shadow: 0 4px 22px rgba(139,92,246,0.7), 0 0 0 6px rgba(139,92,246,0.12); }
}

/* ════════════════════════════════
   IMAGE GALLERY (multiple photos)
════════════════════════════════ */
.post-image-gallery {
    margin: 10px 0;
    display: grid;
    gap: 3px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
}
.post-image-gallery.pg-2 { grid-template-columns: 1fr 1fr; }
.post-image-gallery.pg-3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.post-image-gallery.pg-3 .pg-cell:first-child { grid-column: 1/-1; }
.post-image-gallery.pg-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.pg-cell {
    position: relative;
    overflow: hidden;
    background: rgba(0,0,0,0.3);
    max-height: 240px;
}
.pg-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.pg-cell:hover img { transform: scale(1.04); }
.pg-cell[data-more]::after {
    content: attr(data-more);
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    font-family: var(--font-head);
}

/* Chat bubble image grid */
.bubble-image-grid {
    display: grid;
    gap: 2px;
    border-radius: 12px;
    overflow: hidden;
    margin: 6px 0;
    max-width: 300px;
}
.bubble-image-grid.bg-2 { grid-template-columns: 1fr 1fr; }
.bubble-image-grid.bg-3 { grid-template-columns: 1fr 1fr; }
.bubble-image-grid.bg-3 img:first-child { grid-column: 1/-1; }
.bubble-image-grid.bg-4 { grid-template-columns: 1fr 1fr; }
.bubble-image-grid img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    cursor: pointer;
    display: block;
    transition: opacity 0.2s;
}
.bubble-image-grid img:hover { opacity: 0.9; }

/* ════════════════════════════════
   ENHANCED AUDIO PLAYER v2
════════════════════════════════ */
.custom-audio-player {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(15,25,50,0.9), rgba(20,32,60,0.85));
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 18px;
    padding: 12px 14px;
    margin: 8px 0;
    backdrop-filter: blur(12px);
    transition: border-color 0.3s, box-shadow 0.3s;
    min-width: 260px;
    max-width: 420px;
    position: relative;
    overflow: hidden;
}
.custom-audio-player::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,0.4), transparent);
    border-radius: 18px 18px 0 0;
}
.custom-audio-player.cap-playing {
    border-color: rgba(139,92,246,0.5);
    box-shadow: 0 0 28px rgba(139,92,246,0.18), 0 4px 20px rgba(0,0,0,0.4);
}

/* Play button */
.cap-play {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(139,92,246,0.4);
    transition: transform 0.18s, box-shadow 0.18s;
    padding: 0;
}
.cap-play:hover { transform: scale(1.1); box-shadow: 0 6px 22px rgba(139,92,246,0.6); }
.cap-play:active { transform: scale(0.93); }
.cap-play svg { width: 15px; height: 15px; fill: #fff; display: block; }
.cap-icon-play polygon, .cap-icon-pause rect { fill: #fff; }

/* Pulsing ring when playing */
.cap-playing .cap-play {
    animation: capBtnPulse 1.8s ease-in-out infinite;
}
@keyframes capBtnPulse {
    0%,100% { box-shadow: 0 4px 14px rgba(139,92,246,0.4); }
    50%      { box-shadow: 0 4px 22px rgba(139,92,246,0.7), 0 0 0 8px rgba(139,92,246,0.1); }
}

/* Body */
.cap-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cap-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cap-title {
    font-size: 12px;
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--text2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Volume */
.cap-vol-wrap { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.cap-vol-icon { font-size: 13px; cursor: pointer; user-select: none; opacity: 0.7; transition: opacity 0.2s; }
.cap-vol-icon:hover { opacity: 1; }
.cap-vol-slider {
    -webkit-appearance: none;
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.15);
    outline: none;
    cursor: pointer;
    accent-color: var(--accent);
}
.cap-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    transition: transform 0.15s;
}
.cap-vol-slider::-webkit-slider-thumb:hover { transform: scale(1.3); }

/* Waveform bars */
.cap-bar-wrap {
    position: relative;
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
}
.cap-waveform {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    position: relative;
    z-index: 1;
}
.cap-bar {
    flex: 1;
    border-radius: 2px;
    background: rgba(139,92,246,0.25);
    transition: background 0.2s, height 0.1s;
    min-height: 3px;
    pointer-events: none;
}
.cap-bar--played {
    background: linear-gradient(180deg, var(--accent), var(--accent2));
}
.cap-bar--active {
    animation: barBounce 0.8s ease-in-out infinite alternate;
}
@keyframes barBounce {
    from { transform: scaleY(0.7); }
    to   { transform: scaleY(1.0); }
}

/* Progress overlay (transparent overlay for click seeking, no visual) */
.cap-progress-overlay {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    pointer-events: none;
    transition: width 0.1s linear;
}

/* Times */
.cap-times {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text3);
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════
   USER PROFILE PAGE
════════════════════════════════ */
.profile-page { padding: 0 0 40px; }
.profile-page-cover {
    height: 168px;
    background: linear-gradient(135deg, rgba(139,92,246,0.34), rgba(236,72,153,0.16), rgba(6,182,212,0.18));
    border-radius: 20px;
    border: 1px solid rgba(139,92,246,0.14);
    margin: 0 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(0,0,0,0.2);
}
.profile-page-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255,255,255,0.06), transparent 32%),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: auto, 52px 52px, 52px 52px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.75), transparent);
}
.profile-page-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 50%, rgba(139,92,246,0.15) 0%, transparent 60%),
                      radial-gradient(circle at 80% 30%, rgba(236,72,153,0.1) 0%, transparent 50%);
}

.profile-cover-meta {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 20px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-cover-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(12,20,35,0.56);
    backdrop-filter: blur(12px);
    color: var(--text);
    font-size: 12px;
}

.profile-cover-chip::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent3), #38bdf8);
    box-shadow: 0 0 12px rgba(6,182,212,0.5);
}

.profile-cover-chip--ghost {
    color: rgba(203,213,225,0.84);
}

.profile-cover-chip--ghost::before {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow: 0 0 12px rgba(139,92,246,0.42);
}

.profile-page-main {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 0 28px;
    margin-top: -52px;
    position: relative;
    z-index: 2;
}
.profile-page-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-page-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid var(--bg2);
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 800;
    font-family: var(--font-head);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(139,92,246,0.4), 0 8px 24px rgba(0,0,0,0.4);
}
.profile-page-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-page-edit-av {
    position: absolute;
    bottom: 2px; right: 2px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bg3);
    border: 1.5px solid var(--border);
    font-size: 13px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.profile-page-edit-av:hover { background: var(--accent); }
.profile-page-info {
    flex: 1;
    padding-bottom: 4px;
    padding-top: 54px;
}
.profile-page-name {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-head);
    color: var(--text);
    margin-bottom: 4px;
}
.profile-page-status {
    font-size: 13px;
    color: var(--accent);
    margin-bottom: 4px;
    font-style: italic;
}
.profile-page-bio {
    font-size: 13px;
    color: var(--text3);
    line-height: 1.5;
    margin-bottom: 12px;
}
.profile-page-callout {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(12,20,35,0.68);
    border: 1px solid rgba(6,182,212,0.12);
    color: rgba(203,213,225,0.84);
    font-size: 13px;
    line-height: 1.55;
}

.profile-page-callout::before {
    content: '';
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent3), #38bdf8);
    box-shadow: 0 0 14px rgba(6,182,212,0.4);
}
.profile-page-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
}
.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 92px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(12,20,35,0.56);
    border: 1px solid rgba(139,92,246,0.1);
}
.profile-stat-val {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-head);
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.profile-stat-lbl {
    font-size: 11px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.profile-page-groups {
    padding: 16px 28px 0;
}
.profile-groups-label {
    font-size: 11px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.profile-groups-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(139,92,246,0.1);
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text2);
    cursor: pointer;
    transition: all 0.2s;
}
.profile-group-chip:hover { background: rgba(139,92,246,0.2); color: var(--text); }
.profile-group-chip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(125,211,252,0.12);
    color: #d8f6ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.profile-groups-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(125,211,252,0.12);
    background: rgba(10,16,29,0.42);
    color: var(--text2);
    font-size: 13px;
}
.profile-groups-empty .btn-secondary--compact {
    margin-top: 0;
    flex-shrink: 0;
}
.profile-page-posts-header {
    padding: 20px 28px 0;
    margin-bottom: -8px;
}
.profile-page-posts-header h3 {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-head);
    color: var(--text2);
}
.hidden { display: none !important; }
.btn-icon-sm {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--text3);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.btn-icon-sm:hover { background: rgba(139,92,246,0.1); color: var(--text); border-color: var(--accent); }

/* ════════════════════════════════
   PROFILE PAGE COMPOSER
════════════════════════════════ */
.post-composer--profile {
    margin: 16px 24px 0;
    border-radius: var(--radius);
    background: rgba(20,32,53,0.7);
    border: 1px solid rgba(139,92,246,0.15);
    backdrop-filter: blur(16px);
    transition: border-color 0.25s, box-shadow 0.25s;
}
.post-composer--profile:focus-within {
    border-color: rgba(139,92,246,0.35);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.07);
}
.post-composer--profile .composer-body textarea {
    min-height: 72px;
}

/* ════════════════════════════════
   NEW: FRIENDS SYSTEM
════════════════════════════════ */
.friends-section-title {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 600;
    color: var(--text2);
    margin: 16px 0 8px;
    padding: 0 4px;
}

.friend-requests-section {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
}

.friend-request-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.friend-request-card:last-child { border-bottom: none; }

.friend-req-info {
    flex: 1;
    min-width: 0;
}
.friend-req-name {
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    display: block;
}
.friend-req-name:hover { color: var(--accent); }
.friend-req-time { font-size: 12px; color: var(--text3); }
.friend-req-actions { display: flex; gap: 6px; }
.btn-accept {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background 0.2s;
}
.btn-accept:hover { background: #7c3aed; }
.btn-reject {
    background: rgba(255,255,255,0.06);
    color: var(--text3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-reject:hover { background: rgba(239,68,68,0.15); color: #ef4444; }

.friends-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.friend-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: all 0.2s;
}
.friend-card:hover { background: var(--surface2); border-color: rgba(139,92,246,0.2); }

.friend-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    min-width: 0;
    flex: 1;
}
.friend-card-name { font-weight: 500; color: var(--text); }
.friend-card-status { font-size: 12px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-card-actions { display: flex; gap: 6px; }
.btn-dm-small {
    background: rgba(139,92,246,0.12);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}
.btn-dm-small:hover { background: rgba(139,92,246,0.25); }
.btn-remove-friend {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--text3);
    font-size: 13px;
    transition: all 0.2s;
}
.btn-remove-friend:hover { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.3); }

.friend-req-badge, .dm-badge {
    background: var(--accent2);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: 6px;
    min-width: 18px;
    text-align: center;
    display: inline-block;
}

/* ════════════════════════════════
   NEW: USER SEARCH
════════════════════════════════ */
.user-search-results {
    margin-bottom: 16px;
}
.user-search-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    cursor: pointer;
    margin-bottom: 4px;
    transition: all 0.2s;
}
.user-search-card:hover { background: var(--surface2); border-color: rgba(139,92,246,0.25); }
.user-search-name { font-weight: 500; color: var(--text); }
.user-search-status { font-size: 12px; color: var(--text3); }

/* ════════════════════════════════
   NEW: PROFILE ACTIONS
════════════════════════════════ */
.profile-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.btn-friend-action, .btn-dm-action {
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-friend-action {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}
.btn-friend-action:hover { background: #7c3aed; }
.btn-friend-action.is-friend {
    background: rgba(52,211,153,0.15);
    color: #34d399;
    border-color: rgba(52,211,153,0.3);
}
.btn-friend-action.request-sent {
    background: rgba(251,191,36,0.12);
    color: #fbbf24;
    border-color: rgba(251,191,36,0.2);
    cursor: default;
}
.btn-friend-action.accept-request {
    background: rgba(52,211,153,0.2);
    color: #34d399;
    border-color: rgba(52,211,153,0.3);
}
.btn-dm-action {
    background: rgba(139,92,246,0.12);
    color: var(--accent);
    border-color: rgba(139,92,246,0.2);
}
.btn-dm-action:hover { background: rgba(139,92,246,0.25); }

/* ════════════════════════════════
   NEW: FORWARD MODAL
════════════════════════════════ */
.forward-modal {
    max-width: 440px;
    width: 90%;
}
.forward-modal-body {
    padding: 16px 20px;
    max-height: 400px;
    overflow-y: auto;
}
.forward-section {
    margin-bottom: 16px;
}
.forward-section h4 {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 8px;
}
.forward-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.forward-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text);
    font-size: 14px;
}
.forward-item:hover { background: rgba(139,92,246,0.12); }
.forward-item-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.group-inline-avatar {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}

.group-inline-avatar .avatar-img,
.forward-item-icon .avatar-img {
    border-radius: inherit;
}

/* ════════════════════════════════
   NEW: FORWARDED MESSAGE STYLING
════════════════════════════════ */
.bubble-forwarded-label {
    font-size: 11px;
    color: var(--accent);
    margin-bottom: 6px;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.forwarded-post-bubble {
    background:
        linear-gradient(180deg, rgba(18,27,47,0.92), rgba(12,18,34,0.94)),
        radial-gradient(circle at top right, rgba(56,189,248,0.16), transparent 52%);
    border: 1px solid rgba(90,128,179,0.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    border-radius: 14px;
    padding: 12px 13px;
    margin-bottom: 8px;
}
.fwd-post-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.fwd-post-header {
    font-size: 11px;
    color: #7dd3fc;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.fwd-post-source {
    font-size: 12px;
    color: var(--text3);
}
.fwd-post-author {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-top: 10px;
}
.fwd-post-text {
    font-size: 13px;
    color: var(--text2);
    line-height: 1.5;
    margin-top: 7px;
}
.fwd-post-text--muted {
    color: var(--text3);
    font-style: italic;
}
.fwd-post-img {
    display: block;
    width: 100%;
    max-width: 240px;
    border-radius: 12px;
    margin-top: 10px;
    cursor: pointer;
    border: 1px solid rgba(125,211,252,0.2);
}
.fwd-post-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.fwd-post-chip {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(125,211,252,0.08);
    border: 1px solid rgba(125,211,252,0.12);
    color: var(--text2);
    font-size: 11px;
}
.fwd-post-open {
    border: 1px solid rgba(125,211,252,0.25);
    background: rgba(125,211,252,0.08);
    color: #c4f1ff;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}
.fwd-post-open:hover {
    background: rgba(125,211,252,0.14);
    border-color: rgba(125,211,252,0.38);
    transform: translateY(-1px);
}
.post-card--highlighted {
    border-color: rgba(125,211,252,0.72) !important;
    box-shadow:
        0 0 0 1px rgba(125,211,252,0.28),
        0 0 24px rgba(56,189,248,0.18),
        0 8px 30px rgba(0,0,0,0.32);
}

/* ════════════════════════════════
   NEW: POST DELETE BUTTON
════════════════════════════════ */
.post-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s;
    margin-left: auto;
    padding: 4px 6px;
    border-radius: 6px;
}
.post-card:hover .post-delete-btn { opacity: 0.5; }
.post-delete-btn:hover { opacity: 1 !important; background: rgba(239,68,68,0.12); }

/* Clickable avatars in posts/comments */
.post-avatar-click, .comment-avatar-click, .msg-avatar-click {
    cursor: pointer;
    display: inline-flex;
}
.post-avatar-click:hover, .comment-avatar-click:hover, .msg-avatar-click:hover {
    filter: brightness(1.15);
}

/* ════════════════════════════════
   FRIENDS — SUB-TABS & NEW LAYOUT
════════════════════════════════ */

/* Суб-навигация */
.friends-subnav {
    display: flex;
    gap: 4px;
    padding: 0 32px;
    border-bottom: 1px solid var(--border);
    background: rgba(13,21,38,0.5);
    flex-shrink: 0;
}
.friends-subnav-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 18px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text3);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -1px;
    white-space: nowrap;
}
.friends-subnav-btn:hover { color: var(--text2); background: rgba(139,92,246,0.06); border-radius: 8px 8px 0 0; }
.friends-subnav-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* Бэдж заявок в суб-вкладке */
.freq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent2);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    line-height: 1;
}

/* Панели суб-вкладок */
.friends-panel {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.friends-panel.hidden { display: none; }
.friends-panel.active { display: flex; }

/* Сетка друзей */
.friends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    align-content: start;
}
.friend-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: rgba(26,39,68,0.5);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: all 0.2s;
    min-width: 0;
}
.friend-card:hover {
    border-color: rgba(139,92,246,0.3);
    background: rgba(36,53,85,0.65);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.friend-card-left {
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}
.friend-card-left:hover .friend-card-name { color: var(--accent); }

/* Обёртка аватарки с онлайн-точкой */
.friend-card-av-wrap { position: relative; flex-shrink: 0; }
.friend-online-dot {
    position: absolute;
    bottom: 1px; right: 1px;
    width: 10px; height: 10px;
    background: #34d399;
    border-radius: 50%;
    border: 2px solid var(--surface);
    box-shadow: 0 0 6px rgba(52,211,153,0.5);
}

/* Текстовый блок — overflow обязателен */
.friend-card-text { min-width: 0; flex: 1; overflow: hidden; }
.friend-card-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.friend-card-status {
    font-size: 12px;
    color: var(--text3);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.friend-card-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }

/* Кнопка "Написать" */
.btn-dm-small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    background: rgba(139,92,246,0.13);
    border: 1px solid rgba(139,92,246,0.28);
    border-radius: 8px;
    color: #c4b5fd;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-dm-small:hover { background: rgba(139,92,246,0.26); border-color: rgba(139,92,246,0.5); color: #fff; }

/* Кнопка удалить из друзей */
.btn-remove-friend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    padding: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px;
    color: var(--text3);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.btn-remove-friend:hover { background: rgba(239,68,68,0.14); color: #ef4444; border-color: rgba(239,68,68,0.35); }

/* Заявки в друзья */
.friend-requests-section {
    background: linear-gradient(135deg, rgba(139,92,246,0.07), rgba(236,72,153,0.04));
    border-radius: var(--radius);
    border: 1px solid rgba(139,92,246,0.2);
    overflow: hidden;
    position: relative;
}
.friend-requests-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.friend-request-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(139,92,246,0.1);
}
.friend-request-card:last-child { border-bottom: none; }
.friend-req-info { flex: 1; min-width: 0; }
.friend-req-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}
.friend-req-name:hover { color: var(--accent); }
.friend-req-time { font-size: 11px; color: var(--text3); margin-top: 3px; }
.friend-req-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-accept {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 10px rgba(139,92,246,0.35);
    white-space: nowrap;
}
.btn-accept:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(139,92,246,0.5); }
.btn-reject {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    padding: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text3);
    font-size: 16px;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.btn-reject:hover { background: rgba(239,68,68,0.14); color: #ef4444; border-color: rgba(239,68,68,0.35); }

/* Пустые состояния */
.friends-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text3);
    text-align: center;
}
.friends-empty span { font-size: 48px; }
.friends-empty p { font-size: 15px; }

/* Поиск пользователей */
.friends-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: rgba(26,39,68,0.5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.2s;
}
.friends-search-bar:focus-within {
    border-color: rgba(139,92,246,0.4);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
}
.friends-search-icon { font-size: 16px; flex-shrink: 0; }
.friends-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
}
.friends-search-input::placeholder { color: var(--text3); }
.friends-search-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--text3);
    text-align: center;
}
.friends-search-hint span { font-size: 36px; }
.friends-search-hint p { font-size: 14px; }

/* Результаты поиска */
.user-search-results { display: flex; flex-direction: column; gap: 6px; }
.user-search-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(26,39,68,0.5);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}
.user-search-card:hover { background: rgba(36,53,85,0.7); border-color: rgba(139,92,246,0.3); transform: translateY(-1px); }
.user-search-name { font-weight: 600; font-size: 14px; color: var(--text); }
.user-search-status { font-size: 12px; color: var(--text3); margin-top: 2px; }

/* DM тост-уведомление */
.dm-toast {
    position: fixed;
    bottom: 28px; right: 28px;
    z-index: 9999;
    display: flex;
    align-items: stretch;
    background: rgba(20,32,53,0.97);
    border: 1px solid rgba(139,92,246,0.35);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
    backdrop-filter: blur(20px);
    min-width: 280px; max-width: 340px;
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    overflow: hidden;
}
.dm-toast::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.dm-toast--visible { transform: translateY(0) scale(1); opacity: 1; }
.dm-toast-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    transition: background 0.2s;
}
.dm-toast-inner:hover { background: rgba(139,92,246,0.08); }
.dm-toast-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(139,92,246,0.25);
}
.dm-toast-avatar-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
}
.dm-toast-body { min-width: 0; flex: 1; }
.dm-toast-name { font-weight: 700; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.dm-toast-text { font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-toast-close {
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-left: 1px solid rgba(139,92,246,0.1);
    color: var(--text3);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0; margin: 0; flex-shrink: 0;
}
.dm-toast-close:hover { background: rgba(239,68,68,0.12); color: #ef4444; }

.app-toast-stack {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.app-toast {
    min-width: 260px;
    max-width: min(360px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(125,211,252,0.18);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.12), transparent 42%),
        rgba(12,19,34,0.92);
    box-shadow: 0 18px 44px rgba(0,0,0,0.42);
    backdrop-filter: blur(22px);
    transform: translateY(-10px) scale(0.96);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    pointer-events: auto;
}

.app-toast--visible {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.app-toast--success {
    border-color: rgba(52,211,153,0.24);
}

.app-toast--error {
    border-color: rgba(248,113,113,0.28);
}

.app-toast--info {
    border-color: rgba(125,211,252,0.22);
}

.app-toast-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    color: #dff4ff;
    flex-shrink: 0;
}

.app-toast--success .app-toast-icon {
    color: #86efac;
    background: rgba(52,211,153,0.12);
}

.app-toast--error .app-toast-icon {
    color: #fca5a5;
    background: rgba(248,113,113,0.12);
}

.app-toast-icon .ui-icon {
    width: 18px;
    height: 18px;
}

.app-toast-body {
    min-width: 0;
}

.app-toast-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
}

.app-toast-text {
    font-size: 12px;
    color: var(--text2);
    line-height: 1.5;
    word-break: break-word;
}

.app-toast-close {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text3);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.app-toast-close:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text);
}

.app-toast-close .ui-icon {
    width: 14px;
    height: 14px;
}

/* ════════════════════════════════
   ICONS + CHAT FACELIFT
════════════════════════════════ */
.ui-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.ui-icon {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.messages-empty-symbol,
.friends-empty-symbol {
    width: 56px;
    height: 56px;
}

.btn-icon-inline {
    width: 15px;
    height: 15px;
}

.nav-icon,
.input-icon,
.search-icon,
.friends-search-icon,
.chat-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-icon {
    width: 20px;
    height: 20px;
    font-size: 0;
}

.nav-icon .ui-icon {
    width: 20px;
    height: 20px;
}

.input-icon,
.search-icon,
.friends-search-icon {
    color: rgba(125, 211, 252, 0.88);
}

.input-icon .ui-icon,
.search-icon .ui-icon,
.friends-search-icon .ui-icon {
    width: 17px;
    height: 17px;
}

.sidebar-logout,
.btn-back,
.btn-join,
.btn-friend-action,
.btn-dm-action,
.btn-dm-small,
.btn-change-avatar,
.forward-section h4 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sidebar-logout {
    justify-content: center;
}

.btn-back,
.btn-join,
.btn-friend-action,
.btn-dm-action,
.btn-dm-small,
.btn-change-avatar {
    justify-content: center;
}

.btn-back .ui-icon,
.btn-join .ui-icon,
.btn-friend-action .ui-icon,
.btn-dm-action .ui-icon,
.btn-dm-small .ui-icon,
.btn-change-avatar .ui-icon,
.sidebar-logout .ui-icon {
    width: 15px;
    height: 15px;
}

.btn-icon-sm,
.chat-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-sm .ui-icon,
.chat-close-btn .ui-icon,
.profile-page-edit-av .ui-icon,
.btn-remove-friend .ui-icon {
    width: 16px;
    height: 16px;
}

.btn-remove-friend,
.btn-icon-sm {
    font-size: 0;
}

.btn-attach .ui-icon,
.btn-attach-chat .ui-icon,
.btn-emoji-chat .ui-icon,
.send-btn .ui-icon {
    width: 18px;
    height: 18px;
}

.btn-emoji-chat .ui-icon {
    width: 19px;
    height: 19px;
}

.send-btn .ui-icon {
    width: 17px;
    height: 17px;
}

.chat-empty-icon {
    width: 78px;
    height: 78px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top, rgba(125,211,252,0.2), transparent 58%),
        linear-gradient(180deg, rgba(26,39,68,0.82), rgba(13,21,38,0.92));
    border: 1px solid rgba(125,211,252,0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.chat-empty-icon .ui-icon {
    width: 34px;
    height: 34px;
}

.messages-empty-icon .ui-icon {
    width: 54px;
    height: 54px;
}

.friends-empty span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.forward-section h4 {
    margin-bottom: 8px;
}

.forward-section h4 .ui-icon {
    width: 15px;
    height: 15px;
    color: #9eddff;
}

.group-card-btns .btn-join {
    min-height: 34px;
}

.chat-panel {
    position: relative;
    overflow: hidden;
}

.chat-active {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.chat-list-item {
    position: relative;
    padding: 13px 14px;
    border: 1px solid transparent;
    background: linear-gradient(180deg, rgba(17,26,44,0.66), rgba(10,16,29,0.48));
}

.chat-list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(56,189,248,0.9), rgba(139,92,246,0.9));
    opacity: 0;
    transform: scaleY(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.chat-list-item:hover {
    border-color: rgba(125,211,252,0.16);
    background: linear-gradient(180deg, rgba(22,33,58,0.82), rgba(13,21,38,0.62));
    transform: translateY(-1px);
}

.chat-list-item.active {
    border-color: rgba(139,92,246,0.28);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.16), transparent 38%),
        linear-gradient(180deg, rgba(35,48,78,0.9), rgba(18,28,48,0.86));
    box-shadow: 0 12px 26px rgba(0,0,0,0.22);
}

.chat-list-item.active::before {
    opacity: 1;
    transform: scaleY(1);
}

.chat-list-avatar {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.chat-list-avatar span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.chat-list-avatar .avatar-img {
    border-radius: 14px;
}

.chat-list-name {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.chat-list-last {
    line-height: 1.45;
}

.chat-list-time {
    color: #92a6c8;
}

.chat-list-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-color: rgba(125,211,252,0.16);
    background: rgba(125,211,252,0.07);
}

.chat-list-kicker-icon {
    width: 11px;
    height: 11px;
}

.chat-header {
    padding: 18px 24px;
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.12), transparent 34%),
        linear-gradient(180deg, rgba(13,21,38,0.92), rgba(9,15,28,0.82));
}

.chat-header-info > div:last-child {
    min-width: 0;
}

.chat-header-name {
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}

.chat-header-status {
    color: #93dfff;
}

.chat-readonly-note {
    display: flex;
    align-items: center;
    gap: 10px;
    background:
        linear-gradient(180deg, rgba(125,211,252,0.08), rgba(125,211,252,0.06)),
        rgba(8,13,27,0.6);
}

.chat-readonly-note::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #7dd3fc, #8b5cf6);
    box-shadow: 0 0 0 5px rgba(125,211,252,0.08);
    flex-shrink: 0;
}

.messages-area {
    background:
        radial-gradient(circle at top, rgba(56,189,248,0.06), transparent 28%),
        linear-gradient(180deg, rgba(9,15,27,0.55), rgba(6,11,24,0.28));
    gap: 14px;
}

.message-bubble {
    max-width: min(78%, 720px);
}

.msg-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

.message-bubble.other .msg-body {
    background:
        radial-gradient(circle at top left, rgba(125,211,252,0.08), transparent 45%),
        linear-gradient(180deg, rgba(22,31,52,0.94), rgba(11,18,34,0.92));
    border-bottom-left-radius: 8px;
    color: var(--text);
}

.message-bubble.own .msg-body {
    background:
        radial-gradient(circle at top right, rgba(236,72,153,0.16), transparent 45%),
        linear-gradient(145deg, rgba(106,87,246,0.38), rgba(24,59,112,0.52));
    border-color: rgba(166,134,255,0.22);
    border-bottom-right-radius: 8px;
    color: #f8fbff;
}

.message-bubble .bubble-content,
.message-bubble.own .bubble-content,
.message-bubble.other .bubble-content {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    color: inherit;
}

.bubble-name,
.bubble-meta {
    padding: 0;
    margin: 0;
}

.bubble-name {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bubble-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    opacity: 0.8;
}

.message-bubble.own .bubble-meta {
    justify-content: flex-end;
    color: rgba(241,245,249,0.78);
}

.message-bubble.own .bubble-file-chip,
.message-bubble.own .fwd-post-chip {
    color: #eef6ff;
}

.bubble-forwarded-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bubble-label-icon {
    width: 13px;
    height: 13px;
}

.bubble-image,
.bubble-image-grid,
.bubble-video,
.custom-audio-player,
.forwarded-post-bubble {
    width: 100%;
}

.bubble-image img,
.bubble-image-grid,
.bubble-video-player,
.fwd-post-img {
    border-radius: 16px;
}

.bubble-file-chip {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
}

.chat-input-bar {
    position: relative;
    padding: 16px 20px 18px;
    background:
        radial-gradient(circle at top, rgba(125,211,252,0.08), transparent 42%),
        linear-gradient(180deg, rgba(11,18,34,0.92), rgba(7,12,24,0.96));
}

.btn-attach-chat,
.btn-emoji-chat {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(125,211,252,0.12);
    background: rgba(255,255,255,0.04);
    color: #cbe8ff;
}

.btn-attach-chat:hover,
.btn-emoji-chat:hover {
    border-color: rgba(125,211,252,0.22);
    background: rgba(125,211,252,0.1);
    transform: translateY(-1px);
}

.btn-attach-chat.is-disabled,
.btn-emoji-chat:disabled,
.send-btn:disabled {
    opacity: 0.45;
    pointer-events: none;
}

.chat-input-bar input {
    min-height: 46px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(18,27,47,0.84), rgba(12,19,34,0.92));
    border-color: rgba(125,211,252,0.08);
}

.chat-input-bar input:focus {
    border-color: rgba(139,92,246,0.42);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.1), 0 10px 20px rgba(0,0,0,0.16);
}

.chat-input-bar input:disabled {
    color: rgba(203,213,225,0.5);
    background: rgba(14,20,34,0.72);
}

.send-btn {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(139,92,246,0.3);
}

.send-btn:hover {
    transform: translateY(-1px);
}

.btn-friend-action,
.btn-dm-action,
.btn-dm-small,
.btn-change-avatar {
    font-weight: 600;
}

.chats-list-header {
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.14), transparent 40%),
        linear-gradient(180deg, rgba(14,21,38,0.94), rgba(10,16,30,0.86));
}

.chats-list-subtitle {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: #8ea9c9;
    max-width: 26ch;
}

#chatsListItems,
#dmListItems {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.chat-list-body {
    min-width: 0;
}

.chat-header-meta {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(196, 219, 245, 0.72);
}

.chat-header-chip {
    gap: 7px;
}

.chat-chip-icon {
    width: 13px;
    height: 13px;
}

.chat-header-chip--muted {
    border-color: rgba(148,163,184,0.18);
    background: rgba(148,163,184,0.08);
    color: #c8d4e6;
}

.chat-readonly-note span {
    flex: 1;
}

.chat-note-icon {
    width: 14px;
    height: 14px;
    color: #f7c96f;
    flex-shrink: 0;
}

.chat-attach-preview {
    background:
        radial-gradient(circle at top, rgba(125,211,252,0.08), transparent 42%),
        linear-gradient(180deg, rgba(10,16,29,0.9), rgba(8,13,24,0.82));
}

.chat-composer-tip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 20px 14px;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(163, 184, 207, 0.78);
}

.chat-composer-tip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, #7dd3fc, #8b5cf6);
    box-shadow: 0 0 0 4px rgba(125,211,252,0.08);
    flex-shrink: 0;
}

.messages-empty--sidebar {
    padding: 0;
    min-height: 0;
}

.messages-empty--sidebar .messages-empty-card {
    width: 100%;
    padding: 22px 18px;
    border-radius: 20px;
}

.messages-empty--sidebar .messages-empty-title {
    font-size: 19px;
}

.messages-empty--sidebar .messages-empty-text {
    max-width: 28ch;
    margin-left: auto;
    margin-right: auto;
}

.btn-secondary--compact {
    margin-top: 6px;
    padding: 10px 16px;
    border-radius: 14px;
    font-size: 12px;
}

.attach-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #dcecff;
}

.attach-preview-icon {
    width: 22px;
    height: 22px;
}

.attach-remove-btn .ui-icon,
.dm-toast-close .ui-icon {
    width: 13px;
    height: 13px;
}

@media (max-width: 1080px) {
    .chats-layout {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 96px);
    }

    .chats-list {
        width: auto;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid rgba(125,211,252,0.08);
    }

    #chatsListItems,
    #dmListItems {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .chat-panel {
        min-height: 58vh;
    }
}

@media (max-width: 720px) {
    .sidebar-logout::before {
        content: none !important;
    }

    .chats-list-header {
        padding: 18px 16px 14px;
    }

    .chats-list-subtitle {
        max-width: none;
    }

    #chatsListItems,
    #dmListItems {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px;
    }

    .chat-header {
        padding: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .chat-header-actions {
        justify-content: space-between;
    }

    .chat-header-link {
        flex: 1 1 auto;
    }

    .chat-readonly-note,
    .messages-area,
    .chat-attach-preview,
    .chat-input-bar {
        padding-left: 14px;
        padding-right: 14px;
    }

    .chat-input-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .chat-input-bar input {
        order: 1;
        flex: 1 1 100%;
        width: 100%;
    }

    .chat-composer-tip {
        padding: 0 14px 12px;
    }

    .btn-attach-chat,
    .btn-emoji-chat,
    .send-btn {
        width: 40px;
        height: 40px;
    }

    .message-bubble {
        max-width: 92%;
    }

    .msg-body {
        padding: 11px 12px;
        border-radius: 18px;
    }

    .chat-empty {
        padding: 32px 18px;
    }

    .profile-groups-empty {
        flex-direction: column;
        align-items: stretch;
    }

    .chat-empty-icon {
        width: 68px;
        height: 68px;
        border-radius: 22px;
    }
}

/* Group management + privacy */
.profile-field select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(26,39,68,0.5);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
}

.profile-field select:focus {
    border-color: var(--accent);
    background: rgba(26,39,68,0.7);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
}

.groups-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-create-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.btn-create-group .ui-icon {
    width: 16px;
    height: 16px;
}

.group-private-state {
    margin-bottom: 18px;
}

.group-private-card {
    padding: 28px 24px;
    border-radius: 24px;
    border: 1px solid rgba(125,211,252,0.14);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.14), transparent 36%),
        linear-gradient(180deg, rgba(18,28,48,0.94), rgba(10,16,29,0.9));
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.group-private-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(125,211,252,0.14);
    color: #f9cb74;
}

.group-private-icon .ui-icon {
    width: 28px;
    height: 28px;
}

.group-private-card h3 {
    margin-bottom: 10px;
    font-family: var(--font-head);
    font-size: 22px;
}

.group-private-card p {
    max-width: 52ch;
    margin: 0 auto 18px;
    color: var(--text2);
    line-height: 1.7;
}

.group-modal {
    max-width: 620px;
    width: min(94vw, 620px);
}

.group-modal--wide {
    max-width: 860px;
    width: min(96vw, 860px);
}

.group-modal-body {
    padding: 24px 28px;
}

.group-fields {
    gap: 16px;
}

.group-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.modal-inline-note,
.modal-error {
    padding: 12px 14px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.6;
}

.modal-inline-note {
    background: rgba(125,211,252,0.08);
    border: 1px solid rgba(125,211,252,0.12);
    color: var(--text2);
}

.modal-error {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.2);
    color: #fecaca;
}

.group-manage-body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 20px;
    align-items: start;
}

.group-manage-body .group-fields {
    grid-row: 1 / span 2;
}

.group-admin-section {
    border: 1px solid rgba(125,211,252,0.12);
    border-radius: 20px;
    padding: 18px;
    background: rgba(11,18,32,0.55);
}

.group-admin-section + .group-admin-section {
    margin-top: 16px;
}

.group-admin-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.group-admin-section-head h4 {
    font-family: var(--font-head);
    font-size: 15px;
    color: var(--text);
}

.group-admin-count {
    min-width: 30px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(125,211,252,0.08);
    border: 1px solid rgba(125,211,252,0.14);
    color: #c7e8ff;
    text-align: center;
    font-size: 12px;
}

.group-admin-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-admin-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
}

.group-admin-main {
    min-width: 0;
}

.group-admin-title {
    font-weight: 600;
    color: var(--text);
}

.group-admin-meta {
    margin-top: 4px;
    color: var(--text3);
    font-size: 12px;
    line-height: 1.5;
}

.group-admin-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.btn-admin-action {
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 12px;
}

.btn-admin-action--danger {
    border-color: rgba(239,68,68,0.22);
    color: #fecaca;
    background: rgba(239,68,68,0.08);
}

.group-admin-empty,
.group-comment-lock {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(125,211,252,0.06);
    border: 1px dashed rgba(125,211,252,0.14);
    color: var(--text3);
    font-size: 12px;
    line-height: 1.6;
}

.group-comment-lock {
    margin-top: 12px;
}

.group-card-meta-chip {
    display: inline-flex;
    align-items: center;
}

@media (max-width: 1080px) {
    .groups-header-actions {
        justify-content: stretch;
    }

    .groups-header-actions .search-bar {
        flex: 1 1 280px;
    }

    .group-manage-body {
        grid-template-columns: 1fr;
    }

    .group-manage-body .group-fields {
        grid-row: auto;
    }
}

@media (max-width: 720px) {
    .groups-header-actions {
        width: 100%;
        justify-content: stretch;
    }

    .btn-create-group {
        width: 100%;
        justify-content: center;
    }

    .group-form-grid {
        grid-template-columns: 1fr;
    }

    .group-modal-body {
        padding: 20px;
    }

    .group-admin-item {
        flex-direction: column;
        align-items: stretch;
    }

    .group-admin-actions {
        justify-content: stretch;
    }

    .btn-admin-action {
        width: 100%;
    }

    .group-page-stats {
        gap: 8px 10px;
    }
}

/* Advanced group management */
.group-page-hero {
    padding-top: 110px;
    align-items: flex-start;
}

.group-page-cover {
    position: absolute;
    inset: 0 0 auto;
    height: 128px;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(135deg, rgba(6,182,212,0.18), rgba(139,92,246,0.22));
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(125,211,252,0.12);
}

.group-page-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6,11,24,0.12), rgba(6,11,24,0.72)),
        radial-gradient(circle at 20% 25%, rgba(255,255,255,0.16), transparent 30%);
}

.group-page-icon,
.group-page-info,
.group-page-actions,
.group-page-access-note {
    position: relative;
    z-index: 1;
}

.group-page-icon {
    margin-top: -10px;
    backdrop-filter: blur(20px);
    background: rgba(10, 16, 29, 0.62);
}

.group-page-icon .avatar-img,
.group-card-icon .avatar-img,
.group-avatar-preview .avatar-img,
.chat-header-avatar .avatar-img {
    border-radius: inherit;
}

.group-page-sidebar {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.group-side-card {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(125,211,252,0.12);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.1), transparent 38%),
        linear-gradient(180deg, rgba(14,21,38,0.88), rgba(8,13,25,0.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.group-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.group-side-head h4 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head);
    font-size: 14px;
    color: var(--text);
}

.group-side-head .ui-icon {
    width: 14px;
    height: 14px;
    color: #a7e7ff;
}

.group-page-side-kicker {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(125,211,252,0.14);
    background: rgba(125,211,252,0.08);
    color: #cbe8ff;
    font-size: 11px;
}

.group-side-text {
    margin-bottom: 12px;
    color: var(--text2);
    font-size: 13px;
    line-height: 1.6;
}

.group-side-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.group-invite-field input,
.group-transfer-row select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(125,211,252,0.12);
    background: rgba(8,13,25,0.8);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
}

.group-invite-field {
    margin-bottom: 12px;
}

.group-member-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.group-member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.03);
}

.group-member-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.group-member-avatar .msg-avatar-sm {
    width: 40px;
    height: 40px;
    border-radius: 14px;
}

.group-member-main {
    min-width: 0;
    flex: 1;
}

.group-member-name {
    font-weight: 600;
    color: var(--text);
}

.group-member-meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text3);
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(125,211,252,0.12);
    background: rgba(125,211,252,0.08);
    font-size: 11px;
    color: #d9f0ff;
    white-space: nowrap;
}

.group-role-pill--owner {
    border-color: rgba(251,191,36,0.24);
    background: rgba(251,191,36,0.12);
    color: #f9d582;
}

.group-role-pill--admin {
    border-color: rgba(139,92,246,0.24);
    background: rgba(139,92,246,0.12);
    color: #dcc7ff;
}

.group-role-pill-icon {
    width: 12px;
    height: 12px;
}

.group-visual-grid {
    display: grid;
    gap: 16px;
}

.group-visual-grid--create {
    margin-top: 4px;
}

.group-visual-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text2);
}

.group-visual-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(125,211,252,0.12);
    background: rgba(255,255,255,0.03);
}

.group-avatar-preview {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 32px;
    background: rgba(8,13,25,0.7);
}

.group-cover-preview {
    min-height: 120px;
    margin-bottom: 12px;
    border-radius: 18px;
    border: 1px solid rgba(125,211,252,0.12);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.12), transparent 38%),
        linear-gradient(135deg, rgba(6,182,212,0.12), rgba(139,92,246,0.18));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d7eaff;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
}

.group-cover-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6,11,24,0.08), rgba(6,11,24,0.34)),
        linear-gradient(90deg, rgba(255,255,255,0.06), transparent 32%);
    pointer-events: none;
}

.group-cover-preview span,
.group-cover-preview img {
    position: relative;
    z-index: 1;
}

.group-cover-preview span {
    padding: 0 16px;
    text-align: center;
    line-height: 1.5;
}

.group-cover-preview--image {
    background-image: none !important;
}

.group-cover-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.group-color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.group-color-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(125,211,252,0.1);
    background: rgba(255,255,255,0.03);
    color: var(--text2);
    font-size: 12px;
}

.group-color-field span {
    font-size: 12px;
    color: #c7d8eb;
}

.group-color-field input[type="color"] {
    width: 100%;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(8,13,25,0.72);
    cursor: pointer;
}

.group-color-field input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 4px;
}

.group-color-field input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 8px;
}

.group-visual-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.group-upload-btn {
    position: relative;
    overflow: hidden;
}

.group-upload-btn input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.group-admin-section--embedded {
    padding: 16px;
}

.group-transfer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.group-admin-list--compact .group-admin-item {
    padding: 12px;
}

@media (max-width: 1080px) {
    .group-page-hero {
        padding-top: 96px;
    }

    .group-side-actions {
        justify-content: stretch;
    }
}

@media (max-width: 720px) {
    .group-page-hero {
        padding-top: 88px;
    }

    .group-page-cover {
        height: 108px;
    }

    .group-page-sidebar {
        grid-template-columns: 1fr;
    }

    .group-member-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .group-role-pill {
        width: 100%;
        justify-content: center;
    }

    .group-visual-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .group-color-grid {
        grid-template-columns: 1fr;
    }

    .group-transfer-row {
        grid-template-columns: 1fr;
    }
}

/* Group presentation refresh */
.groups-stats {
    padding-top: 18px;
    padding-bottom: 6px;
}

.stat-chip {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(125,211,252,0.12);
    background:
        radial-gradient(circle at left, rgba(125,211,252,0.12), transparent 42%),
        rgba(12,19,33,0.72);
    color: #9fb6d5;
}

.group-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 0 2px;
    color: #89a6c8;
}

.group-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(125,211,252,0.18), transparent);
}

.group-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
}

.group-card {
    padding: 0;
    min-height: 410px;
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.08), transparent 30%),
        linear-gradient(180deg, rgba(19,29,49,0.92), rgba(8,14,25,0.96));
    border-color: rgba(125,211,252,0.08);
    box-shadow: 0 20px 40px rgba(0,0,0,0.22);
}

.group-card::after {
    content: none;
}

.group-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), transparent 28%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--group-accent) 26%, transparent), transparent 38%);
    pointer-events: none;
    opacity: 0.9;
}

.group-card:hover {
    transform: translateY(-6px);
    border-color: rgba(125,211,252,0.18);
    box-shadow: 0 28px 48px rgba(0,0,0,0.28), 0 0 0 1px rgba(125,211,252,0.06);
}

.group-card-cover {
    position: relative;
    height: 118px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background:
        radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--group-accent) 34%, transparent), transparent 28%),
        linear-gradient(135deg, var(--group-cover-a, #123557), var(--group-cover-b, #5a4bd8));
}

.group-card-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
}

.group-card-cover-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6,11,24,0.08), rgba(6,11,24,0.7)),
        linear-gradient(90deg, rgba(255,255,255,0.05), transparent 32%);
}

.group-card-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 18px 20px;
    flex: 1;
}

.group-card-top {
    align-items: flex-start;
}

.group-card-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.group-card-heading {
    min-width: 0;
}

.group-card-overline {
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8eb8da;
}

.group-card-name {
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.group-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(9,15,27,0.62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 24px rgba(0,0,0,0.24);
}

.group-card-icon span {
    font-size: 28px;
}

.group-card-signal {
    max-width: 170px;
    padding: 8px 11px;
    background: rgba(9,15,27,0.62);
    border-color: rgba(125,211,252,0.14);
    color: #c4efff;
    line-height: 1.45;
    white-space: normal;
    text-align: right;
}

.group-card-desc-wrap {
    min-height: 58px;
}

.group-card-desc {
    font-size: 13px;
    color: #b7c7de;
    line-height: 1.7;
}

.group-card-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.group-card-stat {
    padding: 12px 12px 10px;
    border-radius: 16px;
    border: 1px solid rgba(125,211,252,0.08);
    background: rgba(255,255,255,0.03);
}

.group-card-stat span {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #88a5c7;
}

.group-card-stat strong {
    display: block;
    font-size: 14px;
    line-height: 1.35;
    color: #f4f8ff;
}

.group-card-meta {
    gap: 10px;
}

.group-card-meta-chip {
    padding: 7px 11px;
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.07);
    color: #d7e3f4;
}

.group-card-footer {
    gap: 14px;
    align-items: flex-end;
}

.group-card-members {
    max-width: 46%;
    font-size: 12px;
    line-height: 1.5;
    color: #91a8c5;
}

.group-card-btns {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.group-card-btns .btn-join {
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 11px;
    letter-spacing: 0.03em;
}

.group-card-btns .btn-join:not(.btn-join--ghost) {
    background: linear-gradient(135deg, rgba(125,211,252,0.14), rgba(139,92,246,0.2));
    border-color: rgba(125,211,252,0.2);
    color: #f7fbff;
}

.group-card-btns .btn-join:not(.btn-join--ghost):hover {
    background: linear-gradient(135deg, rgba(125,211,252,0.24), rgba(139,92,246,0.28));
}

.group-card-btns .btn-join.joined {
    background: linear-gradient(135deg, rgba(56,189,248,0.24), rgba(14,165,233,0.3));
    border-color: rgba(56,189,248,0.26);
}

.group-card-btns .btn-join--ghost {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.09);
}

.group-card-btns .btn-icon-inline {
    width: 13px;
    height: 13px;
}

.group-card--private .group-card-cover {
    background:
        radial-gradient(circle at 20% 20%, rgba(251,191,36,0.2), transparent 24%),
        linear-gradient(135deg, rgba(28,20,7,0.84), rgba(71,33,13,0.58), rgba(18,21,34,0.86));
}

.group-card--managed {
    box-shadow: 0 22px 42px rgba(0,0,0,0.24), 0 0 0 1px rgba(251,191,36,0.08);
}

.group-page-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "cover cover cover"
        "icon info actions"
        "note note actions";
    align-items: end;
    gap: 18px 22px;
    padding: 0 32px 28px;
    background:
        linear-gradient(180deg, rgba(19,29,49,0.92), rgba(8,14,25,0.98));
    border-color: rgba(125,211,252,0.1);
}

.group-page-cover {
    grid-area: cover;
    position: relative;
    height: 182px;
    margin: 0 -32px;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
}

.group-page-cover.group-page-cover--image {
    background-size: cover;
    background-position: center;
}

.group-page-icon {
    grid-area: icon;
    width: 94px;
    height: 94px;
    margin-top: -50px;
    border-radius: 24px;
    background: rgba(8,13,25,0.84);
}

.group-page-icon span {
    font-size: 40px;
}

.group-page-info {
    grid-area: info;
    padding-top: 6px;
}

.group-page-info h3 {
    font-size: 28px;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
}

.group-page-badges {
    gap: 10px;
    margin-bottom: 16px;
}

.group-page-badge {
    padding: 9px 14px;
    background: rgba(9,15,27,0.5);
    border-color: rgba(125,211,252,0.12);
    color: #d8e5f6;
    backdrop-filter: blur(14px);
}

.group-page-badge--ghost {
    background: rgba(56,189,248,0.12);
    color: #d7f4ff;
}

.group-page-desc {
    font-size: 15px;
    margin-bottom: 16px;
    color: #bdd0e8;
}

.group-page-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    width: 100%;
}

.group-page-stat-sep {
    display: none;
}

.group-page-stats > span:not(.group-page-stat-sep) {
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(125,211,252,0.08);
    background: rgba(255,255,255,0.03);
    color: #d8e6f6;
    min-height: 54px;
    display: flex;
    align-items: center;
}

.group-page-actions {
    grid-area: actions;
    align-self: center;
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 220px;
    gap: 10px;
}

.group-page-actions .btn-join {
    min-height: 46px;
    border-radius: 16px;
    padding: 11px 16px;
    justify-content: center;
    width: 100%;
}

.group-page-actions .btn-join:not(.btn-join--ghost) {
    background: linear-gradient(135deg, rgba(56,189,248,0.24), rgba(139,92,246,0.32));
    border-color: rgba(125,211,252,0.22);
    color: #f9fbff;
}

.group-page-actions .btn-join.btn-join--ghost {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

.group-page-more-wrap {
    position: relative;
    align-self: stretch;
}

.group-page-more-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: #ecf7ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.group-page-more-btn:hover,
.group-page-more-wrap.is-open .group-page-more-btn {
    transform: translateY(-1px);
    border-color: rgba(125,211,252,0.22);
    background: rgba(125,211,252,0.1);
    box-shadow: 0 14px 30px rgba(8,15,28,0.28);
}

.group-page-more-btn .ui-icon {
    width: 18px;
    height: 18px;
}

.group-page-more-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 14;
    min-width: 248px;
    padding: 8px;
    border-radius: 18px;
    border: 1px solid rgba(125,211,252,0.14);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.1), transparent 42%),
        linear-gradient(180deg, rgba(15,22,39,0.98), rgba(8,13,24,0.98));
    box-shadow: 0 24px 50px rgba(0,0,0,0.34);
}

.group-page-more-item {
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #e8f4ff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.group-page-more-item:hover {
    background: rgba(125,211,252,0.1);
    color: #fff;
    transform: translateX(1px);
}

.group-page-more-item .ui-icon {
    width: 16px;
    height: 16px;
    color: #9bdcff;
}

.group-page-access-note {
    grid-area: note;
    max-width: none;
    margin-top: 0;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(125,211,252,0.08);
    background: rgba(255,255,255,0.03);
    color: #c4d6ec;
}

.group-page-wall {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(232px, 264px);
    gap: 18px;
    align-items: start;
}

.group-page-main-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.group-page-main-column > .post-composer--compact {
    margin: 0;
}

.group-page-main-column > #groupPageFeed.wall-feed {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.group-page-main-column > #groupPageFeed .empty-state,
.group-page-main-column > #groupPageFeed .empty-state--compact {
    padding: 34px 18px;
}

.group-page-sidebar {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 24px;
    width: 100%;
    max-width: 264px;
    justify-self: end;
}

.group-private-card {
    padding: 34px 28px;
    text-align: left;
}

.group-private-card p {
    margin-left: 0;
    max-width: 46ch;
}

.group-private-card .btn-primary {
    width: auto;
    min-width: 220px;
}

.post-composer--compact {
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.08), transparent 38%),
        linear-gradient(180deg, rgba(18,28,48,0.9), rgba(10,16,29,0.94));
    border-radius: 24px;
}

.group-side-card {
    padding: 20px;
    border-radius: 22px;
}

.group-side-head h4 {
    font-size: 15px;
}

.group-member-list {
    gap: 8px;
}

.group-member-item {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 18px;
}

.group-member-item--clickable {
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.group-member-item--clickable:hover {
    transform: translateY(-1px);
    border-color: rgba(125,211,252,0.16);
    background: rgba(255,255,255,0.05);
}

.group-member-main {
    min-width: 0;
}

.group-member-more-btn {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

.group-member-avatar .msg-avatar-sm {
    width: 44px;
    height: 44px;
    border-radius: 16px;
}

@media (max-width: 1080px) {
    .group-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .group-page-hero {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "cover cover"
            "icon info"
            "actions actions"
            "note note";
        padding: 0 24px 24px;
    }

    .group-page-cover {
        margin: 0 -24px;
    }

    .group-page-actions {
        justify-self: stretch;
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .group-page-actions .btn-join {
        width: auto;
        flex: 1 1 180px;
    }

    .group-page-more-wrap {
        flex: 0 0 auto;
        align-self: auto;
    }

    .group-page-more-btn {
        width: 46px;
        min-width: 46px;
        padding: 0;
    }

    .group-page-more-menu {
        right: auto;
        left: 0;
    }

    .group-page-wall {
        grid-template-columns: 1fr;
    }

    .group-page-sidebar {
        position: static;
        max-width: none;
    }
}

@media (max-width: 720px) {
    .group-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .group-card {
        min-height: 0;
    }

    .group-card-body {
        padding: 16px;
    }

    .group-card-top {
        flex-direction: column;
        align-items: stretch;
    }

    .group-card-brand {
        align-items: flex-start;
    }

    .group-card-signal {
        max-width: none;
        text-align: left;
    }

    .group-card-rail {
        grid-template-columns: 1fr;
    }

    .group-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .group-card-members {
        max-width: none;
    }

    .group-card-btns {
        margin-left: 0;
        justify-content: stretch;
    }

    .group-card-btns .btn-join {
        width: 100%;
    }

    .group-page-hero {
        padding: 0 20px 20px;
    }

    .group-page-cover {
        height: 150px;
        margin: 0 -20px;
    }

    .group-page-icon {
        width: 82px;
        height: 82px;
        margin-top: -42px;
    }

    .group-page-info h3 {
        font-size: 22px;
    }

    .group-page-stats {
        grid-template-columns: 1fr;
    }

    .group-page-actions {
        gap: 8px;
    }

    .group-page-actions .btn-join,
    .group-page-more-wrap {
        flex: 1 1 100%;
    }

    .group-page-more-btn {
        width: 100%;
    }

    .group-page-more-menu {
        left: 0;
        right: 0;
        min-width: 0;
    }
}

/* Group search, participants and attachments */
.group-page-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    border-radius: 22px;
    border: 1px solid rgba(125,211,252,0.12);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.08), transparent 42%),
        linear-gradient(180deg, rgba(10,16,29,0.88), rgba(8,13,24,0.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.group-page-tools-search {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.group-page-record-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
    padding-left: 42px;
    border-radius: 16px;
    border: 1px solid rgba(125,211,252,0.12);
    background: rgba(7,12,24,0.72);
}

.group-page-record-search .search-icon {
    position: absolute;
    left: 14px;
    color: var(--text3);
    display: inline-flex;
    align-items: center;
}

.group-page-record-search input {
    width: 100%;
    min-width: 0;
    padding: 13px 16px 13px 0;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 14px;
    outline: none;
}

.group-page-tools-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.group-page-tools-actions .btn-secondary,
.group-page-tools-search .btn-secondary {
    margin-top: 0;
}

.group-page-search-status {
    padding: 0 2px;
    font-size: 13px;
    color: #bbd6ec;
    line-height: 1.5;
}

.group-page-tag-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 2px;
}

.group-tag-filter,
.attachments-filter-btn,
.chat-header-btn,
.chat-header-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: #dbeafe;
    border-radius: 14px;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.group-tag-filter,
.attachments-filter-btn {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
}

.group-tag-filter:hover,
.attachments-filter-btn:hover,
.chat-header-btn:hover,
.chat-header-link:hover {
    transform: translateY(-1px);
    border-color: rgba(125,211,252,0.24);
    background: rgba(125,211,252,0.1);
    color: #fff;
}

.group-tag-filter.active,
.attachments-filter-btn.active {
    border-color: rgba(125,211,252,0.28);
    background: linear-gradient(135deg, rgba(56,189,248,0.2), rgba(139,92,246,0.24));
    color: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,0.26);
}

.chat-header-btn {
    width: 40px;
    height: 40px;
    padding: 0;
}

.chat-header-link {
    min-height: 40px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
}

.chat-header-link .ui-icon {
    width: 15px;
    height: 15px;
}

.chat-header-btn:disabled,
.chat-header-link:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.attachments-modal,
.participants-modal {
    width: min(980px, calc(100vw - 32px));
    max-width: min(980px, calc(100vw - 32px));
}

.attachments-modal-body,
.participants-modal-body {
    padding: 22px 24px 24px;
}

.attachments-modal-meta,
.participants-modal-meta {
    font-size: 13px;
    color: #bbd6ec;
    margin-bottom: 14px;
}

.attachments-modal-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.attachments-scope-tabs,
.attachments-kind-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.attachments-modal-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    max-height: min(62vh, 720px);
    overflow-y: auto;
    padding-right: 4px;
}

.attachment-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(125,211,252,0.12);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.08), transparent 42%),
        linear-gradient(180deg, rgba(12,18,32,0.92), rgba(8,13,24,0.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.attachment-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.attachment-card-badge,
.attachment-card-kind {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.attachment-card-badge {
    background: rgba(255,255,255,0.05);
    color: #cbd5e1;
}

.attachment-card-kind {
    background: rgba(125,211,252,0.12);
    color: #dff7ff;
}

.attachment-card-image-wrap {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.attachment-card-image,
.attachment-card-video video {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    border: 1px solid rgba(255,255,255,0.06);
}

.attachment-card-audio,
.attachment-card-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}

.attachment-card-audio audio {
    flex: 1;
    min-width: 0;
}

.attachment-card-file {
    text-decoration: none;
    color: #e5f3ff;
}

.attachment-card-type-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.attachment-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attachment-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.attachment-card-meta,
.attachment-card-preview {
    font-size: 12px;
    color: #9fb2c7;
}

.attachment-card-preview {
    line-height: 1.45;
    color: #d9e7f5;
}

.attachment-card-action {
    align-self: flex-start;
}

.participants-search {
    margin-bottom: 16px;
}

.participants-modal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(62vh, 720px);
    overflow-y: auto;
    padding-right: 4px;
}

.participants-modal-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(125,211,252,0.1);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.05), transparent 40%),
        rgba(9,14,26,0.86);
}

.participants-modal-item--clickable {
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.participants-modal-item--clickable:hover {
    transform: translateY(-1px);
    border-color: rgba(125,211,252,0.18);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.08), transparent 42%),
        rgba(15,23,41,0.96);
}

.participants-modal-avatar {
    flex: 0 0 auto;
}

.participants-modal-main {
    flex: 1;
    min-width: 0;
}

.participants-modal-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.participants-modal-secondary {
    font-size: 12px;
    color: #9fb2c7;
    word-break: break-word;
}

.message-bubble--highlighted {
    box-shadow: 0 0 0 1px rgba(125,211,252,0.4), 0 0 32px rgba(56,189,248,0.16);
}

.empty-state--compact {
    padding: 40px 18px;
    border-radius: 20px;
    border: 1px dashed rgba(125,211,252,0.14);
    background: rgba(255,255,255,0.02);
}

/* Group page polish */
.group-page-hero {
    gap: 20px 24px;
    padding-bottom: 30px;
    background:
        linear-gradient(180deg, rgba(18,28,48,0.96), rgba(8,14,25,0.99));
    box-shadow:
        0 26px 60px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.03);
    isolation: isolate;
}

.group-page-hero::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 23px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.04), transparent 24%),
        radial-gradient(circle at 84% 16%, rgba(125,211,252,0.08), transparent 24%);
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}

.group-page-cover {
    height: 194px;
}

.group-page-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 22%, rgba(255,255,255,0.14), transparent 18%),
        radial-gradient(circle at 78% 24%, rgba(125,211,252,0.18), transparent 24%),
        radial-gradient(circle at 68% 74%, rgba(139,92,246,0.18), transparent 28%);
    opacity: 0.9;
    pointer-events: none;
}

.group-page-cover::after {
    content: '';
    position: absolute;
    right: 28px;
    bottom: 20px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 0 0 18px rgba(255,255,255,0.03),
        0 0 0 42px rgba(255,255,255,0.015);
    opacity: 0.48;
    pointer-events: none;
}

.group-page-icon {
    width: 98px;
    height: 98px;
    margin-top: -54px;
    border-radius: 26px;
    border-color: rgba(125,211,252,0.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 18px 36px rgba(0,0,0,0.26);
    position: relative;
}

.group-page-icon::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    pointer-events: none;
}

.group-page-info {
    padding-top: 10px;
}

.group-page-info h3 {
    font-size: 30px;
    line-height: 1.05;
    margin-bottom: 12px;
    max-width: 18ch;
}

.group-page-badges {
    gap: 8px;
    margin-bottom: 18px;
}

.group-page-badge {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.group-page-desc {
    font-size: 15px;
    line-height: 1.72;
    margin-bottom: 18px;
    max-width: 62ch;
}

.group-page-stats {
    gap: 12px;
}

.group-page-stats > span:not(.group-page-stat-sep) {
    min-height: 60px;
    padding: 14px 16px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.08), transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
    position: relative;
    overflow: hidden;
}

.group-page-stats > span:not(.group-page-stat-sep)::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(125,211,252,0.8), rgba(139,92,246,0.18));
    opacity: 0.8;
}

.group-page-actions .btn-join,
.group-page-more-btn {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.group-page-access-note {
    padding: 15px 18px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(125,211,252,0.08), transparent 34%),
        rgba(255,255,255,0.035);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.group-page-main-column {
    gap: 16px;
    min-width: 0;
    max-width: 100%;
}

.group-page-main-column > * {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.group-page-tools {
    border-radius: 24px;
    padding: 18px 20px;
    box-shadow: 0 18px 36px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.group-page-search-status {
    padding-left: 4px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.group-page-tag-filters {
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.group-page-main-column > .post-composer--compact {
    padding: 20px;
    border: 1px solid rgba(125,211,252,0.12);
    box-shadow: 0 20px 40px rgba(0,0,0,0.22);
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.group-page-main-column > .post-composer--compact::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,0.04), transparent 18%),
        radial-gradient(circle at top right, rgba(125,211,252,0.08), transparent 34%);
    pointer-events: none;
}

.group-page-main-column > .post-composer--compact > * {
    position: relative;
    z-index: 1;
}

.group-page-main-column > #groupPageFeed.wall-feed {
    gap: 14px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.group-page-main-column > #groupPageFeed.wall-feed .post-card {
    padding: 20px 22px;
    border-radius: 24px;
    border-color: rgba(125,211,252,0.12);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.08), transparent 34%),
        linear-gradient(180deg, rgba(14,21,38,0.94), rgba(8,13,24,0.97));
    box-shadow:
        0 20px 38px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.04);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.group-page-main-column > #groupPageFeed.wall-feed .post-card:hover {
    border-color: rgba(125,211,252,0.22);
    box-shadow:
        0 26px 44px rgba(0,0,0,0.24),
        0 0 0 1px rgba(125,211,252,0.06);
}

.group-page-main-column > #groupPageFeed.wall-feed .post-card::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 78px;
    background: radial-gradient(circle at bottom right, rgba(139,92,246,0.12), transparent 52%);
    pointer-events: none;
    opacity: 0.78;
}

.group-page-main-column > #groupPageFeed.wall-feed .post-header {
    margin-bottom: 16px;
}

.group-page-main-column > #groupPageFeed.wall-feed .post-text {
    margin-bottom: 14px;
}

.group-page-main-column > #groupPageFeed.wall-feed .post-actions {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.group-page-main-column > #groupPageFeed.wall-feed .comment-section {
    margin-top: 14px;
}

.group-page-sidebar {
    gap: 12px;
    max-width: 256px;
    min-width: 0;
}

.group-side-card {
    padding: 16px 16px 14px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.08), transparent 40%),
        linear-gradient(180deg, rgba(14,21,38,0.92), rgba(8,13,24,0.95));
    box-shadow:
        0 16px 32px rgba(0,0,0,0.16),
        inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
    position: relative;
}

.group-side-card::before {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(125,211,252,0), rgba(125,211,252,0.4), rgba(125,211,252,0));
    opacity: 0.9;
}

.group-side-head {
    margin-bottom: 8px;
}

.group-side-head h4 {
    font-size: 14px;
}

.group-side-text {
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 10px;
}

.group-member-list {
    gap: 8px;
}

.group-member-item {
    padding: 10px;
    gap: 10px;
    border-radius: 16px;
    align-items: flex-start;
    background: rgba(255,255,255,0.035);
}

.group-member-avatar .msg-avatar-sm {
    width: 38px;
    height: 38px;
    border-radius: 14px;
}

.group-member-name {
    font-size: 13px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.group-member-meta {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.group-role-pill {
    padding: 5px 8px;
    gap: 4px;
    font-size: 10px;
    align-self: flex-start;
}

.group-member-more-btn {
    margin-top: 2px;
    min-height: 38px;
    border-radius: 14px;
}

.group-feed-state {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    padding: 22px 22px 20px;
    border-radius: 24px;
    border: 1px dashed rgba(125,211,252,0.16);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.08), transparent 42%),
        linear-gradient(180deg, rgba(13,20,36,0.92), rgba(8,13,24,0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.group-feed-state__icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    border: 1px solid rgba(125,211,252,0.14);
    background: rgba(125,211,252,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.group-feed-state__icon .ui-icon {
    width: 20px;
    height: 20px;
    color: #b9ebff;
}

.group-feed-state__body {
    min-width: 0;
    flex: 1 1 220px;
    max-width: 100%;
}

.group-feed-state__title {
    font-family: var(--font-head);
    font-size: 15px;
    color: #eef7ff;
    margin-bottom: 8px;
}

.group-feed-state__text {
    color: #b5c9df;
    font-size: 13px;
    line-height: 1.65;
    max-width: 54ch;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.group-page-wall {
    overflow-x: clip;
}

.group-page-tools-search,
.group-page-tools-actions,
.group-page-record-search,
.composer-footer {
    min-width: 0;
    max-width: 100%;
}

.group-page-tools-actions {
    flex: 0 1 auto;
}

.group-page-record-search input,
.composer-body textarea {
    min-width: 0;
}

@media (max-width: 1080px) {
    .group-page-hero {
        gap: 18px 20px;
    }

    .group-page-cover {
        height: 176px;
    }

    .group-page-info h3 {
        font-size: 26px;
        max-width: none;
    }

    .group-page-stats {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .group-page-sidebar {
        max-width: none;
    }
}

@media (max-width: 1080px) {
    .group-page-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .group-page-tools-actions {
        justify-content: stretch;
    }

    .group-page-tools-actions .btn-secondary {
        flex: 1 1 180px;
    }
}

@media (max-width: 720px) {
    .group-page-hero {
        padding-bottom: 24px;
    }

    .group-page-cover {
        height: 152px;
    }

    .group-page-cover::after {
        width: 92px;
        height: 92px;
        right: 18px;
        bottom: 14px;
        box-shadow:
            0 0 0 12px rgba(255,255,255,0.03),
            0 0 0 26px rgba(255,255,255,0.015);
    }

    .group-page-icon {
        width: 88px;
        height: 88px;
        margin-top: -44px;
    }

    .group-page-main-column > .post-composer--compact,
    .group-page-main-column > #groupPageFeed.wall-feed .post-card,
    .group-feed-state {
        padding-left: 16px;
        padding-right: 16px;
    }

    .group-member-item {
        gap: 8px;
    }

    .group-role-pill {
        width: auto;
    }

    .group-page-tools {
        padding: 16px;
    }

    .group-page-tools-search {
        flex-direction: column;
        align-items: stretch;
    }

    .group-page-tools-actions {
        width: 100%;
    }

    .group-page-tools-actions .btn-secondary,
    .group-page-tools-search .btn-secondary {
        width: 100%;
    }

    .attachments-modal,
    .participants-modal {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
    }

    .attachments-modal-body,
    .participants-modal-body {
        padding: 18px;
    }

    .attachments-modal-list {
        grid-template-columns: 1fr;
    }

    .chat-header-btn {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 720px) {
    .wall-tools {
        padding-left: 20px;
        padding-right: 20px;
    }

    .wall-search-status {
        padding-left: 20px;
        padding-right: 20px;
    }

    .app-toast-stack {
        left: 12px;
        right: 12px;
        top: 12px;
    }

    .app-toast {
        width: 100%;
        max-width: none;
    }
}

.chats-list--mail {
    width: 320px;
}

.chats-list--messengers {
    width: 344px;
}

.mail-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.mail-toolbar .btn-secondary {
    margin-top: 0;
}

.messenger-provider-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.messenger-provider-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(125,211,252,0.12);
    background: rgba(8,15,28,0.56);
    color: #9eb4cf;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: default;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.messenger-provider-chip:disabled {
    opacity: 0.72;
}

.messenger-provider-chip--active {
    border-color: rgba(91,127,255,0.28);
    background:
        radial-gradient(circle at top left, rgba(91,127,255,0.16), transparent 52%),
        linear-gradient(180deg, rgba(27,36,69,0.94), rgba(14,21,38,0.9));
    color: #eff6ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 28px rgba(7,12,26,0.24);
}

.mail-accounts-list {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid rgba(125,211,252,0.08);
    background:
        radial-gradient(circle at top left, rgba(56,189,248,0.06), transparent 46%),
        linear-gradient(180deg, rgba(11,18,33,0.84), rgba(8,14,25,0.78));
}

.mail-account-chip {
    position: relative;
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid rgba(125,211,252,0.1);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.08), transparent 42%),
        linear-gradient(180deg, rgba(19,29,49,0.9), rgba(10,17,31,0.86));
    color: #e7f3ff;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.mail-account-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(125,211,252,0.24);
    box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}

.mail-account-chip.active {
    border-color: rgba(139,92,246,0.28);
    background:
        radial-gradient(circle at top right, rgba(236,72,153,0.13), transparent 40%),
        radial-gradient(circle at bottom left, rgba(56,189,248,0.1), transparent 38%),
        linear-gradient(180deg, rgba(29,38,65,0.96), rgba(13,20,36,0.92));
    box-shadow: 0 16px 36px rgba(15,23,42,0.28);
}

.mail-account-chip-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mail-account-chip-sub {
    font-size: 12px;
    color: #9cb3d2;
    overflow-wrap: anywhere;
}

.mail-account-chip-meta {
    font-size: 11px;
    color: #6ee7ff;
}

.messenger-account-chip {
    gap: 6px;
}

.messenger-account-subrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.messenger-account-subrow .mail-account-chip-sub {
    flex: 1 1 auto;
    min-width: 0;
}

.messenger-account-provider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(91,127,255,0.2);
    background: rgba(91,127,255,0.12);
    color: #dce7ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    flex: 0 0 auto;
}

.mail-accounts-empty {
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px dashed rgba(125,211,252,0.16);
    background: rgba(10,17,31,0.72);
    color: #9cb3d2;
    font-size: 12px;
    line-height: 1.55;
}

#mailThreadsList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.messenger-threads-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.chat-input-bar--mail {
    gap: 10px;
    padding-top: 14px;
    background:
        linear-gradient(180deg, rgba(13,20,35,0.92), rgba(9,15,28,0.88));
}

.chat-input-bar--mail input {
    min-width: 0;
}

.mail-message-bubble {
    max-width: min(84%, 820px);
}

.mail-msg-body {
    gap: 12px;
    min-width: 0;
}

.mail-msg-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    line-height: 1.55;
    color: #bcd2ea;
}

.mail-msg-line strong {
    color: #f2f8ff;
    font-weight: 600;
}

.mail-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mail-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px solid rgba(125,211,252,0.12);
    background: rgba(8,15,28,0.36);
    color: #dcecff;
    font-size: 12px;
    line-height: 1.4;
}

.mail-attachment-chip span:first-of-type {
    overflow-wrap: anywhere;
}

.mail-attachment-icon {
    width: 14px;
    height: 14px;
    color: #7dd3fc;
    flex-shrink: 0;
}

.mail-attachment-size {
    color: #8ea9c9;
    white-space: nowrap;
}

.mail-connect-modal {
    width: min(820px, calc(100vw - 32px));
    max-width: min(820px, calc(100vw - 32px));
}

.mail-connect-body {
    padding: 20px 24px 24px;
}

.mail-connect-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.mail-connect-grid .profile-field {
    margin-bottom: 0;
}

.mail-connect-grid .profile-field input,
.mail-connect-grid .profile-field select {
    width: 100%;
}

.vk-oauth-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(125,211,252,0.14);
    background:
        radial-gradient(circle at top left, rgba(91,127,255,0.16), transparent 44%),
        linear-gradient(180deg, rgba(14,22,40,0.92), rgba(8,14,27,0.88));
}

.vk-oauth-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.vk-oauth-title {
    color: #eef7ff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.vk-oauth-text {
    color: #a9bfd9;
    font-size: 13px;
    line-height: 1.6;
}

.vk-oauth-card .btn-primary {
    flex: 0 0 auto;
    margin-top: 0;
}

.vk-oauth-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0 18px;
    color: #89a4c6;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.vk-oauth-divider::before,
.vk-oauth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(125,211,252,0.16), transparent);
}

.vk-oauth-divider span {
    flex: 0 0 auto;
    padding: 0 12px;
}

.mail-connect-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

@media (max-width: 1080px) {
    .chats-list--mail,
    .chats-list--messengers {
        width: auto;
    }
}

@media (max-width: 720px) {
    .mail-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .mail-toolbar .btn-secondary {
        width: 100%;
    }

    .mail-connect-modal {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
    }

    .mail-connect-body {
        padding: 18px;
    }

    .mail-connect-grid {
        grid-template-columns: 1fr;
    }

    .vk-oauth-card {
        flex-direction: column;
        align-items: stretch;
    }

    .vk-oauth-card .btn-primary {
        width: 100%;
    }

    .mail-connect-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .chat-input-bar--mail {
        flex-wrap: wrap;
    }

    .chat-input-bar--mail input {
        order: 1;
        flex: 1 1 100%;
    }

    .mail-message-bubble {
        max-width: 100%;
    }
}

/* Final mail + group stability pass */
.mail-account-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: min(100%, 320px);
    padding: 8px 12px;
    border-radius: 16px;
    border: 1px solid rgba(125,211,252,0.14);
    background: rgba(8,15,28,0.52);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.messenger-account-switch {
    max-width: min(100%, 340px);
    border-color: rgba(91,127,255,0.16);
    background:
        radial-gradient(circle at top left, rgba(91,127,255,0.14), transparent 48%),
        rgba(8,15,28,0.56);
}

.mail-account-switch-label {
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #89a4c6;
}

.mail-account-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 220px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(125,211,252,0.12);
    background: rgba(16,25,44,0.96);
    color: #eef7ff;
    font-size: 12px;
    outline: none;
}

.mail-account-select:focus {
    border-color: rgba(125,211,252,0.34);
    box-shadow: 0 0 0 3px rgba(125,211,252,0.12);
}

#mailMessages {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

.mail-scroll-btn {
    position: absolute;
    right: 24px;
    bottom: 136px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1px solid rgba(125,211,252,0.16);
    border-radius: 999px;
    background:
        radial-gradient(circle at top left, rgba(125,211,252,0.16), transparent 40%),
        rgba(9,15,28,0.92);
    color: #eef7ff;
    box-shadow: 0 12px 26px rgba(0,0,0,0.28);
}

.mail-scroll-btn .ui-icon {
    width: 15px;
    height: 15px;
}

.chat-input-bar--mail {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.chat-input-bar--mail > * {
    flex-shrink: 0;
}

.chat-input-bar--mail input {
    flex: 1 1 260px;
    min-width: 0;
}

.chat-input-bar--mail .btn-attach-chat,
.chat-input-bar--mail .btn-emoji-mail,
.chat-input-bar--mail .send-btn {
    flex: 0 0 auto;
}

.mail-attachment-list,
.mail-message-file-list {
    min-width: 0;
    max-width: 100%;
}

.mail-attachment-chip,
.mail-message-file-list .bubble-file-chip {
    max-width: 100%;
    overflow: hidden;
}

.mail-attachment-chip span,
.mail-message-file-list .bubble-file-chip span,
.mail-message-media-label {
    overflow-wrap: anywhere;
}

.mail-message-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mail-file-chip--disabled {
    opacity: 0.74;
    cursor: default;
    pointer-events: none;
}

.mail-message-media {
    display: grid;
    gap: 8px;
    margin-top: 4px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(125,211,252,0.12);
    background: rgba(7,13,25,0.48);
}

.mail-message-media audio,
.mail-message-media video {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
    background: #08101c;
}

.mail-message-media-label {
    color: #b6cde5;
    font-size: 12px;
    line-height: 1.5;
}

.mail-message-bubble .bubble-image img,
.mail-message-bubble .bubble-image-grid img {
    max-height: 340px;
    object-fit: cover;
}

.group-page-hero {
    display: grid;
    grid-template-columns: minmax(92px, auto) minmax(0, 1fr) minmax(220px, 320px);
    grid-template-areas:
        "cover cover cover"
        "icon info actions"
        ". note note";
    gap: 18px 22px;
    overflow: hidden;
}

.group-page-cover,
.group-page-icon,
.group-page-info,
.group-page-actions,
.group-page-access-note {
    position: relative;
    z-index: 1;
    min-width: 0;
    max-width: 100%;
}

.group-page-cover {
    grid-area: cover;
    width: 100%;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.group-page-icon {
    grid-area: icon;
    align-self: start;
    justify-self: start;
    overflow: hidden;
}

.group-page-icon .avatar-img {
    object-fit: cover;
}

.group-page-info {
    grid-area: info;
    padding-top: 10px;
}

.group-page-info h3,
.group-page-desc,
.group-page-badge,
.group-page-stats > span:not(.group-page-stat-sep),
.group-page-access-note,
.group-page-action-stack .btn-join span {
    overflow-wrap: anywhere;
}

.group-page-info h3 {
    max-width: none;
}

.group-page-badges,
.group-page-stats {
    min-width: 0;
    max-width: 100%;
}

.group-page-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.group-page-stat-sep {
    display: none;
}

.group-page-actions {
    grid-area: actions;
    align-self: start;
    justify-self: end;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.group-page-action-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.group-page-action-stack .btn-join {
    flex: 1 1 150px;
    min-width: 0;
    max-width: 100%;
    justify-content: center;
    text-align: center;
}

.group-page-more-wrap {
    flex: 0 0 auto;
    align-self: flex-start;
}

.group-page-more-menu {
    left: auto;
    right: 0;
    max-width: min(300px, calc(100vw - 36px));
}

.group-page-access-note {
    grid-area: note;
    margin-top: 2px;
}

@media (max-width: 1180px) {
    .group-page-hero {
        grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
        grid-template-areas:
            "cover cover"
            "icon info"
            "actions actions"
            "note note";
    }

    .group-page-actions {
        justify-self: stretch;
    }

    .group-page-action-stack {
        justify-content: stretch;
    }
}

@media (max-width: 720px) {
    .mail-account-switch {
        order: -1;
        width: 100%;
        max-width: none;
    }

    .messenger-provider-tabs {
        gap: 6px;
    }

    .messenger-provider-chip {
        width: 100%;
    }

    .mail-account-select {
        width: 100%;
        max-width: none;
    }

    .mail-scroll-btn {
        right: 16px;
        bottom: 154px;
        padding: 10px 12px;
    }

    .group-page-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "cover"
            "icon"
            "info"
            "actions"
            "note";
        gap: 16px;
        padding-bottom: 22px;
    }

    .group-page-icon {
        margin-top: -52px;
    }

    .group-page-actions,
    .group-page-action-stack {
        width: 100%;
    }

    .group-page-actions {
        justify-self: stretch;
    }

    .group-page-action-stack .btn-join,
    .group-page-more-wrap {
        flex: 1 1 100%;
    }

    .group-page-more-btn {
        width: 100%;
    }

    .group-page-more-menu {
        left: 0;
        right: 0;
    }
}

/* Final interface polish */
.content-area {
    scrollbar-gutter: stable both-edges;
    scroll-padding-top: 108px;
    scroll-padding-bottom: 96px;
}

.tab,
.tab > *,
.tab-header-copy,
.tab-pills,
.wall-tools,
.groups-header-actions,
.group-grid,
.chats-layout,
.chats-list,
.chat-panel,
.chat-active,
.chat-header,
.chat-header-info,
.chat-header-actions,
.group-page-main-column,
.group-page-sidebar,
.group-page-tools,
.group-page-tools-search,
.group-page-tools-actions,
.group-page-actions,
.group-page-action-stack,
.mail-toolbar,
.modal-footer {
    min-width: 0;
}

.tab-header-copy h2,
.tab-subtitle,
.chat-header-name,
.chat-header-status,
.chat-header-meta,
.chat-list-name,
.chat-list-last,
.mail-account-chip-title,
.mail-account-chip-sub,
.mail-account-chip-meta,
.messages-empty-title,
.messages-empty-text,
.group-page-info h3,
.group-page-desc,
.group-page-badge,
.group-page-access-note,
.group-side-text,
.post-text,
.comment-item,
.profile-group-chip,
.sidebar-user-info span,
.chats-list-subtitle,
.wall-search-status,
.group-page-search-status {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.groups-header-actions,
.wall-tools,
.chat-header-actions,
.mail-toolbar,
.group-page-tools-actions,
.modal-footer {
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary,
.btn-join,
.chat-header-link,
.chat-header-btn,
.group-page-more-btn,
.group-page-more-item,
.group-tag-filter,
.attachments-filter-btn,
.mail-account-chip,
.nav-item,
.tab-pill {
    max-width: 100%;
}

.btn-primary span,
.btn-secondary span,
.btn-join span,
.chat-header-link span,
.group-page-more-item span,
.nav-label {
    overflow-wrap: anywhere;
}

.messages-area,
#mailMessages,
#dmMessages,
#messages {
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

.chat-input-bar {
    flex-wrap: wrap;
    row-gap: 10px;
}

.chat-input-bar input {
    flex: 1 1 220px;
    min-width: 140px;
}

.chat-input-bar .send-btn,
.chat-input-bar .btn-emoji-chat,
.chat-input-bar .btn-attach-chat {
    flex: 0 0 auto;
}

.chat-empty p,
.tab-subtitle,
.wall-search-status,
.group-page-search-status,
.chats-list-subtitle {
    max-width: 72ch;
    line-height: 1.6;
}

.group-page-hero {
    align-items: start;
}

.group-page-cover,
.group-page-info,
.group-page-actions,
.group-page-access-note {
    min-width: 0;
}

.group-page-action-stack {
    align-items: stretch;
}

.group-page-action-stack .btn-join,
.group-page-more-btn {
    min-height: 46px;
}

.group-page-sidebar .group-side-card,
.group-page-main-column > .post-composer--compact,
.group-page-main-column > #groupPageFeed.wall-feed .post-card,
.mail-account-chip,
.chat-list-item,
.messages-empty-card {
    backdrop-filter: blur(16px) saturate(1.1);
}

.group-page-sidebar .group-side-card,
.mail-account-chip,
.chat-list-item,
.group-member-item,
.participants-modal-item,
.attachment-card,
.group-card,
.post-card {
    overflow: hidden;
}

.utility-dock {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: 22px;
    border: 1px solid rgba(125,211,252,0.16);
    background:
        radial-gradient(circle at top left, rgba(125,211,252,0.12), transparent 46%),
        linear-gradient(180deg, rgba(14,22,39,0.92), rgba(7,12,23,0.9));
    box-shadow: 0 22px 44px rgba(0,0,0,0.28);
    backdrop-filter: blur(22px) saturate(1.2);
}

.utility-dock-btn {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    color: #e5f3ff;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.utility-dock-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(125,211,252,0.28);
    background: rgba(125,211,252,0.12);
    box-shadow: 0 14px 28px rgba(0,0,0,0.22);
}

.utility-dock-btn.is-active {
    border-color: rgba(139,92,246,0.32);
    background:
        radial-gradient(circle at top left, rgba(236,72,153,0.16), transparent 42%),
        rgba(46,32,77,0.9);
    color: #fff;
}

.utility-dock-btn.is-disabled,
.utility-dock-btn:disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
}

.utility-dock-btn .ui-icon {
    width: 18px;
    height: 18px;
}

.utility-dock-icon--up {
    transform: rotate(90deg);
}

.shortcuts-modal {
    width: min(760px, calc(100vw - 24px));
    max-width: min(760px, calc(100vw - 24px));
}

.shortcuts-modal-body {
    display: grid;
    gap: 18px;
    padding: 22px 24px 24px;
}

.shortcuts-lead,
.shortcuts-note {
    color: #b7cbe2;
    line-height: 1.68;
}

.shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.shortcut-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(125,211,252,0.1);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.08), transparent 42%),
        linear-gradient(180deg, rgba(18,28,48,0.92), rgba(10,16,29,0.88));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.shortcut-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 0 0 auto;
}

.shortcut-card kbd {
    min-width: 34px;
    padding: 6px 9px;
    border-radius: 10px;
    border: 1px solid rgba(125,211,252,0.14);
    background: rgba(8,15,28,0.72);
    color: #f8fbff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.04);
}

.shortcut-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.shortcut-copy strong {
    color: #fff;
    font-size: 14px;
}

.shortcut-copy span {
    color: #9cb3d2;
    font-size: 13px;
    line-height: 1.55;
}

body.compact-ui .sidebar-left {
    padding: 22px 14px;
}

body.compact-ui .nav-item,
body.compact-ui .sidebar-user,
body.compact-ui .sidebar-logout {
    border-radius: 14px;
}

body.compact-ui .tab-header {
    padding: 22px 24px 16px;
}

body.compact-ui .mission-grid {
    padding: 14px 24px 0;
    gap: 12px;
}

body.compact-ui .mission-card {
    min-height: 118px;
    padding: 18px 18px;
    border-radius: 20px;
}

body.compact-ui .group-page-wall {
    padding: 18px 24px 24px;
    gap: 14px;
}

body.compact-ui .group-page-tools,
body.compact-ui .wall-tools,
body.compact-ui .chat-header {
    padding: 16px 18px;
}

body.compact-ui .group-grid,
body.compact-ui #mailThreadsList,
body.compact-ui #chatsListItems,
body.compact-ui #dmListItems {
    gap: 10px;
}

body.compact-ui .group-page-main-column > .post-composer--compact,
body.compact-ui .group-page-main-column > #groupPageFeed.wall-feed .post-card,
body.compact-ui .chat-list-item,
body.compact-ui .mail-account-chip {
    border-radius: 20px;
}

body.low-motion-ui *,
body.low-motion-ui *::before,
body.low-motion-ui *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

body.low-motion-ui .starfield-canvas {
    opacity: 0.16;
}

@media (max-width: 960px) {
    .utility-dock {
        right: 16px;
        bottom: 16px;
        border-radius: 18px;
        padding: 8px;
    }

    .shortcuts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .content-area {
        scroll-padding-bottom: 150px;
    }

    .utility-dock {
        left: 12px;
        right: 12px;
        bottom: 12px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .utility-dock-btn {
        flex: 1 1 calc(33.333% - 8px);
        min-width: 52px;
    }

    .shortcuts-modal {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
    }

    .shortcuts-modal-body {
        padding: 18px;
    }
}

/* Settings page + modal scroll pass */
.modal-overlay {
    padding: 16px;
    align-items: center;
}

.modal-card {
    display: flex;
    flex-direction: column;
    width: min(100%, 480px);
    max-height: min(calc(100vh - 32px), 960px);
}

.modal-header,
.modal-footer {
    flex: 0 0 auto;
}

.modal-header {
    gap: 14px;
}

.modal-header h3 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.modal-footer {
    border-top: 1px solid rgba(125,211,252,0.08);
    background: linear-gradient(180deg, rgba(13,21,38,0.16), rgba(13,21,38,0.48));
}

.profile-modal,
.mail-connect-modal,
.group-modal,
.participants-modal,
.attachments-modal,
.forward-modal {
    width: min(100%, var(--modal-width, 560px));
    max-width: min(100%, var(--modal-width, 560px));
}

.profile-modal {
    --modal-width: 560px;
}

.mail-connect-modal {
    --modal-width: 820px;
}

.group-modal {
    --modal-width: 860px;
}

.group-modal--wide {
    --modal-width: 1100px;
}

.attachments-modal,
.participants-modal,
.forward-modal {
    --modal-width: 860px;
}

.profile-modal-body,
.group-modal-body,
.mail-connect-body,
.attachments-modal-body,
.participants-modal-body,
.forward-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.profile-modal-body,
.group-modal-body,
.mail-connect-body {
    padding-right: 22px;
}

.profile-fields,
.group-fields,
.mail-connect-grid,
.group-admin-list,
.participants-modal-list,
.attachments-modal-list {
    min-width: 0;
}

.mail-connect-actions,
.group-side-actions,
.profile-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.mail-connect-actions > *,
.group-side-actions > *,
.profile-actions > * {
    width: 100%;
    justify-content: center;
}

.mail-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.mail-toolbar .btn-secondary {
    width: 100%;
    justify-content: center;
}

.group-page-actions {
    flex-direction: column;
    align-items: stretch;
    justify-self: end;
    width: min(100%, 300px);
}

.group-page-action-stack {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
    width: 100%;
}

.group-page-action-stack .btn-join,
.group-page-more-wrap,
.group-page-more-btn {
    width: 100%;
}

.group-page-more-wrap {
    align-self: stretch;
}

.settings-page {
    padding: 24px 32px 32px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.settings-card {
    display: grid;
    gap: 16px;
    min-width: 0;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(125,211,252,0.12);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.08), transparent 38%),
        linear-gradient(180deg, rgba(17,27,46,0.92), rgba(9,15,27,0.9));
    box-shadow: 0 18px 38px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}

.settings-card--wide {
    grid-column: 1 / -1;
}

.settings-card-kicker {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(148,163,184,0.78);
}

.settings-card h3 {
    font-family: var(--font-head);
    font-size: 22px;
    line-height: 1.16;
    color: #f8fbff;
}

.settings-card p {
    color: #b8cce2;
    line-height: 1.68;
}

.settings-toggle-list,
.settings-action-list,
.settings-shortcut-list {
    display: grid;
    gap: 12px;
}

.settings-toggle-btn,
.settings-list-btn {
    width: 100%;
    border: 1px solid rgba(125,211,252,0.1);
    border-radius: 20px;
    background: rgba(7,13,24,0.62);
    color: #eef7ff;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    min-width: 0;
}

.settings-toggle-btn:hover,
.settings-list-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(125,211,252,0.2);
    background: rgba(11,19,34,0.82);
    box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}

.settings-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
}

.settings-toggle-btn.is-active {
    border-color: rgba(139,92,246,0.28);
    background:
        radial-gradient(circle at top left, rgba(236,72,153,0.14), transparent 42%),
        linear-gradient(180deg, rgba(32,26,59,0.94), rgba(16,22,39,0.92));
}

.settings-toggle-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
    text-align: left;
}

.settings-toggle-copy strong {
    font-size: 15px;
    color: #fff;
}

.settings-toggle-copy small {
    color: #9cb3d2;
    line-height: 1.55;
}

.settings-toggle-state {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(125,211,252,0.14);
    background: rgba(125,211,252,0.08);
    color: #dff5ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-list-btn {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    text-align: left;
}

.settings-list-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.settings-list-note {
    color: #9cb3d2;
    line-height: 1.55;
}

.settings-shortcut-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-shortcut-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(125,211,252,0.1);
    background: rgba(7,13,24,0.58);
}

.settings-idea-list {
    list-style: none;
    display: grid;
    gap: 10px;
}

.settings-idea-list li {
    position: relative;
    padding-left: 18px;
    color: #c9daec;
    line-height: 1.65;
}

.settings-idea-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, #7dd3fc, #8b5cf6);
    box-shadow: 0 0 0 4px rgba(125,211,252,0.08);
}

@media (max-width: 1180px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-shortcut-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .modal-overlay {
        padding: 10px;
        align-items: stretch;
    }

    .modal-card {
        max-height: calc(100vh - 20px);
        width: 100%;
        max-width: 100%;
    }

    .profile-modal-body,
    .group-modal-body,
    .mail-connect-body {
        padding-right: 18px;
    }

    .settings-page {
        padding: 18px 20px 24px;
    }

    .settings-card {
        padding: 18px;
        border-radius: 22px;
    }

    .settings-toggle-btn {
        flex-direction: column;
        align-items: flex-start;
    }

    .settings-toggle-state {
        align-self: flex-start;
    }
}

/* Group page stability + image cropper */
#tab-group-page {
    overflow-x: clip;
}

.group-page-hero {
    --group-hero-pad-x: 24px;
    position: relative;
    z-index: 8;
    overflow: visible;
    isolation: isolate;
    display: grid;
    align-items: start;
    grid-template-columns: 88px minmax(0, 1fr) minmax(200px, 220px);
    grid-template-areas:
        "cover cover cover"
        "icon info actions"
        "note note note";
    gap: 16px 18px;
    padding: 0 var(--group-hero-pad-x) 22px;
    min-height: auto;
    box-sizing: border-box;
}

.group-page-cover {
    grid-area: cover;
    position: relative !important;
    inset: auto !important;
    margin: 0 calc(var(--group-hero-pad-x) * -1);
    width: auto;
    height: 176px;
    z-index: 0;
    overflow: hidden;
}

.group-page-icon {
    grid-area: icon;
    position: relative;
    width: 90px;
    height: 90px;
    margin-top: -46px;
    align-self: start;
    justify-self: start;
}

.group-page-info {
    grid-area: info;
    position: relative;
    display: grid;
    align-content: start;
    gap: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding-top: 0;
}

.group-page-info h3,
.group-page-desc,
.group-page-badges,
.group-page-stats,
.group-page-access-note {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.group-page-info h3 {
    margin: 0 0 12px;
    line-height: 1.08;
}

.group-page-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.group-page-desc {
    margin: 0 0 14px;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.group-page-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.group-page-stats > span:not(.group-page-stat-sep) {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
    min-height: 0;
    padding: 9px 12px;
    border-radius: 14px;
}

.group-page-actions {
    grid-area: actions;
    width: 100%;
    max-width: 220px;
    min-width: 0;
    justify-self: end;
    align-self: start;
    position: relative;
    z-index: 20;
    display: grid;
    justify-items: end;
    gap: 10px;
}

.group-page-action-stack {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.group-page-action-stack .btn-join {
    white-space: normal;
    line-height: 1.35;
    padding: 12px 16px;
    width: 100%;
    min-height: 46px;
}

.group-page-more-btn,
.group-page-more-menu {
    max-width: 100%;
}

.group-page-more-wrap {
    position: relative;
    z-index: 80;
    width: auto;
    justify-self: end;
    align-self: start;
}

.group-page-more-btn {
    width: 46px !important;
    height: 46px;
    min-width: 46px;
    max-width: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.group-page-more-menu {
    z-index: 220;
    right: 0;
    left: auto;
    width: max-content;
    min-width: 240px;
    max-width: min(280px, calc(100vw - 32px));
}

.group-page-wall {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 252px);
    margin-top: 14px;
    overflow-x: clip;
    position: relative;
    z-index: 1;
}

.group-page-main-column,
.group-page-sidebar,
.group-page-main-column > *,
.group-page-main-column .composer-body,
.group-page-main-column .composer-footer,
.group-page-main-column .attach-preview-wrap,
.group-page-main-column textarea,
.group-page-main-column .post-card,
.group-page-main-column .group-feed-state {
    min-width: 0;
    max-width: 100%;
}

.group-page-main-column textarea {
    width: 100%;
}

.group-page-main-column > .post-composer--compact,
.group-page-main-column > #groupPageFeed.wall-feed,
.group-page-main-column > #groupPageFeed.wall-feed .post-card {
    width: 100%;
    max-width: 100%;
}

.group-page-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.group-page-tools-search {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.group-page-record-search {
    flex: 1 1 auto;
    min-width: 0;
}

.group-page-tools-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.group-page-sidebar {
    width: 100%;
    position: relative;
    z-index: 1;
}

.group-page-access-note {
    grid-area: note;
    margin: 0;
}

.group-page-hero {
    min-height: 322px;
    box-sizing: border-box;
}

.group-page-cover {
    flex-shrink: 0;
}

.group-side-card,
.group-member-item,
.participants-modal-item {
    max-width: 100%;
}

.group-member-main,
.participants-modal-main {
    min-width: 0;
}

.group-member-name,
.group-member-meta,
.participants-modal-name,
.participants-modal-secondary {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.group-member-meta,
.participants-modal-secondary {
    color: #8fa6c4;
}

.profile-avatar-hint {
    margin-top: 10px;
    max-width: 240px;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text3);
}

.image-crop-modal {
    --modal-width: 920px;
    width: min(100%, var(--modal-width));
    max-width: min(100%, var(--modal-width));
}

#imageCropModal {
    z-index: 9305;
}

.image-crop-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    display: grid;
    gap: 18px;
}

.image-crop-lead {
    color: #b8cce2;
    line-height: 1.65;
}

.image-crop-workspace {
    display: grid;
    gap: 16px;
}

.image-crop-stage-shell {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(125,211,252,0.12);
    background:
        radial-gradient(circle at top right, rgba(125,211,252,0.08), transparent 42%),
        linear-gradient(180deg, rgba(12,19,34,0.94), rgba(7,12,22,0.98));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.image-crop-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(7,12,22,0.78), rgba(7,12,22,0.9)),
        linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%),
        linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%);
    background-size: auto, 24px 24px, 24px 24px;
    background-position: 0 0, 0 0, 12px 12px;
    touch-action: none;
    cursor: grab;
    user-select: none;
}

.image-crop-stage.is-dragging {
    cursor: grabbing;
}

.image-crop-stage--cover {
    aspect-ratio: 5 / 1.2;
    border-radius: 24px;
}

.image-crop-image {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    max-height: none;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.image-crop-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.image-crop-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 999px rgba(5, 8, 16, 0.44);
}

.image-crop-frame::after {
    content: '';
    position: absolute;
    inset: 16px;
    border: 2px solid rgba(255,255,255,0.92);
    border-radius: 26px;
    box-shadow:
        0 0 0 1px rgba(125,211,252,0.18),
        0 18px 40px rgba(0,0,0,0.24);
}

.image-crop-stage--avatar .image-crop-frame::after {
    inset: 18px;
    border-radius: 999px;
}

.image-crop-stage--cover .image-crop-frame::after {
    inset: 14px;
    border-radius: 22px;
}

.image-crop-controls {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(125,211,252,0.1);
    background: rgba(7,13,24,0.56);
}

.image-crop-control {
    display: grid;
    gap: 8px;
}

.image-crop-control span {
    font-size: 13px;
    color: #d5e8fb;
}

.image-crop-control input[type="range"] {
    width: 100%;
}

.image-crop-hint {
    color: #95adca;
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 1080px) {
    .group-page-hero {
        --group-hero-pad-x: 22px;
        grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
        grid-template-areas:
            "cover cover"
            "icon info"
            "actions actions"
            "note note";
    }

    .group-page-actions {
        width: 100%;
        max-width: none;
        justify-self: stretch;
        justify-items: stretch;
    }

    .group-page-wall {
        grid-template-columns: 1fr;
    }

    .group-page-sidebar {
        max-width: none;
    }

    .group-page-tools {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .group-page-tools-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .group-page-hero {
        --group-hero-pad-x: 18px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "cover"
            "icon"
            "info"
            "actions"
            "note";
        gap: 16px;
        min-height: auto;
        padding-bottom: 20px;
    }

    .group-page-icon {
        margin-top: -46px;
    }

    .group-page-actions,
    .group-page-action-stack {
        width: 100%;
        justify-items: stretch;
    }

    .group-page-more-wrap {
        width: auto;
        justify-self: start;
    }

    .image-crop-body {
        padding: 18px;
    }

    .image-crop-stage-shell {
        padding: 12px;
        border-radius: 20px;
    }

    .image-crop-stage--cover {
        aspect-ratio: 4 / 1.35;
    }

    .group-page-stats {
        flex-direction: column;
        align-items: stretch;
    }

    .group-page-more-menu {
        left: 0;
        right: auto;
        width: min(260px, calc(100vw - 36px));
    }
}

/* Group page final containment fix */
#tab-group-page .group-page-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: relative !important;
    min-width: 0;
    max-width: 100%;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 20px 32px 0 !important;
    overflow: hidden !important;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(18,28,48,0.96), rgba(8,14,25,0.99)) !important;
    border: 1px solid rgba(125,211,252,0.12) !important;
    box-shadow: 0 24px 56px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.035);
}

#tab-group-page .group-page-hero::before,
#tab-group-page .group-page-hero::after,
#tab-group-page .group-page-cover::before {
    content: none !important;
    display: none !important;
}

#tab-group-page .group-page-cover {
    position: relative !important;
    grid-area: auto !important;
    display: block !important;
    flex: 0 0 168px !important;
    width: 100% !important;
    height: 168px !important;
    min-height: 168px !important;
    margin: 0 !important;
    inset: auto !important;
    z-index: 0;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 0 !important;
    overflow: hidden;
}

#tab-group-page .group-page-cover::after {
    content: '' !important;
    position: absolute;
    inset: 0;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    background: linear-gradient(180deg, rgba(6,11,24,0.04), rgba(6,11,24,0.50)) !important;
    pointer-events: none;
}

#tab-group-page .group-page-hero-main {
    position: relative !important;
    z-index: 2;
    display: contents !important;
    flex: 0 0 auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    grid-template-areas:
        "identity actions"
        "note actions";
    gap: 14px 20px;
    align-items: start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 180px !important;
    margin: 0 !important;
    padding: 22px 24px 24px !important;
    box-sizing: border-box;
    overflow: visible !important;
    background: linear-gradient(180deg, rgba(8,14,25,0.92), rgba(10,18,32,0.98));
    border-top: 1px solid rgba(125,211,252,0.10);
}

#tab-group-page .group-page-identity {
    grid-area: identity;
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding: 22px 24px 0 !important;
    background: linear-gradient(180deg, rgba(8,14,25,0.94), rgba(10,18,32,0.98));
}

#tab-group-page .group-page-identity,
#tab-group-page .group-page-actions,
#tab-group-page .group-page-access-note,
#tab-group-page .group-page-icon,
#tab-group-page .group-page-info {
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 3 !important;
}

#tab-group-page .group-page-icon {
    grid-area: auto !important;
    width: 104px !important;
    height: 104px !important;
    min-width: 104px;
    margin: 0 !important;
    align-self: start;
    justify-self: start;
    border-radius: 28px;
    border: 4px solid rgba(8,13,24,0.86);
    box-shadow: 0 18px 34px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.1);
}

#tab-group-page .group-page-info {
    grid-area: auto !important;
    display: grid !important;
    align-content: start;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding-top: 0 !important;
}

#tab-group-page .group-page-info h3 {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: clamp(26px, 3.8vw, 34px);
    line-height: 1.12;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#tab-group-page .group-page-badges {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 !important;
    min-width: 0;
    max-width: 100%;
}

#tab-group-page .group-page-badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#tab-group-page .group-page-desc {
    margin: 0 !important;
    max-width: 100% !important;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#tab-group-page .group-page-stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
}

#tab-group-page .group-page-stat-sep {
    display: none !important;
}

#tab-group-page .group-page-stats > span:not(.group-page-stat-sep) {
    display: flex !important;
    align-items: flex-start;
    width: 100% !important;
    min-width: 0;
    max-width: none;
    min-height: 0;
    padding: 12px 14px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

#tab-group-page .group-page-actions {
    grid-area: actions;
    display: grid !important;
    gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: none !important;
    justify-self: stretch;
    align-self: start;
    padding: 14px 24px 0 !important;
    background: rgba(10,18,32,0.98);
}

#tab-group-page .group-page-action-stack {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    min-width: 0;
}

#tab-group-page .group-page-action-stack .btn-join {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    min-height: 46px;
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#tab-group-page .group-page-more-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

#tab-group-page .group-page-more-btn {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    flex: 0 0 auto;
}

#tab-group-page .group-page-more-menu {
    left: auto !important;
    right: 0 !important;
    max-width: min(280px, calc(100vw - 32px));
}

#tab-group-page .group-page-access-note {
    grid-area: note;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 14px 24px 24px !important;
    align-self: start;
    overflow-wrap: anywhere;
    word-break: break-word;
    background: rgba(10,18,32,0.98);
}

#tab-group-page .group-page-wall {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 252px);
    gap: 18px;
    margin-top: 16px !important;
}

#tab-group-page .group-page-main-column,
#tab-group-page .group-page-main-column > *,
#tab-group-page .group-page-sidebar,
#tab-group-page .group-page-sidebar > *,
#tab-group-page .group-page-tools,
#tab-group-page .group-page-tools-search,
#tab-group-page .group-page-tools-actions {
    min-width: 0;
    max-width: 100%;
}

#tab-group-page .group-page-main-column {
    display: grid;
    gap: 16px;
    align-content: start;
}

#tab-group-page .group-page-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    max-width: 252px;
    align-content: start;
}

@media (max-width: 1080px) {
    #tab-group-page .group-page-hero-main {
        display: contents !important;
        margin-top: 0 !important;
    }

    #tab-group-page .group-page-actions {
        max-width: none !important;
        justify-self: stretch;
    }

    #tab-group-page .group-page-more-wrap {
        justify-content: flex-start;
    }

    #tab-group-page .group-page-wall {
        grid-template-columns: 1fr;
    }

    #tab-group-page .group-page-sidebar {
        max-width: none;
    }
}

@media (max-width: 720px) {
    #tab-group-page .group-page-hero {
        margin: 16px 18px 0 !important;
    }

    #tab-group-page .group-page-cover {
        flex-basis: 138px !important;
        height: 138px !important;
        min-height: 138px !important;
    }

    #tab-group-page .group-page-hero-main {
        display: contents !important;
        margin-top: 0 !important;
        padding: 18px 18px 20px;
    }

    #tab-group-page .group-page-identity {
        grid-template-columns: 1fr;
        padding: 18px 18px 0 !important;
    }

    #tab-group-page .group-page-actions {
        padding: 12px 18px 0 !important;
    }

    #tab-group-page .group-page-action-stack {
        grid-template-columns: 1fr;
    }

    #tab-group-page .group-page-access-note {
        padding: 12px 18px 20px !important;
    }

    #tab-group-page .group-page-icon {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px;
    }

    #tab-group-page .group-page-stats {
        grid-template-columns: 1fr;
    }

    #tab-group-page .group-page-more-menu {
        left: 0 !important;
        right: auto !important;
        width: min(260px, calc(100vw - 36px));
    }
}

/* Group page hero restored layout */
#tab-group-page .group-page-hero {
    display: block !important;
    position: relative !important;
    min-width: 0;
    max-width: 100%;
    min-height: 390px !important;
    height: auto !important;
    padding: 0 !important;
    margin: 20px 32px 0 !important;
    overflow: hidden !important;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(18,28,48,0.96), rgba(8,14,25,0.99)) !important;
    border: 1px solid rgba(125,211,252,0.12) !important;
    box-shadow: 0 24px 56px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.035);
    isolation: isolate;
}

#tab-group-page .group-page-hero::before,
#tab-group-page .group-page-hero::after,
#tab-group-page .group-page-cover::before {
    content: none !important;
    display: none !important;
}

#tab-group-page .group-page-cover {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 168px !important;
    min-height: 168px !important;
    margin: 0 !important;
    inset: auto !important;
    z-index: 1 !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 0 !important;
    overflow: hidden;
}

#tab-group-page .group-page-cover::after {
    content: '' !important;
    position: absolute;
    inset: 0;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    background: linear-gradient(180deg, rgba(6,11,24,0.03), rgba(6,11,24,0.52)) !important;
    pointer-events: none;
}

#tab-group-page .group-page-hero-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    grid-template-areas:
        "identity actions"
        "note actions";
    gap: 14px 20px;
    align-items: start;
    position: relative !important;
    z-index: 2 !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 220px !important;
    margin: 0 !important;
    padding: 22px 24px 24px !important;
    box-sizing: border-box;
    overflow: visible !important;
    background: linear-gradient(180deg, rgba(8,14,25,0.94), rgba(10,18,32,0.99));
    border-top: 1px solid rgba(125,211,252,0.10);
}

#tab-group-page .group-page-wall {
    position: relative;
    z-index: 0;
    margin-top: 16px !important;
}

#tab-group-page .group-page-identity {
    grid-area: identity !important;
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    position: relative !important;
    z-index: 3 !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 104px;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#tab-group-page .group-page-icon {
    grid-area: auto !important;
    position: relative !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 104px !important;
    height: 104px !important;
    min-width: 104px;
    margin: 0 !important;
    align-self: start;
    justify-self: start;
    border-radius: 28px;
    border: 4px solid rgba(8,13,24,0.86);
    box-shadow: 0 18px 34px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.1);
    overflow: hidden;
    visibility: visible !important;
    opacity: 1 !important;
}

#tab-group-page .group-page-icon .avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#tab-group-page .group-page-info {
    grid-area: auto !important;
    display: grid !important;
    align-content: start;
    gap: 10px;
    position: relative !important;
    z-index: 3 !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#tab-group-page .group-page-info h3 {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: clamp(26px, 3.8vw, 34px);
    line-height: 1.12;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#tab-group-page .group-page-badges,
#tab-group-page .group-page-stats {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

#tab-group-page .group-page-badge,
#tab-group-page .group-page-desc,
#tab-group-page .group-page-stats > span:not(.group-page-stat-sep) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#tab-group-page .group-page-desc {
    margin: 0 !important;
    line-height: 1.55;
    white-space: pre-wrap;
}

#tab-group-page .group-page-stat-sep {
    display: none !important;
}

#tab-group-page .group-page-stats > span:not(.group-page-stat-sep) {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    min-width: 0;
    min-height: 42px;
    padding: 10px 12px;
}

#tab-group-page .group-page-actions {
    grid-area: actions !important;
    display: grid !important;
    gap: 10px;
    position: relative !important;
    z-index: 4 !important;
    width: 100%;
    min-width: 0;
    max-width: 280px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: end;
    align-self: start;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#tab-group-page .group-page-action-stack {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

#tab-group-page .group-page-action-stack .btn-join {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    min-height: 46px;
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#tab-group-page .group-page-more-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

#tab-group-page .group-page-access-note {
    grid-area: note !important;
    position: relative !important;
    z-index: 3 !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 14px 16px !important;
    align-self: start;
    border-radius: 18px;
    border: 1px solid rgba(125,211,252,0.10);
    background: rgba(255,255,255,0.035) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 1080px) {
    #tab-group-page .group-page-hero {
        min-height: 0 !important;
        height: auto !important;
    }

    #tab-group-page .group-page-hero-body {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        min-height: 0 !important;
        height: auto !important;
    }

    #tab-group-page .group-page-actions {
        max-width: none !important;
        justify-self: stretch;
    }

    #tab-group-page .group-page-identity {
        display: flex !important;
        align-items: flex-start;
        min-height: 0 !important;
        height: auto !important;
    }

    #tab-group-page .group-page-action-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #tab-group-page .group-page-more-wrap {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    #tab-group-page .group-page-hero {
        margin: 16px 18px 0 !important;
    }

    #tab-group-page .group-page-cover {
        height: 138px !important;
        min-height: 138px !important;
    }

    #tab-group-page .group-page-hero-body {
        padding: 18px 18px 20px !important;
        min-height: 0 !important;
    }

    #tab-group-page .group-page-identity {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 14px;
        min-height: 88px;
    }

    #tab-group-page .group-page-icon {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px;
        border-radius: 24px;
    }

    #tab-group-page .group-page-action-stack {
        grid-template-columns: 1fr;
    }

    #tab-group-page .group-page-stats {
        display: grid !important;
        grid-template-columns: 1fr;
    }
}

/* Groups tab containment fix */
#tab-groups .tab-header--mission {
    align-items: flex-end;
}

#tab-groups .tab-header-copy {
    flex: 1 1 360px;
    max-width: 100%;
}

#tab-groups .groups-header-actions {
    flex: 1 1 460px;
    max-width: 560px;
    min-width: min(100%, 320px);
    align-items: stretch;
}

#tab-groups .groups-header-actions .search-bar {
    flex: 1 1 260px;
    width: auto;
    min-width: min(100%, 220px);
    max-width: 100%;
}

#tab-groups .btn-create-group {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    margin-top: 0;
    padding: 12px 18px;
    min-height: 44px;
}

#tab-groups .mission-grid--groups,
#tab-groups .mission-grid--groups > * {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 1320px) {
    #tab-groups .mission-grid--groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #tab-groups .mission-grid--groups .mission-card--hero {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    #tab-groups .groups-header-actions {
        flex-basis: 100%;
        max-width: none;
        min-width: 0;
    }

    #tab-groups .groups-header-actions .search-bar,
    #tab-groups .btn-create-group {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
}

/* ═══════════════════════════════════════
   VISUAL REFRESH PASS
═══════════════════════════════════════ */
:root {
    --bg: #07101c;
    --bg2: #0c1727;
    --bg3: #142238;
    --surface: rgba(18, 30, 50, 0.88);
    --surface2: rgba(28, 44, 70, 0.82);
    --border: rgba(125, 211, 252, 0.13);
    --accent: #9b5cff;
    --accent2: #ff4fa3;
    --accent3: #17d7c6;
    --text: #f8fbff;
    --text2: #d5e0ee;
    --text3: #8fa3bb;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
    --panel-line: rgba(255, 255, 255, 0.055);
}

html {
    color-scheme: dark;
}

body {
    background:
        linear-gradient(180deg, #07101c 0%, #081321 46%, #050914 100%),
        linear-gradient(120deg, rgba(23, 215, 198, 0.08), transparent 34%, rgba(255, 79, 163, 0.07));
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.logo-text,
.chat-header-name,
.group-page-info h3,
.group-card-name,
.mail-thread-title,
.settings-card h3 {
    letter-spacing: 0 !important;
}

button,
input,
textarea,
select {
    letter-spacing: 0;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(5, 10, 20, 0.45);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(23, 215, 198, 0.32), rgba(155, 92, 255, 0.34));
    border: 2px solid rgba(5, 10, 20, 0.65);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(23, 215, 198, 0.52), rgba(155, 92, 255, 0.54));
}

.ui-icon {
    stroke-width: 1.9;
}

.login-card {
    border-color: rgba(125, 211, 252, 0.20);
    background:
        linear-gradient(180deg, rgba(18, 30, 50, 0.92), rgba(10, 18, 32, 0.90)),
        rgba(8, 14, 28, 0.82);
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.44),
        0 0 0 1px rgba(255, 255, 255, 0.035) inset;
}

.auth-tabs {
    background: rgba(6, 13, 27, 0.72);
    border: 1px solid rgba(125, 211, 252, 0.08);
    box-shadow: inset 0 1px 0 var(--panel-line);
}

.auth-tab.active,
.btn-primary {
    background: linear-gradient(135deg, #8d5cf6 0%, #d94fba 52%, #ff5b8e 100%);
}

.input-wrap input,
.profile-field input,
.profile-field textarea,
.profile-field select,
.search-bar,
.group-invite-field input,
.chat-input-bar input,
.mail-composer-field input,
.mail-composer-field textarea {
    border-color: rgba(125, 211, 252, 0.13);
    background: rgba(9, 18, 34, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.input-wrap input:focus,
.profile-field input:focus,
.profile-field textarea:focus,
.profile-field select:focus,
.search-bar:focus-within,
.chat-input-bar:focus-within {
    border-color: rgba(23, 215, 198, 0.46);
    box-shadow:
        0 0 0 4px rgba(23, 215, 198, 0.10),
        0 14px 34px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.btn-primary,
.btn-secondary,
.filter-btn,
.attachments-filter-btn,
.settings-toggle-btn,
.settings-list-btn {
    min-height: 42px;
}

.btn-primary {
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 14px 30px rgba(155, 92, 255, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn-primary:hover {
    box-shadow:
        0 18px 40px rgba(255, 79, 163, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.btn-secondary,
.filter-btn,
.attachments-filter-btn {
    border-color: rgba(125, 211, 252, 0.14);
    background: rgba(10, 20, 38, 0.68);
}

.btn-secondary:hover,
.filter-btn:hover,
.attachments-filter-btn:hover {
    border-color: rgba(23, 215, 198, 0.34);
    background: rgba(23, 215, 198, 0.08);
}

.filter-btn.active,
.attachments-filter-btn.active {
    color: #f8fbff;
    border-color: rgba(155, 92, 255, 0.46);
    background:
        linear-gradient(135deg, rgba(155, 92, 255, 0.22), rgba(23, 215, 198, 0.11));
}

.sidebar-left,
.sidebar-right {
    background:
        linear-gradient(180deg, rgba(9, 18, 34, 0.96), rgba(6, 12, 24, 0.94));
    border-color: rgba(125, 211, 252, 0.12);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.025);
}

.brand {
    margin: 0 0 20px;
    padding: 0 10px 22px;
    border-bottom: 1px solid rgba(125, 211, 252, 0.08);
}

.brand .logo-icon,
.login-logo .logo-icon {
    -webkit-text-fill-color: currentColor;
    background: none;
    color: #dd5cf7;
}

.nav-menu {
    gap: 8px;
}

.nav-item {
    min-height: 48px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: #c5d2e1;
}

.nav-item:hover {
    border-color: rgba(125, 211, 252, 0.12);
    background: rgba(125, 211, 252, 0.06);
}

.nav-item.active {
    color: #fff;
    border-color: rgba(155, 92, 255, 0.32);
    background:
        linear-gradient(135deg, rgba(155, 92, 255, 0.24), rgba(23, 215, 198, 0.11));
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-item.active .nav-icon {
    color: var(--accent3);
}

.nav-item.active::before {
    background: linear-gradient(180deg, var(--accent3), var(--accent2));
}

.sidebar-user {
    background:
        linear-gradient(180deg, rgba(17, 31, 55, 0.86), rgba(9, 18, 34, 0.78));
    border-color: rgba(125, 211, 252, 0.12);
}

.sidebar-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.content-area {
    background:
        linear-gradient(180deg, rgba(7, 16, 28, 0.48), rgba(5, 9, 18, 0.74));
}

.tab-header {
    padding-top: 30px;
    border-color: rgba(125, 211, 252, 0.10);
    background:
        linear-gradient(180deg, rgba(8, 17, 31, 0.94), rgba(8, 17, 31, 0.78));
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.20);
}

.tab-header h2 {
    font-size: clamp(24px, 2.2vw, 31px);
    line-height: 1.12;
}

.tab-subtitle {
    max-width: 68ch;
    color: #b8c8dc;
}

.tab-eyebrow {
    color: rgba(168, 184, 203, 0.88);
}

.tab-eyebrow::before {
    background: linear-gradient(90deg, var(--accent3), rgba(155, 92, 255, 0.38));
}

.tab-pill {
    min-width: 144px;
    border-color: rgba(125, 211, 252, 0.14);
    background:
        linear-gradient(180deg, rgba(18, 32, 55, 0.86), rgba(9, 18, 34, 0.82));
}

.mission-grid {
    gap: 16px;
    grid-template-columns: minmax(270px, 1.35fr) repeat(3, minmax(160px, 1fr));
}

.mission-card,
.post-card,
.group-card,
.chats-layout,
.chat-list-item,
.chat-panel,
.settings-card,
.modal-card,
.mail-account-chip,
.group-page-side-card,
.group-feed-state {
    border-color: rgba(125, 211, 252, 0.12);
    background:
        linear-gradient(180deg, rgba(18, 32, 55, 0.86), rgba(9, 18, 34, 0.82));
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mission-card {
    min-height: 142px;
    border-radius: 20px;
}

.mission-card::after {
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.055), transparent 32%),
        linear-gradient(180deg, rgba(23, 215, 198, 0.04), transparent 58%);
}

.mission-card h3 {
    font-size: clamp(18px, 1.7vw, 23px);
}

.mission-card--stat strong {
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1;
}

.wall-tools {
    padding: 18px 32px 0;
}

.wall-search-status {
    color: #9eb0c5;
}

.wall-filters {
    gap: 10px;
}

.wall-feed {
    gap: 18px;
}

.post-card {
    border-radius: 18px;
}

.post-card:hover,
.group-card:hover,
.chat-list-item:hover {
    border-color: rgba(23, 215, 198, 0.24);
    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(23, 215, 198, 0.06) inset;
}

.post-avatar,
.user-avatar-sm,
.msg-avatar,
.msg-avatar-sm,
.msg-avatar-lg,
.profile-page-avatar,
.profile-avatar-large {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.10) inset,
        0 12px 26px rgba(0, 0, 0, 0.22);
}

.tag-all,
.tag-study,
.tag-event,
.tag-fun,
.group-page-badge,
.profile-cover-chip,
.chat-list-kicker {
    border: 1px solid rgba(255, 255, 255, 0.065);
}

.settings-page {
    max-width: 1180px;
}

.settings-card {
    border-radius: 20px;
}

.app-toast {
    border-color: rgba(125, 211, 252, 0.14);
    background:
        linear-gradient(180deg, rgba(18, 32, 55, 0.96), rgba(9, 18, 34, 0.94));
}

@media (max-width: 1180px) {
    .mission-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mission-card--hero {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    #screen-main {
        display: block !important;
        min-height: 100vh;
        padding-bottom: 86px;
    }

    .sidebar-left {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        top: auto;
        z-index: 2000;
        width: auto;
        height: 68px;
        padding: 8px;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid rgba(125, 211, 252, 0.16);
        border-radius: 22px;
        background:
            linear-gradient(180deg, rgba(11, 23, 43, 0.96), rgba(6, 12, 24, 0.96));
        box-shadow:
            0 18px 44px rgba(0, 0, 0, 0.48),
            inset 0 1px 0 rgba(255, 255, 255, 0.07);
        backdrop-filter: blur(24px) saturate(1.4);
    }

    .sidebar-left::-webkit-scrollbar {
        display: none;
    }

    .sidebar-left .brand,
    .sidebar-left .sidebar-user,
    .sidebar-left .sidebar-logout {
        display: none !important;
    }

    .nav-menu {
        width: max-content;
        min-width: 100%;
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: space-between;
        gap: 6px;
    }

    .nav-item {
        width: 50px;
        min-width: 50px;
        height: 50px;
        min-height: 50px;
        flex: 0 0 50px;
        justify-content: center;
        padding: 0;
        border-radius: 16px;
    }

    .nav-item::before,
    .nav-label {
        display: none !important;
    }

    .nav-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }

    .dm-badge,
    .friend-req-badge {
        position: absolute;
        top: 5px;
        right: 5px;
        min-width: 17px;
        height: 17px;
        font-size: 10px;
    }

    .content-area {
        width: 100%;
        height: 100vh;
        padding-bottom: 92px;
    }

    .tab-header {
        padding: 22px 18px 16px;
        gap: 14px;
    }

    .tab-header h2 {
        font-size: 25px;
    }

    .tab-subtitle {
        font-size: 14px;
        line-height: 1.6;
    }

    .tab-pills {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .tab-pill {
        min-width: 0;
        width: 100%;
    }

    .mission-grid {
        padding: 16px 18px 0;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .mission-card {
        min-height: 116px;
        padding: 18px;
        border-radius: 20px;
    }

    .mission-card--hero {
        padding-right: 18px;
    }

    .wall-tools,
    .wall-search-status,
    .wall-filters,
    .wall-feed,
    .groups-stats,
    .group-grid,
    .settings-page {
        padding-left: 18px;
        padding-right: 18px;
    }

    .wall-tools {
        padding-top: 16px;
    }

    .wall-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .filter-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .wall-feed {
        padding-bottom: 108px;
    }

    .post-card,
    .settings-card {
        padding: 18px;
        border-radius: 18px;
    }

    .login-card {
        width: min(480px, calc(100vw - 32px));
        padding: 34px 24px;
        border-radius: 24px;
    }

    .auth-tabs {
        gap: 4px;
        padding: 4px;
    }
}

@media (max-width: 420px) {
    .sidebar-left {
        left: 8px;
        right: 8px;
        bottom: 8px;
        height: 64px;
        padding: 7px;
        border-radius: 20px;
    }

    .nav-item {
        width: 40px;
        min-width: 40px;
        height: 46px;
        min-height: 46px;
        flex: 0 0 40px;
        border-radius: 14px;
    }

    .nav-menu {
        gap: 4px;
    }

    .tab-header h2 {
        font-size: 23px;
    }
}

/* Group page cleanup */
#tab-group-page .group-page-access-note {
    display: none !important;
}

#tab-group-page .group-page-more-menu {
    position: fixed;
    z-index: 10000;
}

/* Groups catalog avatar sizing */
.group-card-brand {
    min-width: 0;
}

.group-card-icon {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    flex: 0 0 64px !important;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.group-card-icon .avatar-img,
.group-card-icon img {
    display: block;
    width: 100% !important;
    min-width: 100%;
    height: 100% !important;
    object-fit: cover;
    border-radius: inherit;
    flex: 0 0 auto;
}

@media (max-width: 420px) {
    .group-card-icon {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        flex-basis: 56px !important;
        border-radius: 16px;
    }
}

/* Chat creation and simpler group labels */
.btn-create-chat {
    margin-top: 12px;
    width: 100%;
    justify-content: center;
}

.group-invite-textarea {
    min-height: 72px;
    resize: vertical;
}

.group-chat-create {
    display: grid;
    gap: 10px;
}

.group-chat-create input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(26, 39, 68, 0.5);
    color: var(--text);
    font: inherit;
}

.group-visual-panel--compact {
    align-items: center;
    padding: 10px;
}

.group-avatar-preview--small {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 18px;
}

#tab-groups .group-card-overline,
#tab-groups .group-card-signal {
    display: none !important;
}

#tab-groups .group-card-top {
    align-items: flex-start;
}

.group-page-signal-sep,
#groupPageSignal {
    display: none !important;
}

/* Visual polish: icon rhythm and containment */
.btn-primary .ui-icon,
.btn-secondary .ui-icon,
.btn-post .ui-icon,
.filter-btn .ui-icon,
.tag-btn .ui-icon,
.group-tag-filter .ui-icon,
.attachments-filter-btn .ui-icon,
.settings-list-btn .ui-icon,
.post-action-btn .ui-icon,
.comment-like-btn .ui-icon,
.comment-reply-btn .ui-icon {
    width: 16px;
    height: 16px;
}

.btn-secondary,
.btn-post,
.filter-btn,
.tag-btn,
.group-tag-filter,
.attachments-filter-btn,
.post-action-btn,
.comment-like-btn,
.comment-reply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-post {
    min-height: 42px;
    white-space: nowrap;
}

.filter-btn,
.tag-btn,
.group-tag-filter,
.attachments-filter-btn {
    white-space: nowrap;
}

.filter-icon,
.tag-icon,
.stat-chip-icon,
.post-tag-icon {
    color: currentColor;
}

.mission-card-icon {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: 14px;
    color: #9ee8ff;
    background:
        linear-gradient(180deg, rgba(125, 211, 252, 0.10), rgba(155, 92, 255, 0.08)),
        rgba(6, 13, 27, 0.44);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mission-card-icon .ui-icon {
    width: 19px;
    height: 19px;
}

.mission-card--stat {
    padding-top: 56px;
}

.post-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.post-tag-icon {
    width: 13px;
    height: 13px;
}

.post-action-btn--icon {
    width: 38px;
    padding-inline: 0;
}

.post-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fca5a5;
    border: 1px solid transparent;
}

.post-delete-btn .ui-icon,
.comment-delete-btn .ui-icon,
.reply-cancel-btn .ui-icon,
.comment-send-btn .ui-icon {
    width: 15px;
    height: 15px;
}

.comment-delete-btn {
    color: #fca5a5;
}

.comment-reply-btn span {
    line-height: 1;
}

.stat-chip {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 14px;
    background: rgba(9, 18, 34, 0.58);
}

.stat-chip-icon {
    width: 15px;
    height: 15px;
    color: var(--accent3);
}

.sidebar-section h4 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sidebar-section-icon {
    width: 15px;
    height: 15px;
    color: var(--accent3);
}

.sidebar-empty-note,
.online-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-empty-note {
    font-size: 12px;
    color: var(--text3);
}

.sidebar-empty-note .ui-icon {
    width: 14px;
    height: 14px;
    color: rgba(125, 211, 252, 0.82);
}

.settings-list-btn {
    display: flex;
    align-items: center;
    gap: 14px;
}

.settings-list-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.settings-list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 14px;
    color: #9ee8ff;
    background: rgba(125, 211, 252, 0.08);
}

.settings-list-icon .ui-icon {
    width: 18px;
    height: 18px;
}

.group-card-stat,
.group-card-meta-chip,
.group-card-btns .btn-join {
    min-width: 0;
}

@media (max-width: 720px) {
    .mission-card-icon {
        top: 16px;
        right: 16px;
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }

    .mission-card--stat {
        padding-top: 52px;
    }

    .sidebar-left .nav-menu {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        width: 100%;
        min-width: 0;
    }

    .sidebar-left .nav-item {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
    }

    .wall-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }

    .filter-btn {
        width: 100%;
        min-width: 0;
        padding-inline: 12px;
    }
}

/* UniSpace thematic design layer */
:root {
    --accent: #8f63ff;
    --accent2: #ff4fb8;
    --accent3: #23d7ff;
    --accent4: #ff8a2a;
    --accent5: #ffd166;
    --deep-blue: #071732;
    --electric-blue: #2f7cff;
    --panel: rgba(12, 22, 40, 0.84);
    --panel-strong: rgba(17, 31, 53, 0.92);
    --panel-line: rgba(142, 214, 255, 0.13);
    --text-soft: #b8c8dc;
}

body {
    background: #040716;
}

.starfield-canvas {
    opacity: 0.78;
    mix-blend-mode: screen;
}

body::before {
    background:
        radial-gradient(ellipse 780px 520px at 15% 8%, rgba(47, 124, 255, 0.16), transparent 68%),
        radial-gradient(ellipse 620px 460px at 86% 18%, rgba(143, 99, 255, 0.14), transparent 68%),
        radial-gradient(ellipse 560px 420px at 62% 76%, rgba(255, 79, 184, 0.09), transparent 70%),
        linear-gradient(180deg, #07142c 0%, #050917 48%, #030611 100%);
    opacity: 1;
}

body::after {
    background-image:
        radial-gradient(circle at 18% 28%, rgba(35, 215, 255, 0.20) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 18%, rgba(255, 79, 184, 0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 84% 74%, rgba(143, 99, 255, 0.20) 0 1px, transparent 2px),
        linear-gradient(118deg, transparent 0 34%, rgba(35, 215, 255, 0.06) 43%, transparent 54%),
        linear-gradient(244deg, transparent 0 42%, rgba(255, 79, 184, 0.05) 52%, transparent 64%);
    opacity: 0.62;
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.content-area {
    background:
        radial-gradient(ellipse 620px 420px at 28% 20%, rgba(35, 215, 255, 0.055), transparent 72%),
        radial-gradient(ellipse 560px 380px at 72% 58%, rgba(143, 99, 255, 0.07), transparent 72%),
        linear-gradient(180deg, rgba(6, 14, 31, 0.76), rgba(4, 8, 18, 0.90)),
        rgba(5, 10, 20, 0.72);
}

.content-area::before {
    background:
        radial-gradient(ellipse 360px 260px at 30% 16%, rgba(35, 215, 255, 0.12), transparent 72%),
        radial-gradient(ellipse 440px 300px at 76% 34%, rgba(255, 79, 184, 0.08), transparent 74%),
        radial-gradient(ellipse 640px 420px at 42% 92%, rgba(143, 99, 255, 0.07), transparent 76%),
        linear-gradient(128deg, transparent 22%, rgba(35, 215, 255, 0.045) 42%, transparent 58%);
    opacity: 0.78;
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.72) 58%, transparent 100%);
}

.login-grid {
    display: none;
}

.sidebar-left,
.sidebar-right {
    background:
        linear-gradient(180deg, rgba(10, 20, 37, 0.97), rgba(4, 9, 18, 0.96)),
        radial-gradient(ellipse 260px 440px at 0% 22%, rgba(47, 124, 255, 0.09), transparent 72%),
        radial-gradient(ellipse 260px 420px at 100% 78%, rgba(255, 79, 184, 0.06), transparent 72%);
    border-color: var(--panel-line);
}

.brand {
    position: relative;
}

.brand::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(35, 215, 255, 0.68), rgba(143, 99, 255, 0.58), rgba(255, 79, 184, 0.42), transparent);
}

.brand .logo-icon,
.login-logo .logo-icon {
    color: #e66cff;
    text-shadow:
        0 0 16px rgba(230, 108, 255, 0.44),
        0 0 24px rgba(32, 214, 199, 0.24);
}

.brand .logo-text,
.login-logo .logo-text {
    color: #f8fbff;
    text-shadow: 0 10px 28px rgba(32, 214, 199, 0.12);
}

.nav-item {
    position: relative;
    overflow: hidden;
}

.nav-item::after {
    content: '';
    position: absolute;
    inset: 8px auto 8px -28px;
    width: 26px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(35, 215, 255, 0.76), rgba(255, 79, 184, 0.62));
    opacity: 0;
    transition: transform 0.24s ease, opacity 0.24s ease;
}

.nav-item:hover::after,
.nav-item.active::after {
    opacity: 0.86;
    transform: translateX(18px);
}

.nav-item:hover {
    color: #eef7ff;
    background:
        linear-gradient(135deg, rgba(35, 215, 255, 0.10), rgba(143, 99, 255, 0.10), rgba(255, 79, 184, 0.05));
}

.nav-item.active {
    border-color: rgba(32, 214, 199, 0.30);
    background:
        linear-gradient(135deg, rgba(35, 215, 255, 0.18), rgba(143, 99, 255, 0.24) 58%, rgba(255, 79, 184, 0.12));
}

.tab-header {
    overflow: hidden;
    flex: 0 0 auto;
    background:
        linear-gradient(180deg, rgba(8, 18, 34, 0.96), rgba(7, 15, 29, 0.82)),
        radial-gradient(ellipse 520px 180px at 22% 0%, rgba(35, 215, 255, 0.08), transparent 70%),
        radial-gradient(ellipse 460px 180px at 78% 0%, rgba(255, 79, 184, 0.06), transparent 72%);
}

.tab-header::after {
    content: '';
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(35, 215, 255, 0.62), rgba(143, 99, 255, 0.54), rgba(255, 79, 184, 0.38), transparent);
}

.tab-eyebrow {
    color: rgba(180, 197, 218, 0.92);
}

.tab-eyebrow::before {
    background: linear-gradient(90deg, var(--accent3), var(--accent2));
}

.tab-header h2 {
    background: linear-gradient(135deg, #ffffff 0%, #dff7ff 40%, #c6c4ff 74%, #ffd4f0 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.tab-subtitle,
.mission-card p,
.settings-card p {
    color: var(--text-soft);
}

.tab-pill {
    background:
        linear-gradient(180deg, rgba(19, 35, 59, 0.90), rgba(7, 16, 31, 0.88));
    border-color: rgba(125, 211, 252, 0.16);
}

.mission-card,
.post-composer,
.post-card,
.group-card,
.chats-layout,
.chat-panel,
.settings-card,
.group-page-side-card,
.group-feed-state,
.modal-card {
    border-color: rgba(125, 211, 252, 0.14);
    background:
        linear-gradient(180deg, rgba(18, 34, 57, 0.88), rgba(8, 16, 30, 0.90)),
        radial-gradient(ellipse 340px 180px at 12% 0%, rgba(35, 215, 255, 0.06), transparent 72%),
        radial-gradient(ellipse 320px 180px at 88% 100%, rgba(143, 99, 255, 0.07), transparent 74%);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.mission-card {
    border-radius: 18px;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.mission-card::before {
    inset: auto 20px 0 20px;
    width: auto;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--accent3), var(--accent), var(--accent2), transparent);
    animation: none;
    opacity: 0.68;
}

.mission-card::after {
    background:
        radial-gradient(ellipse 220px 120px at 88% 14%, rgba(35, 215, 255, 0.08), transparent 72%),
        linear-gradient(125deg, rgba(255,255,255,0.055), transparent 34%);
}

.mission-card:hover {
    transform: translateY(-2px);
    border-color: rgba(32, 214, 199, 0.26);
    box-shadow:
        0 22px 54px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(32, 214, 199, 0.08) inset;
}

.mission-card-icon {
    border-color: rgba(125, 211, 252, 0.20);
    color: #baf7ff;
    background:
        linear-gradient(180deg, rgba(32, 214, 199, 0.14), rgba(167, 108, 255, 0.11)),
        rgba(5, 12, 24, 0.60);
}

.mission-card--hero .mission-card-icon {
    color: var(--accent5);
}

.search-bar,
.input-wrap input,
.chat-input-bar,
.group-chat-create input {
    background: rgba(5, 13, 27, 0.72);
    border-color: rgba(125, 211, 252, 0.16);
}

.search-bar:focus-within,
.input-wrap input:focus,
.chat-input-bar:focus-within,
.group-chat-create input:focus {
    border-color: rgba(32, 214, 199, 0.42);
    box-shadow:
        0 0 0 4px rgba(32, 214, 199, 0.10),
        0 14px 32px rgba(0, 0, 0, 0.22);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent3) 0%, var(--accent) 46%, var(--accent2) 100%);
    box-shadow:
        0 16px 34px rgba(32, 214, 199, 0.14),
        0 16px 34px rgba(255, 79, 163, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.17);
}

.btn-primary:hover {
    box-shadow:
        0 20px 42px rgba(32, 214, 199, 0.18),
        0 18px 40px rgba(255, 79, 163, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-secondary,
.filter-btn,
.tag-btn,
.group-tag-filter,
.attachments-filter-btn {
    background: rgba(7, 17, 32, 0.72);
    border-color: rgba(125, 211, 252, 0.16);
}

.btn-secondary:hover,
.filter-btn:hover,
.tag-btn:hover,
.group-tag-filter:hover,
.attachments-filter-btn:hover {
    color: #f8fbff;
    border-color: rgba(32, 214, 199, 0.34);
    background: rgba(32, 214, 199, 0.09);
}

.filter-btn.active,
.tag-btn.active,
.group-tag-filter.active,
.attachments-filter-btn.active {
    color: #fff;
    border-color: rgba(167, 108, 255, 0.44);
    background:
        linear-gradient(135deg, rgba(167, 108, 255, 0.28), rgba(32, 214, 199, 0.16)),
        rgba(7, 17, 32, 0.76);
    box-shadow: 0 12px 28px rgba(167, 108, 255, 0.18);
}

.wall-search-status {
    color: #adc0d6;
}

.group-section-label {
    color: #a9bfd9;
}

.group-section-label::after {
    background: linear-gradient(90deg, rgba(35, 215, 255, 0.28), rgba(143, 99, 255, 0.22), rgba(255, 79, 184, 0.14), transparent);
}

.group-card {
    min-height: 408px;
    border-radius: 18px;
}

.group-card::before {
    background:
        radial-gradient(ellipse 360px 180px at 16% 0%, rgba(35, 215, 255, 0.065), transparent 72%),
        radial-gradient(ellipse 360px 180px at 88% 100%, rgba(255, 79, 184, 0.055), transparent 74%),
        linear-gradient(180deg, rgba(255,255,255,0.045), transparent 28%);
}

.group-card-cover {
    height: 126px;
    background:
        radial-gradient(circle at 18% 26%, rgba(35, 215, 255, 0.26), transparent 34%),
        radial-gradient(circle at 82% 16%, rgba(255, 79, 184, 0.20), transparent 38%),
        linear-gradient(135deg, var(--group-cover-a, #123557), var(--group-cover-b, #5a4bd8));
}

.group-card-cover-overlay {
    background:
        linear-gradient(180deg, rgba(6,11,24,0.04), rgba(6,11,24,0.74)),
        radial-gradient(ellipse 340px 120px at 50% 8%, rgba(255,255,255,0.09), transparent 72%);
}

.group-card-stat,
.group-card-meta-chip {
    background: rgba(4, 12, 25, 0.50);
    border-color: rgba(125, 211, 252, 0.12);
}

.group-card-stat span {
    color: #91b5d7;
}

.group-card-stat strong,
.group-card-name {
    color: #f8fbff;
}

.group-card-btns .btn-join:not(.btn-join--ghost) {
    background: linear-gradient(135deg, rgba(32, 214, 199, 0.18), rgba(167, 108, 255, 0.24));
    border-color: rgba(32, 214, 199, 0.24);
}

.group-card-btns .btn-join--ghost {
    background: rgba(143, 99, 255, 0.08);
    border-color: rgba(143, 99, 255, 0.18);
}

.chat-empty,
.messages-empty {
    color: #b7c7dd;
}

.chat-empty-icon,
.messages-empty-icon {
    border: 1px solid rgba(125, 211, 252, 0.16);
    background:
        linear-gradient(180deg, rgba(32, 214, 199, 0.11), rgba(167, 108, 255, 0.10)),
        rgba(5, 13, 27, 0.68);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.settings-card {
    position: relative;
    overflow: hidden;
}

.settings-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--accent3), var(--accent), var(--accent2), transparent);
    opacity: 0.68;
}

.settings-toggle-btn,
.settings-list-btn,
.settings-shortcut-item {
    background:
        linear-gradient(180deg, rgba(5, 13, 27, 0.78), rgba(5, 10, 20, 0.70));
    border-color: rgba(125, 211, 252, 0.13);
}

.settings-list-icon {
    color: #baf7ff;
    background:
        linear-gradient(180deg, rgba(32, 214, 199, 0.13), rgba(167, 108, 255, 0.10));
}

.settings-toggle-state {
    background: rgba(32, 214, 199, 0.10);
    border-color: rgba(32, 214, 199, 0.18);
}

.sidebar-section h4 {
    color: #9fb4ce;
}

.active-group-chip,
.online-item,
.sidebar-empty-note {
    border-radius: 12px;
}

.active-group-chip {
    background: rgba(5, 13, 27, 0.54);
    border-color: rgba(125, 211, 252, 0.12);
}

.active-group-chip:hover {
    background: rgba(32, 214, 199, 0.08);
    border-color: rgba(32, 214, 199, 0.24);
}

.online-item {
    padding: 7px 0;
}

@media (max-width: 720px) {
    body::after {
        mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
    }

    .tab-header::after {
        left: 18px;
        right: 18px;
    }

    .mission-card:hover,
    .group-card:hover {
        transform: none;
    }
}

/* Group chat membership picker */
.group-chat-picker-modal {
    width: min(100%, 660px);
    max-width: calc(100vw - 28px);
}

.group-chat-picker-list {
    display: grid;
    gap: 10px;
}

.group-chat-picker-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(35, 215, 255, 0.14);
    border-radius: 8px;
    background:
        radial-gradient(circle at 0% 0%, rgba(35, 215, 255, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(8, 19, 39, 0.82), rgba(5, 12, 25, 0.74));
}

.group-chat-picker-item.is-joined {
    border-color: rgba(255, 79, 184, 0.26);
    box-shadow: inset 3px 0 0 rgba(255, 79, 184, 0.72);
}

.group-chat-picker-avatar {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}

.group-chat-picker-main {
    min-width: 0;
}

.group-chat-picker-title {
    color: var(--text);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-chat-picker-meta {
    margin-top: 4px;
    color: rgba(196, 219, 245, 0.72);
    font-size: 12px;
}

.group-chat-picker-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.chat-readonly-note {
    flex-wrap: wrap;
}

.btn-chat-note-action {
    margin-left: auto;
}

.btn-chat-join-inline {
    margin-top: 12px;
}

.chat-list-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.chat-list-join-btn,
.chat-list-status,
.chat-list-unread {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.chat-list-join-btn {
    border: 1px solid rgba(35, 215, 255, 0.20);
    background: rgba(35, 215, 255, 0.10);
    color: #c8f7ff;
    cursor: pointer;
}

.chat-list-join-btn:hover {
    border-color: rgba(255, 79, 184, 0.34);
    background: rgba(255, 79, 184, 0.12);
}

.chat-list-join-btn:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.chat-list-status {
    color: rgba(205, 239, 255, 0.82);
    background: rgba(143, 99, 255, 0.12);
    border: 1px solid rgba(143, 99, 255, 0.16);
}

.chat-list-unread {
    min-width: 30px;
    padding-inline: 9px;
    color: #08111f;
    background: linear-gradient(135deg, #23d7ff, #ff4fb8);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 18px rgba(255, 79, 184, 0.18);
}

.chat-list-join-btn .ui-icon,
.chat-list-status .ui-icon {
    width: 14px;
    height: 14px;
}

@media (max-width: 640px) {
    .group-chat-picker-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .group-chat-picker-avatar {
        width: 42px;
        height: 42px;
    }

    .group-chat-picker-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .group-chat-picker-actions > button {
        flex: 1 1 140px;
    }

    .chat-list-actions {
        flex-basis: 100%;
        margin-left: 58px;
    }

    .chat-list-join-btn,
    .chat-list-status {
        width: fit-content;
        max-width: 100%;
    }

    .btn-chat-note-action {
        margin-left: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   UNISPACE SOCIAL UI — restrained layout and publication tools
   This final layer intentionally consolidates the visual language
   without removing the original cosmic identity.
═══════════════════════════════════════════════════════════════ */
:root {
    --bg: #080b12;
    --bg2: #0d121c;
    --bg3: #121a27;
    --surface: #101722;
    --surface2: #151e2c;
    --border: #263349;
    --accent: #7c5cfc;
    --accent2: #d65aa8;
    --accent3: #2ec5ce;
    --text: #f5f7fb;
    --text2: #a7b3c5;
    --text3: #718096;
    --radius: 12px;
    --radius-sm: 10px;
    --sidebar-w: 220px;
    --right-w: 238px;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

html {
    color-scheme: dark;
    scrollbar-color: #33435b transparent;
}

body,
.screen {
    min-height: 100dvh;
}

body {
    background: var(--bg);
    font-size: 15px;
    line-height: 1.47;
}

body::before {
    background:
        radial-gradient(ellipse 620px 420px at 10% 8%, rgba(124, 92, 252, 0.08), transparent 72%),
        radial-gradient(ellipse 520px 420px at 90% 75%, rgba(46, 197, 206, 0.055), transparent 72%);
}

body::after {
    opacity: 0.36;
}

#screen-main {
    min-height: 100dvh;
}

.sidebar-left,
.sidebar-right {
    height: 100dvh;
    background: rgba(10, 15, 24, 0.96);
    border-color: rgba(74, 91, 118, 0.34);
    backdrop-filter: blur(16px);
    box-shadow: none;
}

.sidebar-left {
    padding: 20px 14px 16px;
}

.sidebar-right {
    padding: 22px 16px;
    gap: 24px;
}

.brand {
    margin: 0 0 14px;
    padding: 0 8px 18px;
}

.brand::after {
    left: 8px;
    right: 8px;
    background: linear-gradient(90deg, rgba(124, 92, 252, 0.5), transparent);
}

.brand .logo-text {
    font-size: 16px;
}

.brand .logo-icon,
.login-logo .logo-icon {
    color: #a38bff;
    text-shadow: none;
}

.nav-menu {
    gap: 4px;
}

.nav-item {
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 14px;
}

.nav-item::after {
    display: none;
}

.nav-item:hover {
    background: rgba(126, 146, 177, 0.08);
}

.nav-item.active {
    border-color: rgba(124, 92, 252, 0.34);
    background: rgba(124, 92, 252, 0.15);
    box-shadow: inset 3px 0 0 #8f75ff;
}

.sidebar-user {
    padding: 10px;
    margin-top: 12px;
    border-radius: 10px;
    background: #111925;
    border-color: rgba(74, 91, 118, 0.34);
}

.sidebar-logout {
    margin-top: 8px;
    border-radius: 9px;
}

.content-area {
    height: 100dvh;
    background:
        radial-gradient(ellipse 680px 400px at 40% -10%, rgba(124, 92, 252, 0.055), transparent 70%),
        #0b1018;
}

.content-area::before {
    display: none;
}

.tab {
    min-height: 100%;
}

.tab.active {
    animation-duration: 0.18s;
}

.tab-header {
    min-height: 78px;
    padding: 18px 28px 15px;
    gap: 12px 20px;
    background: rgba(11, 16, 24, 0.9);
    border-color: rgba(74, 91, 118, 0.28);
    backdrop-filter: blur(14px);
    box-shadow: none;
}

.tab-header::after {
    display: none;
}

.tab-header-copy {
    gap: 4px;
}

.tab-header h2 {
    font-family: var(--font-body);
    font-size: clamp(23px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--text);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.tab-eyebrow {
    font-size: 10px;
    letter-spacing: 0.12em;
}

.tab-subtitle {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text2);
}

.tab-pills {
    gap: 8px;
}

.tab-pill {
    min-width: 118px;
    padding: 8px 11px;
    border-radius: 9px;
    background: #111925;
    border-color: rgba(74, 91, 118, 0.34);
}

.tab-pill strong {
    font-size: 13px;
}

.mission-grid {
    grid-template-columns: minmax(240px, 1.45fr) repeat(3, minmax(110px, 0.72fr));
    gap: 10px;
    padding: 14px 28px 0;
}

.mission-card {
    min-height: 96px;
    padding: 13px 14px;
    border-radius: 12px;
    border-color: rgba(74, 91, 118, 0.34);
    background: #101722;
    box-shadow: none;
}

.mission-card::before,
.mission-card::after {
    display: none;
}

.mission-card:hover {
    transform: none;
    border-color: rgba(124, 92, 252, 0.42);
    box-shadow: none;
}

.mission-card--hero {
    padding-right: 52px;
}

.mission-card-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border-color: rgba(124, 92, 252, 0.24);
    background: rgba(124, 92, 252, 0.1);
}

.mission-card-icon .ui-icon {
    width: 15px;
    height: 15px;
}

.mission-card-kicker {
    margin-bottom: 3px;
    font-size: 9px;
}

.mission-card-kicker::before {
    display: none;
}

.mission-card h3 {
    margin-bottom: 3px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.35;
}

.mission-card p {
    display: -webkit-box;
    overflow: hidden;
    max-width: 54ch;
    font-size: 12px;
    line-height: 1.42;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mission-card--stat {
    justify-content: center;
    gap: 3px;
}

.mission-card--stat .mission-card-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
}

.mission-card--stat strong,
.mission-card strong {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 700;
}

.mission-stat-label,
.mission-stat-foot {
    font-size: 10px;
    line-height: 1.3;
}

.wall-tools,
.wall-filters,
.wall-search-status,
#tab-wall > .wall-feed {
    width: min(100%, 790px);
    margin-inline: auto;
}

.wall-tools {
    padding: 16px 24px 0;
}

.wall-search-status {
    padding-inline: 24px;
}

.wall-filters {
    padding-inline: 24px;
}

.wall-feed {
    gap: 12px;
    padding: 16px 24px 32px;
}

.post-card,
.post-composer,
.settings-card,
.group-side-card,
.group-admin-toolbar,
.group-page-tools,
.attachments-modal,
.post-viewers-modal {
    border-color: rgba(74, 91, 118, 0.36);
    background: #101722;
    box-shadow: var(--shadow);
}

.post-card {
    padding: 17px 18px;
    border-radius: 12px;
}

.post-card:hover {
    border-color: rgba(124, 92, 252, 0.34);
    box-shadow: var(--shadow);
}

.post-header {
    gap: 10px;
}

.post-avatar {
    width: 40px;
    height: 40px;
    box-shadow: none;
}

.post-author-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.post-author--button,
.post-avatar-click {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.post-author--button:hover {
    color: #b7a8ff;
}

.post-author-mode {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 7px;
    border: 1px solid rgba(124, 92, 252, 0.22);
    border-radius: 7px;
    color: #c7bcff;
    background: rgba(124, 92, 252, 0.09);
    font-size: 10px;
    font-weight: 600;
}

.post-author-mode--anonymous {
    color: #b9c5d6;
    border-color: rgba(167, 179, 197, 0.22);
    background: rgba(167, 179, 197, 0.07);
}

.post-author-mode--group {
    color: #8ce7eb;
    border-color: rgba(46, 197, 206, 0.24);
    background: rgba(46, 197, 206, 0.08);
}

.post-text {
    font-size: 14px;
    line-height: 1.58;
}

.post-image,
.post-video,
.post-image-gallery {
    border-radius: 10px;
    overflow: hidden;
}

.post-actions {
    gap: 4px;
    padding-top: 11px;
}

.post-action-btn {
    min-height: 34px;
    border-radius: 8px;
}

.post-view-action.is-interactive {
    cursor: pointer;
}

.post-view-action.is-interactive:hover {
    color: #8ce7eb;
    background: rgba(46, 197, 206, 0.08);
}

.post-composer {
    padding: 16px;
    border-radius: 12px;
}

.post-composer::before {
    display: none;
}

.post-composer:focus-within {
    border-color: rgba(124, 92, 252, 0.46);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.1);
}

.composer-preferences {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 11px 0 4px;
    padding: 10px;
    border: 1px solid rgba(74, 91, 118, 0.28);
    border-radius: 10px;
    background: rgba(7, 12, 19, 0.44);
}

.composer-preference {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.composer-preference > span {
    color: var(--text3);
    font-size: 11px;
    font-weight: 600;
}

.composer-preference select,
.settings-select-row select,
.attachments-sort select {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 7px 30px 7px 9px;
    border: 1px solid rgba(74, 91, 118, 0.48);
    border-radius: 8px;
    background: #111a27;
    color: var(--text);
    font: 12px var(--font-body);
}

.btn-primary,
.btn-secondary,
.btn-post,
.btn-join,
.filter-btn,
.tag-btn,
.attachments-filter-btn,
.settings-toggle-btn,
.settings-list-btn {
    border-radius: 9px;
}

.btn-primary,
.btn-post {
    background: #7057e8;
    box-shadow: none;
}

.btn-primary:hover,
.btn-post:hover {
    background: #8068f0;
    box-shadow: none;
}

.btn-secondary,
.filter-btn,
.tag-btn,
.attachments-filter-btn {
    background: #111925;
    border-color: rgba(74, 91, 118, 0.42);
}

.filter-btn.active,
.tag-btn.active,
.attachments-filter-btn.active {
    color: #e9e4ff;
    border-color: rgba(124, 92, 252, 0.44);
    background: rgba(124, 92, 252, 0.15);
    box-shadow: none;
}

.btn-attach.is-uploading {
    pointer-events: none;
    color: #a99aff;
    animation: uploadPulse 1s ease-in-out infinite alternate;
}

@keyframes uploadPulse {
    to { opacity: 0.5; }
}

.group-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    padding: 10px 28px 32px;
}

.groups-stats {
    padding: 12px 28px 4px;
}

.group-card {
    min-height: 310px;
    padding: 0;
    gap: 0;
    border-radius: 12px;
    border-color: rgba(74, 91, 118, 0.36);
    background: #101722;
    box-shadow: var(--shadow);
}

.group-card::before {
    display: none;
}

.group-card:hover {
    transform: translateY(-1px);
    border-color: rgba(124, 92, 252, 0.4);
    box-shadow: var(--shadow);
}

.group-card-cover {
    height: 92px;
}

.group-card-body {
    padding: 14px;
    gap: 10px;
}

.group-card-icon {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    flex: 0 0 52px !important;
    border-radius: 11px;
}

.group-card-name {
    font-family: var(--font-body);
    font-size: 16px;
}

.group-card-desc {
    display: -webkit-box;
    min-height: 42px;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.group-card-desc-wrap {
    min-height: 40px;
}

.group-card-rail {
    gap: 7px;
}

.group-card-stat {
    padding: 8px;
    border-radius: 8px;
}

.group-card-stat strong {
    font-size: 12px;
}

.group-card-meta-chip {
    border-radius: 7px;
}

.group-page-hero {
    margin: 16px 28px 0;
    border-radius: 12px;
    border-color: rgba(74, 91, 118, 0.36);
    background: #101722;
    box-shadow: var(--shadow);
}

.group-page-cover {
    min-height: 118px;
    height: 118px;
}

.group-page-cover::before,
.group-page-cover::after,
.group-page-hero::before,
.group-page-hero::after {
    opacity: 0.35;
}

.group-page-hero-body {
    padding: 16px 18px;
}

.group-page-icon {
    width: 64px;
    height: 64px;
    border-radius: 13px;
    font-size: 28px;
    box-shadow: none;
}

.group-page-info h3 {
    font-family: var(--font-body);
    font-size: 20px;
}

.group-page-badge {
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 11px;
}

.group-page-wall {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 248px);
    gap: 14px;
    padding: 16px 28px 32px;
}

.group-page-sidebar {
    max-width: 248px;
    gap: 10px;
}

.group-side-card {
    padding: 15px;
    border-radius: 12px;
}

.group-page-main-column {
    gap: 11px;
}

.group-page-tools {
    padding: 11px;
    border-radius: 11px;
    box-shadow: none;
}

.group-admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(46, 197, 206, 0.26);
    border-radius: 11px;
    background: rgba(46, 197, 206, 0.065);
    box-shadow: none;
}

.group-admin-toolbar-copy,
.group-admin-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.group-admin-toolbar-copy > div {
    display: grid;
    gap: 1px;
}

.group-admin-toolbar-copy strong {
    font-size: 13px;
}

.group-admin-toolbar-copy span:not(.group-admin-toolbar-icon) {
    color: var(--text2);
    font-size: 11px;
}

.group-admin-toolbar-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    color: #8ce7eb;
    background: rgba(46, 197, 206, 0.12);
}

.group-admin-toolbar-icon .ui-icon {
    width: 17px;
    height: 17px;
}

.settings-privacy-form {
    display: grid;
    gap: 9px;
    margin-top: 14px;
}

.settings-grid {
    gap: 12px;
}

.settings-card {
    padding: 17px;
    border-radius: 12px;
}

.settings-card h3 {
    margin: 4px 0 7px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.settings-card p {
    font-size: 13px;
    line-height: 1.52;
}

.settings-toggle-btn {
    padding: 11px 12px;
}

.settings-select-row,
.settings-check-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(148px, 190px);
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(74, 91, 118, 0.3);
    border-radius: 10px;
    background: rgba(7, 12, 19, 0.38);
}

.settings-select-row > span,
.settings-check-row > span {
    display: grid;
    gap: 3px;
}

.settings-select-row strong,
.settings-check-row strong {
    font-size: 13px;
}

.settings-select-row small,
.settings-check-row small {
    color: var(--text3);
    font-size: 11px;
    line-height: 1.4;
}

.settings-check-row input {
    width: 19px;
    height: 19px;
    justify-self: end;
    accent-color: var(--accent);
}

.settings-privacy-save {
    width: fit-content;
    justify-self: end;
}

.attachments-modal {
    width: min(980px, calc(100vw - 32px));
    max-height: min(820px, calc(100dvh - 32px));
    border-radius: 14px;
}

.attachments-modal-toolbar {
    align-items: end;
    gap: 10px;
}

.attachments-sort {
    display: grid;
    min-width: 170px;
    gap: 4px;
    margin-left: auto;
    color: var(--text3);
    font-size: 10px;
    font-weight: 600;
}

.attachments-modal-list {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 11px;
}

.attachment-card {
    border-radius: 11px;
    border-color: rgba(74, 91, 118, 0.34);
    background: #111925;
}

.attachment-card-image,
.attachment-card-video video {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.post-viewers-modal {
    width: min(500px, calc(100vw - 28px));
    max-height: min(680px, calc(100dvh - 28px));
    border-radius: 14px;
}

.post-viewers-body {
    display: grid;
    gap: 10px;
    padding: 4px 18px 18px;
    overflow-y: auto;
}

.post-viewers-summary {
    padding: 10px 12px;
    border: 1px solid rgba(74, 91, 118, 0.32);
    border-radius: 9px;
    color: var(--text2);
    background: rgba(7, 12, 19, 0.42);
    font-size: 12px;
}

.post-viewers-list {
    display: grid;
    gap: 7px;
}

.post-viewer-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 9px;
    border-radius: 9px;
    background: #111925;
}

.post-viewer-copy {
    display: grid;
    gap: 2px;
}

.post-viewer-copy strong {
    font-size: 13px;
}

.post-viewer-copy span {
    color: var(--text3);
    font-size: 11px;
}

.post-viewers-empty {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 16px;
    border: 1px dashed rgba(74, 91, 118, 0.42);
    border-radius: 10px;
    color: var(--text2);
    font-size: 12px;
}

.post-viewers-empty .ui-icon {
    width: 18px;
    height: 18px;
}

.dm-read-state {
    margin-left: 7px;
    color: var(--text3);
    font-size: 10px;
}

.dm-read-state.is-read {
    color: #70dbe1;
}

.modal-overlay {
    backdrop-filter: blur(8px);
}

.modal-card {
    border-radius: 14px;
    border-color: rgba(74, 91, 118, 0.42);
    background: #101722;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #9b87ff;
    outline-offset: 2px;
}

@media (max-width: 1400px) {
    .sidebar-right {
        display: none;
    }
}

@media (max-width: 1120px) {
    .mission-grid {
        grid-template-columns: minmax(230px, 1.3fr) repeat(3, minmax(100px, 0.7fr));
    }

    .group-page-wall {
        grid-template-columns: minmax(0, 1fr);
    }

    .group-page-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }
}

@media (max-width: 900px) {
    .tab-header,
    .mission-grid,
    .group-page-wall {
        padding-left: 20px;
        padding-right: 20px;
    }

    .group-page-hero {
        margin-left: 20px;
        margin-right: 20px;
    }

    .group-grid {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mission-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mission-card--hero {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    #screen-main {
        min-height: 100dvh;
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .content-area {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    .sidebar-left {
        left: 8px;
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        height: 64px;
        padding: 6px;
        border-radius: 14px;
        background: rgba(10, 15, 24, 0.97);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
    }

    .nav-menu {
        gap: 3px;
    }

    .nav-item {
        width: 46px;
        min-width: 46px;
        height: 50px;
        min-height: 50px;
        flex-basis: 46px;
        border-radius: 10px;
    }

    .tab-header {
        min-height: 68px;
        padding: 14px 16px 12px;
    }

    .tab-header h2 {
        font-size: 21px;
    }

    .tab-eyebrow,
    .tab-subtitle,
    .tab-pills {
        display: none;
    }

    .mission-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        padding: 10px 12px 0;
    }

    .mission-card--hero {
        display: none;
    }

    .mission-card {
        min-height: 70px;
        padding: 9px;
    }

    .mission-card--stat .mission-card-icon,
    .mission-stat-foot {
        display: none;
    }

    .mission-card--stat strong,
    .mission-card strong {
        font-size: 20px;
    }

    .mission-stat-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wall-tools {
        padding: 12px 12px 0;
    }

    .wall-search-status {
        padding-inline: 12px;
    }

    .wall-filters {
        padding-inline: 12px;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .wall-feed {
        padding: 12px 10px 24px;
    }

    .post-card {
        padding: 14px;
        border-radius: 11px;
    }

    .post-tag {
        display: none;
    }

    .composer-preferences {
        grid-template-columns: 1fr;
    }

    .composer-preference {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .group-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 10px 12px 24px;
    }

    .groups-stats {
        padding: 10px 12px 2px;
    }

    .group-card {
        min-height: 292px;
    }

    .group-page-hero {
        margin: 10px 10px 0;
    }

    .group-page-cover {
        min-height: 88px;
        height: 88px;
    }

    .group-page-hero-body {
        padding: 13px;
    }

    .group-page-icon {
        width: 54px;
        height: 54px;
    }

    .group-page-wall {
        padding: 11px 10px 24px;
    }

    .group-page-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .group-admin-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .group-admin-toolbar-actions > button {
        flex: 1;
    }

    .settings-select-row,
    .settings-check-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-page {
        padding: 12px 10px 22px;
    }

    .settings-grid {
        gap: 10px;
    }

    .settings-card {
        padding: 14px;
    }

    .settings-card h3 {
        font-size: 17px;
    }

    .settings-check-row input {
        justify-self: start;
    }

    .attachments-modal-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .attachments-sort {
        width: 100%;
        margin-left: 0;
    }

    .attachments-modal-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .post-viewers-body {
        padding-inline: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}