/* ==========================================================================
   ГНОЗИС: Master Stylesheet (Occult Tech / Cyber-Mysticism Design System)
   Естетика: Linear / Vercel / Raycast Dark Mode
   ========================================================================== */

/* 1. Скидання та глобальні стилі */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, html.admin-bar, body, body.admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#wpadminbar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.gnozis-dark-mode {
    background-color: var(--bg-deep);
    color: var(--gnozis-text-secondary);
    font-family: var(--gnozis-font-body);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

a {
    color: var(--accent-cyan);
    text-decoration: none;
    transition: var(--gnozis-transition);
}

a:hover {
    color: #7dd3fc;
    text-shadow: 0 0 10px var(--accent-cyan-glow);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gnozis-font-heading);
    color: var(--gnozis-text-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* 2. Космічний сакральний фон та містичні аури */
.gnozis-ambient-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.gnozis-ambient-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.glow-top-left {
    top: -250px;
    left: -200px;
    width: 800px;
    height: 800px;
    /* Subtle cobalt ambient — Deep Abyss */
    background: radial-gradient(circle, rgba(96, 120, 144, 0.12) 0%, rgba(16, 24, 32, 0) 70%);
    filter: blur(140px);
}

.glow-bottom-right {
    bottom: -200px;
    right: -200px;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(120, 152, 184, 0.08) 0%, rgba(0, 16, 32, 0) 70%);
    filter: blur(140px);
}

.gnozis-constellation-layer {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.35;
}

.gnozis-page-shell {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 28px 80px;
}

/* 3. Універсальні компоненти карток та кнопок */
.gnozis-card {
    background: var(--gnozis-bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-lg);
    box-shadow: var(--shadow-card);
    position: relative;
    transition: var(--gnozis-transition);
}

.gnozis-card:hover {
    border-color: var(--border-hover);
    background: var(--gnozis-bg-card-hover);
}

/* Primary CTA — Steel Blue #607890 (мат, без neon) */
.btn-gradient-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent-primary);
    color: var(--text-primary) !important;
    font-family: var(--gnozis-font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: var(--gnozis-radius-md);
    border: 1px solid rgba(96, 120, 144, 0.55);
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.40);
    transition: var(--gnozis-transition);
    letter-spacing: 0.01em;
}

.btn-gradient-primary:hover {
    background: var(--accent-bright);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.50);
    transform: translateY(-1px);
}

.btn-gradient-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
}

/* Secondary CTA — outlined steel border + frosted text */
.btn-outline-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(26, 43, 60, 0.50);
    color: var(--text-secondary) !important;
    font-family: var(--gnozis-font-heading);
    font-size: 0.88rem;
    font-weight: 500;
    padding: 10px 18px;
    border-radius: var(--gnozis-radius-md);
    border: 1px solid var(--border-input);
    cursor: pointer;
    transition: var(--gnozis-transition);
}

.btn-outline-glass:hover {
    background: rgba(96, 120, 144, 0.10);
    border-color: var(--border-hover);
    color: var(--text-primary) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
    transform: translateY(-1px);
}

.btn-block {
    width: 100%;
}

/* 4. Адаптивна 3-колонкова архітектура макета */
.gnozis-layout-3col {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 350px;
    gap: 24px;
    align-items: start;
}

.gnozis-col-left {
    position: sticky;
    top: 24px;
}

.gnozis-col-right {
    position: sticky;
    top: 24px;
}

.gnozis-sidebar-card {
    background: var(--gnozis-bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-lg);
    box-shadow: var(--shadow-card);
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ==========================================================================
   5. ЛІВИЙ САЙДБАР (Navigation & Identity)
   ========================================================================== */

/* Брендинг платформи */
.gnozis-brand-box {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--gnozis-border-subtle);
}

.gnozis-brand-link {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.gnozis-brand-sigil-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gnozis-sigil-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(96, 120, 144, 0.45));
}

.sigil-glow {
    position: absolute;
    inset: 4px;
    background: radial-gradient(circle, rgba(96, 120, 144, 0.30) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(6px);
}

.gnozis-brand-titles {
    display: flex;
    flex-direction: column;
}

.gnozis-brand-titles .gnozis-title {
    font-family: var(--gnozis-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gnozis-text-primary);
    line-height: 1.2;
}

.gnozis-brand-titles .gnozis-slogan {
    font-size: 0.72rem;
    color: var(--gnozis-text-muted);
    letter-spacing: 0.02em;
    margin-top: 3px;
    white-space: nowrap;
}

/* Меню навігації */
.gnozis-nav-menu .nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gnozis-nav-menu .nav-item {
    position: relative;
}

.gnozis-nav-menu .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--gnozis-radius-md);
    color: var(--gnozis-text-muted);
    font-size: 0.88rem;
    font-weight: 500;
    transition: var(--gnozis-transition);
    position: relative;
    border: 1px solid transparent;
}

.gnozis-nav-menu .nav-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: inherit;
    flex-shrink: 0;
}

.gnozis-nav-menu .nav-label {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gnozis-nav-menu .nav-link:hover {
    color: var(--gnozis-text-primary);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Активний стан навігації — subtle cobalt */
.gnozis-nav-menu .nav-item.active .nav-link {
    color: var(--gnozis-text-primary);
    background: rgba(96, 120, 144, 0.10);
    border: 1px solid rgba(96, 120, 144, 0.28);
    box-shadow: none;
}

.gnozis-nav-menu .nav-item.active .nav-active-glow {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 4px 4px 0;
    background: var(--accent-cobalt);
    box-shadow: 0 0 8px var(--accent-cobalt-glow);
}

/* Бейджики навігації */
.nav-badge-pill {
    background: rgba(120, 152, 184, 0.15);
    color: var(--accent-cyan);
    border: 1px solid rgba(120, 152, 184, 0.35);
    border-radius: var(--gnozis-radius-full);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    box-shadow: 0 0 8px rgba(120, 152, 184, 0.2);
}

.nav-badge-count {
    background: rgba(120, 152, 184, 0.18);
    color: var(--accent-cyan);
    border: 1px solid rgba(120, 152, 184, 0.4);
    border-radius: var(--gnozis-radius-full);
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0 6px;
    box-shadow: 0 0 8px rgba(120, 152, 184, 0.25);
}

.nav-badge-count.is-empty,
.nav-badge-count:empty {
    display: none !important;
}

/* Нижній блок сайдбара */
.gnozis-sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--gnozis-border-subtle);
}

.gnozis-section-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: var(--gnozis-text-tertiary);
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Мовний перемикач (5 мов) */
.gnozis-lang-switcher {
    position: relative;
    width: 100%;
}

.gnozis-lang-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(16, 26, 38, 0.85);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-md);
    color: var(--gnozis-text-secondary);
    font-family: var(--gnozis-font-body);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--gnozis-transition);
}

.gnozis-lang-btn:hover {
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--gnozis-text-primary);
}

.gnozis-lang-btn .lang-flag,
.gnozis-lang-list li .flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.gnozis-flag-svg {
    display: block;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
    object-fit: cover;
}

.gnozis-lang-btn .lang-code {
    font-weight: 600;
    color: var(--gnozis-text-primary);
    flex-grow: 1;
    text-align: left;
    margin-left: 4px;
}

.gnozis-lang-btn .lang-arrow-icon {
    color: var(--gnozis-text-muted);
    transition: transform 0.2s;
}

.gnozis-lang-switcher.open .lang-arrow-icon {
    transform: rotate(180deg);
}

.gnozis-lang-list {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #0C1322;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-card);
    border-radius: var(--gnozis-radius-md);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(96, 120, 144, 0.15);
    list-style: none;
    padding: 6px;
    display: none;
    z-index: 100;
}

.gnozis-lang-switcher.open .gnozis-lang-list {
    display: block;
    animation: fadeInDropdown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.gnozis-lang-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--gnozis-radius-sm);
    color: var(--gnozis-text-secondary);
    font-size: 0.82rem;
    transition: var(--gnozis-transition-fast);
}

.gnozis-lang-list li a:hover,
.gnozis-lang-list li.active a {
    background: rgba(96, 120, 144, 0.16);
    color: var(--gnozis-text-primary);
}

.gnozis-lang-list li .code {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--gnozis-text-muted);
    font-weight: 600;
}

/* Компактна картка користувача */
.gnozis-current-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--gnozis-border-subtle);
    border-radius: var(--gnozis-radius-md);
}

.user-avatar-wrap {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.user-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-card);
}

.user-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--gnozis-bg-deep);
}

.user-status-dot.online {
    background: #10B981;
    box-shadow: 0 0 8px #10B981;
}

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

.user-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--gnozis-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-rank {
    font-size: 0.72rem;
    color: var(--gnozis-text-muted);
}

.btn-login-quick {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-cyan);
    padding: 5px 12px;
    border-radius: var(--gnozis-radius-sm);
    background: rgba(120, 152, 184, 0.1);
    border: 1px solid rgba(120, 152, 184, 0.3);
    transition: var(--gnozis-transition);
}

.btn-login-quick:hover {
    background: rgba(120, 152, 184, 0.2);
    box-shadow: 0 0 10px rgba(120, 152, 184, 0.3);
    color: #E0E8F0;
}

.btn-logout {
    color: var(--gnozis-text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: var(--gnozis-radius-sm);
    transition: var(--gnozis-transition);
}

.btn-logout:hover {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.1);
}

/* ==========================================================================
   6. ЦЕНТРАЛЬНА КОЛОНКА (Community Feed & Interactive Core)
   ========================================================================== */

.gnozis-col-center {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Блок створення допису (Composer) */
.gnozis-composer-card {
    padding: 18px 20px;
}

.composer-top {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.composer-avatar-wrap {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-card);
}

.composer-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.composer-textarea {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--gnozis-text-primary);
    font-family: var(--gnozis-font-body);
    font-size: 0.92rem;
    line-height: 1.5;
    resize: none;
    min-height: 44px;
    padding-top: 8px;
}

.composer-textarea::placeholder {
    color: #506070;
}

.composer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--gnozis-border-subtle);
}

.composer-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.composer-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--gnozis-radius-md);
    color: var(--gnozis-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--gnozis-transition);
}

.composer-tool-btn:hover {
    color: var(--gnozis-text-primary);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-card);
}

.composer-privacy-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-full);
    color: var(--gnozis-text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--gnozis-transition);
}

.composer-privacy-pill:hover {
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--gnozis-text-primary);
}

.btn-publish-post {
    padding: 8px 18px;
    font-size: 0.84rem;
}

.btn-publish-post .btn-plus {
    font-size: 1.1rem;
    line-height: 1;
    margin-left: 2px;
}

/* ==========================================================================
   Панель створення опитування в Composer (Cyber-Mystic Poll Creator)
   ========================================================================== */
.composer-poll-box {
    margin-top: 14px;
    padding: 14px 16px;
    background: linear-gradient(145deg, rgba(14, 22, 38, 0.75) 0%, rgba(8, 13, 24, 0.9) 100%);
    border: 1px solid rgba(120, 152, 184, 0.22);
    border-radius: var(--gnozis-radius-md, 12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: fadeInPollDrawer 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInPollDrawer {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.poll-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(120, 152, 184, 0.12);
}

.poll-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.poll-icon-wrap {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(120, 152, 184, 0.12);
    border: 1px solid rgba(120, 152, 184, 0.28);
    color: var(--accent-cyan, #7898b8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(120, 152, 184, 0.15);
}

.poll-box-title {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--gnozis-text-primary, #e2e8f0);
    margin: 0;
    letter-spacing: 0.02em;
}

.btn-close-poll {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-close-poll:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
    transform: rotate(90deg);
}

.poll-options-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.poll-option-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    animation: fadeInPollDrawer 0.2s ease-out;
}

.poll-option-idx {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(120, 152, 184, 0.1);
    border: 1px solid rgba(120, 152, 184, 0.25);
    color: var(--accent-cyan, #7898b8);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.poll-option-input-wrap .poll-input {
    flex-grow: 1;
    height: 38px;
    background: #090e1a;
    border: 1px solid rgba(120, 152, 184, 0.22);
    border-radius: var(--gnozis-radius-sm, 8px);
    color: #e2e8f0;
    font-size: 0.85rem;
    padding: 0 12px;
    transition: all 0.2s ease;
    outline: none;
    font-family: inherit;
}

.poll-option-input-wrap .poll-input:focus {
    border-color: rgba(120, 152, 184, 0.6);
    box-shadow: 0 0 12px rgba(120, 152, 184, 0.25);
    background: #0d1527;
}

.poll-option-input-wrap .poll-input::placeholder {
    color: #475569;
}

.btn-remove-poll-option {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.btn-remove-poll-option:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.poll-box-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(120, 152, 184, 0.15);
}

.btn-add-poll-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(120, 152, 184, 0.08);
    border: 1px dashed rgba(120, 152, 184, 0.35);
    border-radius: var(--gnozis-radius-sm, 8px);
    color: var(--accent-cyan, #7898b8);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-poll-option:hover {
    background: rgba(120, 152, 184, 0.18);
    border-color: rgba(120, 152, 184, 0.6);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(120, 152, 184, 0.2);
}

.btn-add-poll-option .plus-icon {
    font-size: 0.95rem;
    font-weight: 700;
}

.poll-options-limit-hint {
    font-size: 0.72rem;
    color: #64748b;
    user-select: none;
}

/* Активна кнопка виклику опитування в панелі інструментів */
.composer-tool-btn.active {
    color: var(--accent-cyan, #7898b8);
    background: rgba(120, 152, 184, 0.15);
    border-color: rgba(120, 152, 184, 0.35);
    box-shadow: 0 0 8px rgba(120, 152, 184, 0.2);
}

/* ==========================================================================
   Прев'ю медіафайлів у Composer (Фото / Відео)
   ========================================================================== */
.composer-media-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(145deg, rgba(14, 22, 38, 0.75) 0%, rgba(8, 13, 24, 0.9) 100%);
    border: 1px solid rgba(120, 152, 184, 0.22);
    border-radius: var(--gnozis-radius-md, 12px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    animation: fadeInPollDrawer 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.composer-media-preview-item {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 8px;
    overflow: hidden;
    background: #090e1a;
    border: 1px solid rgba(120, 152, 184, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.composer-media-preview-item:hover {
    transform: translateY(-2px);
    border-color: var(--accent-cyan, #7898b8);
}

.preview-media-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.preview-media-inner img,
.preview-media-inner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.preview-video-tag {
    position: absolute;
    bottom: 4px;
    left: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(0, 0, 0, 0.75);
    color: #38bdf8;
    padding: 1px 4px;
    border-radius: 4px;
    pointer-events: none;
}

.btn-remove-media-item {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
    z-index: 2;
}

.btn-remove-media-item:hover {
    background: #ef4444;
    border-color: #ef4444;
    transform: scale(1.1);
}

.media-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 9px;
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
    color: #ffffff;
    margin-left: 2px;
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.4);
}

/* ==========================================================================
   Медіа галерея у постах (Post Media Gallery & Videos)
   ========================================================================== */
.post-media-gallery {
    margin-top: 14px;
    border-radius: 12px;
    overflow: hidden;
    gap: 8px;
}

.post-media-gallery.media-grid-1 {
    display: block;
}

.post-media-gallery.media-grid-1 .post-media-item {
    max-height: 520px;
    border-radius: 10px;
    overflow: hidden;
    background: #090e1a;
}

.post-media-gallery.media-grid-1 .post-media-img {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    background: #050912;
    display: block;
}

.post-media-gallery.media-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.post-media-gallery.media-grid-2 .post-media-item {
    height: 240px;
}

.post-media-gallery.media-grid-3 {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: repeat(2, 140px);
}

.post-media-gallery.media-grid-3 .post-media-item:first-child {
    grid-row: span 2;
    height: 100%;
}

.post-media-gallery.media-grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 180px);
}

.post-media-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #090e1a;
    border: 1px solid rgba(120, 152, 184, 0.15);
}

.post-media-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.post-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.post-media-item:hover .post-media-img {
    transform: scale(1.025);
    filter: brightness(1.06);
}

.post-media-videos {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.post-video-item {
    border-radius: 12px;
    overflow: hidden;
    background: #050912;
    border: 1px solid rgba(120, 152, 184, 0.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.post-video-player {
    width: 100%;
    max-height: 480px;
    display: block;
    background: #000;
    outline: none;
}

/* Лайтбокс перегляду повнорозмірних фото */
.gnozis-media-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gnozis-media-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 8, 16, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lightbox-content {
    position: relative;
    z-index: 2;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(14, 165, 233, 0.25);
    border: 1px solid rgba(120, 152, 184, 0.3);
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: -10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lightbox-close:hover {
    background: #ef4444;
    border-color: #ef4444;
    transform: scale(1.1);
}

/* Стрічка дописів */
.gnozis-feed-stream {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Картка допису (Post Card) */
.gnozis-post-card {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.post-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.post-author-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.author-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.author-ethereal-halo {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 43, 60, 0.4) 0%, transparent 70%);
    filter: blur(4px);
    pointer-events: none;
}

.author-ethereal-halo.halo-cyan {
    background: radial-gradient(circle, rgba(120, 152, 184, 0.4) 0%, transparent 70%);
}

.author-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.author-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.author-name {
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--gnozis-text-primary);
}

.rank-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: var(--gnozis-radius-xs);
    text-transform: uppercase;
}

.rank-magister {
    background: rgba(26, 43, 60, 0.18);
    color: #A0B0C0;
    border: 1px solid rgba(26, 43, 60, 0.4);
    box-shadow: 0 0 10px rgba(26, 43, 60, 0.2);
}

.rank-adept {
    background: rgba(120, 152, 184, 0.15);
    color: #BAE6FD;
    border: 1px solid rgba(120, 152, 184, 0.35);
    box-shadow: 0 0 10px rgba(120, 152, 184, 0.2);
}

.post-time {
    font-size: 0.78rem;
    color: var(--gnozis-text-tertiary);
}

/* ==========================================================================
   Опції допису (3 крапки, Редагування, Видалення)
   ========================================================================== */
.post-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.post-options-dropdown-wrap {
    position: relative;
}

.post-options-btn {
    background: transparent;
    border: none;
    color: var(--gnozis-text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--gnozis-radius-sm, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--gnozis-transition);
}

.post-options-btn:hover,
.post-options-dropdown-wrap.active .post-options-btn {
    color: var(--gnozis-text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.post-options-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 170px;
    background: #0c1424;
    border: 1px solid rgba(120, 152, 184, 0.25);
    border-radius: var(--gnozis-radius-md, 12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(120, 152, 184, 0.1);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.96);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.post-options-dropdown-wrap.active .post-options-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.post-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--gnozis-text-primary, #e2e8f0);
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    font-family: inherit;
}

.post-menu-item:hover {
    background: rgba(120, 152, 184, 0.14);
    color: var(--accent-cyan, #7898b8);
}

.post-menu-item.item-danger {
    color: #f87171;
}

.post-menu-item.item-danger:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* Індикатор редагування допису */
.post-edited-indicator {
    font-size: 0.74rem;
    color: var(--gnozis-text-muted, #64748b);
    font-style: italic;
    margin-left: 2px;
}

/* Інлайн редактор допису */
.post-inline-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0 12px;
    animation: fadeInPollDrawer 0.2s ease;
}

.post-edit-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 14px;
    background: rgba(10, 16, 30, 0.95);
    border: 1px solid rgba(120, 152, 184, 0.35);
    border-radius: var(--gnozis-radius-md, 10px);
    color: var(--gnozis-text-primary, #f1f5f9);
    font-size: 0.94rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.post-edit-textarea:focus {
    border-color: rgba(120, 152, 184, 0.7);
    box-shadow: 0 0 12px rgba(120, 152, 184, 0.25);
}

.post-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.post-edit-actions button {
    padding: 6px 14px;
    font-size: 0.82rem;
    border-radius: var(--gnozis-radius-sm, 8px);
    cursor: pointer;
}

/* Бейдж поширеного допису */
.post-shared-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-bottom: 10px;
    background: rgba(120, 152, 184, 0.12);
    border: 1px solid rgba(120, 152, 184, 0.25);
    border-radius: var(--gnozis-radius-full, 20px);
    color: var(--accent-cyan, #7898b8);
    font-size: 0.8rem;
    font-weight: 500;
    transition: var(--gnozis-transition);
}

.post-shared-badge svg {
    color: var(--accent-cyan, #7898b8);
    flex-shrink: 0;
}

.post-text-body {
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--gnozis-text-secondary);
}

/* Інтерактивне Опитування (Poll Widget) */
.gnozis-poll-widget {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 4px;
}

.poll-option-row {
    position: relative;
    border-radius: var(--gnozis-radius-md);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--gnozis-border-subtle);
    padding: 12px 16px;
    cursor: pointer;
    transition: var(--gnozis-transition);
}

.poll-option-row:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

/* Poll selected — cobalt glow */
.poll-option-row.selected-glow {
    border-color: rgba(96, 120, 144, 0.50);
    box-shadow: 0 0 20px -5px rgba(96, 120, 144, 0.30);
}

.poll-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    border-radius: var(--gnozis-radius-md) 0 0 var(--gnozis-radius-md);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Провідна смуга опитування: Electric Cobalt */
.fill-glow-violet {
    background: linear-gradient(90deg, rgba(96, 120, 144, 0.65) 0%, rgba(56, 130, 246, 0.38) 100%);
    box-shadow: inset 0 0 12px rgba(96, 120, 144, 0.30);
}

.fill-dark-indigo {
    background: rgba(96, 120, 144, 0.16);
}

.fill-dark-cyan {
    background: rgba(120, 152, 184, 0.14);
}

.poll-content-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.88rem;
    font-weight: 500;
}

.poll-content-inner .poll-text {
    color: var(--gnozis-text-primary);
}

.poll-content-inner .poll-stat {
    color: var(--gnozis-text-muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

/* Медіа-фрейм допису (Обсидіанове дзеркало) */
.post-media-frame {
    position: relative;
    border-radius: var(--gnozis-radius-md);
    overflow: hidden;
    max-height: 260px;
    border: 1px solid var(--gnozis-border-card);
    background: #001020;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-media-img {
    width: 100%;
    height: 100%;
    max-height: 260px;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.media-ambient-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(120, 152, 184, 0.15) 0%, transparent 70%);
    filter: blur(20px);
    z-index: 1;
}

/* Панель реакцій та статистики */
.post-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--gnozis-border-subtle);
}

.post-reactions-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.reaction-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--gnozis-border-subtle);
    border-radius: var(--gnozis-radius-full);
    color: var(--gnozis-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--gnozis-transition);
}

.reaction-pill-btn:hover {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.35);
    color: var(--gnozis-text-primary);
    transform: translateY(-1px);
}

/* Reaction pill active — Flame Aura */
.reaction-pill-btn.active,
.reaction-pill-super.active {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.60);
    color: #FDE68A;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.28);
}

.reaction-label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.reaction-emoji {
    font-size: 1rem;
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reaction-pill-btn:hover .reaction-emoji {
    transform: scale(1.2) rotate(6deg);
}

.post-stats-bar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.post-stats-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--gnozis-text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    transition: var(--gnozis-transition);
}

.post-stats-link:hover {
    color: var(--gnozis-text-primary);
}

/* Comment thread border — cobalt */
.post-comments-thread {
    margin-top: 14px;
    padding-left: 16px;
    border-left: 1px solid rgba(96, 120, 144, 0.28);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.comment-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 0;
}

.comment-avatar-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-card);
}

.comment-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-bubble {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--gnozis-border-subtle);
    border-radius: var(--gnozis-radius-md);
    padding: 10px 14px;
    flex-grow: 1;
}

.comment-author-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.comment-author-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gnozis-text-primary);
}

.comment-time {
    font-size: 0.72rem;
    color: var(--gnozis-text-tertiary);
}

.comment-text {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--gnozis-text-secondary);
    margin: 0;
}

/* Поле швидкої відповіді */
.comment-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px !important;
    padding-top: 2px;
}

.comment-input-field {
    flex-grow: 1;
    background: rgba(16, 26, 38, 0.7);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-full);
    padding: 8px 16px;
    color: var(--gnozis-text-primary);
    font-family: var(--gnozis-font-body);
    font-size: 0.84rem;
    outline: none;
    transition: var(--gnozis-transition);
}

/* Comment input focus — cobalt */
.comment-input-field:focus {
    border-color: rgba(96, 120, 144, 0.50);
    box-shadow: 0 0 12px rgba(96, 120, 144, 0.22);
}

.comment-input-field::placeholder {
    color: #506070;
}

/* Send comment btn — cobalt */
.btn-send-comment {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(96, 120, 144, 0.20);
    border: 1px solid rgba(96, 120, 144, 0.45);
    color: var(--gnozis-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--gnozis-transition);
}

.btn-send-comment:hover {
    background: var(--accent-cobalt);
    color: #E0E8F0;
    box-shadow: 0 0 14px rgba(96, 120, 144, 0.50);
}

/* ==========================================================================
   7. ПРАВИЙ САЙДБАР (Enhanced E-Commerce Showcase + Celestial Widgets)
   ========================================================================== */

.gnozis-right-sticky {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Головна картка Артефакту Дня */
.gnozis-shop-showcase-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #0d1522;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--gnozis-radius-lg, 16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.shop-widget-header {
    margin-bottom: 2px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.shop-widget-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
    width: 100%;
}

.shop-header-title-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.shop-header-sigil {
    color: #38bdf8;
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
}

.shop-header-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.shop-hit-badge,
.badge-rarity {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 9999px;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 7px;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.15);
}

.shop-header-link-all,
.link-view-all {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.74rem;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    transition: all 0.2s ease;
}

.shop-header-link-all:hover,
.link-view-all:hover {
    color: #38bdf8;
    transform: translateX(2px);
}

/* Фрейм зображення товару */
.featured-artifact-preview {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.artifact-svg-frame {
    position: relative;
    width: 100%;
    min-height: 200px;
    max-height: 220px;
    border-radius: var(--gnozis-radius-md, 12px);
    overflow: hidden;
    background: radial-gradient(circle at 50% 40%, rgba(56, 189, 248, 0.1) 0%, rgba(15, 23, 42, 0.6) 60%, rgba(10, 15, 26, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.5);
}

.artifact-showcase-img {
    max-width: 100%;
    max-height: 170px;
    width: auto;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
    transition: transform 0.3s ease;
}

.featured-img-link:hover .artifact-showcase-img {
    transform: scale(1.06);
}

/* Ambient glow */
.artifact-ambient-cobalt-glow,
.artifact-ambient-violet-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.15) 0%, transparent 65%);
    pointer-events: none;
    z-index: 1;
}

.artifact-meta-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.artifact-title {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--gnozis-text-primary);
    line-height: 1.35;
}

.artifact-description {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--gnozis-text-muted);
}

/* Ціна та мультивалютний перемикач */
.artifact-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--gnozis-border-subtle);
    border-radius: var(--gnozis-radius-md);
}

.price-box {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.price-label {
    font-size: 0.78rem;
    color: var(--gnozis-text-tertiary);
}

.price-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: -0.01em;
}

.currency-pills-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 16, 32, 0.6);
    padding: 2px;
    border-radius: var(--gnozis-radius-sm);
    border: 1px solid var(--gnozis-border-subtle);
}

.currency-pill {
    background: transparent;
    border: none;
    color: var(--gnozis-text-tertiary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--gnozis-transition-fast);
}

/* Currency pill active — cobalt */
.currency-pill.active {
    background: rgba(96, 120, 144, 0.35);
    color: #E0E8F0;
    box-shadow: 0 0 8px rgba(96, 120, 144, 0.45);
}

/* Секція кнопок CTA артефакту */
.artifact-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

.artifact-cta-grid .btn-buy-instant {
    padding: 9px 12px;
    font-size: 0.82rem;
}

.artifact-cta-grid .btn-add-cart {
    padding: 9px 12px;
    font-size: 0.82rem;
}

/* Міні-вітрина додаткових артефактів (Компактні картки 2 & 3) */
.shop-secondary-artifacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--gnozis-border-subtle);
}

.artifact-mini-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--gnozis-border-subtle);
    border-radius: var(--gnozis-radius-md);
    transition: var(--gnozis-transition);
}

.artifact-mini-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.mini-thumb {
    width: 38px;
    height: 38px;
    border-radius: var(--gnozis-radius-sm);
    overflow: hidden;
    background: #101820;
    border: 1px solid var(--gnozis-border-card);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-thumb img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.mini-info {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mini-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gnozis-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-price {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--accent-cyan);
}

.btn-mini-add {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-sm);
    color: var(--gnozis-text-secondary);
    padding: 6px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: var(--gnozis-transition);
}

/* Mini cart button hover — cobalt */
.btn-mini-add:hover {
    background: rgba(96, 120, 144, 0.20);
    border-color: rgba(96, 120, 144, 0.45);
    color: #E0E8F0;
}

/* Віджети: Фаза Ефіру та Провідники Знання */
.gnozis-mystic-widget {
    padding: 18px 20px;
}

.widget-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.widget-chevron {
    color: var(--accent-cyan);
    font-size: 1.2rem;
    line-height: 1;
}

.widget-sigil {
    color: var(--accent-violet-light);
    font-size: 0.9rem;
}

.widget-title-glow {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent-cyan);
    text-shadow: 0 0 10px rgba(120, 152, 184, 0.35);
}

.widget-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gnozis-text-primary);
}

/* Віджет Місяця */
.lunar-content-box {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lunar-moon-visual {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lunar-crescent-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(120, 152, 184, 0.5));
}

.lunar-cyan-aura {
    position: absolute;
    inset: 4px;
    background: radial-gradient(circle, rgba(120, 152, 184, 0.3) 0%, transparent 70%);
    filter: blur(8px);
    pointer-events: none;
}

.lunar-info-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lunar-phase-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gnozis-text-primary);
}

.lunar-phase-text {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--gnozis-text-muted);
}

/* Віджет Провідників Знання */
.mentors-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mentor-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--gnozis-radius-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--gnozis-border-subtle);
    transition: var(--gnozis-transition);
}

.mentor-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.mentor-avatar-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.mentor-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mentor-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.mentor-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--gnozis-text-primary);
}

.mentor-role {
    font-size: 0.72rem;
    color: var(--gnozis-text-muted);
}

.btn-mentor-connect {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-sm);
    color: var(--accent-cyan);
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--gnozis-transition);
}

.btn-mentor-connect:hover {
    background: rgba(120, 152, 184, 0.15);
    border-color: rgba(120, 152, 184, 0.4);
    box-shadow: 0 0 10px rgba(120, 152, 184, 0.25);
}

/* ==========================================================================
   8. МОДАЛЬНЕ ВІКНО «КУПИТИ В 1 КЛІК» ТА DRAWER CART
   ========================================================================== */

.gnozis-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gnozis-modal.open {
    opacity: 1;
    pointer-events: auto;
}

.gnozis-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 10, 20, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Modal dialog — cobalt border, very dark bg */
.gnozis-modal-dialog {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    background: #102030;
    border: 1px solid rgba(96, 120, 144, 0.35);
    border-radius: var(--gnozis-radius-xl);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 40px rgba(96, 120, 144, 0.18);
    padding: 26px;
    transform: translateY(12px) scale(0.97);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gnozis-modal.open .gnozis-modal-dialog {
    transform: translateY(0) scale(1);
}

.gnozis-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-sigil {
    color: var(--accent-cyan);
    font-size: 1.1rem;
}

.modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gnozis-text-primary);
}

.gnozis-modal-close {
    background: transparent;
    border: none;
    color: var(--gnozis-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--gnozis-radius-sm);
    transition: var(--gnozis-transition);
}

.gnozis-modal-close:hover {
    color: var(--gnozis-text-primary);
    background: rgba(255, 255, 255, 0.08);
}

/* Modal product notice — cobalt */
.modal-product-notice {
    padding: 10px 14px;
    background: rgba(96, 120, 144, 0.12);
    border: 1px solid rgba(96, 120, 144, 0.32);
    border-radius: var(--gnozis-radius-md);
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.modal-product-notice .notice-label {
    font-size: 0.72rem;
    color: var(--gnozis-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.modal-product-notice strong {
    font-size: 0.88rem;
    color: #C0D0E0;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.form-group label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--gnozis-text-secondary);
}

.gnozis-input-modal {
    width: 100%;
    background: rgba(16, 26, 38, 0.8);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-md);
    padding: 10px 14px;
    color: var(--gnozis-text-primary);
    font-family: var(--gnozis-font-body);
    font-size: 0.88rem;
    outline: none;
    transition: var(--gnozis-transition);
}

/* Modal input focus — cobalt */
.gnozis-input-modal:focus {
    border-color: rgba(96, 120, 144, 0.55);
    box-shadow: 0 0 12px rgba(96, 120, 144, 0.22);
}

/* Drawer Cart (Висувний кошик) */
.gnozis-cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 100010;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0.25s ease;
}

.gnozis-cart-drawer.open {
    pointer-events: auto;
    visibility: visible;
}

.gnozis-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.gnozis-cart-drawer.open .gnozis-drawer-overlay {
    opacity: 1;
}

/* Drawer panel — стильна висувна панель */
.gnozis-cart-drawer-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background: #0f172a;
    border-left: 1px solid #1e293b;
    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
}

.gnozis-cart-drawer.open .gnozis-cart-drawer-inner {
    transform: translateX(0);
}

.gnozis-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #111827;
    border-bottom: 1px solid #1e293b;
}

.drawer-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-sigil {
    font-size: 1.2rem;
}

.drawer-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.drawer-badge {
    background: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
}

.gnozis-drawer-close {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 1.1rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.gnozis-drawer-close:hover {
    color: #f1f5f9;
    background: #1e293b;
}

.gnozis-drawer-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
}

.gnozis-drawer-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gnozis-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #111827;
    border: 1px solid #1e293b;
    border-radius: 10px;
    transition: border-color 0.15s ease;
}

.gnozis-drawer-item:hover {
    border-color: #334155;
}

.item-thumb {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    overflow: hidden;
    background: #0b101b;
    border: 1px solid #1e293b;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-thumb img {
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
    object-fit: cover !important;
    display: block !important;
}

.item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.item-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-price {
    font-size: 0.84rem;
    font-weight: 600;
    color: #94a3b8;
}

.item-qty {
    font-size: 0.78rem;
    color: #64748b;
}

.btn-drawer-remove-item {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.btn-drawer-remove-item:hover {
    color: #f87171;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
}

.gnozis-drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 200px;
    gap: 10px;
    color: #64748b;
}

.empty-sigil {
    font-size: 2.2rem;
}

.gnozis-drawer-empty h5 {
    color: #e2e8f0;
    font-size: 1rem;
    margin: 0;
}

.gnozis-drawer-empty p {
    font-size: 0.85rem;
    max-width: 260px;
    margin: 0 auto;
}

.gnozis-drawer-footer {
    padding: 16px 20px;
    border-top: 1px solid #1e293b;
    background: #111827;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drawer-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.92rem;
    color: #94a3b8;
}

.drawer-total-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f1f5f9;
}

.drawer-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    background: #1e293b;
    border: 1px solid #334155;
    color: #f1f5f9;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.drawer-checkout-btn:hover {
    background: #24344d;
    border-color: #475569;
    color: #ffffff;
}

/* ==========================================================================
   9. СТОРІНКА КАТАЛОГУ КРАМНИЦІ (/shop/) ТА НАВІГАЦІЯ
   ========================================================================== */

/* Верхня навігаційна панель повернення до соцмережі */
/* Shop navbar — very dark, barely visible */
.gnozis-shop-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    background: rgba(0, 16, 32, 0.90);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-default);
    border-radius: var(--gnozis-radius-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: 24px;
    position: sticky;
    top: 20px;
    z-index: 40;
}

.shop-nav-left {
    display: flex;
    align-items: center;
}

.btn-back-to-network {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gnozis-text-primary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-md);
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--gnozis-transition);
}

/* Shop back button hover — cobalt */
.btn-back-to-network:hover {
    background: rgba(96, 120, 144, 0.16);
    border-color: rgba(96, 120, 144, 0.48);
    color: #E0E8F0;
    box-shadow: 0 0 16px rgba(96, 120, 144, 0.30);
    transform: translateX(-3px);
}

.btn-back-to-network svg {
    transition: transform 0.2s;
}

.btn-back-to-network:hover svg {
    transform: translateX(-2px);
}

.shop-nav-center {
    display: flex;
    align-items: center;
}

.shop-nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.shop-nav-brand .brand-sigil {
    color: var(--accent-cyan);
    font-size: 1.1rem;
    text-shadow: 0 0 8px rgba(120, 152, 184, 0.4);
}

.shop-nav-brand .brand-name {
    font-family: var(--gnozis-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gnozis-text-primary);
}

.shop-nav-brand .brand-badge {
    background: rgba(120, 152, 184, 0.15);
    color: var(--accent-cyan);
    border: 1px solid rgba(120, 152, 184, 0.35);
    border-radius: var(--gnozis-radius-full);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    margin-left: 4px;
}

.shop-nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shop-nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-link-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--gnozis-radius-md);
    color: var(--gnozis-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    transition: var(--gnozis-transition);
}

.nav-link-pill:hover {
    color: var(--gnozis-text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-card);
}

.btn-shop-cart-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(120, 152, 184, 0.1);
    border: 1px solid rgba(120, 152, 184, 0.3);
    border-radius: var(--gnozis-radius-md);
    padding: 7px 14px;
    color: var(--gnozis-text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--gnozis-transition);
}

.btn-shop-cart-trigger:hover {
    background: rgba(120, 152, 184, 0.2);
    box-shadow: 0 0 12px rgba(120, 152, 184, 0.3);
    color: #E0E8F0;
}

/* Хлібні крихти (Breadcrumbs) */
.shop-breadcrumbs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--gnozis-border-subtle);
    border-radius: var(--gnozis-radius-full);
    font-size: 0.8rem;
    margin-bottom: 16px;
}

.crumb-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gnozis-text-muted);
    transition: color 0.2s;
}

.crumb-link:hover {
    color: var(--accent-cyan);
}

.crumb-sep {
    color: var(--gnozis-text-tertiary);
}

.crumb-current {
    color: var(--gnozis-text-secondary);
    font-weight: 600;
}

.gnozis-shop-container {
    max-width: 1360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gnozis-shop-header {
    text-align: center;
    padding: 10px 20px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shop-sigil {
    color: var(--accent-cyan);
    font-size: 0.95rem;
    letter-spacing: 0.3em;
    display: block;
    margin-bottom: 8px;
    text-shadow: 0 0 10px rgba(120, 152, 184, 0.4);
}

.shop-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--gnozis-text-primary);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.shop-subtitle {
    font-size: 0.95rem;
    color: var(--gnozis-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

.gnozis-shop-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.gnozis-shop-filters {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 24px;
}

.filter-card {
    background: var(--gnozis-bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.filter-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gnozis-text-primary);
    border-bottom: 1px solid var(--gnozis-border-subtle);
    padding-bottom: 10px;
}

.filter-categories-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-categories-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--gnozis-radius-md);
    color: var(--gnozis-text-muted);
    font-size: 0.85rem;
    transition: var(--gnozis-transition);
}

/* Filter category active — cobalt */
.filter-categories-list li a:hover,
.filter-categories-list li.active a {
    background: rgba(96, 120, 144, 0.16);
    color: var(--gnozis-text-primary);
    border: 1px solid rgba(96, 120, 144, 0.38);
}

.filter-categories-list .count {
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 9999px;
}

.price-slider-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Range slider — cobalt accent */
.gnozis-range-slider {
    width: 100%;
    accent-color: var(--accent-cobalt);
}

.price-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--gnozis-text-muted);
}

.current-price-val {
    color: var(--accent-cyan);
    font-weight: 600;
}

.gnozis-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--gnozis-text-secondary);
    cursor: pointer;
}

/* Checkbox — cobalt */
.gnozis-checkbox-label input {
    accent-color: var(--accent-cobalt);
}

.gnozis-shop-catalog {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: var(--gnozis-bg-card);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-md);
    font-size: 0.85rem;
    color: var(--gnozis-text-muted);
}

.gnozis-select {
    background: rgba(0, 16, 32, 0.8);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-sm);
    color: var(--gnozis-text-primary);
    padding: 6px 12px;
    font-size: 0.82rem;
    outline: none;
}

.gnozis-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.gnozis-product-card {
    background: var(--gnozis-bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: var(--gnozis-transition);
}

/* Product card hover — cobalt glow (Deep Abyss) */
.gnozis-product-card:hover {
    border-color: rgba(96, 120, 144, 0.50);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -10px rgba(96, 120, 144, 0.28);
}

.gnozis-product-card .card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(120, 152, 184, 0.15);
    color: var(--accent-cyan);
    border: 1px solid rgba(120, 152, 184, 0.35);
    border-radius: var(--gnozis-radius-full);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    z-index: 5;
}

.card-thumb-frame {
    position: relative;
    height: 180px;
    background: #001020;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-thumb-img {
    max-width: 65%;
    max-height: 65%;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transition: transform 0.3s;
}

.gnozis-product-card:hover .card-thumb-img {
    transform: scale(1.08);
}

/* Product image aura — cobalt */
.card-thumb-aura {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(96, 120, 144, 0.22) 0%, transparent 70%);
    filter: blur(15px);
    z-index: 1;
}

.card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.card-category {
    font-size: 0.72rem;
    color: var(--gnozis-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-title {
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--gnozis-text-primary);
    line-height: 1.35;
}

.card-title a {
    color: inherit;
}

.card-title a:hover {
    color: var(--accent-cyan);
}

.card-desc {
    font-size: 0.8rem;
    color: var(--gnozis-text-muted);
    line-height: 1.45;
    flex-grow: 1;
}

.card-price-row {
    margin-top: 6px;
}

.card-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-cyan);
}

.card-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

/* Product card Buy button — Electric Cobalt */
.btn-gnozis-card-buy {
    background: var(--accent-cobalt);
    color: #E0E8F0;
    border: 1px solid rgba(56, 130, 246, 0.45);
    border-radius: var(--gnozis-radius-sm);
    padding: 8px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--gnozis-transition);
    box-shadow: 0 0 12px -3px rgba(96, 120, 144, 0.45);
}

.btn-gnozis-card-buy:hover {
    background: var(--accent-cobalt-dark);
    box-shadow: 0 0 18px rgba(96, 120, 144, 0.55);
}

/* Product card Cart button — frosted white text, dark bg */
.btn-gnozis-card-cart {
    background: rgba(16, 26, 38, 0.55);
    color: var(--gnozis-text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--gnozis-radius-sm);
    padding: 8px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--gnozis-transition);
}

.btn-gnozis-card-cart:hover {
    background: rgba(96, 120, 144, 0.12);
    border-color: rgba(96, 120, 144, 0.38);
    color: #E0E8F0;
}

/* Кнопка скидання фільтрів у сайдбарі */
.btn-reset-shop-filters {
    width: 100%;
    padding: 10px 14px;
    background: rgba(96, 120, 144, 0.08);
    border: 1px dashed rgba(96, 120, 144, 0.3);
    border-radius: var(--gnozis-radius-md);
    color: var(--gnozis-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--gnozis-transition);
    text-align: center;
}

.btn-reset-shop-filters:hover {
    background: rgba(96, 120, 144, 0.18);
    border-color: rgba(96, 120, 144, 0.55);
    color: var(--gnozis-text-primary);
}

/* Стан порожніх результатів пошуку/фільтрації */
.gnozis-no-products {
    background: var(--gnozis-bg-card);
    border: 1px dashed var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-lg);
    padding: 48px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    grid-column: 1 / -1;
}

.no-products-icon {
    font-size: 2.8rem;
    margin-bottom: 4px;
    animation: floatIcon 3s ease-in-out infinite alternate;
}

@keyframes floatIcon {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}

.no-products-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gnozis-text-primary);
}

.no-products-desc {
    font-size: 0.88rem;
    color: var(--gnozis-text-muted);
    max-width: 380px;
    line-height: 1.5;
}

.btn-reset-filters-inline {
    margin-top: 8px;
    padding: 9px 18px;
    font-size: 0.85rem;
    cursor: pointer;
}

/* ==========================================================================
   10. МОБІЛЬНІ ЕЛЕМЕНТИ ТА АДАПТИВНІСТЬ (Responsive Design)
   ========================================================================== */

.gnozis-mobile-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: rgba(16, 24, 32, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gnozis-border-card);
    position: sticky;
    top: 0;
    z-index: 50;
}

.gnozis-mobile-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gnozis-text-primary);
    font-weight: 700;
}

.gnozis-mobile-brand .gnozis-brand-symbol {
    color: var(--accent-cyan);
}

.gnozis-mobile-toggle {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
}

.hamburger-line {
    width: 22px;
    height: 2px;
    background: var(--gnozis-text-primary);
    border-radius: 2px;
}

.btn-drawer-cart-trigger {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-full);
    padding: 6px 12px;
    color: var(--gnozis-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.cart-badge {
    background: var(--accent-cyan);
    color: #101820;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 9999px;
}

.gnozis-mobile-bottom-nav {
    display: none;
}

/* Рекомендований товар у мобільній стрічці (Featured Artifact Post) */
.gnozis-mobile-promoted-post,
.gnozis-post-card.gnozis-mobile-promoted-post,
article.gnozis-mobile-promoted-post {
    display: none !important;
    border: 1px solid rgba(56, 189, 248, 0.25);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(20, 29, 47, 0.98) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 15px rgba(56, 189, 248, 0.08);
    position: relative;
    overflow: hidden;
}

.gnozis-mobile-promoted-post::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #38bdf8, #818cf8, transparent);
}

.gnozis-mobile-promoted-post .promoted-product-media-card {
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.gnozis-mobile-promoted-post .promoted-product-media-card:hover {
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-2px);
}

/* Медіа-запити адаптивності */
@media (min-width: 769px) {
    .gnozis-mobile-bottom-nav {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .gnozis-mobile-promoted-post,
    .gnozis-post-card.gnozis-mobile-promoted-post,
    article.gnozis-mobile-promoted-post {
        display: none !important;
    }
}

@media (max-width: 1200px) {
    .gnozis-layout-3col {
        grid-template-columns: 240px minmax(0, 1fr) 310px;
        gap: 18px;
    }
}

@media (max-width: 1024px) {
    .gnozis-layout-3col {
        grid-template-columns: minmax(0, 1fr);
    }
    .gnozis-col-left,
    .gnozis-col-right {
        display: none !important;
    }
    .gnozis-mobile-header {
        display: flex;
    }
    .gnozis-mobile-promoted-post,
    .gnozis-post-card.gnozis-mobile-promoted-post,
    article.gnozis-mobile-promoted-post {
        display: flex !important;
        flex-direction: column !important;
    }
    .gnozis-page-shell {
        padding-bottom: 75px;
    }
}

@media (max-width: 900px) {
    .gnozis-shop-layout {
        grid-template-columns: 1fr;
    }
    .gnozis-shop-filters {
        position: static;
    }
}

@media (max-width: 768px) {
    .gnozis-layout-3col {
        grid-template-columns: 1fr;
    }
    .gnozis-col-right {
        position: static;
    }
    .gnozis-page-shell {
        padding: 16px 14px 90px;
    }
}

/* =============================================================================
   12. СТИЛІ АВТОРИЗАЦІЇ ТА ПОСВЯТИ (Linear & Vercel Occult Tech Aesthetic)
   ============================================================================= */
.gnozis-auth-viewport {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(85vh - 60px);
    padding: 30px 16px 70px;
    position: relative;
    z-index: 2;
}

/* Auth card — very dark bg, subtle cobalt border */
.gnozis-auth-card {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    max-width: 920px;
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(0, 16, 32, 0.90);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(96, 120, 144, 0.28);
    box-shadow: 0 24px 65px -12px rgba(0, 0, 0, 0.90), 0 0 50px rgba(96, 120, 144, 0.10);
    position: relative;
}

.auth-card-visual {
    padding: 44px 36px;
    background: linear-gradient(145deg, rgba(16, 26, 38, 0.98) 0%, rgba(0, 10, 20, 0.99) 100%);
    border-right: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.auth-back-to-feed {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gnozis-text-muted);
    font-size: 0.84rem;
    font-weight: 500;
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-card);
    transition: var(--gnozis-transition);
    width: fit-content;
    margin-bottom: 24px;
}

.auth-back-to-feed:hover {
    color: var(--accent-cyan);
    border-color: rgba(120, 152, 184, 0.4);
    background: rgba(120, 152, 184, 0.08);
    transform: translateX(-3px);
}

.visual-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: auto 0;
}

.auth-sigil-rotating {
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-sigil-rotating .sacred-seal-svg {
    width: 100%;
    height: 100%;
    animation: spinSlowSigil 36s linear infinite;
    filter: drop-shadow(0 0 18px rgba(26, 43, 60, 0.5));
}

@keyframes spinSlowSigil {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.auth-sigil-glow {
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 43, 60, 0.45) 0%, rgba(120, 152, 184, 0.2) 50%, transparent 70%);
    filter: blur(24px);
    pointer-events: none;
}

.auth-brand-title {
    font-family: var(--font-primary);
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #E0E8F0;
    margin: 0 0 6px;
    text-shadow: 0 0 25px rgba(26, 43, 60, 0.6);
}

.auth-slogan {
    font-size: 0.88rem;
    color: var(--accent-cyan);
    font-style: italic;
    margin-bottom: 16px;
    opacity: 0.95;
    letter-spacing: 0.02em;
}

.auth-manifesto {
    font-size: 0.84rem;
    color: var(--gnozis-text-secondary);
    line-height: 1.6;
    max-width: 300px;
    margin: 0 auto;
}

.auth-card-forms {
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-tabs-nav {
    display: flex;
    background: rgba(255, 255, 255, 0.04);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--border-card);
    margin-bottom: 26px;
    gap: 4px;
}

.auth-tab-btn {
    flex: 1;
    padding: 11px 16px;
    border: none;
    background: transparent;
    color: var(--gnozis-text-muted);
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--gnozis-transition);
    text-align: center;
    outline: none;
}

/* Auth tab active — cobalt */
.auth-tab-btn.active {
    background: rgba(96, 120, 144, 0.28);
    color: #E0E8F0;
    border: 1px solid rgba(96, 120, 144, 0.48);
    box-shadow: 0 4px 14px rgba(96, 120, 144, 0.22);
}

.auth-tab-btn:hover:not(.active) {
    color: var(--gnozis-text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.gnozis-auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gnozis-auth-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gnozis-auth-form .form-group label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gnozis-text-secondary);
}

.gnozis-auth-form .label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gnozis-auth-form .link-lostpass {
    font-size: 0.78rem;
    color: var(--accent-cyan);
    text-decoration: none;
    transition: var(--gnozis-transition);
}

.gnozis-auth-form .link-lostpass:hover {
    color: #A0B0C0;
    text-decoration: underline;
}

.gnozis-auth-form .gnozis-input {
    width: 100%;
    padding: 13px 16px;
    background: rgba(16, 24, 32, 0.85);
    border: 1px solid var(--border-card);
    border-radius: 10px;
    color: #E0E8F0;
    font-size: 0.92rem;
    font-family: inherit;
    transition: var(--gnozis-transition);
    outline: none;
    box-sizing: border-box;
}

/* Auth input focus — cobalt */
.gnozis-auth-form .gnozis-input:focus {
    border-color: var(--accent-cobalt);
    box-shadow: 0 0 0 3px rgba(96, 120, 144, 0.22);
    background: rgba(26, 43, 60, 0.95);
}

.gnozis-auth-form .gnozis-input::placeholder {
    color: rgba(148, 163, 184, 0.45);
}

.gnozis-auth-form .form-check-row {
    flex-direction: row;
    align-items: center;
}

.gnozis-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 0.83rem;
    color: var(--gnozis-text-secondary);
    line-height: 1.4;
}

/* Auth checkbox — cobalt */
.gnozis-checkbox-label input[type="checkbox"] {
    accent-color: var(--accent-cobalt);
    width: 17px;
    height: 17px;
    cursor: pointer;
    flex-shrink: 0;
}

.gnozis-alert {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.86rem;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gnozis-alert-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #FCA5A5;
}

.gnozis-alert-success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #6EE7B7;
}

@media (max-width: 860px) {
    .gnozis-auth-card {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
    .auth-card-visual {
        border-right: none;
        border-bottom: 1px solid var(--border-default);
        padding: 32px 24px;
    }
    .auth-card-forms {
        padding: 32px 24px;
    }
}

/* ==========================================================================
   10. FEED FILTER TABS, BOOKMARKS & ASTRAL TOAST NOTIFICATIONS
   ========================================================================== */

/* Вкладки фільтрації Стрічки Одкровень */
.gnozis-feed-filter-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: rgba(16, 24, 32, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.feed-tab-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--gnozis-radius-md);
    color: var(--gnozis-text-muted);
    font-family: var(--gnozis-font-body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--gnozis-transition);
    outline: none;
}

.feed-tab-btn:hover {
    color: var(--gnozis-text-primary);
    background: rgba(255, 255, 255, 0.04);
}

/* Feed tab active — subtle cobalt (Deep Abyss) */
.feed-tab-btn.active {
    background: rgba(96, 120, 144, 0.14);
    border-color: rgba(96, 120, 144, 0.32);
    color: var(--gnozis-text-primary);
    font-weight: 600;
    box-shadow: none;
}

/* Дії шапки допису (Закладка / Зберегти) */
.post-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.post-bookmark-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--gnozis-border-subtle);
    border-radius: var(--gnozis-radius-sm);
    color: var(--gnozis-text-muted);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--gnozis-transition);
}

.post-bookmark-btn:hover {
    color: var(--accent-cyan);
    border-color: rgba(120, 152, 184, 0.3);
    background: rgba(120, 152, 184, 0.08);
}

/* Bookmark active — cobalt (Deep Abyss) */
.post-bookmark-btn.active {
    color: #7898B8;
    background: rgba(96, 120, 144, 0.20);
    border-color: rgba(96, 120, 144, 0.50);
    box-shadow: 0 0 10px rgba(96, 120, 144, 0.28);
}

/* Спливаючі Астральні Сповіщення (Toast Notifications) */
.gnozis-toast-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

/* Toast notification — cobalt (Deep Abyss) */
.gnozis-toast-item {
    pointer-events: auto;
    background: rgba(16, 32, 48, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(96, 120, 144, 0.50);
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 24px rgba(96, 120, 144, 0.22);
    color: #E0E8F0;
    padding: 13px 22px;
    font-family: var(--gnozis-font-body);
    font-size: 0.88rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    transform-origin: bottom right;
    animation: toastSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.gnozis-toast-item.toast-fadeout {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================================
   11. СТОРІНКА ПРОФІЛЮ АДЕПТА (Adept Profile View)
   ========================================================================== */

.gnozis-profile-viewport {
    max-width: 960px;
    margin: 0 auto;
    padding: 30px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.profile-top-bar {
    display: flex;
    align-items: center;
}

.profile-hero-card {
    padding: 0;
    overflow: hidden;
    position: relative;
}

.profile-hero-banner {
    height: 160px;
    background: linear-gradient(135deg, rgba(16, 26, 38, 0.95) 0%, rgba(0, 16, 32, 0.98) 100%);
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.banner-nebula-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 75% 30%, rgba(26, 43, 60, 0.35) 0%, transparent 60%),
                radial-gradient(circle at 20% 80%, rgba(120, 152, 184, 0.25) 0%, transparent 50%);
    filter: blur(25px);
}

.profile-hero-content {
    padding: 0 32px 30px;
    position: relative;
    margin-top: -50px;
}

.profile-avatar-row {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.profile-avatar-wrap {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    flex-shrink: 0;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #101820;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 2;
}

.avatar-aura-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(26, 43, 60, 0.7), rgba(120, 152, 184, 0.7));
    filter: blur(8px);
    z-index: 1;
}

.profile-identity {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 6px;
}

.profile-display-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #E0E8F0;
    letter-spacing: -0.01em;
    margin: 0;
}

.profile-badges-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-pill.status-astral {
    background: rgba(120, 152, 184, 0.12);
    border: 1px solid rgba(120, 152, 184, 0.3);
    color: var(--accent-cyan);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--gnozis-radius-full);
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--gnozis-border-subtle);
}

.profile-stat-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--gnozis-border-subtle);
    border-radius: var(--gnozis-radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    transition: var(--gnozis-transition);
}

.profile-stat-box:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.profile-stat-box .stat-num {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: -0.01em;
}

.profile-stat-box .stat-lbl {
    font-size: 0.75rem;
    color: var(--gnozis-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.profile-main-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-tabs-nav {
    display: flex;
    background: rgba(16, 24, 32, 0.6);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-lg);
    padding: 5px;
    gap: 6px;
}

.profile-tab-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--gnozis-radius-md);
    color: var(--gnozis-text-muted);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--gnozis-transition);
}

.profile-tab-btn:hover {
    color: var(--gnozis-text-primary);
    background: rgba(255, 255, 255, 0.04);
}

/* Profile tab active — subtle cobalt */
.profile-tab-btn.active {
    background: rgba(96, 120, 144, 0.14);
    border-color: rgba(96, 120, 144, 0.32);
    color: var(--gnozis-text-primary);
    font-weight: 600;
    box-shadow: none;
}

.profile-tab-pane {
    display: block;
}

.profile-orders-card,
.profile-keys-card {
    padding: 26px;
}

.gnozis-empty-card {
    padding: 36px 24px;
    text-align: center;
    color: var(--gnozis-text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ==========================================================================
   12. СТОРІНКА ТАЄМНИХ ПОВІДОМЛЕНЬ (Secret Messages Interface)
   ========================================================================== */

.gnozis-messages-viewport {
    max-width: 1080px;
    margin: 0 auto;
    padding: 30px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.messages-top-bar {
    display: flex;
    align-items: center;
}

.gnozis-messages-card {
    display: grid;
    grid-template-columns: 320px 1fr;
    height: 680px;
    padding: 0;
    overflow: hidden;
}

.messages-sidebar {
    background: rgba(0, 16, 32, 0.7);
    border-right: 1px solid var(--gnozis-border-card);
    display: flex;
    flex-direction: column;
}

.messages-sidebar-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--gnozis-border-subtle);
}

.messages-sidebar-header .header-title-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.messages-sidebar-header .chat-sigil {
    color: var(--accent-violet);
    font-size: 0.95rem;
}

.messages-sidebar-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #E0E8F0;
}

.messages-dialogs-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.dialog-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: var(--gnozis-transition);
}

.dialog-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Dialog item active — cobalt (Deep Abyss) */
.dialog-item.active {
    background: rgba(96, 120, 144, 0.14);
    border-left: 3px solid var(--accent-cobalt);
}

.dialog-avatar-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.dialog-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.dialog-status.online {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #10B981;
    border: 2px solid #101820;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.dialog-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dialog-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.dialog-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gnozis-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dialog-time {
    font-size: 0.72rem;
    color: var(--gnozis-text-tertiary);
    flex-shrink: 0;
}

.dialog-snippet {
    font-size: 0.78rem;
    color: var(--gnozis-text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messages-chat-pane {
    display: flex;
    flex-direction: column;
    background: rgba(16, 24, 32, 0.4);
    position: relative;
}

.chat-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--gnozis-border-subtle);
    background: rgba(16, 26, 38, 0.45);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-interlocutor {
    display: flex;
    align-items: center;
    gap: 12px;
}

.interlocutor-avatar-wrap {
    position: relative;
    width: 42px;
    height: 42px;
}

.chat-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.chat-aura-halo {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 43, 60, 0.4) 0%, transparent 70%);
    filter: blur(4px);
    pointer-events: none;
}

.interlocutor-name {
    margin: 0 0 2px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #E0E8F0;
}

.interlocutor-rank {
    font-size: 0.76rem;
    color: var(--accent-cyan);
}

.chat-messages-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.msg-bubble-wrap {
    display: flex;
    flex-direction: column;
    max-width: 70%;
}

.msg-bubble-wrap.incoming {
    align-self: flex-start;
}

.msg-bubble-wrap.outgoing {
    align-self: flex-end;
}

.msg-bubble {
    padding: 12px 18px;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.55;
    position: relative;
}

.msg-bubble-wrap.incoming .msg-bubble {
    background: rgba(16, 26, 38, 0.85);
    border: 1px solid var(--gnozis-border-card);
    color: var(--gnozis-text-primary);
    border-bottom-left-radius: 4px;
}

/* Outgoing message bubble — cobalt (Deep Abyss) */
.msg-bubble-wrap.outgoing .msg-bubble {
    background: linear-gradient(135deg, #4A6070 0%, #607890 100%);
    color: #E0E8F0;
    box-shadow: 0 4px 16px rgba(96, 120, 144, 0.35);
    border-bottom-right-radius: 4px;
}

.msg-bubble p {
    margin: 0 0 4px;
}

.msg-time {
    display: block;
    font-size: 0.68rem;
    opacity: 0.7;
    text-align: right;
}

.chat-composer-row {
    padding: 16px 20px;
    background: rgba(16, 26, 38, 0.6);
    border-top: 1px solid var(--gnozis-border-subtle);
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-composer-row .chat-input-field {
    flex: 1;
    background: rgba(0, 16, 32, 0.8);
    border: 1px solid var(--gnozis-border-card);
    border-radius: var(--gnozis-radius-full);
    padding: 11px 20px;
    color: #E0E8F0;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: var(--gnozis-transition);
}

/* Chat input focus — cobalt */
.chat-composer-row .chat-input-field:focus {
    border-color: var(--accent-cobalt);
    box-shadow: 0 0 12px rgba(96, 120, 144, 0.25);
}

.chat-composer-row .chat-input-field::placeholder {
    color: #506070;
}

/* Chat send button — cobalt */
.chat-composer-row .btn-send-chat {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent-cobalt);
    border: none;
    color: #E0E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--gnozis-transition);
    box-shadow: 0 0 14px rgba(96, 120, 144, 0.38);
    flex-shrink: 0;
}

.chat-composer-row .btn-send-chat:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(96, 120, 144, 0.55);
}

@media (max-width: 768px) {
    .profile-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    .gnozis-messages-card {
        grid-template-columns: 1fr;
        height: auto;
    }
    .messages-sidebar {
        height: 240px;
    }
    .messages-chat-pane {
        height: 500px;
    }
}

/* ==========================================================================
   13. САКРАЛЬНІ ВНУТРІШНІ СТОРІНКИ (Groups, Members, Notifications)
   ========================================================================== */

.gnozis-subpage-viewport {
    max-width: 1040px;
    margin: 0 auto;
    padding: 30px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.subpage-top-bar {
    display: flex;
    align-items: center;
}

.subpage-header-card {
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(16, 26, 38, 0.98) 0%, rgba(0, 10, 20, 0.99) 100%);
    border: 1px solid var(--gnozis-border-card);
}

/* Subpage header glow — cobalt */
.subpage-header-glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(96, 120, 144, 0.30) 0%, rgba(120, 152, 184, 0.12) 50%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

.subpage-header-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 680px;
}

.subpage-badge-row {
    margin-bottom: 2px;
}

.subpage-main-title {
    font-size: 2rem;
    font-weight: 700;
    color: #E0E8F0;
    letter-spacing: -0.02em;
    margin: 0;
}

.subpage-description {
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--gnozis-text-secondary);
    margin: 0;
}

.subpage-filter-tabs {
    margin-bottom: 4px;
}

/* --- СІТКА ОРДЕНІВ (GROUPS) --- */
.groups-catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.group-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--gnozis-transition);
}

/* Group card hover — cobalt */
.group-card:hover {
    transform: translateY(-3px);
    border-color: rgba(96, 120, 144, 0.45);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(96, 120, 144, 0.18);
}

.group-card-banner {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.banner-violet {
    background: linear-gradient(135deg, rgba(26, 43, 60, 0.45) 0%, rgba(0, 16, 32, 0.8) 100%);
}

.banner-cyan {
    background: linear-gradient(135deg, rgba(120, 152, 184, 0.35) 0%, rgba(0, 16, 32, 0.8) 100%);
}

.banner-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.35) 0%, rgba(0, 16, 32, 0.8) 100%);
}

.banner-indigo {
    background: linear-gradient(135deg, rgba(96, 120, 144, 0.45) 0%, rgba(0, 16, 32, 0.8) 100%);
}

.group-sigil {
    font-size: 2.2rem;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
}

.group-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

.group-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
}

.group-members-badge {
    color: var(--gnozis-text-tertiary);
}

.group-status-open {
    color: var(--accent-cyan);
    font-weight: 600;
}

.group-status-restricted {
    color: #F59E0B;
    font-weight: 600;
}

.group-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #E0E8F0;
    margin: 0;
}

.group-desc {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--gnozis-text-muted);
    margin: 0;
    flex-grow: 1;
}

.group-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--gnozis-border-subtle);
}

.group-magister {
    font-size: 0.76rem;
    color: var(--gnozis-text-tertiary);
}

.btn-join-group {
    padding: 7px 16px;
    font-size: 0.82rem;
}

/* --- СІТКА БРАТСТВА АДЕПТІВ (MEMBERS) --- */
.members-catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.member-profile-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: var(--gnozis-transition);
}

.member-profile-card:hover {
    transform: translateY(-2px);
    border-color: rgba(120, 152, 184, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(120, 152, 184, 0.12);
}

.member-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.member-avatar-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.member-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #101820;
    position: relative;
    z-index: 2;
}

.member-aura-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    filter: blur(6px);
    z-index: 1;
}

.member-aura-ring.aura-violet {
    background: radial-gradient(circle, rgba(26, 43, 60, 0.6) 0%, transparent 70%);
}

.member-aura-ring.aura-cyan {
    background: radial-gradient(circle, rgba(120, 152, 184, 0.6) 0%, transparent 70%);
}

.member-online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10B981;
    border: 2px solid #101820;
    z-index: 3;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.member-badge-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.member-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.member-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #E0E8F0;
    margin: 0;
}

.member-order {
    font-size: 0.78rem;
    color: var(--accent-cyan);
    font-weight: 500;
}

.member-bio {
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--gnozis-text-muted);
    margin: 4px 0 6px;
}

.member-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--gnozis-border-subtle);
    border-radius: var(--gnozis-radius-md);
    text-align: center;
}

.member-stat .stat-v {
    display: block;
    font-size: 0.95rem;
    color: var(--accent-cyan);
}

.member-stat .stat-l {
    font-size: 0.68rem;
    color: var(--gnozis-text-tertiary);
    text-transform: uppercase;
}

.member-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.btn-member-msg {
    flex: 1;
    text-align: center;
    text-decoration: none;
    padding: 8px 14px;
    font-size: 0.82rem;
}

/* --- СПОВІЩЕННЯ СИЛИ (NOTIFICATIONS) --- */
.notifications-stream-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.notifications-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gnozis-border-subtle);
}

.notif-count-badge {
    font-size: 0.84rem;
    color: var(--accent-cyan);
    font-weight: 600;
}

.btn-clear-notifs {
    background: transparent;
    border: none;
    color: var(--gnozis-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--gnozis-transition);
}

.btn-clear-notifs:hover {
    color: #E0E8F0;
}

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

.notif-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--gnozis-border-subtle);
    border-radius: var(--gnozis-radius-md);
    position: relative;
    transition: var(--gnozis-transition);
}

.notif-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Unread notification — cobalt */
.notif-item.unread {
    background: rgba(96, 120, 144, 0.09);
    border-color: rgba(96, 120, 144, 0.32);
}

.notif-sigil-wrap {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

/* Notification sigil violet — cobalt */
.sigil-violet {
    background: rgba(96, 120, 144, 0.20);
    border: 1px solid rgba(96, 120, 144, 0.42);
}

.sigil-cyan {
    background: rgba(120, 152, 184, 0.18);
    border: 1px solid rgba(120, 152, 184, 0.35);
}

.sigil-blue {
    background: rgba(96, 120, 144, 0.2);
    border: 1px solid rgba(96, 120, 144, 0.4);
}

.sigil-amber {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.notif-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notif-text {
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--gnozis-text-primary);
    margin: 0;
}

.notif-time {
    font-size: 0.74rem;
    color: var(--gnozis-text-tertiary);
}

/* Notification unread dot — cobalt */
.notif-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-cobalt);
    box-shadow: 0 0 8px rgba(96, 120, 144, 0.80);
    flex-shrink: 0;
}

/* Hover-ефекти для всіх підключених посилань */
.user-avatar-link,
.user-name-link,
.featured-img-link,
.artifact-title-link,
.mini-title-link,
.mini-thumb-link,
.mentor-avatar-link,
.mentor-name-link,
.author-avatar-link,
.author-name-link,
.comment-author-link {
    text-decoration: none;
    color: inherit;
    transition: var(--gnozis-transition);
}

.user-name-link:hover,
.artifact-title-link:hover,
.mini-title-link:hover,
.mentor-name-link:hover,
.author-name-link:hover,
.comment-author-link:hover {
    color: var(--accent-cyan) !important;
}

.featured-img-link:hover .artifact-showcase-img,
.mini-thumb-link:hover img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

@media (max-width: 800px) {
    .groups-catalog-grid,
    .members-catalog-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   НОВІ СТИЛІ: Спливаючі сповіщення (Top Notifications Popover)
   ========================================================================== */
.gnozis-notifications-popover {
    position: fixed;
    top: 60px;
    right: 24px;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: 480px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    z-index: 100005;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: popoverSlideIn 0.2s ease;
}

.gnozis-notifications-popover.open {
    display: flex;
}

@keyframes popoverSlideIn {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.notif-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.popover-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.popover-title-row h5 {
    font-size: 0.95rem;
    color: var(--gnozis-text-primary);
    margin: 0;
}

.popover-unread-badge {
    background: var(--accent-gradient-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
}

.btn-popover-mark-read {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gnozis-text-secondary);
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-popover-mark-read:hover {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    background: rgba(56, 189, 248, 0.08);
}

.notif-popover-body {
    padding: 8px 0;
    overflow-y: auto;
    max-height: 380px;
}

.gnozis-dropdown-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease;
    position: relative;
}

.gnozis-dropdown-notif-item:hover {
    background: rgba(56, 189, 248, 0.06);
}

.gnozis-dropdown-notif-item.unread {
    background: rgba(56, 189, 248, 0.04);
}

.gnozis-dropdown-notif-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-cyan);
}

.notif-sigil-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.notif-sigil-icon.sigil-cyan {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
    color: #38bdf8;
}

.notif-sigil-icon.sigil-steel {
    background: rgba(96, 120, 144, 0.15);
    border-color: rgba(96, 120, 144, 0.3);
    color: #7898b8;
}

.notif-sigil-icon.sigil-amber {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.notif-sigil-icon.sigil-emerald {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.notif-details {
    flex: 1;
}

.notif-details .notif-text {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--gnozis-text-primary);
    margin-bottom: 4px;
}

.notif-details .notif-text strong {
    color: #fff;
}

.notif-details .notif-timestamp {
    font-size: 0.7rem;
    color: var(--gnozis-text-tertiary);
}

.notif-popover-footer {
    padding: 10px 18px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.popover-view-all-link {
    font-size: 0.78rem;
    color: var(--accent-cyan);
    text-decoration: none;
    transition: color 0.2s ease;
}

.popover-view-all-link:hover {
    color: #7dd3fc;
}

.empty-notifs-box {
    padding: 30px 20px;
    text-align: center;
    color: var(--gnozis-text-tertiary);
    font-size: 0.85rem;
}

/* ==========================================================================
   FACEBOOK-STYLE FLOATING CHAT HEADS & DOCKED MINI-CHAT
   ========================================================================== */
.gnozis-chat-heads-dock {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9980;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}

.chat-heads-list {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 10px;
    pointer-events: auto;
}

.chat-head-item {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    pointer-events: auto;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.chat-head-item:hover {
    transform: scale(1.08);
}

.chat-head-item.active {
    box-shadow: 0 0 0 2.5px var(--accent-cyan), 0 8px 25px rgba(56, 189, 248, 0.4);
}

.chat-head-avatar-wrap {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: #0d1424;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-head-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-head-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #0a0f1d;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.chat-head-online {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid #0a0f1d;
}

.chat-head-dismiss {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
    font-size: 0.65rem;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-head-item:hover .chat-head-dismiss {
    display: flex;
}

.chat-head-dismiss:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

.chat-head-more-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(20, 32, 48, 0.92);
    backdrop-filter: blur(16px);
    border: 2px solid rgba(56, 189, 248, 0.4);
    color: var(--accent-cyan);
    font-family: var(--gnozis-font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    transition: transform 0.25s ease, background 0.2s ease;
    pointer-events: auto;
}

.chat-head-more-btn:hover {
    transform: scale(1.08);
    background: rgba(26, 43, 60, 0.98);
    border-color: var(--accent-cyan);
}

.chat-heads-more-popup {
    position: absolute;
    right: 65px;
    bottom: 0;
    width: 260px;
    background: rgba(13, 20, 36, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
    overflow: hidden;
    pointer-events: auto;
    z-index: 9990;
    animation: popoverSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.more-popup-header {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gnozis-text-secondary);
}

.more-popup-list {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}

.more-popup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.more-popup-item:hover {
    background: rgba(56, 189, 248, 0.08);
}

.more-popup-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.more-popup-info {
    flex: 1;
    min-width: 0;
}

.more-popup-name {
    display: block;
    font-size: 0.82rem;
    color: var(--gnozis-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.more-popup-status {
    font-size: 0.68rem;
    color: var(--gnozis-text-tertiary);
}

.more-popup-badge {
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
}

/* Головна кругла кнопка швидкого запуску повідомлень */
/* Головна кругла кнопка швидкого запуску повідомлень (тусклий матовий стиль) */
.gnozis-floating-chat-bubble {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #141e30;
    border: 1px solid #24344d;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    transition: all 0.2s ease;
}

.gnozis-floating-chat-bubble:hover {
    background: #1e2d42;
    border-color: #334866;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.chat-bubble-icon {
    font-size: 1.25rem;
    color: #94a3b8;
}

.chat-bubble-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #881337;
    color: #fecdd3;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 1.5px solid #0b101b;
}

/* ==========================================================================
   MINI-CHAT WINDOW (FACEBOOK STYLE DOCKED)
   ========================================================================== */
.gnozis-mini-chat-window {
    position: fixed;
    bottom: 24px;
    right: 80px;
    width: 340px;
    max-width: calc(100vw - 32px);
    height: 440px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
    z-index: 100005;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: miniChatSlideUp 0.2s ease;
}

.gnozis-mini-chat-window.open {
    display: flex;
}

.gnozis-mini-chat-window.minimized {
    height: 52px;
    overflow: hidden;
}

.gnozis-mini-chat-window.minimized .mini-chat-body,
.gnozis-mini-chat-window.minimized .mini-chat-footer {
    display: none;
}

@keyframes miniChatSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mini-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
}

.mini-chat-interlocutor-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mini-chat-avatar-wrap {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.mini-chat-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--accent-cyan);
}

.mini-chat-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    border: 1.5px solid #0d1424;
}

.mini-chat-details {
    min-width: 0;
}

.mini-chat-name {
    font-size: 0.85rem;
    color: var(--gnozis-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-chat-status-txt {
    font-size: 0.68rem;
    color: var(--gnozis-text-tertiary);
    display: block;
}

.mini-chat-header-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mini-chat-btn {
    background: transparent;
    border: none;
    color: var(--gnozis-text-tertiary);
    font-size: 0.85rem;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mini-chat-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.mini-chat-body {
    flex: 1;
    padding: 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mini-chat-msg-wrap {
    display: flex;
    flex-direction: column;
    max-width: 82%;
}

.mini-chat-msg-wrap.incoming {
    align-self: flex-start;
}

.mini-chat-msg-wrap.outgoing {
    align-self: flex-end;
}

.mini-msg-bubble {
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.45;
    position: relative;
}

.mini-chat-msg-wrap.incoming .mini-msg-bubble {
    background: rgba(255, 255, 255, 0.07);
    color: var(--gnozis-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-left-radius: 4px;
}

.mini-chat-msg-wrap.outgoing .mini-msg-bubble {
    background: linear-gradient(135deg, #1e3a5f 0%, #0284c7 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.25);
}

.mini-msg-time {
    display: block;
    font-size: 0.65rem;
    margin-top: 4px;
    opacity: 0.7;
    text-align: right;
}

.mini-chat-footer {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mini-chat-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mini-chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 8px 14px;
    color: var(--gnozis-text-primary);
    font-size: 0.82rem;
    outline: none;
    transition: all 0.2s ease;
}

.mini-chat-input:focus {
    border-color: var(--accent-cyan);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.btn-mini-chat-send {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e3a5f 0%, #0284c7 100%);
    border: none;
    color: #fff;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.btn-mini-chat-send:hover {
    transform: scale(1.08);
}

/* ==========================================================================
   FACEBOOK-STYLE UNIFIED TOPBAR (MUTED SLATE & STEEL THEME)
   ========================================================================== */

.gnozis-fb-topbar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 56px;
    background: rgba(11, 16, 27, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid #1e293b;
    z-index: 99999 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    user-select: none;
}

.fb-topbar-inner {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    align-items: center;
}

/* 1. Ліва частина: Круглий фірмовий знак + Пошук */
.fb-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fb-brand-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.fb-brand-circle:hover {
    transform: scale(1.08);
}

.fb-brand-logo-img {
    width: 38px;
    height: 38px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.45));
    transition: filter 0.25s ease;
}

.fb-brand-circle:hover .fb-brand-logo-img {
    filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.85)) drop-shadow(0 0 4px rgba(129, 140, 248, 0.8));
}

.fb-brand-symbol {
    display: none;
}

/* Універсальна кнопка пошуку GNOZIS (Десктоп & Мобільний) */
.fb-search-trigger-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 38px !important;
    width: 230px !important;
    padding: 0 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: left !important;
    outline: none !important;
    user-select: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
}

.fb-search-trigger-btn:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2) !important;
}

.fb-search-trigger-btn .fb-search-ico {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #38bdf8 !important;
    flex-shrink: 0 !important;
}

.fb-search-trigger-btn .fb-search-placeholder-txt {
    flex: 1 !important;
    font-size: 0.86rem !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.fb-search-trigger-btn:hover .fb-search-placeholder-txt {
    color: #e2e8f0 !important;
}

.fb-search-trigger-btn .fb-search-shortcut-badge {
    font-size: 0.70rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0 !important;
}

@media (max-width: 900px) {
    .fb-search-trigger-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        flex-shrink: 0 !important;
    }
    .fb-search-trigger-btn .fb-search-placeholder-txt,
    .fb-search-trigger-btn .fb-search-shortcut-badge {
        display: none !important;
    }
    .fb-search-trigger-btn:hover,
    .fb-search-trigger-btn:active {
        background: rgba(56, 189, 248, 0.18) !important;
        border-color: rgba(56, 189, 248, 0.5) !important;
        color: #38bdf8 !important;
        transform: scale(1.05) !important;
    }
}

/* 2. Центральна частина: 5 іконок Facebook-стилю */
.fb-topbar-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    gap: 4px;
}

.fb-nav-tab {
    flex: 0 1 110px;
    max-width: 110px;
    min-width: 65px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #64748b;
    text-decoration: none;
    border-radius: 8px 8px 0 0;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

.fb-nav-tab:hover {
    background: rgba(255, 255, 255, 0.03);
    color: #94a3b8;
}

.fb-tab-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-bottom: 2px;
}

.fb-nav-tab svg {
    transition: transform 0.15s ease, stroke 0.15s ease;
}

.fb-nav-tab.active {
    color: #cbd5e1;
}

.fb-tab-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    border-radius: 3px 3px 0 0;
    transition: background 0.2s ease;
}

.fb-nav-tab.active .fb-tab-indicator {
    background: #607890;
}

/* Floating Tooltip при hover на таб */
.fb-nav-tab[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    background: #0f172a;
    color: #cbd5e1;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid #1e293b;
    z-index: 100000;
}

.fb-nav-tab:hover[data-tooltip]::after {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Права частина: 4 круглі кнопки дій */
.fb-topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.fb-round-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #111827;
    border: 1px solid #1e293b;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
    outline: none;
    flex-shrink: 0;
    text-decoration: none;
}

.fb-round-btn:hover {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}

.fb-round-btn:active {
    transform: translateY(0);
}

.fb-notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #881337;
    color: #fecdd3;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    text-align: center;
    border: 1.5px solid #0b101b;
}

.fb-notif-badge.is-empty,
.fb-notif-badge:empty,
.popover-unread-badge.is-empty,
.popover-unread-badge:empty,
.chat-bubble-badge.is-empty,
.chat-bubble-badge:empty,
.drawer-badge.is-empty,
.drawer-badge:empty {
    display: none !important;
}

/* Аватар кнопка */
.fb-profile-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.fb-avatar-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.fb-avatar-frame {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: #0f172a;
    border: 1.5px solid #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.fb-user-avatar-img {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fb-avatar-arrow-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1e293b;
    border: 1.5px solid #0b101b;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: transform 0.2s ease, color 0.2s ease;
}

.fb-profile-wrap.open .fb-avatar-arrow-badge {
    transform: rotate(180deg);
    color: #cbd5e1;
}

/* Дропдаун меню профілю */
.fb-profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
    z-index: 100001;
    display: none;
    animation: fbMenuAnim 0.14s ease forwards;
}

.fb-profile-dropdown-menu.active {
    display: block;
}

@keyframes fbMenuAnim {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fb-dropdown-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #111827;
    border: 1px solid #1e293b;
}

.fb-dropdown-avatar-wrap {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1.5px solid #334155;
}

.fb-dropdown-avatar-img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}

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

.fb-dropdown-name {
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.fb-dropdown-status {
    color: #64748b;
    font-size: 0.74rem;
    margin-top: 1px;
}

.fb-dropdown-divider {
    height: 1px;
    background: #1e293b;
    margin: 6px 0;
}

.fb-dropdown-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fb-dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    width: 100%;
}

.fb-dropdown-link:hover {
    background: #1e293b;
    color: #e2e8f0;
}

.fb-dropdown-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.fb-link-danger {
    color: #f87171;
}

.fb-link-danger:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

/* Адаптивність Facebook Topbar */
@media (max-width: 992px) {
    .fb-topbar-inner {
        grid-template-columns: 240px 1fr 240px;
    }
    .fb-search-box {
        width: 170px;
    }
    .fb-search-input:focus {
        width: 190px;
    }
    .fb-nav-tab {
        flex: 0 1 80px;
        min-width: 50px;
    }
}

@media (max-width: 768px) {
    /* Верхня шапка: Логотип, Пошук, Кошик, Повідомлення, Сповіщення, Аватар */
    .gnozis-fb-topbar {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 54px !important;
        background: rgba(11, 16, 27, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid #1e293b !important;
        z-index: 99999 !important;
    }
    .fb-topbar-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 54px !important;
        padding: 0 12px !important;
    }
    .fb-topbar-left {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .fb-topbar-right {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* Приховуємо центральні десктопні таби у верхній шапці на мобільних */
    .fb-topbar-center {
        display: none !important;
    }

    /* Нижня панель навігації: 5 головних табів нативно зафіксовані внизу екрана */
    .gnozis-mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 58px !important;
        height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
        background: rgba(11, 16, 27, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-bottom: none !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0 4px !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        z-index: 99998 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6) !important;
        user-select: none !important;
    }

    .mobile-bottom-tab {
        flex: 1 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        color: #64748b !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
        padding: 4px 0 !important;
    }

    .mobile-bottom-tab.active {
        color: #cbd5e1 !important;
    }

    .mobile-bottom-tab:hover {
        color: #94a3b8 !important;
    }

    .mobile-tab-icon-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-tab-icon-wrap svg {
        width: 22px !important;
        height: 22px !important;
        stroke: currentColor !important;
    }

    .mobile-bottom-tab.active .mobile-tab-icon-wrap svg {
        stroke: #cbd5e1 !important;
        filter: drop-shadow(0 0 4px rgba(203, 213, 225, 0.25)) !important;
    }

    .mobile-tab-label {
        font-size: 0.68rem !important;
        font-weight: 500 !important;
        letter-spacing: 0.01em !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-tab.active .mobile-tab-label {
        font-weight: 600 !important;
        color: #cbd5e1 !important;
    }
    
    /* Відступи для вмісту сайту на мобільних */
    .gnozis-page-shell {
        padding-top: 10px !important;
        padding-bottom: 75px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Плаваючий чат вище нижнього меню */
    .gnozis-chat-heads-dock {
        bottom: 72px !important;
        right: 14px !important;
    }
    .gnozis-mini-chat-window {
        bottom: 72px !important;
        right: 14px !important;
    }
}

/* ==========================================================================
   COMPOSER DESTINATION & WALL BADGES
   ========================================================================== */
.composer-destination-select-wrap {
    margin-left: 8px;
}

.composer-destination-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 5px 12px;
    color: var(--gnozis-text-secondary);
    font-size: 0.78rem;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.composer-destination-select:hover,
.composer-destination-select:focus {
    border-color: var(--accent-cyan);
    color: var(--gnozis-text-primary);
    background: rgba(56, 189, 248, 0.08);
}

.composer-destination-select option,
.composer-destination-select optgroup {
    background: #0d1424;
    color: #e2e8f0;
}

.wall-target-arrow {
    color: var(--accent-cyan);
    font-size: 0.75rem;
    margin: 0 4px;
}

.wall-target-link {
    text-decoration: none;
}

.wall-target-name {
    color: var(--accent-cyan);
    font-size: 0.95rem;
}

.group-target-pill {
    margin-left: 6px;
    font-size: 0.75rem;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.28);
    padding: 2px 8px;
    border-radius: 12px;
}

.group-target-pill a {
    color: #7dd3fc;
    text-decoration: none;
}

.wall-dest-badge {
    font-size: 0.78rem;
    color: var(--accent-cyan);
    background: rgba(56, 189, 248, 0.08);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.2);
}

/* ==========================================================================
   CART DRAWER (MODERN SLIDE-OUT PANEL & ITEM MANAGEMENT)
   ========================================================================== */
.gnozis-cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 100010;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.3s ease;
}

.gnozis-cart-drawer.open {
    visibility: visible;
    pointer-events: auto;
}

.gnozis-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 9, 16, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gnozis-cart-drawer.open .gnozis-drawer-overlay {
    opacity: 1;
}

.gnozis-cart-drawer-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 92vw;
    background: #0b121e;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -15px 0 50px rgba(0, 0, 0, 0.65);
    z-index: 2;
}

.gnozis-cart-drawer.open .gnozis-cart-drawer-inner {
    transform: translateX(0);
}

.gnozis-drawer-header {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.drawer-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-sigil {
    font-size: 1.25rem;
}

.drawer-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}

.drawer-badge {
    background: #1e293b;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gnozis-drawer-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.gnozis-drawer-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transform: scale(1.05);
}

.gnozis-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.gnozis-drawer-body::-webkit-scrollbar {
    width: 5px;
}
.gnozis-drawer-body::-webkit-scrollbar-track {
    background: transparent;
}
.gnozis-drawer-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

.gnozis-drawer-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gnozis-drawer-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 10px 12px;
    transition: all 0.25s ease;
    position: relative;
}

.gnozis-drawer-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.gnozis-drawer-item.removing {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.3s ease;
}

.item-thumb {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #141e2e;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.item-thumb img,
.item-thumb svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.item-info {
    flex: 1;
    min-width: 0;
}

.item-title {
    margin: 0 0 4px 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
}

.item-price {
    color: #38bdf8;
    font-weight: 700;
}

.item-qty {
    color: #64748b;
    font-size: 0.76rem;
}

.btn-drawer-remove-item {
    background: transparent;
    border: none;
    color: #64748b;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.btn-drawer-remove-item:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    transform: scale(1.08);
}

.btn-drawer-remove-item:active {
    transform: scale(0.95);
}

.gnozis-drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 20px;
    gap: 10px;
    color: #64748b;
}

.gnozis-drawer-empty .empty-sigil {
    font-size: 2.8rem;
    margin-bottom: 6px;
    opacity: 0.6;
}

.gnozis-drawer-empty h5 {
    margin: 0;
    font-size: 1.1rem;
    color: #94a3b8;
    font-weight: 600;
}

.gnozis-drawer-empty p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    max-width: 260px;
}

.gnozis-drawer-footer {
    padding: 18px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 16, 26, 0.95);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.drawer-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
    color: #94a3b8;
}

.drawer-total-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f8fafc;
}

.drawer-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.drawer-checkout-btn:hover {
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   10. СТИЛІ РОЗДІЛУ ГРУП ТА СПІЛЬНОТ (GROUPS & COMMUNITIES)
   ========================================================================== */

/* Сторінка однієї групи: Шапка та Hero-картка */
.single-group-viewport {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.group-hero-card {
    padding: 0 !important;
    overflow: hidden;
    position: relative;
    border-radius: var(--gnozis-radius-lg, 16px);
    background: linear-gradient(180deg, #0d1522 0%, #080d16 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.group-hero-banner {
    height: 140px;
    width: 100%;
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0c1a2e 100%);
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.group-hero-banner.banner-slate {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 60%, #162638 100%);
}

.banner-nebula-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(56, 189, 248, 0.2) 0%, transparent 65%);
    pointer-events: none;
}

.group-hero-content {
    padding: 0 28px 26px;
    position: relative;
    z-index: 2;
}

.group-header-top-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: -45px;
}

/* Аватар групи */
.group-avatar-wrap {
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 20px;
    background: #0a101b;
    border: 3px solid #0d1522;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.group-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 17px;
    display: block;
}

.btn-group-avatar-upload-trigger {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0f172a;
    border: 1.5px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease;
    padding: 0;
    z-index: 3;
}

.btn-group-avatar-upload-trigger:hover {
    background: #1e293b;
    color: #ffffff;
    border-color: #38bdf8;
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
}

/* Основна інформація групи в шапці */
.group-header-main-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
}

.group-meta-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.group-badge-cat,
.group-badge-privacy,
.group-badge-paused {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #7dd3fc;
}

.group-badge-privacy {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

.group-badge-paused {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

.group-hero-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: #f8fafc;
    margin: 4px 0 2px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.group-hero-desc {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.55;
    margin: 0 0 8px 0;
    max-width: 780px;
}

/* Детальна плашка: Адмін + Учасники */
.group-details-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 6px;
}

.group-admin-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 5px 12px 5px 6px;
    border-radius: 9999px;
}

.group-admin-avatar {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.group-admin-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.group-admin-text .admin-label {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.group-admin-text .admin-name {
    font-size: 0.82rem;
    color: #e2e8f0;
    font-weight: 600;
}

/* Facepile учасників */
.group-members-facepile-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 5px 14px 5px 8px;
    border-radius: 9999px;
}

.group-facepile-list {
    display: inline-flex;
    align-items: center;
}

.facepile-avatar {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #0d1522 !important;
    margin-left: -7px;
    background: #1e293b;
    transition: transform 0.2s ease, z-index 0.2s ease;
    position: relative;
    display: block !important;
}

.facepile-avatar:first-child {
    margin-left: 0;
}

.facepile-avatar:hover {
    transform: translateY(-2px) scale(1.15);
    z-index: 5;
}

.group-members-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: #94a3b8;
    font-weight: 500;
}

.group-members-count-badge .members-num {
    color: #38bdf8;
    font-weight: 700;
}

/* Колонка дій (кнопка вступу та адмін-панель) */
.group-hero-actions-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-top: 14px;
    flex-shrink: 0;
}

.group-primary-action-wrap {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.group-hero-actions-col .btn-toggle-group-join {
    padding: 8px 18px;
    font-size: 0.86rem;
    white-space: nowrap;
}

.group-hero-actions-col .btn-toggle-group-join.is-joined {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.group-admin-controls-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 7px 10px;
    backdrop-filter: blur(8px);
}

.admin-controls-title {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.admin-controls-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Стіна публікацій групи */
.group-feed-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.group-feed-header-row h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.group-composer-box {
    margin-bottom: 4px;
}

/* Каталог усіх груп (/groups/) */
.groups-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 20px;
    margin-top: 10px;
}

.group-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: #0d1522;
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0 !important;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.group-card:hover {
    transform: translateY(-3px);
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

.group-card-banner {
    height: 72px;
    width: 100%;
    position: relative;
    background: linear-gradient(135deg, #1e293b, #0f172a);
}

.group-card-banner.banner-cyan {
    background: linear-gradient(135deg, #0e3d54, #0b1e2c);
}

.group-card-banner.banner-amber {
    background: linear-gradient(135deg, #422d0d, #1a150c);
}

.group-card-banner.banner-indigo {
    background: linear-gradient(135deg, #2b1f54, #120e24);
}

.group-card-avatar-wrap {
    position: absolute;
    bottom: -18px;
    left: 16px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #0a101b;
    border: 2px solid #0d1522;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.group-card-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.group-card-body {
    padding: 24px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.group-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.group-badge-pill {
    font-size: 0.7rem;
    font-weight: 600;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    padding: 2px 7px;
    border-radius: 6px;
}

.group-status-open {
    font-size: 0.7rem;
    color: #10b981;
    font-weight: 500;
}

.group-status-closed {
    font-size: 0.7rem;
    color: #f59e0b;
    font-weight: 500;
}

.group-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.group-title a {
    color: #f1f5f9;
    text-decoration: none;
    transition: color 0.2s ease;
}

.group-title a:hover {
    color: #38bdf8;
}

.group-desc {
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.45;
    flex: 1;
    margin: 0 0 14px 0;
}

.group-card-middle-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 12px;
}

.group-card-facepile {
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-card-members-count {
    font-size: 0.76rem;
    color: #94a3b8;
    font-weight: 600;
}

.group-magister {
    font-size: 0.74rem;
    color: #64748b;
}

.group-magister strong {
    color: #cbd5e1;
    font-weight: 600;
}

.group-footer-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-sm-view {
    flex: 1;
    text-align: center;
    padding: 7px 12px;
    font-size: 0.8rem;
    border-radius: 8px;
    text-decoration: none;
}

.btn-sm-join {
    flex: 1;
    padding: 7px 12px;
    font-size: 0.8rem;
    border-radius: 8px;
}

/* Модальне вікно створення групи */
.create-group-modal-dialog {
    max-width: 490px;
    background: #0c1420;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(56, 189, 248, 0.12);
}

.create-group-modal-dialog .form-label-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 5px;
    display: block;
}

.create-group-modal-dialog .gnozis-input-modal {
    width: 100%;
    background: #080e18;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 14px;
    color: #f1f5f9;
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.create-group-modal-dialog .gnozis-input-modal:focus {
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.create-group-modal-dialog .gnozis-textarea-modal {
    width: 100%;
    background: #080e18;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 14px;
    color: #f1f5f9;
    font-size: 0.88rem;
    font-family: inherit;
    line-height: 1.45;
    outline: none;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.create-group-modal-dialog .gnozis-textarea-modal:focus {
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.create-group-modal-dialog .gnozis-select-wrap {
    position: relative;
    width: 100%;
}

.create-group-modal-dialog .gnozis-select-modal {
    width: 100%;
    background: #080e18 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 14px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 38px 10px 14px;
    color: #f1f5f9;
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.create-group-modal-dialog .gnozis-select-modal option {
    background: #0f172a;
    color: #f1f5f9;
    padding: 8px;
}

.create-group-modal-dialog .gnozis-select-modal:focus {
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

/* Перемикач відкритої / закритої групи */
.group-privacy-selector-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

.privacy-option-card {
    display: flex;
    position: relative;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.privacy-radio-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.privacy-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.privacy-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.privacy-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.privacy-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: #cbd5e1;
    transition: color 0.2s ease;
}

.privacy-desc {
    font-size: 0.72rem;
    color: #94a3b8;
    line-height: 1.35;
    margin: 0;
}

.privacy-option-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(56, 189, 248, 0.3);
}

.privacy-option-card.active {
    background: rgba(56, 189, 248, 0.08);
    border-color: #38bdf8;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.2);
}

.privacy-option-card.active .privacy-title {
    color: #38bdf8;
}

/* Завантаження аватара у модальному вікні */
.modal-group-avatar-upload {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.group-create-avatar-thumb {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #38bdf8;
    flex-shrink: 0;
    background: #080e18;
}

.group-create-avatar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.group-file-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.group-file-upload-btn:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.4);
    color: #38bdf8;
}

.group-avatar-filename-preview {
    font-size: 0.78rem;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
}

/* Адаптивність мобільних екранів для груп */
@media (max-width: 768px) {
    .group-privacy-selector-grid {
        grid-template-columns: 1fr;
    }

    .group-header-top-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .group-header-main-info {
        margin-top: 8px;
        align-items: center;
    }

    .group-details-bar {
        justify-content: center;
    }

    .group-hero-actions-col {
        margin-top: 6px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .group-hero-actions-col .btn-toggle-group-join {
        width: 100%;
        max-width: 260px;
    }
}

/* ==========================================================================
   26. Двоколонковий макет для всіх підсторінок з рекомендованим товаром
   ========================================================================== */
.gnozis-subpage-viewport,
.gnozis-profile-viewport {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.gnozis-subpage-2col-layout,
.profile-2col-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 24px;
    align-items: start;
    width: 100%;
}

.subpage-main-col,
.profile-main-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.subpage-side-col,
.profile-side-col {
    width: 350px;
    flex-shrink: 0;
}

.subpage-sticky-sidebar,
.profile-sticky-sidebar {
    position: sticky;
    top: 86px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 1100px) {
    .gnozis-subpage-2col-layout,
    .profile-2col-layout {
        grid-template-columns: 1fr;
    }

    .subpage-side-col,
    .profile-side-col {
        width: 100%;
    }

    .subpage-sticky-sidebar,
    .profile-sticky-sidebar {
        position: static;
    }
}

/* ==========================================================================
   27. Шапка профілю: Мета-дані, Про себе, Інтереси
   ========================================================================== */
.profile-meta-info-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.profile-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #94a3b8;
}

.profile-meta-chip .meta-icon {
    font-size: 0.9rem;
}

.profile-meta-link {
    color: #38bdf8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.profile-meta-link:hover {
    color: #7dd3fc;
    text-decoration: underline;
}

.profile-bio-box {
    margin-top: 10px;
    max-width: 680px;
}

.profile-bio-text {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #cbd5e1;
    margin: 0;
}

.profile-interests-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.profile-interests-label {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-interests-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.profile-interest-tag {
    display: inline-block;
    padding: 3px 9px;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 6px;
    color: #38bdf8;
    font-size: 0.76rem;
    font-weight: 500;
}

.btn-avatar-camera-overlay {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0284c7;
    border: 2px solid #080e18;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
    transition: transform 0.2s ease, background 0.2s ease;
    z-index: 5;
}

.btn-avatar-camera-overlay:hover {
    transform: scale(1.1);
    background: #38bdf8;
}

/* ==========================================================================
   28. Модальне вікно редагування профілю
   ========================================================================== */
.edit-profile-modal-dialog {
    max-width: 580px;
    width: 90%;
    background: #0b1326;
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(56, 189, 248, 0.15);
    overflow: hidden;
}

.avatar-edit-preview-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.avatar-edit-thumb {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #38bdf8;
    flex-shrink: 0;
}

.avatar-edit-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-edit-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.btn-upload-avatar-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 8px;
    color: #38bdf8;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: fit-content;
}

.btn-upload-avatar-trigger:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
}

.form-input-tip {
    font-size: 0.72rem;
    color: #64748b;
}

.form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 580px) {
    .form-grid-2col {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   29. Каталог користувачів (Members Grid)
   ========================================================================== */
.members-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.member-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.member-card:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.1);
}

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

.member-avatar-wrap {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.member-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-card-titles {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.member-name-link {
    text-decoration: none;
    color: #f8fafc;
}

.member-name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.member-name-link:hover .member-name {
    color: #38bdf8;
}

.member-role-tag {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #38bdf8;
    text-transform: uppercase;
}

.member-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.84rem;
    color: #94a3b8;
}

.member-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.member-meta-item .meta-icon {
    font-size: 0.88rem;
    flex-shrink: 0;
}

.member-meta-item .meta-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-bio {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #cbd5e1;
    margin: 0;
}

.member-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.member-card-actions .btn-sm {
    flex: 1;
    text-align: center;
    justify-content: center;
    padding: 7px 12px;
    font-size: 0.82rem;
}

/* ==========================================================================
   30. Комплексна оптимізація мобільної версії (GNOZIS Mobile Suite)
   Підтримка екранів < 992px, < 768px, < 480px, < 360px
   ========================================================================== */

/* Глобальні налаштування для тач-пристроїв */
@media (max-width: 992px) {
    *, *::before, *::after {
        -webkit-tap-highlight-color: transparent;
    }

    button, a, input, select, textarea {
        touch-action: manipulation;
    }

    /* Запобігання автозуму на iOS для полів вводу */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Адаптивна розмітка сторінки */
    .gnozis-page-shell {
        padding: 14px 10px calc(80px + env(safe-area-inset-bottom, 0px)) 10px;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* 3-колонкова стрічка (gnozis-layout-3col) -> в 1 чисту центральну колонку */
    .gnozis-layout-3col,
    .gnozis-stream-layout,
    .stream-grid-layout,
    .gnozis-columns-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Приховуємо дублюючий лівий сайдбар на планшетах і мобільних (навігація вже є в topbar/bottombar) */
    .gnozis-layout-3col .gnozis-col-left,
    .gnozis-col-left,
    .stream-sidebar-left {
        display: none !important;
    }

    .gnozis-layout-3col .gnozis-col-center,
    .gnozis-col-center,
    .stream-feed-center {
        width: 100% !important;
        max-width: 100% !important;
        order: 1 !important;
    }

    .gnozis-layout-3col .gnozis-col-right,
    .gnozis-col-right,
    .stream-sidebar-right {
        width: 100% !important;
        max-width: 100% !important;
        order: 2 !important;
        position: static !important;
        margin-top: 14px !important;
    }

    /* Сітка магазину на планшетах (3 колонки) */
    .products-grid,
    .woocommerce ul.products,
    .gnozis-shop-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
}

/* ==========================================================================
   Мобільні пристрої (< 768px) - Стиль нативного додатка (Native App UX)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Стрічка новин: приховуємо правий сайдбар на мобільних для чистоти стрічки */
    .gnozis-layout-3col .gnozis-col-right,
    .gnozis-col-right,
    .stream-sidebar-right {
        display: none !important;
    }

    /* 2. Верхній бар (Topbar) */
    .gnozis-fb-topbar {
        position: sticky !important;
        top: 0 !important;
        height: 54px !important;
    }

    .fb-topbar-inner {
        padding: 0 10px !important;
        justify-content: space-between !important;
    }

    .fb-topbar-left {
        gap: 8px !important;
    }

    .fb-brand-circle {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.15rem !important;
    }

    /* 3. Приховуємо десктопні вкладки у шапці на мобільних */
    .fb-topbar-center {
        display: none !important;
    }

    /* 4. Кнопки швидких дій праворуч (Кошик, Чат, Сповіщення, Профіль) */
    .fb-topbar-right {
        gap: 6px !important;
    }

    .fb-round-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .fb-round-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    .fb-avatar-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .fb-avatar-frame {
        width: 36px !important;
        height: 36px !important;
    }

    .fb-avatar-arrow-badge {
        display: none !important;
    }

    .fb-profile-dropdown-menu {
        right: 4px !important;
        width: calc(100vw - 20px) !important;
        max-width: 320px !important;
        border-radius: 16px !important;
    }

    /* 5. Блок створення нового допису (Post Composer) на мобільних */
    .gnozis-composer-card {
        padding: 12px 14px !important;
        border-radius: 16px !important;
        margin-bottom: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .composer-top {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .composer-avatar-wrap {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0 !important;
    }

    .composer-textarea {
        font-size: 16px !important;
        min-height: 48px !important;
        padding: 8px 12px !important;
        border-radius: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .composer-bottom {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    .composer-tools {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .composer-tool-btn {
        padding: 6px 10px !important;
        font-size: 0.78rem !important;
        border-radius: 8px !important;
    }

    .composer-destination-select-wrap {
        flex: 1 !important;
        min-width: 120px !important;
    }

    .composer-destination-select {
        width: 100% !important;
        font-size: 0.78rem !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
    }

    .btn-publish-post,
    .btn-publish-wall-post {
        width: 100% !important;
        padding: 10px !important;
        font-size: 0.88rem !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }

    /* 6. Вкладки фільтрації Стрічки (Horizontal Swipe) */
    .gnozis-feed-filter-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding: 4px 2px 10px 2px !important;
        scrollbar-width: none !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }

    .gnozis-feed-filter-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .feed-tab-btn {
        flex-shrink: 0 !important;
        padding: 8px 14px !important;
        border-radius: 20px !important;
        font-size: 0.82rem !important;
        white-space: nowrap !important;
    }

    /* 7. Картки дописів у стрічці (Gnozis Post Cards) - Бездоганна адаптивність */
    .gnozis-feed-stream {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        gap: 12px !important;
    }

    .gnozis-post-card {
        padding: 12px 14px !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .post-card-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        margin-bottom: 10px !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .post-author-box {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        flex: 1 !important;
        overflow: hidden !important;
    }

    .author-avatar-wrap {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0 !important;
    }

    .author-meta {
        min-width: 0 !important;
        flex: 1 !important;
        overflow: hidden !important;
    }

    .author-name-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px 6px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .author-name {
        font-size: 0.92rem !important;
        margin: 0 !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 130px !important;
    }

    .group-target-pill {
        font-size: 0.72rem !important;
        max-width: 120px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    .group-target-pill a {
        display: inline-block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }

    .wall-target-name {
        max-width: 100px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: inline-block !important;
    }

    .rank-badge {
        font-size: 0.60rem !important;
        padding: 2px 5px !important;
        border-radius: 5px !important;
        flex-shrink: 0 !important;
    }

    .post-time {
        font-size: 0.72rem !important;
        color: #94a3b8 !important;
        display: block !important;
        margin-top: 1px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .post-header-actions {
        flex-shrink: 0 !important;
    }

    .post-bookmark-btn {
        width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .post-content {
        margin-bottom: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .post-text-body {
        font-size: 0.90rem !important;
        line-height: 1.55 !important;
        color: #e2e8f0 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .post-media-frame {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 240px !important;
        box-sizing: border-box !important;
        margin-top: 10px !important;
    }

    .post-media-img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* Опитування */
    .gnozis-poll-widget {
        margin-top: 10px !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .poll-option-row {
        padding: 8px 10px !important;
        border-radius: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .poll-content-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 0.78rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .poll-content-inner .poll-text {
        flex: 1 !important;
        min-width: 0 !important;
        word-break: break-word !important;
    }

    .poll-content-inner .poll-stat {
        flex-shrink: 0 !important;
        font-size: 0.72rem !important;
    }

    /* Футер картки: 4 реакції сіткою + статистика */
    .post-card-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding-top: 8px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .post-reactions-bar {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .reaction-pill-btn {
        width: 100% !important;
        padding: 5px 2px !important;
        font-size: 0.76rem !important;
        border-radius: 10px !important;
        min-height: 30px !important;
        gap: 3px !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .reaction-emoji {
        font-size: 0.85rem !important;
    }

    .reaction-count {
        font-size: 0.72rem !important;
    }

    .post-stats-bar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding-top: 6px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
        box-sizing: border-box !important;
    }

    .post-stats-link {
        font-size: 0.76rem !important;
        gap: 4px !important;
    }

    /* 8. Сітка товарів у магазині (2 рівні акуратні колонки) */
    .products-grid,
    .woocommerce ul.products,
    .gnozis-shop-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .product-card,
    .woocommerce ul.products li.product {
        padding: 10px !important;
        border-radius: 12px !important;
    }

    .product-card-thumb,
    .woocommerce ul.products li.product img {
        border-radius: 8px !important;
        aspect-ratio: 1/1 !important;
        object-fit: cover !important;
    }

    .product-card-title,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        margin-top: 6px !important;
    }

    .product-card-price,
    .woocommerce ul.products li.product .price {
        font-size: 0.92rem !important;
        margin: 4px 0 8px 0 !important;
    }

    .product-card-actions .btn-buy-now,
    .product-card-actions .button,
    .woocommerce ul.products li.product .button {
        padding: 8px 6px !important;
        font-size: 0.78rem !important;
        border-radius: 8px !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* 9. Каталог користувачів / друзів (Members) */
    .members-grid-container {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .member-card {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .member-avatar-wrap {
        width: 48px !important;
        height: 48px !important;
    }

    /* 10. Каталог груп (Groups) */
    .groups-cards-grid,
    .groups-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .group-card {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    /* 11. Шапка профілю (Profile Header) */
    .profile-header-card {
        border-radius: 16px !important;
        overflow: hidden !important;
        margin-bottom: 16px !important;
    }

    .profile-cover-wrap {
        height: 130px !important;
    }

    .profile-header-content {
        padding: 0 14px 16px 14px !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .profile-main-avatar-wrap {
        width: 76px !important;
        height: 76px !important;
        margin-top: -38px !important;
        border-width: 3px !important;
        margin-bottom: 8px !important;
    }

    .profile-header-titles {
        align-items: center !important;
    }

    .profile-display-name {
        font-size: 1.25rem !important;
    }

    .profile-meta-chips-wrap {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .profile-stats-bar {
        justify-content: center !important;
        gap: 16px !important;
        width: 100% !important;
        padding-top: 10px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .profile-header-actions {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 10px !important;
    }

    .profile-header-actions .btn {
        flex: 1 !important;
        justify-content: center !important;
    }

    /* Навігаційні вкладки профілю з горизонтальним скролом */
    .profile-nav-tabs-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
    }

    .profile-nav-tabs-wrap::-webkit-scrollbar {
        display: none !important;
    }

    .profile-nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        gap: 6px !important;
    }

    /* 12. Плаваючий рекомендований банер товару */
    .gnozis-recommended-shop-widget,
    .gnozis-floating-shop-widget {
        bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
        right: 10px !important;
        left: 10px !important;
        max-width: calc(100vw - 20px) !important;
        width: auto !important;
        border-radius: 14px !important;
        padding: 10px 12px !important;
        z-index: 998 !important;
    }

    .rec-widget-inner {
        gap: 10px !important;
    }

    .rec-widget-thumb {
        width: 44px !important;
        height: 44px !important;
        border-radius: 8px !important;
    }

    .rec-widget-title {
        font-size: 0.82rem !important;
        max-width: 140px !important;
    }

    .rec-widget-price {
        font-size: 0.85rem !important;
    }

    .rec-widget-btn {
        padding: 7px 12px !important;
        font-size: 0.78rem !important;
    }

    /* 13. Модальні вікна (Створення групи, Редагування профілю, Купівля в 1 клік) */
    .gnozis-modal-dialog,
    .modal-dialog-card,
    .group-modal-content,
    .gnozis-quick-buy-card {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: 86vh !important;
        border-radius: 18px !important;
        padding: 18px 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-header h3 {
        font-size: 1.15rem !important;
    }

    /* 14. Висувний кошик (Cart Drawer) */
    .gnozis-cart-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .cart-drawer-header {
        padding: 16px !important;
    }

    .cart-drawer-footer {
        padding: 16px !important;
        padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ==========================================================================
   Екстра-малі екрани (< 380px)
   ========================================================================== */
@media (max-width: 380px) {
    .products-grid,
    .woocommerce ul.products,
    .gnozis-shop-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .product-card {
        padding: 8px !important;
    }

    .product-card-title {
        font-size: 0.78rem !important;
    }

    .rec-widget-title {
        max-width: 100px !important;
    }
}

/* ==========================================================================
   15. САКТРАЛЬНЕ ОФОРМЛЕННЯ ЗАМОВЛЕННЯ (GNOZIS CHECKOUT & THANK YOU)
   Дизайн-система Steel Abyss / Cyber-Mysticism
   ========================================================================== */
.gnozis-checkout-page-wrapper,
.gnozis-standard-page-wrapper {
    width: 100%;
    min-height: calc(100vh - 120px);
    padding: 24px 0 60px;
    position: relative;
    z-index: 2;
}

.gnozis-checkout-container,
.gnozis-page-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 15.1. Хедер чекауту та прогрес-бар */
.gnozis-checkout-header {
    text-align: center;
    margin-bottom: 36px;
    position: relative;
}

.checkout-header-sigil {
    font-size: 1.15rem;
    color: var(--accent-bright);
    letter-spacing: 0.3em;
    margin-bottom: 8px;
    text-shadow: 0 0 12px var(--accent-glow-strong);
}

.checkout-main-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.checkout-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 620px;
    margin: 0 auto 28px;
    line-height: 1.5;
}

/* Прогрес-бар (Stepper) */
.gnozis-checkout-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 520px;
    margin: 0 auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-card);
    border-radius: var(--gnozis-radius-full);
    padding: 10px 24px;
    box-shadow: var(--shadow-card);
}

.stepper-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: var(--gnozis-transition);
}

.step-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-elevated);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid var(--border-default);
    transition: var(--gnozis-transition);
}

.stepper-item.is-completed {
    color: var(--accent-bright);
}

.stepper-item.is-completed .step-badge {
    background: var(--accent-primary);
    color: #ffffff;
    border-color: var(--accent-bright);
    box-shadow: 0 0 10px var(--accent-glow);
}

.stepper-item.is-active {
    color: #ffffff;
}

.stepper-item.is-active .step-badge {
    background: var(--accent-bright);
    color: var(--bg-void);
    border-color: #ffffff;
    box-shadow: 0 0 14px var(--accent-glow-strong);
}

.stepper-line {
    flex: 1;
    height: 2px;
    background: var(--border-default);
    margin: 0 14px;
    border-radius: 2px;
    transition: var(--gnozis-transition);
}

.stepper-line.is-active {
    background: var(--accent-primary);
    box-shadow: 0 0 8px var(--accent-glow);
}

.stepper-line.is-current {
    background: linear-gradient(90deg, var(--accent-primary) 0%, var(--border-default) 100%);
}

/* 15.2. Сітка форми (2 колонки) */
.gnozis-checkout-layout-grid {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 28px;
    align-items: start;
}

.gnozis-checkout-col-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gnozis-checkout-col-summary {
    position: relative;
}

.gnozis-sticky-summary-box {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 15.3. Картки чекауту (Cards) */
.gnozis-card.checkout-step-card,
.gnozis-card.checkout-summary-card,
.gnozis-card.checkout-coupon-card,
.gnozis-card.checkout-empty-card,
.gnozis-card.thankyou-success-card,
.gnozis-card.thankyou-failed-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-card);
    border-radius: var(--gnozis-radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: var(--gnozis-transition);
    position: relative;
}

.checkout-step-card {
    padding: 24px 28px;
}

.checkout-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.header-icon-box {
    width: 40px;
    height: 40px;
    border-radius: var(--gnozis-radius-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.header-title-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.step-num-pill {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-fill-medium);
    color: var(--accent-bright);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--accent-primary);
}

.step-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* 15.4. Поля введення WooCommerce (Forms, Inputs, Blocks & Select2) */
.gnozis-checkout-page-wrapper,
.woocommerce-checkout,
.wp-block-woocommerce-checkout,
.wc-block-checkout {
    color: var(--text-primary);
}

/* Грід для класичних полів */
.gnozis-checkout-form .woocommerce-billing-fields__field-wrapper,
.gnozis-checkout-form .woocommerce-shipping-fields__field-wrapper,
.gnozis-checkout-form .woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.gnozis-checkout-form .woocommerce-additional-fields {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

.gnozis-checkout-form .form-row,
.woocommerce-checkout .form-row {
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gnozis-checkout-form .form-row-wide,
.gnozis-checkout-form .notes,
.gnozis-checkout-form #billing_address_1_field,
.gnozis-checkout-form #billing_address_2_field,
.gnozis-checkout-form #billing_country_field,
.gnozis-checkout-form #shipping_address_1_field,
.gnozis-checkout-form #shipping_address_2_field,
.gnozis-checkout-form #shipping_country_field {
    grid-column: 1 / -1;
}

.gnozis-checkout-form label,
.woocommerce-checkout label,
.wc-block-components-checkout-step__title,
.wc-block-components-title {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.gnozis-checkout-form .required,
.woocommerce-checkout .required {
    color: var(--accent-bright);
    font-weight: 700;
    text-decoration: none;
}

/* 15.4.1. Універсальні темні поля введення (Класичні + Блоки) */
.gnozis-checkout-page-wrapper input[type="text"],
.gnozis-checkout-page-wrapper input[type="email"],
.gnozis-checkout-page-wrapper input[type="tel"],
.gnozis-checkout-page-wrapper input[type="password"],
.gnozis-checkout-page-wrapper input[type="number"],
.gnozis-checkout-page-wrapper textarea,
.gnozis-checkout-page-wrapper select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.wc-block-checkout__main input,
.wc-block-checkout__main select,
.wc-block-checkout__main textarea,
.wc-block-checkout__sidebar input,
.wc-block-checkout__sidebar select,
.wc-block-components-text-input,
.wc-block-components-combobox,
.wc-block-components-combobox-control,
.wc-block-components-select__select,
.wc-block-components-totals-coupon-input-form .wc-block-components-text-input,
.gnozis-coupon-input,
.gnozis-input-coupon {
    width: 100%;
    background: var(--bg-input) !important;
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: var(--gnozis-radius-sm) !important;
    color: var(--text-primary) !important;
    font-family: var(--gnozis-font-body);
    font-size: 0.92rem;
    padding: 12px 14px;
    outline: none;
    transition: var(--gnozis-transition);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Внутрішній input усередині WooCommerce Block wrappers */
.wc-block-components-text-input input,
.wc-block-components-combobox-control input,
.wc-block-components-combobox-control__input,
.wc-block-components-combobox input,
.wc-block-components-textarea textarea,
.wc-block-checkout__main .wc-block-components-text-input input,
.wc-block-checkout__main .wc-block-components-combobox-control input {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--text-primary) !important;
    font-family: var(--gnozis-font-body) !important;
    font-size: 0.92rem !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Стрілочки та суфікси у combobox */
.wc-block-components-combobox-control__toggle,
.wc-block-components-combobox-control__suffix,
.wc-block-components-combobox-control__toggle svg,
.wc-block-components-combobox-control__suffix svg {
    color: var(--accent-bright) !important;
    fill: var(--accent-bright) !important;
}

/* Запобігання білому фону автозаповнення браузера (Chrome / Edge / Safari) */
.gnozis-checkout-page-wrapper input:-webkit-autofill,
.gnozis-checkout-page-wrapper input:-webkit-autofill:hover,
.gnozis-checkout-page-wrapper input:-webkit-autofill:focus,
.gnozis-checkout-page-wrapper textarea:-webkit-autofill,
.gnozis-checkout-page-wrapper select:-webkit-autofill,
.woocommerce-checkout input:-webkit-autofill,
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-combobox-control input:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
    box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Floating labels у WooCommerce Blocks */
.wc-block-components-text-input label,
.wc-block-components-combobox label {
    color: var(--text-muted) !important;
    background: transparent !important;
    font-size: 0.88rem !important;
    transition: var(--gnozis-transition) !important;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label,
.wc-block-components-combobox.is-active label,
.wc-block-components-combobox:focus-within label {
    color: var(--accent-bright) !important;
    background: var(--bg-input) !important;
    padding: 0 6px !important;
    border-radius: 3px !important;
}

/* Активний фокусний стан полів */
.gnozis-checkout-page-wrapper input:focus,
.gnozis-checkout-page-wrapper textarea:focus,
.gnozis-checkout-page-wrapper select:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus,
.wc-block-components-text-input:focus-within,
.wc-block-components-combobox:focus-within,
.wc-block-components-combobox-control:focus-within,
.wc-block-components-select__select:focus,
.gnozis-coupon-input:focus,
.gnozis-input-coupon:focus {
    background: var(--bg-input-focus) !important;
    border-color: var(--accent-bright) !important;
    box-shadow: 0 0 0 3px var(--accent-glow), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.gnozis-checkout-page-wrapper textarea,
.woocommerce-checkout textarea {
    min-height: 90px;
    resize: vertical;
}

.gnozis-checkout-page-wrapper select,
.woocommerce-checkout select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237898B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 38px !important;
}

/* 15.4.2. Випадаючі списки Combobox & Select2 */
.wc-block-components-combobox-list,
.select2-dropdown {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-hover) !important;
    border-radius: var(--gnozis-radius-md) !important;
    box-shadow: var(--shadow-card-elevated) !important;
    color: var(--text-primary) !important;
    overflow: hidden !important;
    z-index: 99999 !important;
}

.wc-block-components-combobox-list__option,
.select2-results__option {
    color: var(--text-primary) !important;
    background: transparent !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    transition: var(--gnozis-transition) !important;
}

.wc-block-components-combobox-list__option:hover,
.wc-block-components-combobox-list__option--is-active,
.wc-block-components-combobox-list__option[aria-selected="true"],
.select2-results__option--highlighted[aria-selected],
.select2-results__option[aria-selected="true"] {
    background: var(--bg-elevated) !important;
    color: var(--accent-bright) !important;
}

.select2-container--default .select2-selection--single {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: var(--gnozis-radius-sm) !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
    line-height: 48px !important;
    padding-left: 14px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
}

.select2-search--dropdown .select2-search__field {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-input) !important;
    color: var(--text-primary) !important;
    border-radius: var(--gnozis-radius-xs) !important;
    padding: 8px 12px !important;
}

/* 15.4.3. Блоки кроків та панелі WooCommerce Blocks */
.wc-block-components-checkout-step,
.wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-components-totals-wrapper {
    background: var(--gnozis-bg-card) !important;
    border: 1px solid var(--gnozis-border-card) !important;
    border-radius: var(--gnozis-radius-lg) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.wc-block-components-checkout-step__title,
.wc-block-components-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-bottom: 16px !important;
    font-family: var(--gnozis-font-heading) !important;
}

.wc-block-components-radio-control-accordion-option {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--gnozis-radius-md) !important;
    padding: 14px 18px !important;
    margin-bottom: 10px !important;
    transition: var(--gnozis-transition) !important;
}

.wc-block-components-radio-control-accordion-option:hover,
.wc-block-components-radio-control-accordion-option.is-selected {
    border-color: var(--accent-bright) !important;
    background: var(--bg-elevated) !important;
}

.wc-block-components-radio-control__label {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

.wc-block-components-radio-control__description {
    color: var(--text-secondary) !important;
}

.wc-block-components-totals-item {
    color: var(--text-secondary) !important;
    border-color: var(--border-subtle) !important;
    font-size: 0.95rem !important;
}

.wc-block-components-totals-item .wc-block-components-totals-item__value {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

.wc-block-components-totals-item.wc-block-components-totals-footer {
    border-top: 1px solid var(--border-hover) !important;
    padding-top: 14px !important;
    margin-top: 8px !important;
}

.wc-block-components-totals-footer .wc-block-components-totals-item__value {
    color: var(--accent-bright) !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    text-shadow: 0 0 12px var(--accent-glow);
}

/* Кнопка оформлення замовлення у WooCommerce Blocks */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button {
    background: var(--accent-primary) !important;
    color: var(--text-primary) !important;
    font-family: var(--gnozis-font-heading) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
    border-radius: var(--gnozis-radius-md) !important;
    border: 1px solid rgba(96, 120, 144, 0.55) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.40) !important;
    transition: var(--gnozis-transition) !important;
    width: 100% !important;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:hover {
    background: var(--accent-bright) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.50) !important;
    transform: translateY(-1px) !important;
}

/* Чекбокси створення акаунта або іншої адреси */
.gnozis-checkout-form .woocommerce-form__label-for-checkbox,
.wc-block-components-checkbox__label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary) !important;
    margin-top: 8px;
}

.gnozis-checkout-form input[type="checkbox"],
.wc-block-components-checkbox__input {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: var(--gnozis-radius-xs);
    background: var(--bg-input) !important;
    border: 1px solid var(--border-input) !important;
    cursor: pointer;
    position: relative;
    transition: var(--gnozis-transition);
}

.gnozis-checkout-form input[type="checkbox"]:checked,
.wc-block-components-checkbox__input:checked {
    background: var(--accent-primary) !important;
    border-color: var(--accent-bright) !important;
}

.gnozis-checkout-form input[type="checkbox"]:checked::after,
.wc-block-components-checkbox__input:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
}

/* 15.5. Способи оплати (Payment Methods) */
.gnozis-checkout-payment-box {
    margin-top: 10px;
}

.gnozis-payment-methods-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0 0 20px;
}

.gnozis-payment-method-item {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--gnozis-radius-md);
    padding: 16px 18px;
    cursor: pointer;
    transition: var(--gnozis-transition);
    position: relative;
}

.gnozis-payment-method-item:hover {
    border-color: var(--border-hover);
    background: var(--bg-elevated);
}

.gnozis-payment-method-item.is-selected {
    border-color: var(--accent-bright);
    background: var(--bg-elevated);
    box-shadow: 0 0 16px var(--accent-glow);
}

.gnozis-payment-radio {
    display: none;
}

.gnozis-payment-method-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.custom-radio-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-input);
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--gnozis-transition);
}

.gnozis-payment-method-item.is-selected .custom-radio-circle {
    border-color: var(--accent-bright);
    background: var(--accent-bright);
    box-shadow: 0 0 8px var(--accent-glow);
}

.gateway-icon-badge {
    font-size: 1.25rem;
    line-height: 1;
}

.gateway-title-text {
    flex: 1;
}

.gateway-img-icons img {
    max-height: 24px;
    width: auto;
    object-fit: contain;
}

.gnozis-payment-desc-box {
    margin-top: 12px;
    padding: 14px 16px;
    background: #142232 !important;
    border: 1px solid #283C50 !important;
    border-radius: 8px !important;
    font-size: 0.88rem;
    color: #9AB0C8 !important;
    line-height: 1.55;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.woocommerce-checkout #payment div.payment_box {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 14px 16px !important;
    margin: 12px 0 6px !important;
    font-size: 0.88rem !important;
    border-radius: 8px !important;
    line-height: 1.55 !important;
    background-color: #142232 !important;
    color: #9AB0C8 !important;
    border: 1px solid #283C50 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.woocommerce-checkout #payment div.payment_box p {
    margin: 0 !important;
    color: #9AB0C8 !important;
}

.woocommerce-checkout #payment div.payment_box::before {
    content: "" !important;
    display: block !important;
    border: 8px solid transparent !important;
    border-bottom-color: #283C50 !important;
    position: absolute !important;
    top: -16px !important;
    left: 24px !important;
    margin: 0 !important;
}

.woocommerce-checkout #payment div.payment_box::after {
    content: "" !important;
    display: block !important;
    border: 7px solid transparent !important;
    border-bottom-color: #142232 !important;
    position: absolute !important;
    top: -14px !important;
    left: 25px !important;
    margin: 0 !important;
}

/* Бейджі брендів біля назви методу */
.gateway-brand-logos {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.svg-brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    border: none;
    line-height: 1;
    transition: var(--gnozis-transition);
}

.svg-brand-badge svg {
    display: block;
    height: 24px;
    width: auto;
}

.svg-brand-badge:hover {
    transform: translateY(-1px);
}

.badge-svg-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #0E1A28;
    border: 1px solid #223448;
}

.badge-svg-apple {
    background: #000000;
    color: #FFFFFF;
}

.badge-svg-google {
    background: #182230;
}

.brand-logo-pill {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
}

.brand-logo-pill.visa-pill {
    background: #1A1F71;
    color: #FFFFFF;
    font-style: italic;
    font-family: Arial, sans-serif;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.brand-logo-pill.mc-pill {
    background: #252525;
    color: #EB001B;
    border: 1px solid rgba(235, 0, 27, 0.4);
}

.brand-logo-pill.apple-pill {
    background: #000000;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.brand-logo-pill.gpay-pill {
    background: #3c4043;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Форма введення картки */
.gnozis-card-payment-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gnozis-express-pay-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 6px;
}

.btn-express-applepay,
.btn-express-gpay,
.btn-applepay-direct,
.btn-gpay-direct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--gnozis-radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--gnozis-transition);
    border: 1px solid var(--border-hover);
}

.btn-express-applepay,
.btn-applepay-direct {
    background: #000000;
    color: #FFFFFF;
}

.btn-express-applepay:hover,
.btn-applepay-direct:hover {
    background: #1c1c1e;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.btn-express-gpay,
.btn-gpay-direct {
    background: #1f1f1f;
    color: #FFFFFF;
}

.btn-express-gpay:hover,
.btn-gpay-direct:hover {
    background: #2d2d2d;
    box-shadow: 0 0 12px rgba(66, 133, 244, 0.25);
}

.gnozis-payment-separator {
    text-align: center;
    position: relative;
    margin: 6px 0;
}

.gnozis-payment-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-subtle);
    z-index: 0;
}

.gnozis-payment-separator span {
    position: relative;
    background: var(--bg-card);
    padding: 0 10px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.gnozis-card-input-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gnozis-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.gnozis-field-group label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.card-input-with-badges {
    position: relative;
}

.card-input-with-badges input {
    padding-right: 90px !important;
}

.input-card-logos {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    pointer-events: none;
}

.logo-badge-visa {
    font-size: 0.7rem;
    font-weight: 800;
    font-style: italic;
    background: #1A1F71;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
}

.logo-badge-mc {
    font-size: 0.7rem;
    font-weight: 800;
    background: #EB001B;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
}

.gnozis-field-row-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.gnozis-payment-secure-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--accent-fill-soft);
    border: 1px solid var(--border-subtle);
    padding: 8px 12px;
    border-radius: var(--gnozis-radius-xs);
}

.gnozis-applepay-preview-badge,
.gnozis-gpay-preview-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--gnozis-radius-sm);
    margin-top: 10px;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.gnozis-applepay-preview-badge .pay-icon {
    font-weight: 800;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
}

.gnozis-gpay-preview-badge .pay-icon {
    font-weight: 800;
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
}

/* 15.6. Картка підсумку замовлення (Summary Card) */
.checkout-summary-card {
    padding: 22px 24px;
}

.summary-header {
    justify-content: space-between;
}

.summary-items-count {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-bright);
    background: var(--accent-fill-medium);
    padding: 4px 10px;
    border-radius: var(--gnozis-radius-full);
    border: 1px solid var(--accent-primary);
}

/* Список товарів у чеку */
.gnozis-review-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-hover) transparent;
}

.gnozis-review-items-list::-webkit-scrollbar {
    width: 4px;
}

.gnozis-review-items-list::-webkit-scrollbar-track {
    background: transparent;
}

.gnozis-review-items-list::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 4px;
}

.gnozis-review-items-list::-webkit-scrollbar-thumb:hover {
    background: var(--accent-bright);
}

.gnozis-review-items-list .gnozis-review-item,
.woocommerce-checkout-review-order .gnozis-review-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--gnozis-radius-sm) !important;
    transition: var(--gnozis-transition) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.gnozis-review-items-list .gnozis-review-item:hover,
.woocommerce-checkout-review-order .gnozis-review-item:hover {
    border-color: var(--border-card) !important;
    background: var(--bg-elevated) !important;
}

.review-item-thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--gnozis-radius-xs);
    background: var(--bg-elevated);
    position: relative;
    flex-shrink: 0;
    overflow: visible;
}

.review-item-thumb img,
.review-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--gnozis-radius-xs);
}

.review-item-qty-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: var(--accent-primary);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ffffff;
    box-shadow: var(--shadow-xs);
}

.review-item-details {
    flex: 1;
    min-width: 0;
}

.review-item-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.review-item-total {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
}

.gnozis-review-divider {
    height: 1px;
    background: var(--border-card);
    margin: 18px 0;
}

.gnozis-review-divider.total-divider {
    background: var(--border-active);
    opacity: 0.5;
    margin: 14px 0;
}

/* Підсумки сум */
.gnozis-review-totals-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.review-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.review-total-row .row-val {
    font-weight: 600;
    color: var(--text-primary);
}

.review-total-row .discount-val {
    color: #10B981;
}

.grand-total-row {
    font-size: 1.15rem;
    color: var(--text-primary);
    margin-top: 4px;
}

.grand-total-row .row-label {
    font-weight: 700;
}

.grand-total-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--accent-bright) !important;
    text-shadow: 0 0 12px var(--accent-glow);
}

/* 15.7. Кнопка підтвердження замовлення */
.gnozis-place-order-box {
    margin-top: 20px;
}

.btn-gnozis-place-order {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: var(--gnozis-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 20px var(--accent-glow-strong);
    transition: var(--gnozis-transition);
    border: none;
    color: #ffffff;
    background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent-primary) 100%);
}

.btn-gnozis-place-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--accent-glow-strong);
}

.btn-gnozis-place-order:active {
    transform: translateY(0);
}

.btn-spinner-ring {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: gnozisSpin 0.7s linear infinite;
}

.btn-gnozis-place-order.is-loading .btn-spinner-ring {
    display: inline-block;
}

.btn-gnozis-place-order.is-loading .btn-arrow {
    display: none;
}

@keyframes gnozisSpin {
    to { transform: rotate(360deg); }
}

/* 15.8. Промокод картка (Coupon Box) */
.checkout-coupon-card {
    padding: 18px 20px;
}

.coupon-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.coupon-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}

.checkout-coupon-form-inline {
    display: flex;
    gap: 8px;
}

.checkout-coupon-form-inline .gnozis-input-coupon {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.88rem;
}

.btn-apply-gnozis-coupon {
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--gnozis-radius-sm);
    white-space: nowrap;
    cursor: pointer;
    border: none;
    background: var(--accent-primary);
    color: #ffffff;
    transition: var(--gnozis-transition);
}

.btn-apply-gnozis-coupon:hover {
    background: var(--accent-bright);
}

.gnozis-coupon-message {
    margin-top: 8px;
    font-size: 0.82rem;
    padding: 6px 10px;
    border-radius: var(--gnozis-radius-xs);
}

.gnozis-coupon-message.is-success {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.gnozis-coupon-message.is-error {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* 15.9. Блок сакральних гарантій (Trust Badges) */
.checkout-trust-badges {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trust-badge-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trust-icon {
    font-size: 1.25rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-card);
    flex-shrink: 0;
}

.trust-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.trust-text strong {
    font-size: 0.82rem;
    color: var(--text-primary);
}

.trust-text small {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* 15.10. Стан порожнього кошика */
.checkout-empty-card {
    padding: 48px 32px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 40px;
}

.empty-state-sigil {
    font-size: 3.5rem;
    margin-bottom: 16px;
    display: inline-block;
    animation: gnozisFloat 3s ease-in-out infinite;
}

@keyframes gnozisFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.empty-state-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.empty-state-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
}

.empty-state-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.checkout-empty-recommended-wrap {
    max-width: 800px;
    margin: 0 auto;
}

.checkout-rec-title {
    text-align: center;
    font-size: 1.15rem;
    color: var(--accent-bright);
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.checkout-rec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.rec-card-item {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.rec-thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--gnozis-radius-sm);
    background: var(--bg-elevated);
    flex-shrink: 0;
    overflow: hidden;
}

.rec-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rec-meta {
    flex: 1;
    min-width: 0;
}

.rec-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.rec-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-bright);
}

/* 15.11. Сторінка підтвердження замовлення (Thank you page) */
.gnozis-thankyou-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.thankyou-success-card {
    padding: 36px 32px;
    text-align: center;
    position: relative;
    margin-bottom: 24px;
}

.success-ambient-aura {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, var(--accent-glow-strong) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    filter: blur(40px);
}

.thankyou-sigil-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent-primary) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 0 24px var(--accent-glow-strong);
}

.thankyou-sigil-badge .sigil-icon {
    font-size: 2rem;
    color: #ffffff;
}

.thankyou-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.thankyou-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 28px;
    line-height: 1.5;
}

.thankyou-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--gnozis-radius-md);
    padding: 16px;
    text-align: left;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}

.meta-value {
    font-size: 0.92rem;
    color: var(--text-primary);
    font-weight: 600;
}

.meta-value.text-accent {
    color: var(--accent-bright);
    font-weight: 700;
}

.thankyou-footer-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
}

/* 15.12. Адаптивність чекауту для планшетів та мобільних */
@media (max-width: 1024px) {
    .gnozis-checkout-layout-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .gnozis-sticky-summary-box {
        position: static;
    }

    .thankyou-meta-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .checkout-main-title {
        font-size: 1.7rem;
    }

    .gnozis-checkout-stepper {
        padding: 8px 16px;
    }

    .stepper-item {
        font-size: 0.78rem;
    }

    .gnozis-checkout-form .woocommerce-billing-fields__field-wrapper,
    .gnozis-checkout-form .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: 1fr;
    }

    .checkout-step-card {
        padding: 18px 16px;
    }

    .checkout-summary-card {
        padding: 18px 16px;
    }

    .checkout-rec-grid {
        grid-template-columns: 1fr;
    }

    .thankyou-meta-grid {
        grid-template-columns: 1fr;
    }

    .thankyou-success-card {
        padding: 24px 18px;
    }
}

/* ==========================================================================
   16. GNOZIS SINGLE PRODUCT (Преміальний дизайн сторінки товару)
   Occult Tech / Steel Abyss Dark Mode
   ========================================================================== */

/* 16.0. КРИТИЧНИЙ СКИД СТАРИХ FLOATS ТА ОБМЕЖЕНЬ ШИРИНИ WOOCOMMERCE */
.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .entry-summary {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.gnozis-single-product-container {
    max-width: 1360px;
    width: 100%;
    margin: 0 auto;
    padding: 8px 0 60px;
}

/* 16.1. Верхній навігаційний бар (Breadcrumbs + Back Button) */
.gnozis-product-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    padding: 12px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--gnozis-radius-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.product-topbar-breadcrumbs .woocommerce-breadcrumb,
.product-topbar-breadcrumbs .gnozis-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--text-muted);
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.product-topbar-breadcrumbs a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--gnozis-transition);
}

.product-topbar-breadcrumbs a:hover {
    color: var(--accent-bright);
    text-shadow: 0 0 10px var(--accent-glow);
}

.crumb-separator {
    color: var(--accent-dim);
    font-size: 0.68rem;
    margin: 0 4px;
    opacity: 0.8;
}

.btn-back-to-shop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(96, 120, 144, 0.14);
    border: 1px solid var(--border-card);
    border-radius: var(--gnozis-radius-md);
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--gnozis-transition);
    white-space: nowrap;
}

.btn-back-to-shop:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-bright);
    color: #ffffff;
    box-shadow: 0 0 12px var(--accent-glow);
}

/* 16.2. Головний Hero-блок товару (Галерея + Панель артефакту) */
.gnozis-single-product-card {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.gnozis-product-hero {
    display: grid;
    grid-template-columns: 500px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* Ліва колонка: Галерея артефакту */
.gnozis-product-gallery-wrap {
    position: relative;
    border-radius: var(--gnozis-radius-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    padding: 24px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-card-elevated);
    overflow: hidden;
}

.product-gallery-ambient-glow {
    position: absolute;
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    background: radial-gradient(circle, rgba(96, 120, 144, 0.16) 0%, rgba(0, 16, 32, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.woocommerce-product-gallery {
    position: relative;
    z-index: 1;
    width: 100% !important;
}

.woocommerce-product-gallery__wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-product-gallery__image {
    border-radius: var(--gnozis-radius-lg);
    overflow: hidden;
    background: rgba(0, 16, 32, 0.6);
    border: 1px solid var(--border-subtle);
}

.woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: var(--gnozis-radius-lg);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.woocommerce-product-gallery__image:hover img {
    transform: scale(1.03);
}

.woocommerce-product-gallery__trigger {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 38px !important;
    height: 38px !important;
    background: rgba(16, 24, 32, 0.88) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--gnozis-radius-full) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    text-indent: -9999px;
    backdrop-filter: blur(8px);
    transition: var(--gnozis-transition);
}

.woocommerce-product-gallery__trigger::after {
    content: "🔍";
    font-size: 14px;
    text-indent: 0;
    display: block;
    line-height: 1;
}

.woocommerce-product-gallery__trigger:hover {
    background: var(--bg-surface) !important;
    border-color: var(--accent-bright) !important;
}

/* Мініатюри галереї */
.flex-control-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    list-style: none;
    padding: 0;
}

.flex-control-thumbs li {
    width: 76px;
    height: 76px;
    border-radius: var(--gnozis-radius-md);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    cursor: pointer;
    background: rgba(0, 16, 32, 0.5);
    transition: var(--gnozis-transition);
}

.flex-control-thumbs li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.65;
    transition: var(--gnozis-transition);
}

.flex-control-thumbs li img.flex-active,
.flex-control-thumbs li:hover img {
    opacity: 1;
}

.flex-control-thumbs li:has(img.flex-active),
.flex-control-thumbs li:hover {
    border-color: var(--accent-bright);
    box-shadow: 0 0 14px var(--accent-glow);
}

/* 16.3. Права колонка: Деталі артефакту (Summary Card) */
.gnozis-product-summary {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--gnozis-radius-xl);
    padding: 36px 42px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Стрічка бейджів (Категорія + SKU) */
.gnozis-product-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.badge-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-sigil-lead {
    color: var(--accent-bright);
    font-size: 1rem;
    opacity: 0.85;
}

.product-cat-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 16px;
    background: var(--accent-fill-soft);
    border: 1px solid var(--border-subtle);
    border-radius: var(--gnozis-radius-full);
    color: var(--accent-bright);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: var(--gnozis-transition);
}

.product-cat-pill:hover {
    background: var(--accent-fill-medium);
    border-color: var(--border-hover);
    color: #ffffff;
}

.product-sku-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-family: var(--gnozis-font-mono);
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 4px 10px;
    border-radius: var(--gnozis-radius-xs);
    border: 1px solid var(--border-subtle);
}

.product-sku-badge .sku-val {
    color: var(--text-primary);
    font-weight: 600;
}

/* Заголовок товару */
.product_title.entry-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.22;
    margin: 0;
    letter-spacing: -0.02em;
}

/* Рядок ціни та наявності */
.gnozis-price-stock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.product-price-box .price {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--accent-bright);
    text-shadow: 0 0 20px var(--accent-glow);
    margin: 0;
}

.product-price-box .price del {
    font-size: 1.25rem;
    color: var(--text-muted);
    font-weight: 400;
    text-decoration: line-through;
    opacity: 0.65;
}

.product-price-box .price ins {
    text-decoration: none;
    color: #10b981;
    font-weight: 800;
}

.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: var(--gnozis-radius-full);
    font-size: 0.85rem;
    font-weight: 600;
}

.stock-badge.is-in-stock {
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.stock-badge.is-out-of-stock {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.stock-dot {
    font-size: 0.75rem;
}

/* Короткий опис */
.woocommerce-product-details__short-description {
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.68;
    padding: 16px 20px;
    background: rgba(0, 16, 32, 0.45);
    border-left: 3px solid var(--accent-bright);
    border-radius: 0 var(--gnozis-radius-md) var(--gnozis-radius-md) 0;
}

/* Блок замовлення (Form Cart) */
.gnozis-purchase-action-wrap form.cart {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 6px 0;
}

/* Рядок: лічильник + кнопка додавання в кошик */
.gnozis-purchase-action-wrap form.cart .quantity,
.gnozis-purchase-action-wrap form.cart .gnozis-quantity-wrapper {
    display: inline-flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: var(--gnozis-radius-md);
    overflow: hidden;
    height: 52px;
    transition: var(--gnozis-transition);
}

.gnozis-purchase-action-wrap form.cart .gnozis-quantity-wrapper:focus-within {
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.btn-qty-minus,
.btn-qty-plus {
    width: 44px;
    height: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--gnozis-transition);
    user-select: none;
}

.btn-qty-minus:hover,
.btn-qty-plus:hover {
    background: rgba(96, 120, 144, 0.25);
    color: var(--accent-bright);
}

.gnozis-quantity-wrapper input.qty {
    width: 52px;
    height: 100%;
    background: transparent;
    border: none;
    text-align: center;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 700;
    outline: none;
    padding: 0;
    -moz-appearance: textfield;
}

.gnozis-quantity-wrapper input.qty::-webkit-outer-spin-button,
.gnozis-quantity-wrapper input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Кнопка "Додати в кошик" */
button.single_add_to_cart_button,
.woocommerce button.button.alt.single_add_to_cart_button,
.woocommerce-page button.button.alt.single_add_to_cart_button {
    height: 52px !important;
    width: 100% !important;
    padding: 0 28px !important;
    background: linear-gradient(135deg, #607890 0%, #4a6070 100%) !important;
    border: 1px solid rgba(120, 152, 184, 0.45) !important;
    border-radius: var(--gnozis-radius-md) !important;
    color: #ffffff !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: var(--gnozis-transition) !important;
    box-shadow: 0 4px 18px var(--accent-glow) !important;
}

button.single_add_to_cart_button:hover {
    background: linear-gradient(135deg, #7898b8 0%, #607890 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 26px var(--accent-glow-strong) !important;
    border-color: var(--accent-bright) !important;
}

button.single_add_to_cart_button::before {
    content: "🛒";
    font-size: 1.1rem;
}

/* Кнопка "Купити в 1 клік" */
.btn-trigger-one-click-buy {
    height: 52px;
    width: 100%;
    padding: 0 24px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(217, 119, 6, 0.28) 100%);
    border: 1px solid rgba(245, 158, 11, 0.55);
    border-radius: var(--gnozis-radius-md);
    color: #fbbf24;
    font-size: 0.96rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--gnozis-transition);
}

.btn-trigger-one-click-buy:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.45) 100%);
    border-color: #f59e0b;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.35);
}

/* Блок переваг та гарантій */
.gnozis-product-features-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 4px;
    padding: 18px 20px;
    background: rgba(0, 16, 32, 0.4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--gnozis-radius-lg);
}

.product-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.product-feature-item .feature-icon {
    font-size: 1.2rem;
    color: var(--accent-bright);
    line-height: 1.2;
}

.product-feature-item .feature-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-feature-item .feature-text strong {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
}

.product-feature-item .feature-text span {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.35;
}

/* 16.5. Вкладки опису, характеристик та відгуків (WooCommerce Tabs) */
.woocommerce-tabs {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--gnozis-radius-xl) !important;
    padding: 36px 42px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: var(--shadow-card) !important;
    margin-top: 44px !important;
    margin-bottom: 48px !important;
}

.woocommerce-tabs ul.tabs {
    display: flex !important;
    gap: 12px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 0 0 18px 0 !important;
    margin: 0 0 28px 0 !important;
    list-style: none !important;
    background: transparent !important;
    overflow-x: auto;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
    display: none !important;
}

.woocommerce-tabs ul.tabs li {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--gnozis-radius-md) !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: var(--gnozis-transition) !important;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
    display: none !important;
}

.woocommerce-tabs ul.tabs li a {
    display: block !important;
    padding: 12px 24px !important;
    color: var(--text-muted) !important;
    font-size: 0.94rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: var(--gnozis-transition) !important;
    background: transparent !important;
}

.woocommerce-tabs ul.tabs li.active {
    background: rgba(96, 120, 144, 0.25) !important;
    border-color: var(--accent-bright) !important;
    box-shadow: 0 0 16px var(--accent-glow) !important;
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--text-primary) !important;
}

.woocommerce-tabs ul.tabs li:hover:not(.active) {
    background: var(--bg-elevated) !important;
    border-color: var(--border-hover) !important;
}

.woocommerce-tabs ul.tabs li:hover:not(.active) a {
    color: var(--text-secondary) !important;
}

/* Вміст вкладок */
.woocommerce-Tabs-panel {
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.75;
}

.woocommerce-Tabs-panel h2 {
    display: none;
}

.woocommerce-Tabs-panel p {
    margin-bottom: 16px;
}

.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol {
    margin-left: 20px;
    margin-bottom: 16px;
}

.woocommerce-Tabs-panel li {
    margin-bottom: 6px;
}

/* Таблиця додаткової інформації (атрибути) */
.woocommerce-product-attributes {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
    padding: 14px 18px;
    border: 1px solid var(--border-subtle);
    font-size: 0.92rem;
}

.woocommerce-product-attributes th {
    background: var(--bg-surface);
    color: var(--text-primary);
    font-weight: 600;
    width: 30%;
}

.woocommerce-product-attributes td {
    background: rgba(0, 16, 32, 0.3);
    color: var(--text-secondary);
}

/* Відгуки (Reviews) */
#reviews #comments ol.commentlist {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#reviews .commentlist li {
    background: rgba(0, 16, 32, 0.45);
    border: 1px solid var(--border-subtle);
    border-radius: var(--gnozis-radius-md);
    padding: 22px;
}

#reviews .commentlist li img.avatar {
    border-radius: var(--gnozis-radius-full);
    float: left;
    margin-right: 16px;
    border: 1px solid var(--border-card);
}

#reviews .comment-text {
    overflow: hidden;
}

#reviews .comment-text .meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

#reviews .comment-text .meta strong {
    color: var(--text-primary);
}

#reviews .star-rating {
    color: #f59e0b;
    float: right;
}

#review_form_wrapper {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
}

#review_form_wrapper .comment-reply-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

#review_form_wrapper form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#review_form_wrapper label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 6px;
}

#review_form_wrapper input[type="text"],
#review_form_wrapper input[type="email"],
#review_form_wrapper textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: var(--gnozis-radius-md);
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 0.92rem;
    outline: none;
    transition: var(--gnozis-transition);
}

#review_form_wrapper input:focus,
#review_form_wrapper textarea:focus {
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

#review_form_wrapper .form-submit input[type="submit"] {
    background: linear-gradient(135deg, #607890 0%, #4a6070 100%);
    border: 1px solid var(--accent-primary);
    color: #ffffff;
    padding: 12px 28px;
    border-radius: var(--gnozis-radius-md);
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--gnozis-transition);
}

#review_form_wrapper .form-submit input[type="submit"]:hover {
    background: linear-gradient(135deg, #7898b8 0%, #607890 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--accent-glow);
}

/* 16.6. Блок схожих товарів (Related Products) */
.related.products {
    margin-top: 48px;
}

.related.products > h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.related.products > h2::before {
    content: "✦";
    color: var(--accent-bright);
    font-size: 1.1rem;
}

.related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.related.products ul.products::before,
.related.products ul.products::after {
    display: none !important;
}

.related.products ul.products li.product {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--gnozis-radius-xl) !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    transition: var(--gnozis-transition) !important;
    backdrop-filter: blur(20px) !important;
    position: relative !important;
}

.related.products ul.products li.product:hover {
    transform: translateY(-4px) !important;
    border-color: var(--accent-bright) !important;
    box-shadow: var(--shadow-card-elevated), 0 0 22px var(--accent-glow) !important;
}

.related.products ul.products li.product a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
}

.related.products ul.products li.product img {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    border-radius: var(--gnozis-radius-lg) !important;
    background: rgba(0, 16, 32, 0.6) !important;
    border: 1px solid var(--border-subtle) !important;
    margin: 0 !important;
}

.related.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.related.products ul.products li.product .price {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--accent-bright) !important;
    margin: 0 !important;
}

.related.products ul.products li.product .button {
    margin-top: auto !important;
    padding: 10px 18px !important;
    background: rgba(96, 120, 144, 0.18) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--gnozis-radius-md) !important;
    color: var(--text-primary) !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    transition: var(--gnozis-transition) !important;
}

.related.products ul.products li.product .button:hover {
    background: var(--accent-bright) !important;
    color: #001020 !important;
    border-color: var(--accent-bright) !important;
}

/* 16.7. Модальне вікно покупки в 1 клік (#gnozis-modal-one-click) */
.gnozis-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--gnozis-transition-smooth);
    padding: 20px;
}

.gnozis-modal.open {
    opacity: 1;
    visibility: visible;
}

.gnozis-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.gnozis-modal-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 460px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--gnozis-radius-xl);
    padding: 32px 28px;
    box-shadow: var(--shadow-modal);
    transform: scale(0.95) translateY(10px);
    transition: var(--gnozis-transition-smooth);
}

.gnozis-modal.open .gnozis-modal-content {
    transform: scale(1) translateY(0);
}

.gnozis-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-card);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: var(--gnozis-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--gnozis-transition);
}

.gnozis-modal-close:hover {
    color: #ffffff;
    border-color: var(--border-hover);
    background: var(--bg-elevated);
}

.gnozis-modal-header {
    text-align: center;
    margin-bottom: 22px;
}

.gnozis-modal-header .gnozis-sigil {
    font-size: 1.6rem;
    color: #fbbf24;
    text-shadow: 0 0 14px rgba(245, 158, 11, 0.5);
    margin-bottom: 6px;
}

.gnozis-modal-header h3 {
    font-size: 1.35rem;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    font-weight: 700;
}

.gnozis-modal-header p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0;
}

.gnozis-esoteric-form .form-group {
    margin-bottom: 16px;
}

.gnozis-esoteric-form label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.gnozis-esoteric-form input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: var(--gnozis-radius-md);
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 0.92rem;
    outline: none;
    transition: var(--gnozis-transition);
}

.gnozis-esoteric-form input:focus {
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.btn-gnozis-gold.btn-block {
    width: 100%;
    height: 48px;
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    border: 1px solid #f59e0b;
    border-radius: var(--gnozis-radius-md);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--gnozis-transition);
    box-shadow: 0 4px 20px rgba(217, 119, 6, 0.35);
}

.btn-gnozis-gold.btn-block:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.45);
}

.gnozis-form-message {
    margin-top: 14px;
    font-size: 0.85rem;
    text-align: center;
    border-radius: var(--gnozis-radius-sm);
    transition: var(--gnozis-transition);
}

.gnozis-form-message.is-success {
    padding: 10px 14px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.gnozis-form-message.is-error {
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
}

/* 16.8. Адаптивність сторінки товару */
@media (max-width: 1100px) {
    .gnozis-product-hero {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .woocommerce-product-gallery__image img {
        height: auto;
        max-height: 480px;
    }

    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .gnozis-product-features-box {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .gnozis-product-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .gnozis-product-summary {
        padding: 24px 20px;
    }

    .product_title.entry-title {
        font-size: 1.65rem;
    }

    .product-price-box .price {
        font-size: 1.65rem;
    }

    .gnozis-price-stock-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .woocommerce-tabs {
        padding: 24px 18px !important;
    }

    .woocommerce-tabs ul.tabs li a {
        padding: 10px 16px !important;
        font-size: 0.88rem !important;
    }

    .related.products ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* 16.9. Преміальне оформлення опису та відгуків товару */
.gnozis-product-full-desc {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin: 0;
    max-width: 860px;
}

.woocommerce-tabs .woocommerce-Tabs-panel--description h2,
.woocommerce-tabs .woocommerce-Tabs-panel--reviews h2 {
    display: none !important;
}

.gnozis-empty-reviews-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.09);
    border-radius: var(--gnozis-radius-lg);
    max-width: 680px;
    margin: 12px 0 24px 0;
}

.gnozis-empty-reviews-card .empty-sigil {
    font-size: 1.8rem;
    color: var(--accent-bright);
    margin-bottom: 10px;
    text-shadow: 0 0 16px var(--accent-glow);
}

.gnozis-empty-reviews-card .empty-title {
    font-size: 1.15rem;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    font-weight: 600;
}

.gnozis-empty-reviews-card .empty-subtitle {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.gnozis-notice-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--gnozis-radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    max-width: 680px;
    margin-top: 14px;
}

.gnozis-notice-box .notice-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ==========================================================================
   39. OCCULT TECH PRODUCT REVIEWS & SUBMISSION FORM
   ========================================================================== */

.gnozis-reviews-container {
    max-width: 860px;
    margin-top: 10px;
}

.gnozis-reviews-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gnozis-reviews-header .woocommerce-Reviews-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
}

.gnozis-reviews-header .reviews-sigil {
    color: var(--accent-bright);
    text-shadow: 0 0 12px var(--accent-glow);
}

/* Список відгуків */
.gnozis-review-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 32px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gnozis-review-list .gnozis-review-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Картка окремого відгуку */
.gnozis-review-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: rgba(13, 20, 36, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--gnozis-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.gnozis-review-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 240, 255, 0.2);
    box-shadow: 0 6px 24px rgba(0, 240, 255, 0.08), 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Аватар автора */
.gnozis-review-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.gnozis-review-avatar-link {
    display: block;
    position: relative;
    border-radius: 50%;
}

.gnozis-review-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0, 240, 255, 0.35);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
    display: block;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.gnozis-review-avatar-link:hover .gnozis-review-avatar {
    border-color: var(--accent-bright);
    transform: scale(1.05);
}

/* Тіло відгуку */
.gnozis-review-body {
    flex: 1;
    min-width: 0;
}

.gnozis-review-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.gnozis-review-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gnozis-review-author-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gnozis-review-author-name {
    color: var(--text-primary);
    font-size: 0.98rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.gnozis-review-author-name:hover {
    color: var(--accent-bright);
}

/* Бейдж перевіреного покупця */
.gnozis-verified-buyer-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 240, 255, 0.1);
    color: var(--accent-bright);
    border: 1px solid rgba(0, 240, 255, 0.28);
    letter-spacing: 0.3px;
}

.gnozis-review-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Відображення зірочок відгуку */
.gnozis-review-stars-display {
    display: inline-flex;
    gap: 3px;
    font-size: 1.1rem;
    line-height: 1;
    user-select: none;
}

.gnozis-review-stars-display .star-filled {
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.55);
}

.gnozis-review-stars-display .star-empty {
    color: rgba(255, 255, 255, 0.18);
}

/* Текст відгуку */
.gnozis-review-text {
    color: var(--text-secondary);
    font-size: 0.94rem;
    line-height: 1.65;
    word-break: break-word;
}

.gnozis-review-text p {
    margin: 0 0 8px 0;
}

.gnozis-review-text p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   ФОРМА НАПИСАННЯ ВІДГУКУ (REVIEW SUBMISSION FORM)
   ========================================================================== */

.gnozis-review-form-wrap {
    margin-top: 32px;
}

.review-form-card {
    background: rgba(13, 20, 36, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--gnozis-radius-lg);
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.review-form-card .comment-reply-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
}

.review-form-card .reply-sigil {
    color: var(--accent-bright);
    text-shadow: 0 0 10px var(--accent-glow);
}

.comment-form .form-group {
    margin-bottom: 20px;
}

.comment-form label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.comment-form label .required {
    color: #ef4444;
}

/* Приховування стандартного WooCommerce дублювання зірочок */
.comment-form-rating p.stars,
#review_form p.stars,
p.stars {
    display: none !important;
}

/* Інтерактивний вибір зірок */
.gnozis-star-rating-picker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    user-select: none;
}

.star-picker-item {
    font-size: 1.55rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease, text-shadow 0.15s ease;
}

.star-picker-item:hover,
.star-picker-item.hover {
    color: #f59e0b;
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.65);
    transform: scale(1.15);
}

.star-picker-item.active {
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.45);
}

/* Поле тексту відгуку */
.gnozis-textarea-modal {
    width: 100%;
    background: rgba(8, 13, 24, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gnozis-radius-md);
    padding: 14px 16px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 120px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.gnozis-textarea-modal:focus {
    background: rgba(10, 16, 30, 0.95);
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.15), 0 0 16px rgba(0, 240, 255, 0.2);
}

.gnozis-textarea-modal::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* Кнопка відправки відгуку (в стилі темної теми GNOZIS) */
.btn-submit-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.28);
    border-radius: var(--gnozis-radius-md);
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    text-transform: none;
    letter-spacing: 0.3px;
}

.btn-submit-review:hover {
    background: rgba(0, 240, 255, 0.18);
    border-color: rgba(0, 240, 255, 0.5);
    color: var(--accent-bright);
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);
    transform: translateY(-1px);
}

.btn-submit-review:active {
    transform: translateY(0);
}

@media (max-width: 640px) {
    .gnozis-review-card {
        padding: 16px;
        gap: 12px;
    }

    .gnozis-review-avatar {
        width: 38px;
        height: 38px;
    }

    .review-form-card {
        padding: 18px 16px;
    }
}

/* Приховування дублювання стандартного тексту наявності WooCommerce */
/* =========================================================================
   Профіль: Налаштування, Вкладки та Форми
   ========================================================================= */
.profile-settings-card {
    padding: 36px 40px 40px 40px !important;
    background: var(--bg-card, #1A2B3C) !important;
    border: 1px solid var(--border-card, #2A3B4C) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
    margin-bottom: 24px;
}

.profile-settings-card .settings-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-settings-card .settings-desc {
    font-size: 0.94rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.profile-avatar-setting-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 20px 0 30px 0 !important;
    padding: 20px 24px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
}

.profile-settings-card .settings-form-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-settings-card .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-settings-card .form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #cbd5e1;
    letter-spacing: 0.2px;
    margin-bottom: 2px;
}

.profile-settings-card .gnozis-input-modal {
    width: 100%;
    padding: 13px 18px !important;
    border-radius: 10px !important;
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    font-size: 0.95rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

.profile-settings-card .gnozis-input-modal:focus {
    outline: none !important;
    border-color: #38bdf8 !important;
    background: rgba(15, 23, 42, 0.9) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18), 0 0 16px rgba(56, 189, 248, 0.12) !important;
}

.profile-settings-card .form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.profile-settings-card .settings-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-start;
}

.profile-orders-card {
    padding: 32px 36px !important;
    background: var(--bg-card, #1A2B3C) !important;
    border: 1px solid var(--border-card, #2A3B4C) !important;
    border-radius: 16px !important;
}

@media (max-width: 768px) {
    .profile-settings-card {
        padding: 22px 18px !important;
    }
    .profile-avatar-setting-box {
        padding: 16px !important;
        gap: 14px;
    }
    .profile-settings-card .form-grid-2col {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* =========================================================================
   Модальні вікна (Modal Dialogs & Close Button)
   ========================================================================= */
.gnozis-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.gnozis-modal.open {
    display: flex !important;
}

.gnozis-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 8, 20, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
}

.gnozis-modal-dialog {
    position: relative;
    z-index: 2;
    background: var(--bg-card, #1A2B3C);
    border: 1px solid var(--border-card, #2A3B4C);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px 28px 28px;
    box-sizing: border-box;
}

.gnozis-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gnozis-modal-close {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #94a3b8 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
    touch-action: manipulation;
}

.gnozis-modal-close:hover,
.gnozis-modal-close:active {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    color: #f87171 !important;
    transform: scale(1.08);
}

/* =========================================================================
   Omni-Search Живий Пошук по сайту (Ultra-Premium Glassmorphism)
   ========================================================================= */
.gnozis-omni-search-modal {
    display: none !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 70px 16px 20px !important;
    z-index: 999999 !important;
}

.gnozis-omni-search-modal.open {
    display: flex !important;
}

.gnozis-omni-search-modal .gnozis-modal-backdrop {
    background: rgba(4, 8, 16, 0.78) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

.gnozis-omni-search-modal .omni-search-dialog {
    max-width: 680px !important;
    width: 100% !important;
    background: rgba(11, 18, 32, 0.94) !important;
    backdrop-filter: blur(30px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 80px -10px rgba(0, 0, 0, 0.95), 0 0 45px rgba(56, 189, 248, 0.14) !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 85vh !important;
    animation: omniModalScale 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes omniModalScale {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.omni-search-input-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    position: relative;
}

.omni-search-icon {
    color: #38bdf8;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.6));
}

.omni-search-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #f8fafc !important;
    font-size: 1.12rem !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    padding: 0 !important;
    min-width: 0;
}

.omni-search-input::placeholder {
    color: #64748b;
    font-weight: 400;
}

.omni-search-clear-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.omni-search-clear-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.25);
}

.omni-modal-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.omni-modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    transform: rotate(90deg);
}

.omni-search-filter-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    scrollbar-width: none;
}

.omni-search-filter-tabs::-webkit-scrollbar {
    display: none;
}

.omni-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.omni-filter-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.15);
}

.omni-filter-pill.active {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.5);
    color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

.omni-filter-pill .pill-badge {
    background: #38bdf8;
    color: #0f172a;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    line-height: 1.2;
}

.omni-search-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    max-height: 480px;
    scrollbar-width: thin;
    scrollbar-color: rgba(56, 189, 248, 0.3) rgba(0, 0, 0, 0.2);
}

.omni-search-body::-webkit-scrollbar {
    width: 6px;
}

.omni-search-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.omni-search-body::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.3);
    border-radius: 8px;
}

.omni-search-body::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.6);
}

.omni-section-label {
    font-size: 0.80rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: block;
}

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

.omni-quick-tag {
    padding: 7px 13px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #cbd5e1;
    font-size: 0.84rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.omni-quick-tag:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    transform: translateY(-1px);
}

.omni-quick-nav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.omni-nav-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.omni-nav-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(56, 189, 248, 0.3);
    transform: translateY(-1px);
}

.omni-nav-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.omni-nav-card strong {
    display: block;
    font-size: 0.88rem;
    color: #f1f5f9;
}

.omni-nav-card small {
    font-size: 0.76rem;
    color: #64748b;
}

/* Результати пошуку */
.omni-result-group {
    margin-bottom: 22px;
}

.omni-result-group:last-child {
    margin-bottom: 0;
}

.omni-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.omni-group-count {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.25);
    font-size: 0.70rem;
    padding: 1px 7px;
    border-radius: 8px;
    font-weight: 700;
}

.omni-item-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 8px;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.omni-item-row:hover {
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.3);
    transform: translateX(3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.omni-item-thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.omni-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.omni-item-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(56, 189, 248, 0.4);
    background: #0f172a;
    flex-shrink: 0;
}

.omni-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.omni-group-icon-frame {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.omni-item-info {
    flex: 1;
    min-width: 0;
}

.omni-item-title {
    display: block;
    font-size: 0.94rem;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.omni-item-category,
.omni-item-desc,
.omni-item-meta {
    display: block;
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.omni-item-action {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.omni-item-price {
    font-size: 0.98rem;
    font-weight: 700;
    color: #38bdf8;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.btn-search-quick-add,
.btn-mini-add-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    cursor: pointer;
    font-size: 0.80rem;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-search-quick-add:hover,
.btn-mini-add-cart:hover {
    background: #38bdf8;
    color: #0b101b;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
    transform: scale(1.05);
}

.omni-member-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.omni-member-name-row .rank-badge {
    font-size: 0.65rem;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 1px 6px;
    border-radius: 6px;
}

.omni-group-members-badge {
    font-size: 0.74rem;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 8px;
    flex-shrink: 0;
}

.omni-search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 0;
    color: #94a3b8;
    font-size: 0.9rem;
}

.omni-loader-ring {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(56, 189, 248, 0.2);
    border-top-color: #38bdf8;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.omni-no-results {
    text-align: center;
    padding: 40px 10px;
    color: #94a3b8;
}

.omni-no-results-icon {
    font-size: 2.4rem;
    display: block;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3));
}

.omni-no-results h4 {
    color: #f1f5f9;
    font-size: 1.15rem;
    margin-bottom: 6px;
}

.omni-no-results p {
    font-size: 0.88rem;
    max-width: 360px;
    margin: 0 auto;
    color: #64748b;
}

.omni-search-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.74rem;
    color: #64748b;
}

.omni-search-footer kbd {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 2px 5px;
    border-radius: 4px;
    color: #cbd5e1;
    font-family: inherit;
    font-size: 0.70rem;
    margin-right: 4px;
}

@media (max-width: 768px) {
    .gnozis-omni-search-modal {
        padding: 15px 10px !important;
    }
    .gnozis-omni-search-modal .omni-search-dialog {
        max-height: 92vh !important;
        border-radius: 16px !important;
        width: 100% !important;
    }
    .omni-search-input-header {
        padding: 12px 14px;
    }
    .omni-search-input {
        font-size: 1rem !important;
    }
    .omni-quick-nav-grid {
        grid-template-columns: 1fr;
    }
    .omni-search-footer {
        display: none;
    }
}

/* =============================================================================
   MASTER RESPONSIVE & ANTI-OVERFLOW HARMONIZATION (ГЛОБАЛЬНИЙ ЗАХИСТ ВІД ЗЛІТАННЯ БЛОКІВ)
   ============================================================================= */

/* 1. Глобальний захист вікна перегляду та кореня */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

/* Універсальний захист від розриву довгих слів, посилань та медіа */
p, span, h1, h2, h3, h4, h5, h6, a, li, blockquote, figcaption, td, th, label, div {
    overflow-wrap: break-word !important;
    word-break: break-word;
}

img, video, iframe, embed, object, canvas, svg {
    max-width: 100% !important;
    height: auto;
}

pre, code, kbd, samp {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

table {
    max-width: 100% !important;
}

/* 2. Запобігання виходу карток та контейнерів за межі екрана */
.gnozis-page-shell {
    width: 100% !important;
    max-width: 1440px !important;
    min-width: 0 !important;
    overflow-x: clip !important;
}

/* 3. Адаптація сіток та макетів для планшетів (до 992px) */
@media (max-width: 992px) {
    .gnozis-subpage-2col-layout,
    .profile-2col-layout,
    .gnozis-shop-layout,
    .gnozis-checkout-layout-grid,
    .gnozis-messages-card,
    .gnozis-product-hero,
    .gnozis-auth-card {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .subpage-side-col,
    .profile-side-col,
    .gnozis-col-left,
    .gnozis-col-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* 4. Адаптація для мобільних екранів (до 768px) */
@media (max-width: 768px) {
    .gnozis-page-shell {
        padding-top: 10px !important;
        padding-bottom: 75px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .gnozis-subpage-viewport,
    .gnozis-profile-viewport,
    .gnozis-messages-viewport {
        padding-top: 0 !important;
        padding-bottom: 75px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        width: 100% !important;
    }

    .gnozis-layout-3col,
    .gnozis-stream-layout {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .stream-composer {
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }

    /* Усі картки та контейнери адаптуються під повну ширину екрана */
    .gnozis-layout-3col,
    .gnozis-stream-layout,
    .gnozis-feed-column,
    .gnozis-col-center,
    .gnozis-card,
    .gnozis-post-card,
    .stream-composer,
    .profile-settings-card,
    .gnozis-product-summary,
    .gnozis-product-gallery-wrap,
    .gnozis-subpage-viewport,
    .gnozis-profile-viewport,
    .gnozis-messages-viewport,
    .checkout-step-card,
    .checkout-summary-card,
    .checkout-coupon-card,
    .filter-card,
    .member-card,
    .group-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Вкладки профілю: горизонтальний плавний скрол */
    .profile-tabs-nav {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        white-space: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px !important;
        gap: 6px !important;
    }

    .profile-tabs-nav::-webkit-scrollbar {
        display: none !important;
    }

    .profile-tab-btn {
        flex: 0 0 auto !important;
        padding: 8px 14px !important;
        font-size: 0.82rem !important;
        white-space: nowrap !important;
    }

    /* Повідомлення та чат */
    .gnozis-messages-viewport {
        padding: 10px 0 80px !important;
        width: 100% !important;
    }

    .gnozis-messages-card {
        border-radius: 16px !important;
        height: auto !important;
        min-height: 500px !important;
        width: 100% !important;
    }

    /* Форми та сітки інпутів */
    .form-grid-2col,
    .gnozis-card-input-grid,
    .settings-form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* Каталог товарів */
    .products-grid,
    .woocommerce ul.products,
    .gnozis-shop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Каталог груп та користувачів */
    .members-grid-container,
    .groups-grid-container,
    .groups-catalog-grid,
    .members-catalog-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* Коментарі */
    .comment-item {
        width: 100% !important;
        min-width: 0 !important;
    }

    .comment-bubble {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .comment-text {
        min-width: 0 !important;
        word-break: break-word !important;
    }

    /* Таблиці замовлень та кошика */
    .woocommerce-table,
    .shop_table,
    .shop_table_responsive {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Нативна фіксована нижня панель на мобільних */
    .fb-topbar-center {
        display: none !important;
    }

    .gnozis-mobile-bottom-nav {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: 58px !important;
        height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background: rgba(11, 16, 27, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-bottom: none !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        z-index: 999999 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6) !important;
        user-select: none !important;
    }

    .mobile-bottom-tab {
        flex: 1 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        color: #64748b !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
        padding: 4px 0 !important;
    }

    .mobile-bottom-tab.active {
        color: #cbd5e1 !important;
    }

    .mobile-bottom-tab:hover {
        color: #94a3b8 !important;
    }

    .mobile-tab-icon-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-tab-icon-wrap svg {
        width: 22px !important;
        height: 22px !important;
        stroke: currentColor !important;
    }

    .mobile-bottom-tab.active .mobile-tab-icon-wrap svg {
        stroke: #cbd5e1 !important;
        filter: drop-shadow(0 0 4px rgba(203, 213, 225, 0.25)) !important;
    }

    .mobile-tab-label {
        font-size: 0.68rem !important;
        font-weight: 500 !important;
        letter-spacing: 0.01em !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-tab.active .mobile-tab-label {
        font-weight: 600 !important;
        color: #cbd5e1 !important;
    }
}

/* 5. Екстра-малі екрани (до 380px) */
@media (max-width: 380px) {
    .gnozis-page-shell {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .products-grid,
    .woocommerce ul.products,
    .gnozis-shop-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .gnozis-post-card {
        padding: 10px 10px !important;
    }

    .author-name {
        max-width: 110px !important;
    }
}

/* ==========================================================================
   FRONTEND ADMIN & MODERATION STYLES
   ========================================================================== */
.btn-admin-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-admin-action-pill:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2);
}

.btn-admin-action-pill.is-paused {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

.btn-admin-action-pill.item-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.btn-admin-action-pill.item-danger:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: #ef4444;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}

.btn-admin-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gnozis-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.88rem;
}

.btn-admin-icon-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    transform: scale(1.05);
}

.group-admin-controls-box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.group-badge-paused {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    font-size: 0.75rem;
    font-weight: 600;
}

.group-paused-notice-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--gnozis-radius-lg, 14px);
    margin-bottom: 20px;
}

.group-paused-notice-card .paused-notice-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.group-paused-notice-card strong {
    display: block;
    color: #fbbf24;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.group-paused-notice-card p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--gnozis-text-muted, #94a3b8);
    line-height: 1.4;
}

.comment-author-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.comment-author-meta-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-actions-btns {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
}

.btn-comment-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: transparent;
    border: none;
    color: var(--gnozis-text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    opacity: 0.65;
}

.comment-item:hover .btn-comment-action {
    opacity: 1;
}

.btn-comment-action.btn-edit-comment:hover {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
    transform: scale(1.1);
}

.btn-comment-action.btn-admin-delete-comment:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    transform: scale(1.1);
}

/* Інлайн редактор коментарів */
.comment-inline-editor {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 6px;
    width: 100%;
}

.comment-edit-textarea {
    width: 100%;
    min-height: 52px;
    padding: 7px 10px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.86rem;
    line-height: 1.4;
    resize: vertical;
    font-family: inherit;
    outline: none;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.12);
}

.comment-edit-textarea:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.25);
}

.comment-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.btn-comment-edit-cancel,
.btn-comment-edit-save {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-comment-edit-cancel {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-comment-edit-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

.btn-comment-edit-save {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.btn-comment-edit-save:hover {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

.rank-banned {
    background: rgba(239, 68, 68, 0.18) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
    font-weight: 700;
}

.member-card.is-banned-card {
    opacity: 0.65;
    border-color: rgba(239, 68, 68, 0.25);
}