/* ==========================================================================
   UMAI Admin Panel - Neobrutalist Design System
   ========================================================================== */

:root {
    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;

    /* Neobrutalist Color Palette */
    --nb-black: #1a1a1a;
    --nb-white: #ffffff;
    --nb-cream: #faf9f6;
    --nb-yellow: #ffde59;
    --nb-yellow-light: #fff4b8;
    --nb-orange: #ff6b35;
    --nb-orange-light: #ffd4c4;
    --nb-blue: #4361ee;
    --nb-blue-light: #c7d2fe;
    --nb-pink: #ff69b4;
    --nb-pink-light: #ffd6eb;
    --nb-green: #2dd4bf;
    --nb-green-light: #ccfbf1;
    --nb-red: #e63946;
    --nb-red-light: #ffccd5;
    --nb-red-lighter: #fffbfb;
    --nb-purple: #a855f7;
    --nb-purple-light: #e9d5ff;

    /* Semantic Colors */
    --primary-color: var(--nb-red);
    --primary-color-light: var(--nb-red-light);
    --primary-color-lighter: var(--nb-red-lighter);
    --primary-color-contrast: var(--nb-white);
    --primary-color-hover: #c1121f;

    --success-color: #16a34a;
    --success-color-light: #dcfce7;
    --warning-color: #ca8a04;
    --warning-color-light: #fef3c7;
    --danger-color: #dc2626;
    --danger-color-light: #fecaca;
    --danger-color-hover: #b91c1c;

    /* Surface Colors */
    --background-color: var(--nb-red-lighter);
    --surface-color: var(--nb-white);
    --surface-muted-color: #fff8f8;
    --surface-subtle-color: #fffcfc;
    --surface-secondary-color: #fff5f6;
    --card-background: var(--nb-white);

    /* Text Colors */
    --text-color: var(--nb-black);
    --text-strong-color: var(--nb-black);
    --text-muted-color: #6b7280;
    --text-soft-color: #4b5563;
    --text-subtle-color: #374151;

    /* Border Colors */
    --border-color: var(--nb-black);
    --border-strong-color: var(--nb-black);
    --border-subtle-color: #e5e5e5;

    /* Neobrutalist Design Tokens */
    --border-brutal: 3px solid var(--nb-black);
    --border-brutal-thin: 2px solid var(--nb-black);
    --shadow-color: #333333;
    --shadow-brutal-xs: 2px 2px 0 var(--shadow-color);
    --shadow-brutal-sm: 4px 4px 0 var(--shadow-color);
    --shadow-brutal: 6px 6px 0 var(--shadow-color);
    --shadow-brutal-lg: 8px 8px 0 var(--shadow-color);
    --shadow-brutal-xl: 12px 12px 0 var(--shadow-color);

    /* Sidebar Variables */
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 72px;
    --sidebar-bg: var(--nb-white);
    --sidebar-border: var(--border-brutal);
    --sidebar-item-hover: var(--nb-red-light);
    --sidebar-item-active: var(--nb-red);
    --sidebar-item-active-text: var(--nb-white);
    --topbar-height: 64px;

    /* Layout */
    --layout-max-width: 1400px;
    --layout-gutter: clamp(1rem, 2vw + 0.5rem, 2rem);
    --card-padding: clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
    --card-gap: clamp(1rem, 1.5vw + 0.5rem, 1.5rem);

    /* Border Radius (Squircle-inspired) */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Animation */
    --animation-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --animation-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Interactive States */
    --interactive-bg: var(--nb-red-light);
    --interactive-bg-hover: var(--nb-red);
    --focus-ring: 0 0 0 3px var(--nb-red-light);

    /* Button Specific */
    --button-secondary-bg: var(--nb-black);
    --button-secondary-text: var(--nb-white);
    --button-ghost-hover: var(--nb-red-light);

    /* Table */
    --table-header-bg: #222;
    --table-header-text: var(--nb-white);
    --table-row-hover: var(--nb-red-light);

    /* Transitions */
    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;
    --transition-slow: 250ms ease;

    /* Logo */
    --logo: url('https://umai.media/img/umai.svg');

    color-scheme: light;
}

/* Dark Theme */
:root[data-theme="dark"] {
    --nb-black: #fafafa;
    --nb-white: #1a1a1a;
    --nb-cream: #0f0f0f;
    --nb-red: #f87171;
    --nb-red-light: #450a0a;
    --nb-red-lighter: #1a0808;
    --nb-blue: #818cf8;
    --nb-blue-light: #312e81;

    --primary-color: var(--nb-red);
    --primary-color-light: var(--nb-red-light);
    --primary-color-lighter: var(--nb-red-lighter);
    --primary-color-contrast: #0f0f0f;
    --primary-color-hover: #fca5a5;

    --success-color: #4ade80;
    --success-color-light: #14532d;
    --danger-color: #f87171;
    --danger-color-light: #7f1d1d;

    --background-color: var(--nb-red-lighter);
    --surface-color: var(--nb-white);
    --surface-muted-color: #262626;
    --surface-subtle-color: #1f1f1f;
    --surface-secondary-color: #251010;
    --card-background: var(--nb-white);

    --text-color: #f5f5f5;
    --text-strong-color: #fafafa;
    --text-muted-color: #a1a1aa;
    --text-soft-color: #d4d4d8;
    --text-subtle-color: #e4e4e7;

    --border-color: #fafafa;
    --border-strong-color: #fafafa;
    --border-subtle-color: #3f3f46;

    --shadow-color: #e0e0e0;
    --shadow-brutal-xs: 2px 2px 0 var(--shadow-color);
    --shadow-brutal-sm: 4px 4px 0 var(--shadow-color);
    --shadow-brutal: 6px 6px 0 var(--shadow-color);
    --shadow-brutal-lg: 8px 8px 0 var(--shadow-color);
    --shadow-brutal-xl: 12px 12px 0 var(--shadow-color);

    --sidebar-bg: var(--nb-white);
    --sidebar-item-hover: var(--nb-red-light);
    --sidebar-item-active: var(--nb-red);
    --sidebar-item-active-text: #0f0f0f;

    --interactive-bg: var(--nb-red-light);
    --interactive-bg-hover: var(--nb-red);

    --table-header-bg: var(--nb-red);

    --table-header-bg: #fafafa;
    --table-header-text: #1a1a1a;
    --table-row-hover: #422006;

    color-scheme: dark;
}

:root[data-theme="auto"] {
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --nb-black: #fafafa;
        --nb-white: #1a1a1a;
        --nb-cream: #0f0f0f;
        --nb-yellow: #fcd34d;
        --nb-yellow-light: #422006;
        --nb-blue: #818cf8;
        --nb-blue-light: #312e81;

        --primary-color: var(--nb-blue);
        --primary-color-light: var(--nb-blue-light);
        --primary-color-contrast: #0f0f0f;
        --primary-color-hover: #a5b4fc;

        --success-color: #4ade80;
        --success-color-light: #14532d;
        --danger-color: #f87171;
        --danger-color-light: #7f1d1d;

        --background-color: var(--nb-cream);
        --surface-color: var(--nb-white);
        --surface-muted-color: #262626;
        --surface-subtle-color: #1f1f1f;
        --card-background: var(--nb-white);

        --text-color: #f5f5f5;
        --text-strong-color: #fafafa;
        --text-muted-color: #a1a1aa;
        --text-soft-color: #d4d4d8;
        --text-subtle-color: #e4e4e7;

        --border-color: #fafafa;
        --border-strong-color: #fafafa;
        --border-subtle-color: #3f3f46;

        --shadow-brutal-xs: 2px 2px 0 #fafafa;
        --shadow-brutal-sm: 4px 4px 0 #fafafa;
        --shadow-brutal: 6px 6px 0 #fafafa;
        --shadow-brutal-lg: 8px 8px 0 #fafafa;
        --shadow-brutal-xl: 12px 12px 0 #fafafa;

        --sidebar-bg: var(--nb-white);
        --sidebar-item-hover: #422006;
        --sidebar-item-active: #854d0e;

        --interactive-bg: #422006;
        --interactive-bg-hover: #854d0e;

        --table-header-bg: #fafafa;
        --table-header-text: #1a1a1a;
        --table-row-hover: #422006;

        color-scheme: dark;
    }
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    font-feature-settings: 'liga' 1, 'calt' 1;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-strong-color);
}

/* Utility Classes */
.visually-hidden,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-muted {
    color: var(--text-muted, #6c757d);
}

/* ==========================================================================
   App Layout (Sidebar + Content)
   ========================================================================== */

.app-layout {
    display: flex;
    min-height: 100vh;
}

.app-content {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition-base);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-layout--collapsed .app-content {
    margin-left: var(--sidebar-collapsed-width);
}

/* Pre-apply collapsed state from localStorage before JS runs (prevents transition flash) */
html[data-sidebar-collapsed="true"] .app-content {
    margin-left: var(--sidebar-collapsed-width);
    transition: none;
}

html[data-sidebar-collapsed="true"] .sidebar {
    width: var(--sidebar-collapsed-width);
    overflow: visible;
    transition: none;
}

html[data-sidebar-collapsed="true"] .sidebar__label,
html[data-sidebar-collapsed="true"] .sidebar__brand-text,
html[data-sidebar-collapsed="true"] .sidebar__footer-info {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
    transition: none;
}

html[data-sidebar-collapsed="true"] .sidebar__section-title {
    display: none;
}

html[data-sidebar-collapsed="true"] .sidebar__item {
    margin: 0 0.25rem;
}

html[data-sidebar-collapsed="true"] .sidebar__link {
    justify-content: center;
    padding: 0.75rem;
    gap: 0;
}

html[data-sidebar-collapsed="true"] .sidebar__nav {
    overflow: visible;
}

html[data-sidebar-collapsed="true"] .sidebar__header {
    padding: 1rem 0.5rem;
}

html[data-sidebar-collapsed="true"] .sidebar__icon {
    margin: 0;
}

html[data-sidebar-collapsed="true"] .sidebar__footer-actions {
    flex-direction: column;
    align-items: center;
}

html[data-sidebar-collapsed="true"] .sidebar__footer-btn span {
    display: none;
}

/* Disable all sidebar transitions during initial load handoff */
html.sidebar-transitions-disabled .sidebar,
html.sidebar-transitions-disabled .sidebar *,
html.sidebar-transitions-disabled .app-content {
    transition: none !important;
}

/* ==========================================================================
   Sidebar Navigation
   ========================================================================== */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: 200;
    transition: width var(--transition-base), transform var(--transition-base);
}

.sidebar--collapsed {
    width: var(--sidebar-collapsed-width);
    overflow: visible;
}

.sidebar--collapsed .sidebar__label,
.sidebar--collapsed .sidebar__brand-text,
.sidebar--collapsed .sidebar__footer-info {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}

.sidebar__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    border-bottom: var(--border-brutal-thin);
    height: var(--topbar-height);
}

.sidebar--collapsed .sidebar__header {
    padding: 1rem 0.5rem;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: var(--text-strong-color);
}

.sidebar__brand-icon,
.sidebar__brand-text {
    height: 32px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}

.sidebar__brand-text {
    transition: opacity var(--transition-base), width var(--transition-base), visibility var(--transition-base);
}

/* Sidebar Toggle Button (in top bar) */
.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 42px;
    height: 42px;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    flex-shrink: 0;
}

.sidebar-toggle:hover {
    background: var(--primary-color-light);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal-xs);
}

.sidebar-toggle:active {
    transform: translate(0, 0);
    box-shadow: none;
}

.sidebar-toggle__icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: opacity 0.2s ease, transform 0.2s ease;
    position: absolute;
}

/* Arrow icon (shown when sidebar is expanded - click to collapse) */
.sidebar-toggle__icon--arrow {
    opacity: 1;
    transform: rotate(0deg);
}

/* Menu icon (shown when sidebar is collapsed - click to expand) */
.sidebar-toggle__icon--menu {
    opacity: 0;
    transform: scale(0.8);
}

/* When sidebar is collapsed, swap the icons */
.app-layout--collapsed .sidebar-toggle__icon--arrow {
    opacity: 0;
    transform: rotate(180deg);
}

.app-layout--collapsed .sidebar-toggle__icon--menu {
    opacity: 1;
    transform: scale(1);
}

/* Pre-applied collapsed state icon swap (no transition) */
html[data-sidebar-collapsed="true"] .sidebar-toggle__icon--arrow {
    opacity: 0;
    transform: rotate(180deg);
}

html[data-sidebar-collapsed="true"] .sidebar-toggle__icon--menu {
    opacity: 1;
    transform: scale(1);
}

html[data-sidebar-collapsed="true"] .sidebar-toggle__icon {
    transition: none;
}

.sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
    padding: 1rem 0;
    border-right: var(--sidebar-border);
}

.sidebar--collapsed .sidebar__nav {
    overflow: visible;
}

.sidebar__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar__section {
    padding: 0.5rem 1rem;
}

.sidebar__section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted-color);
    margin: 0 0 0.5rem;
}

.sidebar--collapsed .sidebar__section-title {
    display: none;
}

.sidebar__item {
    margin: 0 0.5rem;
}

.sidebar--collapsed .sidebar__item {
    margin: 0 0.25rem;
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    position: relative;
}

.sidebar__link:hover {
    background-color: var(--sidebar-item-hover);
    border-color: var(--border-color);
    text-decoration: none;
}

.sidebar__link--active {
    background-color: var(--sidebar-item-active);
    color: var(--sidebar-item-active-text);
    border-color: var(--border-color);
    box-shadow: var(--shadow-brutal-xs);
}

.sidebar__link--active .sidebar__icon {
    fill: var(--sidebar-item-active-text);
}

.sidebar__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    fill: currentColor;
}

.sidebar__label {
    white-space: nowrap;
    transition: opacity var(--transition-base), width var(--transition-base);
}

.sidebar--collapsed .sidebar__link {
    justify-content: center;
    padding: 0.75rem;
    gap: 0;
}

.sidebar--collapsed .sidebar__icon {
    margin: 0;
}

/* Tooltip for collapsed sidebar */
.sidebar--collapsed .sidebar__link::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    background: var(--nb-black);
    color: var(--nb-white);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s var(--animation-smooth),
                transform 0.15s var(--animation-bounce),
                visibility 0.15s;
    z-index: 1000;
    box-shadow: var(--shadow-brutal-sm);
}

.sidebar--collapsed .sidebar__link::before {
    content: '';
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: var(--nb-black);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s var(--animation-smooth), visibility 0.15s;
    z-index: 1000;
}

.sidebar--collapsed .sidebar__link:hover::after,
.sidebar--collapsed .sidebar__link:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

.sidebar--collapsed .sidebar__link:hover::before,
.sidebar--collapsed .sidebar__link:focus::before {
    opacity: 1;
    visibility: visible;
}

.sidebar__footer {
    border-top: var(--border-brutal-thin);
    padding: 1rem;
}

.sidebar__profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sidebar__avatar {
    width: 40px;
    height: 40px;
    border: var(--border-brutal-thin);
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

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

.sidebar__avatar-placeholder {
    font-weight: 800;
    font-size: 1rem;
    color: var(--nb-black);
}

.sidebar__footer-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    transition: opacity var(--transition-base), width var(--transition-base);
}

.sidebar__user-name {
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-strong-color);
}

.sidebar__user-role {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-color);
}

.sidebar__footer-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.sidebar--collapsed .sidebar__footer-actions {
    flex-direction: column;
    align-items: center;
}

.sidebar__footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sidebar__footer-btn:hover {
    background-color: var(--primary-color-light);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal-xs);
    text-decoration: none;
}

.sidebar__footer-btn--danger:hover {
    background-color: var(--danger-color-light);
}

.sidebar--collapsed .sidebar__footer-btn span {
    display: none;
}

/* Mobile Sidebar */
.sidebar__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
}

.mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 42px;
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-md);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px 0 var(--nb-black);
    flex-shrink: 0;
    margin-top: -2px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* When menu is open, position button fixed over sidebar */
.mobile-menu-toggle--open {
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 500;
    margin-top: 0;
}

.mobile-menu-toggle:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

/* Hamburger icon lines */
.mobile-menu-toggle .hamburger-icon {
    width: 22px;
    height: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mobile-menu-toggle .hamburger-icon span {
    display: block;
    width: 100%;
    height: 2.5px;
    background-color: var(--nb-black);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-origin: center;
}

/* Hamburger to X animation when open */
.mobile-menu-toggle--open .hamburger-icon span:nth-child(1) {
    transform: translateY(6.75px) rotate(45deg);
}

.mobile-menu-toggle--open .hamburger-icon span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle--open .hamburger-icon span:nth-child(3) {
    transform: translateY(-6.75px) rotate(-45deg);
}

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar--open {
        transform: translateX(0);
    }

    .sidebar--open + .sidebar__overlay {
        display: block;
    }

    /* Sidebar header adjustments for mobile */
    .sidebar__header {
        padding-left: 60px;
        border-bottom: none;
        border-right: 3px solid var(--nb-black);
    }

    .app-content {
        margin-left: 0;
    }

    .app-layout--collapsed .app-content {
        margin-left: 0;
    }

    /* Prevent CLS from pre-applied collapsed state on mobile */
    html[data-sidebar-collapsed="true"] .app-content {
        margin-left: 0;
    }

    html[data-sidebar-collapsed="true"] .sidebar {
        width: var(--sidebar-width);
        transform: translateX(-100%);
    }

    /* Add left padding to topbar for mobile menu button */
    .app-topbar {
        padding-left: 16px;
    }

    /* Push search input away from hamburger button */
    .topbar-search {
        margin-left: 56px;
    }

    .mobile-menu-toggle {
        display: flex;
        position: fixed;
        top: 9px;
        left: 12px;
        z-index: 500;
        margin-top: 0;
    }

    .sidebar-toggle {
        display: none;
    }

    .profile-menu__name {
        display: none;
    }

    .profile-menu__trigger {
        padding: 0.25rem;
    }

    .profile-menu__chevron {
        display: none;
    }

    .notification-bell__dropdown {
        width: 300px;
        right: -40px;
    }
}

/* ==========================================================================
   Top Bar (Content Area Header)
   ========================================================================== */

.app-topbar {
    position: sticky;
    top: 0;
    background-color: var(--surface-color);
    border-bottom: var(--border-brutal-thin);
    padding: 0 var(--layout-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    z-index: 100;
    height: var(--topbar-height);
}

/* Topbar Search */
.topbar-search {
    position: relative;
    flex: 1;
    max-width: 380px;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.topbar-search--focused,
.topbar-search--open {
    max-width: 640px;
}

.topbar-search__form {
    display: flex;
    align-items: center;
    position: relative;
}

.topbar-search__icon {
    position: absolute;
    left: 0.75rem;
    width: 18px;
    height: 18px;
    color: var(--text-muted-color);
    pointer-events: none;
    z-index: 1;
}

.topbar-search__spinner {
    position: absolute;
    right: 0.75rem;
    width: 18px;
    height: 18px;
    color: var(--primary-color);
    opacity: 0;
    pointer-events: none;
    animation: spin 0.8s linear infinite;
    transition: opacity 0.15s ease;
}

.topbar-search--loading .topbar-search__spinner {
    opacity: 1;
}

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

.topbar-search__input {
    width: 100%;
    height: 42px;
    padding: 0 2.5rem 0 2.5rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    background: var(--surface-alt-color);
    font-size: 0.875rem;
    color: var(--text-color);
    transition: all 0.2s ease;
}

.topbar-search__input::placeholder {
    color: var(--text-muted-color);
}

.topbar-search__input:focus {
    outline: none;
    background: var(--surface-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

.topbar-search--open .topbar-search__input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Dropdown */
.topbar-search__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-brutal-sm);
    max-height: 400px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.topbar-search__dropdown--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.topbar-search__results {
    padding: 0.5rem 0;
}

.topbar-search__no-results {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted-color);
    font-size: 0.875rem;
}

/* Result groups */
.topbar-search__result-group {
    padding: 0.25rem 0;
}

.topbar-search__result-group + .topbar-search__result-group {
    border-top: var(--border-brutal-thin);
}

.topbar-search__result-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-color);
}

.topbar-search__result-group-icon {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar-search__result-group-icon svg {
    width: 14px;
    height: 14px;
}

/* Result items */
.topbar-search__result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--text-color);
    transition: background-color 0.1s ease;
}

.topbar-search__result-item:hover,
.topbar-search__result-item--selected {
    background-color: var(--primary-color-light);
}

.topbar-search__result-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-alt-color);
    border: var(--border-brutal-thin);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.topbar-search__result-avatar svg {
    width: 16px;
    height: 16px;
    fill: var(--text-muted-color);
}

.topbar-search__result-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topbar-search__result-avatar-img--favicon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.topbar-search__result-avatar-initials {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted-color);
}

.topbar-search__result-content {
    flex: 1;
    min-width: 0;
}

.topbar-search__result-title {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-strong-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-search__result-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* View all link */
.topbar-search__view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    border-top: var(--border-brutal-thin);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    transition: background-color 0.1s ease;
}

.topbar-search__view-all:hover {
    background-color: var(--primary-color-light);
}

.topbar-search__view-all svg {
    width: 16px;
    height: 16px;
}

.app-topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.app-topbar__user {
}

/* Page Header (in main content) */
.page-header {
    margin-bottom: 1.5rem;
}

.page-header__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.page-header__breadcrumb::-webkit-scrollbar {
    display: none;
}

.page-header__breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-muted-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.page-header__breadcrumb-item:hover {
    color: var(--primary-color);
}

.page-header__breadcrumb-item--home {
    font-weight: 500;
}

.page-header__breadcrumb-item--current {
    color: var(--text-color);
    font-weight: 500;
}

.page-header__breadcrumb-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.page-header__breadcrumb-separator {
    width: 16px;
    height: 16px;
    color: var(--text-muted-color);
    opacity: 0.6;
    flex-shrink: 0;
}

.page-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header__heading {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-header__heading-content {
    flex: 1;
    min-width: 0;
}

.page-header__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.page-header__thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    border: var(--border-brutal-thin);
    object-fit: cover;
    flex-shrink: 0;
}

.page-header__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-strong-color);
    margin: 0;
    letter-spacing: -0.02em;
}

.page-header__space {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted-color);
}

.page-header__space-link {
    color: var(--text-muted-color);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition-fast);
}

.page-header__space-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.page-header__slug {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.15rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted-color);
}

.page-header__slug-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted-color);
    transition: color var(--transition-fast);
}

.page-header__slug-link:hover {
    color: var(--primary-color);
}

.page-header__search {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 320px;
}

.page-header__search-icon {
    position: absolute;
    left: 0.75rem;
    width: 18px;
    height: 18px;
    color: var(--text-muted-color);
    pointer-events: none;
}

.page-header__search-input {
    width: 100%;
    height: 42px;
    padding: 0 0.75rem 0 2.5rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    font-size: 0.875rem;
    color: var(--text-color);
    transition: all var(--transition-fast);
}

.page-header__search-input::placeholder {
    color: var(--text-muted-color);
}

.page-header__search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

/* Search Page */
.search-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.search-page__hint,
.search-page__no-results {
    color: var(--text-muted-color);
    text-align: center;
    padding: 2rem;
}

.search-page__summary {
    font-size: 0.875rem;
    color: var(--text-muted-color);
    margin: 0;
}

.search-page__no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    text-align: center;
    color: var(--text-muted-color);
}

.search-page__no-results-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.search-results {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-results__item {
    border-bottom: var(--border-brutal-thin);
}

.search-results__item:last-child {
    border-bottom: none;
}

.search-results__link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.search-results__link:hover {
    background-color: var(--primary-color-light);
}

.search-results__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface-alt-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: var(--border-brutal-thin);
}

.search-results__avatar--square {
    border-radius: var(--radius-sm);
}

.search-results__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-results__avatar-img--favicon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.search-results__avatar-initials {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted-color);
}

.search-results__avatar-icon {
    width: 20px;
    height: 20px;
    fill: var(--text-muted-color);
}

.search-results__content {
    flex: 1;
    min-width: 0;
}

.search-results__title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    color: var(--text-strong-color);
}

.search-results__badge {
    width: 16px;
    height: 16px;
    fill: var(--primary-color);
}

.search-results__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--text-muted-color);
    margin-top: 0.25rem;
}

.search-results__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.search-results__meta-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.6;
}

/* Card header icon */
.card__header-icon {
    width: 20px;
    height: 20px;
    vertical-align: -4px;
    margin-right: 0.375rem;
    fill: currentColor;
}

.card__header-count {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted-color);
    margin-left: 0.5rem;
}

/* Profile Menu (Top Bar) */
.profile-menu {
    position: relative;
}

.profile-menu__trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 42px;
    padding: 0 0.75rem;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.profile-menu__trigger:hover {
    box-shadow: var(--shadow-brutal-sm);
    transform: translate(-2px, -2px);
}

.profile-menu__trigger[aria-expanded="true"] {
    box-shadow: var(--shadow-brutal-sm);
}

.profile-menu__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--nb-black);
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.profile-menu__avatar-placeholder {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--nb-black);
}

.profile-menu__name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-strong-color);
}

.profile-menu__chevron {
    color: var(--text-muted-color);
    transition: transform 0.2s ease;
}

.profile-menu__trigger[aria-expanded="true"] .profile-menu__chevron {
    transform: rotate(180deg);
}

.profile-menu__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    corner-shape: squircle;
    box-shadow: var(--shadow-brutal);
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transform-origin: top right;
    transition: opacity 0.2s var(--animation-smooth),
                transform 0.2s var(--animation-bounce),
                visibility 0.2s;
}

.profile-menu__dropdown[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.profile-menu__header {
    padding: 1rem;
    border-bottom: var(--border-brutal-thin);
    background: var(--surface-secondary-color);
}

.profile-menu__user-name {
    display: block;
    font-weight: 700;
    color: var(--text-strong-color);
}

.profile-menu__user-role {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

.profile-menu__items {
    padding: 0.5rem 0;
}

.profile-menu__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.875rem;
    color: var(--text-color);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.profile-menu__item:hover {
    background-color: var(--surface-secondary-color);
}

.profile-menu__item svg {
    flex-shrink: 0;
    color: var(--text-muted-color);
}

.profile-menu__item--danger {
    color: var(--nb-red);
}

.profile-menu__item--danger svg {
    color: var(--nb-red);
}

.profile-menu__form {
    margin: 0;
}

/* ==========================================================================
   Notification Bell
   ========================================================================== */

.notification-bell {
    position: relative;
}

.notification-bell__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-color);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    position: relative;
}

.notification-bell__trigger:hover {
    box-shadow: var(--shadow-brutal-sm);
    transform: translate(-2px, -2px);
}

.notification-bell__trigger[aria-expanded="true"] {
    box-shadow: var(--shadow-brutal-sm);
}

.notification-bell__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--primary-color);
    color: var(--nb-black);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    border: 2px solid var(--surface-color);
}

.notification-bell__badge--hidden {
    display: none;
}

.notification-bell__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    corner-shape: squircle;
    box-shadow: var(--shadow-brutal);
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transform-origin: top right;
    transition: opacity 0.2s var(--animation-smooth),
                transform 0.2s var(--animation-bounce),
                visibility 0.2s;
}

.notification-bell__dropdown[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.notification-bell__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: var(--border-brutal-thin);
    background: var(--surface-secondary-color);
}

.notification-bell__title {
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--text-strong-color);
}

.notification-bell__mark-all {
    background: none;
    border: none;
    font-size: 0.75rem;
    color: var(--text-muted-color);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.notification-bell__mark-all:hover {
    color: var(--text-color);
}

.notification-bell__list {
    max-height: 360px;
    overflow-y: auto;
}

.notification-bell__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.notification-bell__item:last-child {
    border-bottom: none;
}

.notification-bell__item:hover {
    background-color: var(--surface-secondary-color);
}

.notification-bell__item--unread {
    background-color: var(--surface-secondary-color);
}

.notification-bell__item--unread:hover {
    background-color: var(--surface-muted-color);
}

.notification-bell__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.notification-bell__dot--info {
    background-color: var(--nb-blue);
}

.notification-bell__dot--success {
    background-color: var(--success-color);
}

.notification-bell__dot--warning {
    background-color: var(--warning-color);
}

.notification-bell__dot--read {
    background-color: transparent;
}

.notification-bell__content {
    flex: 1;
    min-width: 0;
}

.notification-bell__item-title {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-strong-color);
    line-height: 1.3;
}

.notification-bell__item-body {
    font-size: 0.75rem;
    color: var(--text-muted-color);
    line-height: 1.4;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-bell__item-time {
    font-size: 0.6875rem;
    color: var(--text-muted-color);
    margin-top: 4px;
}

.notification-bell__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--text-muted-color);
    text-align: center;
}

.notification-bell__empty svg {
    opacity: 0.4;
}

.notification-bell__empty span {
    font-size: 0.8125rem;
}

.notification-bell__empty--hidden {
    display: none;
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */

.app-main {
    padding: var(--layout-gutter);
    max-width: var(--layout-max-width);
    flex: 1;
}

.container {
    width: min(100%, var(--layout-max-width));
    margin: 0 auto;
    padding: var(--layout-gutter);
}

.container--flush {
    padding-inline: var(--layout-gutter);
}

/* ==========================================================================
   Legacy Top Bar (for pages without sidebar)
   ========================================================================== */

.top-bar {
    background-color: var(--surface-color);
    border-bottom: var(--border-brutal);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem var(--layout-gutter);
    position: sticky;
    top: 0;
    z-index: 100;
}

.top-bar__brand a {
    width: 120px;
    display: block;
    background: var(--logo);
    background-size: contain;
    background-repeat: no-repeat;
}

.top-bar__brand span {
    display: none;
}

.top-bar__nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.top-bar__nav > a {
    padding: 0.5rem 1rem;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: 2px solid transparent;
    transition: all var(--transition-fast);
    color: var(--text-color);
}

.top-bar__nav > a:hover {
    background-color: var(--primary-color-light);
    border-color: var(--border-color);
    text-decoration: none;
}

.top-bar__nav > a[aria-current="page"] {
    background-color: var(--primary-color);
    border-color: var(--border-color);
    box-shadow: var(--shadow-brutal-xs);
}

.top-bar__profile {
    position: relative;
    margin-left: auto;
}

.top-bar__profile-toggle {
    appearance: none;
    border: var(--border-brutal-thin);
    background: var(--primary-color);
    padding: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.top-bar__profile-toggle:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal-xs);
}

.top-bar__profile-toggle--emulating {
    background: var(--nb-orange);
}

.top-bar__profile-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    border: 2px solid var(--surface-color);
    background-color: var(--danger-color);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
}

.top-bar__profile--open .top-bar__profile-toggle {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal-xs);
}

.top-bar__profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.top-bar__profile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 60%;
    color: var(--nb-black);
}

.top-bar__profile-icon-svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.top-bar__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 280px;
    max-width: min(320px, 90vw);
    background-color: var(--surface-color);
    border: var(--border-brutal);
    box-shadow: var(--shadow-brutal);
    padding: 0;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.top-bar__menu[hidden] {
    display: none;
}

.top-bar__menu-header {
    padding: 1rem;
    border-bottom: var(--border-brutal-thin);
    background: var(--primary-color-light);
}

.top-bar__menu-divider {
    height: 2px;
    background-color: var(--border-color);
}

.top-bar__menu-name {
    font-weight: 700;
    color: var(--text-strong-color);
}

.top-bar__menu-item {
    padding: 0.75rem 1rem;
    color: var(--text-color);
    font-weight: 600;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    display: block;
    width: 100%;
}

.top-bar__menu-item:hover {
    background-color: var(--primary-color-light);
    text-decoration: none;
}

.top-bar__menu-item--danger {
    color: var(--danger-color);
}

.top-bar__menu-item--danger:hover {
    background-color: var(--danger-color-light);
}

.top-bar__menu-item--warning {
    color: var(--nb-orange);
}

.top-bar__menu-item--warning:hover {
    background-color: var(--nb-orange-light);
}

@media (max-width: 900px) {
    .top-bar__nav {
        flex: 1 1 100%;
        order: 3;
        justify-content: flex-start;
    }

    .top-bar__profile {
        order: 2;
        margin-left: 0;
    }
}

@media (max-width: 640px) {
    .top-bar {
        align-items: flex-start;
    }

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

    .top-bar__nav > a {
        width: 100%;
    }
}

/* ==========================================================================
   Notifications Panel
   ========================================================================== */

.notifications-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

.notifications-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.notifications-panel__title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-strong-color);
}

.notifications-panel__count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-color);
    background-color: var(--primary-color-light);
    padding: 0.125rem 0.5rem;
    border: 2px solid var(--border-color);
}

.notifications-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 240px;
    overflow-y: auto;
}

.notifications-panel__item {
    padding: 0.75rem;
    background-color: var(--surface-muted-color);
    border: 2px solid transparent;
    display: grid;
    gap: 0.25rem;
}

.notifications-panel__item--unread {
    background-color: var(--primary-color-light);
    border-color: var(--border-color);
}

.notifications-panel__item-title {
    margin: 0;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-strong-color);
}

.notifications-panel__item-body {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted-color);
}

.notifications-panel__item-meta {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted-color);
}

.notifications-panel__empty {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted-color);
}

.notifications-panel__view-all {
    align-self: flex-start;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

.notifications-panel__view-all:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Buttons - Neobrutalist Style
   ========================================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 42px;
    padding: 0 1.5rem;
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    corner-shape: squircle;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    background-color: var(--primary-color);
    color: var(--primary-color-contrast);
    line-height: 1;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: var(--shadow-brutal-sm);
    position: relative;
}

.button:hover {
    transform: translate(-4px, -4px);
    box-shadow: var(--shadow-brutal);
    text-decoration: none;
    color: var(--primary-color-contrast);
}

.button:active {
    transform: translate(0, 0);
    box-shadow: none;
}

.button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-brutal), var(--focus-ring);
}

.button__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.button--secondary {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

.button--secondary:hover {
    color: var(--button-secondary-text);
}

.button--ghost {
    background: var(--surface-color);
    color: var(--text-color);
    box-shadow: var(--shadow-brutal-sm);
}

.button--ghost:hover {
    background-color: var(--primary-color-light);
    box-shadow: var(--shadow-brutal);
    color: var(--text-color);
}

.button--dark {
    background-color: var(--nb-black);
    color: var(--nb-white);
}

.button--dark:hover {
    background-color: #333;
    color: var(--nb-white);
}

.button--danger {
    background-color: var(--danger-color);
    color: #fff;
    box-shadow: none;
}

.button--danger:hover {
    background-color: var(--danger-color-hover);
    color: #fff;
    box-shadow: var(--shadow-brutal-sm);
}

.button--danger.button--brutal {
    box-shadow: var(--shadow-brutal-sm);
}

.button--danger.button--brutal:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal);
}

/* Split Button with Dropdown */
.split-button {
    position: relative;
    display: inline-flex;
    height: 34px;
    border-radius: var(--radius-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.split-button:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal);
}

.split-button__main {
    box-sizing: border-box;
    height: 42px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    box-shadow: none !important;
    transform: none !important;
}

.split-button__main:hover {
    transform: none !important;
    box-shadow: none !important;
}

.split-button__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 34px;
    padding: 0 0.75rem;
    background: var(--nb-black);
    color: #fff;
    border: 2px solid var(--nb-black);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    cursor: pointer;
}

.split-button__menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 160px;
    background: var(--nb-black);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1000;
}

.split-button__toggle:hover + .split-button__menu,
.split-button__toggle:focus + .split-button__menu,
.split-button__menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.split-button:has(.split-button__toggle:hover) ,
.split-button:has(.split-button__toggle:focus),
.split-button:has(.split-button__menu:hover),
.split-button--open {
    z-index: 1000;
}

.split-button--open .split-button__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.split-button__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.1s ease;
}

.split-button__item:hover {
    background: var(--primary-color);
    text-decoration: none;
}

.split-button__item:first-child {
    border-radius: calc(var(--radius-sm) - 2px) calc(var(--radius-sm) - 2px) 0 0;
}

.split-button__item:last-child {
    border-radius: 0 0 calc(var(--radius-sm) - 2px) calc(var(--radius-sm) - 2px);
}

.split-button__item svg {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .split-button__menu {
        right: auto;
        left: 0;
    }
}

.button--link {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    color: var(--danger-color);
    cursor: pointer;
    box-shadow: none;
    text-transform: none;
    font-weight: 600;
    letter-spacing: normal;
}

.button--link:hover {
    text-decoration: underline;
    background: none;
    color: var(--danger-color-hover);
    box-shadow: none;
    transform: none;
}

.button--small {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    box-shadow: var(--shadow-brutal-xs);
}

.button--small:hover {
    box-shadow: var(--shadow-brutal-sm);
}

.button--google {
    background-color: #1a73e8;
    color: #ffffff;
}

.button--google:hover {
    background-color: #1557b0;
    color: #ffffff;
}

.button--yellow {
    background-color: var(--primary-color);
    color: var(--nb-black);
}

.button--orange {
    background-color: var(--nb-orange);
    color: #fff;
}

.button--green {
    background-color: var(--nb-green);
    color: var(--nb-black);
}

/* ==========================================================================
   Cards - Neobrutalist Style
   ========================================================================== */

.card {
    background-color: var(--card-background);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    corner-shape: squircle;
    padding: var(--card-padding);
    box-shadow: var(--shadow-brutal);
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    position: relative;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card--interactive:hover {
    transform: translate(-4px, -4px);
    box-shadow: var(--shadow-brutal-lg);
}

.card--accent-yellow {
    border-top: 6px solid var(--primary-color);
}

.card--accent-blue {
    border-top: 6px solid var(--nb-blue);
}

.card--accent-orange {
    border-top: 6px solid var(--nb-orange);
}

.card--accent-green {
    border-top: 6px solid var(--nb-green);
}

.card--accent-pink {
    border-top: 6px solid var(--nb-pink);
}

.card--accent-purple {
    border-top: 6px solid var(--nb-purple);
}

.card h2 {
    margin-top: 0;
}

.card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.card__header-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.card__header > form {
    margin: 0;
}

.card__header h2 {
    margin: 0;
    font-size: clamp(1.25rem, 1vw + 1.2rem, 1.5rem);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.card__header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.card__header .button,
.card__header input {
    font-family: var(--font-sans);
}

.card__header-actions form {
    margin: 0;
}

.card__header--sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.card__body {
    display: grid;
    gap: var(--card-gap);
}

.card__section {
    display: grid;
    gap: 0.75rem;
}

.card__description {
    margin: 0.35rem 0 0;
    color: var(--text-muted-color);
}

.card__hint {
    margin: 0;
    color: var(--text-muted-color);
    font-size: 0.9rem;
}

.card--tabs {
    padding: 0;
    gap: 0;
}

.card--tabs .card__header {
    padding: var(--card-padding) var(--card-padding) 0;
    margin-bottom: 0;
}

.card--tabs .tabs {
    padding: 0 1.5rem 1.5rem;
}

@media (max-width: 640px) {
    :root {
        --layout-gutter: 0.75rem;
        --card-padding: 0.875rem;
        --card-gap: 0.75rem;
    }

    .card {
        box-shadow: var(--shadow-brutal-xs);
    }

    .table-wrapper {
        box-shadow:
            2px 2px 0 0 #fff,
            2px 2px 0 2px var(--nb-black);
    }

    .card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .card__header-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ==========================================================================
   Forms - Neobrutalist Style
   ========================================================================== */

.form-group {
    margin-bottom: 1.25rem;
}

.form-group--inline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group--inline .toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-group--actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-strong-color);
}

.form-group label.label-with-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.age-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--surface-secondary-color);
    color: var(--text-muted-color);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--nb-black);
    border-radius: var(--radius-sm);
    background-color: var(--surface-color);
    color: var(--text-color);
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted-color);
    opacity: 1;
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
    border-color: var(--nb-black);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

.form-group input:disabled,
.form-group textarea:disabled,
.form-group select:disabled {
    background-color: var(--surface-muted-color);
    color: var(--text-muted-color);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Select with more padding for arrow */
.form-group select {
    padding-right: 2.5rem;
    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='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 16px;
}

/* Password input wrapper */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper input {
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--text-muted-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
}

.password-toggle:hover {
    color: var(--text-color);
}

.password-toggle svg {
    width: 20px;
    height: 20px;
}

.password-toggle__show,
.password-toggle__hide {
    display: block;
}

.password-wrapper--visible .password-toggle__show {
    display: none;
}

.password-wrapper--visible .password-toggle__hide {
    display: block;
}

.password-wrapper:not(.password-wrapper--visible) .password-toggle__hide {
    display: none;
}

.form-group--tagged {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-group--tagged .form-tag,
.form-group--tagged label {
    margin: 0;
    padding: 0.375rem 0.75rem;
    background-color: var(--primary-color);
    border: var(--border-brutal-thin);
    color: var(--nb-black);
    font-weight: 700;
    font-size: 0.75rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group--tagged input,
.form-group--tagged textarea,
.form-group--tagged select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.form-group--switch {
    justify-content: flex-start;
}

.form-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.form-switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.form-switch__visual {
    width: 52px;
    height: 28px;
    background-color: var(--surface-muted-color);
    border: var(--border-brutal-thin);
    border-radius: 9999px;
    position: relative;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.form-switch__visual::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--nb-black);
    border-radius: 9999px;
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.form-switch__input:checked + .form-switch__visual {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.form-switch__input:checked + .form-switch__visual::after {
    transform: translateX(24px);
    background-color: #fff;
}

.form-switch__input:focus-visible + .form-switch__visual {
    box-shadow: var(--focus-ring);
}

.form-switch__state {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-strong-color);
    text-transform: uppercase;
}

.form-switch__state::before {
    content: attr(data-off-label);
}

.form-switch__input:checked + .form-switch__visual + .form-switch__state::before {
    content: attr(data-on-label);
}

.form-group--checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
}

.form-group--checkbox input {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.form-group--actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.form-hint {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted-color);
}

.form-hint--inline {
    margin: 0;
    display: inline-block;
}

.form-help {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted-color);
}

.form-footer {
    margin-top: calc(1.5rem - 5px);
    text-align: center;
}

.form-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

@media (max-width: 640px) {
    .form-group--tagged {
        flex-direction: column;
        align-items: stretch;
    }

    .form-group--tagged .form-tag,
    .form-group--tagged label {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================================
   Form Sections & Fieldsets
   ========================================================================== */

.form-section {
    border: var(--border-brutal);
    padding: 1.5rem;
    background-color: var(--surface-color);
    box-shadow: var(--shadow-brutal-sm);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-section__header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong-color);
}

.form-section__description {
    margin: 0;
    color: var(--text-muted-color);
    font-size: 0.9rem;
}

.form-section__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-section__fields--stacked {
    gap: 1.25rem;
}

.form-section--actions {
    border: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
    align-items: flex-end;
}

.form-section--actions .form-group--actions {
    justify-content: flex-end;
}

.form-fieldset {
    border: var(--border-brutal);
    padding: 1rem 1.25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-fieldset legend {
    font-weight: 600;
    color: var(--text-strong-color);
    padding: 0 0.5rem;
    font-size: 0.9rem;
}

.form-checkbox-list {
    display: grid;
    gap: 0.5rem;
}

.form-checkbox-list label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-subtle-color);
    text-transform: none;
    font-weight: 600;
}

.form-checkbox-list input {
    width: auto;
}

.form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.form-grid--columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.form-group--full {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .form-grid--columns-2 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Space Form - Neobrutalist Style
   ========================================================================== */

.space-form {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.space-form__section {
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow:
        4px 4px 0 0 #fff,
        4px 4px 0 2px var(--nb-black);
}

/* Allow sticky positioning for design preview */
.space-form__section:has(.design-form) {
    overflow: visible;
}

.space-form__section-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    background: var(--nb-black);
    border-bottom: 2px solid var(--nb-black);
}

.space-form__section--danger .space-form__section-header {
    background: var(--nb-red);
}

.space-form__section-header svg {
    color: #fff;
    flex-shrink: 0;
}

.space-form__section-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.space-form__counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2rem;
    margin-left: 0.4rem;
}

.space-form__section-description {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--text-muted-color);
}

.space-form__section-body {
    padding: 1.25rem;
}

.space-form__section-body > .space-form__section-description {
    margin: 0 0 1rem;
}

.space-form__section-error {
    margin-bottom: 1rem;
}

.space-form__title-input {
    font-size: 1.125rem;
    font-weight: 700;
}

.space-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Permissions User List */
.permissions-user-list__wrapper {
    margin-top: 1.5rem;
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    background: var(--surface-secondary-color);
    overflow: hidden;
}

.permissions-user-list__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--nb-black);
    color: var(--nb-white);
}

.permissions-user-list__header-label {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.permissions-user-list__header-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.permissions-user-list__legend-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    opacity: 0.7;
}

.permissions-user-list__legend-item svg {
    width: 14px;
    height: 14px;
}

.permissions-user-list {
    display: flex;
    flex-direction: column;
}

.permissions-user-list__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
}

.permissions-user-list__item:last-of-type {
    border-bottom: none;
}

.permissions-user-list__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    border-radius: 50%;
    border: 2px solid var(--nb-black);
}

.permissions-user-list__avatar span {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}

.permissions-user-list__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.permissions-user-list__name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-strong-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.permissions-user-list__email {
    font-size: 0.8rem;
    color: var(--text-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.permissions-user-list__empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted-color);
    font-size: 0.9rem;
    background: var(--surface-color);
}

.permissions-user-list__toggles {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

@media (max-width: 640px) {
    .permissions-user-list__item {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
        padding: 0.625rem 0.75rem;
    }

    .permissions-user-list__avatar {
        width: 34px;
        height: 34px;
    }

    .permissions-user-list__avatar span {
        font-size: 0.75rem;
    }

    .permissions-user-list__toggles {
        width: 100%;
        margin-left: 0;
        /* indent to align with text: 34px avatar + 0.75rem gap */
        padding-left: calc(34px + 0.75rem);
        gap: 0.375rem;
    }
}

.permission-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.permission-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.permission-toggle__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted-color);
    background: var(--surface-color);
    transition: all 100ms ease;
}

.permission-toggle input:checked + .permission-toggle__icon {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.permission-toggle:hover .permission-toggle__icon {
    border-color: var(--primary-color);
}

.permission-toggle input:focus-visible + .permission-toggle__icon {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Permission toggle tooltips */
.permission-toggle[data-tooltip] {
    position: relative;
}

.permission-toggle[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: var(--nb-black);
    color: var(--nb-white);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1000;
    box-shadow: var(--shadow-brutal-sm);
}

.permission-toggle[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    border: 5px solid transparent;
    border-top-color: var(--nb-black);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1000;
}

.permission-toggle[data-tooltip]:hover::after,
.permission-toggle[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* Permission remove button (inline with toggles) */
.permission-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    color: var(--text-muted-color);
    cursor: pointer;
    transition: all 100ms ease;
}

.permission-remove svg {
    width: 16px;
    height: 16px;
}

.permission-remove:hover {
    background: var(--nb-red-light);
    border-color: var(--nb-red);
    color: var(--nb-red);
}

.permission-remove__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.permission-remove__icon--confirm {
    display: none;
}

.permission-remove--confirm {
    background: var(--nb-red);
    border-color: var(--nb-red);
    color: #fff;
}

.permission-remove--confirm:hover {
    background: var(--nb-red);
    border-color: var(--nb-red);
    color: #fff;
}

.permission-remove--confirm .permission-remove__icon--trash {
    display: none;
}

.permission-remove--confirm .permission-remove__icon--confirm {
    display: flex;
}

/* ==========================================================================
   User Selector - Search and Add Users
   ========================================================================== */

.user-selector {
    margin-bottom: 1.5rem;
}

.user-selector__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-strong-color);
    margin-bottom: 0.5rem;
}

.user-selector__label svg {
    flex-shrink: 0;
    color: var(--text-muted-color);
}

.user-selector__control {
    position: relative;
}

.user-selector__input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    background-color: var(--surface-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.875rem center;
    color: var(--text-color);
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.user-selector__input::placeholder {
    color: var(--text-muted-color);
}

.user-selector__input:hover {
    border-color: var(--nb-black);
}

.user-selector__input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-brutal-xs);
}

.user-selector__results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-brutal-sm);
    z-index: 100;
}

.user-selector__result {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s ease;
}

.user-selector__result:hover,
.user-selector__result--active {
    background: var(--surface-secondary-color);
}

.user-selector__result + .user-selector__result {
    border-top: 1px solid var(--border-color);
}

.user-selector__result--empty {
    color: var(--text-muted-color);
    font-style: italic;
    cursor: default;
}

.user-selector__result--empty:hover {
    background: transparent;
}

.user-selector__result-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-strong-color);
}

.user-selector__result-email {
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.user-selector__help {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.space-form__languages {
    border: none;
    padding: 0;
    margin: 0;
}

.space-form__languages legend {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-strong-color);
    margin-bottom: 0.5rem;
}

/* Module Toggle Grid */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.module-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.module-toggle:hover {
    border-color: var(--nb-black);
    background: var(--surface-secondary-color);
}

.module-toggle input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.module-toggle input[type="checkbox"]:checked + .module-toggle__content {
    color: var(--text-strong-color);
}

.module-toggle:has(input:checked) {
    border-color: var(--primary-color);
    background: var(--primary-color-lighter);
    box-shadow: var(--shadow-brutal-xs);
}

.module-toggle__content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.module-toggle__icon {
    flex-shrink: 0;
    color: var(--text-muted-color);
    margin-top: 0.1rem;
}

.module-toggle__icon svg {
    display: block;
}

.module-toggle:has(input:checked) .module-toggle__icon {
    color: var(--primary-color);
}

.module-toggle__text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.module-toggle__name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-strong-color);
}

.module-toggle__description {
    font-size: 0.8rem;
    color: var(--text-muted-color);
    line-height: 1.4;
}

/* --- Space Visibility Controls --- */

.visibility-group {
    display: inline-flex;
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.visibility-group__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    background: var(--surface-color);
    color: var(--text-color);
    border: none;
    border-right: 2px solid var(--nb-black);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.visibility-group__btn:last-child {
    border-right: none;
}

.visibility-group__btn:hover {
    background: var(--surface-secondary-color);
}

.visibility-group__btn svg {
    flex-shrink: 0;
}

.visibility-group__btn--public.visibility-group__btn--active {
    background: var(--nb-green);
    color: #fff;
}

.visibility-group__btn--private.visibility-group__btn--active {
    background: var(--nb-red);
    color: #fff;
}

.visibility-group__btn--custom.visibility-group__btn--active {
    background: var(--nb-purple);
    color: #fff;
}

.visibility-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--nb-purple-light);
    border: 2px solid var(--nb-purple);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-strong-color);
    line-height: 1.45;
}

.visibility-hint svg {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--nb-purple);
}

.visibility-hint[hidden] {
    display: none;
}

/* Visibility AJAX save status */
.visibility-status {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: opacity 0.2s;
}

.visibility-status--saving {
    color: var(--text-muted, #888);
}

.visibility-status--saved {
    color: #16a34a;
}

.visibility-status--error {
    color: #dc2626;
}

.visibility-group__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Per-module visibility toggle */

.module-toggle__visibility {
    margin-top: 0.5rem;
}

.module-toggle__visibility[hidden] {
    display: none;
}

.module-vis-toggle {
    display: inline-flex;
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.module-vis-toggle__opt {
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    color: var(--text-muted-color);
    background: #fff;
}

.module-vis-toggle__opt:first-child {
    border-right: 2px solid var(--nb-black);
}

.module-vis-toggle__opt--active[data-vis="0"] {
    background: var(--nb-red);
    color: #fff;
}

.module-vis-toggle__opt--active[data-vis="1"] {
    background: var(--nb-green);
    color: #fff;
}

/* Admin Modules Grid */
.admin-modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .admin-modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .admin-modules-grid {
        grid-template-columns: 1fr;
    }
}

.admin-module-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-module-card:has(input:checked) {
    border-color: var(--nb-red);
    box-shadow: var(--shadow-brutal-xs);
}

.admin-module-card__toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: #f5f5f6;
    border-bottom: 2px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.admin-module-card__toggle:hover {
    background: var(--surface-tertiary-color);
}

.admin-module-card:has(input:checked) .admin-module-card__toggle {
    background: var(--nb-red-light);
    border-bottom-color: var(--nb-red);
}

.admin-module-card__toggle input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--nb-red);
    cursor: pointer;
}

.admin-module-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-module-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted-color);
    transition: color 0.15s ease;
}

.admin-module-card:has(input:checked) .admin-module-card__icon {
    color: var(--nb-red);
}

.admin-module-card__name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-strong-color);
}

.admin-module-card__description {
    padding: 0.75rem 1rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted-color);
    line-height: 1.4;
    border-bottom: 1px solid var(--border-color);
}

.admin-module-card__limit {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.admin-module-card__limit label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.admin-module-card__limit input {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: var(--surface-color);
}

.admin-module-card__limit input:focus {
    outline: none;
    border-color: var(--nb-red);
}

.admin-module-card__limit .form-help {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
}

/* Progress bar for module limits */
.admin-module-card__progress {
    height: 6px;
    margin-top: 0.5rem;
    background: var(--surface-secondary-color);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.admin-module-card__progress-bar {
    height: 100%;
    background: var(--text-muted-color);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Admin Limits Section */
.admin-limits-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border-color);
}

.admin-limits-section__title {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-strong-color);
}

.admin-limits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 600px) {
    .admin-limits-grid {
        grid-template-columns: 1fr;
    }
}

.admin-limit-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.admin-limit-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-strong-color);
}

.admin-limit-field input {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: var(--surface-color);
}

.admin-limit-field input:focus {
    outline: none;
    border-color: var(--nb-black);
}

.admin-limit-field .form-help {
    margin: 0;
    font-size: 0.75rem;
}

/* Form Actions (general) */
.form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.form-actions--end {
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Admin Section Form Actions (with border) */
.space-form__section--danger .form-actions {
    padding-top: 1.5rem;
    border-top: 2px solid var(--border-color);
}

/* Admin Section Description Margin */
.space-form__section--danger .space-form__section-description {
    margin-bottom: 1.25rem;
}

/* Module Labels */
.module-labels {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: var(--border-brutal-thin);
}

.module-labels__title {
    margin: 0 0 0.25rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-strong-color);
}

.module-labels__fieldset {
    margin: 1rem 0 0;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #f5f5f5;
}

:root[data-theme="dark"] .module-labels__fieldset {
    background: #2a2a2a;
}

.module-labels__legend {
    padding: 0 0.5rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-strong-color);
}

.module-labels__error {
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   Tables - Neobrutalist Style
   ========================================================================== */

.table-wrapper {
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-md);
    background: var(--surface-color);
    /* Boron-style outline shadow: first layer fills with card bg (white), second layer creates 2px outline */
    box-shadow:
        4px 4px 0 0 #fff,
        4px 4px 0 2px var(--nb-black);
}

.table-surface {
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    corner-shape: squircle;
    background: var(--surface-color);
    padding: 0;
    box-shadow: var(--shadow-brutal-sm);
}

.table-wrapper .table {
    margin: 0;
}

.table-wrapper .table thead tr:first-child th:first-child {
    border-top-left-radius: calc(var(--radius-md) - 2px);
}

.table-wrapper .table thead tr:first-child th:last-child {
    border-top-right-radius: calc(var(--radius-md) - 2px);
}

.table-wrapper .table tbody tr:last-child td:first-child {
    border-bottom-left-radius: calc(var(--radius-md) - 2px);
}

.table-wrapper .table tbody tr:last-child td:last-child {
    border-bottom-right-radius: calc(var(--radius-md) - 2px);
}

.table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.table--responsive {
    width: 100%;
}

.table thead {
    background-color: var(--table-header-bg);
}

.table thead th {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--table-header-text);
    border-bottom: var(--border-brutal);
}

.table th,
.table td {
    padding: 1rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

.table tbody tr {
    transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
    background-color: var(--table-row-hover);
}

.table tbody tr:last-child td,
.table tbody tr:last-child th {
    border-bottom: none;
}

.table--compact th,
.table--compact td {
    padding: 0.75rem;
    font-size: 0.9rem;
}

.table--striped tbody tr:nth-child(even) {
    background-color: var(--surface-muted-color);
}

.table--striped tbody tr:nth-child(even):hover {
    background-color: var(--table-row-hover);
}

.table td:last-child,
.table th:last-child {
    width: 1%;
    white-space: nowrap;
}

.table-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    position: relative;
}

.table-actions .button {
    height: 34px;
    padding: 0 0.875rem;
    font-size: 0.8rem;
    border-width: 1px;
    box-shadow: none;
}

.table-actions .button:hover {
    box-shadow: 4px 4px 0 var(--nb-black);
    transform: translate(-3px, -3px);
}

.table-actions .button:active {
    box-shadow: none;
    transform: translate(0, 0);
}

/* Key-value detail tables (row headers in first column) */
.table--kv th {
    width: 140px;
    color: var(--text-muted-color);
    font-weight: 500;
    font-size: 0.85rem;
    white-space: nowrap;
}

.table--kv td:last-child {
    width: auto;
    white-space: normal;
    word-break: break-all;
}

.table--kv code {
    word-break: break-all;
}

/* Email log preview */
.email-preview-frame {
    padding: 1.25rem;
    background: var(--surface-muted-color);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.email-preview-iframe {
    width: 100%;
    min-height: 600px;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    background: #fff;
}

/* Status select dropdown */
.status-select {
    position: relative;
    min-width: 180px;
}

.status-select__trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    height: 42px;
    padding: 0 0.65rem 0 0.75rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-md);
    background: var(--surface-color);
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--text-color);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.status-select__trigger:hover {
    border-color: var(--primary-color);
}

.status-select--open .status-select__trigger {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

.status-select__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-xs);
    color: var(--text-muted-color);
    background: var(--surface-muted-color);
}

.status-select__icon--sent { color: var(--nb-blue); background: var(--nb-blue-light); }
.status-select__icon--failed { color: var(--danger-color); background: var(--danger-color-light); }
.status-select__icon--bounced { color: var(--warning-color); background: var(--warning-color-light); }
.status-select__icon--queued { color: var(--text-muted-color); background: var(--surface-muted-color); }

.status-select__label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-select__chevron {
    flex-shrink: 0;
    color: var(--text-muted-color);
    transition: transform 0.2s;
}

.status-select--open .status-select__chevron {
    transform: rotate(180deg);
}

.status-select__menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.status-select--open .status-select__menu {
    display: block;
}

.status-select__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.1s;
}

.status-select__option:hover {
    background: var(--surface-muted-color);
}

.status-select__option--active {
    font-weight: 600;
    background: var(--surface-muted-color);
}

/* Badge with icon */
.badge--with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.badge--with-icon svg {
    flex-shrink: 0;
}

.user-name {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    cursor: help;
    position: relative;
}

.admin-badge svg {
    display: block;
}

.admin-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: var(--nb-black);
    color: var(--nb-white);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1000;
    box-shadow: var(--shadow-brutal-sm);
}

.admin-badge::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    border: 5px solid transparent;
    border-top-color: var(--nb-black);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1000;
}

.admin-badge:hover::after,
.admin-badge:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* Contact Badge (mirrors admin-badge) */
.contact-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color, #6c757d);
    cursor: help;
    position: relative;
}

.contact-badge svg {
    display: block;
}

.contact-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: var(--nb-black);
    color: var(--nb-white);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1000;
    box-shadow: var(--shadow-brutal-sm);
}

.contact-badge::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    border: 5px solid transparent;
    border-top-color: var(--nb-black);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1000;
}

.contact-badge:hover::after,
.contact-badge:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* Import Wizard Steps */
.import-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding: 1rem 0;
}

.import-steps__step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted, #6c757d);
}

.import-steps__step--active {
    color: var(--primary-color);
    font-weight: 700;
}

.import-steps__step--done {
    color: var(--success-color, #28a745);
}

.import-steps__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid currentColor;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.import-steps__step--active .import-steps__number {
    background: var(--primary-color);
    color: var(--nb-white);
    border-color: var(--primary-color);
}

.import-steps__step--done .import-steps__number {
    background: var(--success-color, #28a745);
    color: var(--nb-white);
    border-color: var(--success-color, #28a745);
}

.import-steps__label {
    font-size: 0.9rem;
}

.import-steps__divider {
    width: 40px;
    height: 2px;
    background: var(--border-color, #dee2e6);
    flex-shrink: 0;
}

.import-steps__divider--done {
    background: var(--success-color, #28a745);
}

/* Import preview badges */
.import-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.import-badge--match {
    background: var(--success-color, #28a745);
    color: var(--nb-white);
}

.import-badge--new {
    background: var(--primary-color);
    color: var(--nb-white);
}

.import-badge--exists {
    background: var(--warning-bg, #fff3cd);
    color: var(--warning-text, #856404);
    border: 1px solid var(--warning-border, #ffc107);
}

.import-row--dimmed {
    opacity: 0.5;
}

.import-preview-table td,
.import-preview-table th {
    vertical-align: middle;
}

@media (max-width: 600px) {
    .import-steps {
        gap: 0.4rem;
        margin-bottom: 1.25rem;
        padding: 0.5rem 0;
    }

    .import-steps__label {
        display: none;
    }

    .import-steps__divider {
        width: 24px;
    }

    .import-preview-table .import-col-phone {
        display: none;
    }

    .import-preview-table td,
    .import-preview-table th {
        padding: 0.5rem 0.4rem;
        font-size: 0.85rem;
    }

    .file-dropzone {
        padding: 1.25rem 1rem;
    }

    .file-dropzone svg {
        width: 32px;
        height: 32px;
    }

    .contact-detail-modal {
        padding: 0.5rem;
    }

    .contact-detail-modal__dialog {
        max-width: 100%;
    }
}

/* Import Summary Bar — counts + filter buttons above preview table */
.import-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.import-summary__counts {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.import-summary__total {
    color: var(--text-strong-color);
}

.import-summary__selected {
    color: var(--primary-color);
}

.import-summary__sep {
    color: var(--text-muted-color);
}

.import-summary__filters {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.import-filter-btn {
    appearance: none;
    border: 2px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.import-filter-btn:hover {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
}

.import-filter-btn--active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}

@media (max-width: 600px) {
    .import-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

.import-preview-table input[type="checkbox"] {
    accent-color: var(--primary-color);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.import-preview-table tbody tr {
    cursor: pointer;
}

.import-preview-table tbody tr:hover {
    background: var(--surface-muted-color);
}

/* Contact Detail Modal — overlay shown on row click in import preview */
.contact-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.contact-detail-modal--visible {
    display: flex;
}

.contact-detail-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.contact-detail-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--surface-color);
    border: 3px solid var(--nb-black);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brutal);
    display: flex;
    flex-direction: column;
}

.contact-detail-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--nb-black);
    color: var(--nb-white);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.contact-detail-modal__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--nb-white);
}

.contact-detail-modal__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--nb-white);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.contact-detail-modal__close:hover {
    opacity: 1;
}

.contact-detail-modal__body {
    padding: 1.25rem;
}

.contact-detail-modal__fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-detail-modal__field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.contact-detail-modal__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted-color);
}

.contact-detail-modal__value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-strong-color);
    word-break: break-word;
}

.contact-detail-modal__value--empty {
    color: var(--text-muted-color);
}

.contact-detail-modal__status {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 2px solid var(--border-color);
}

/* Company Picker — interactive company selector with avatars */
.company-picker {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.company-picker__search {
    width: 100%;
    height: 42px;
    padding: 0 0.75rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.9rem;
}

.company-picker__search:focus {
    outline: none;
    background: var(--surface-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

.company-picker__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

@media (max-width: 600px) {
    .company-picker__list {
        grid-template-columns: 1fr;
    }
}

.company-picker__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--surface-color);
}

.company-picker__item:hover {
    border-color: var(--border-color);
    background: var(--surface-muted-color);
}

.company-picker__item--selected {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
}

.company-picker__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-picker__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company-picker__avatar span {
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1;
}

.company-picker__name {
    font-weight: 600;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* File Dropzone — click-to-select / drag-and-drop zone */
.file-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem;
    border: 3px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-muted-color);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.file-dropzone:hover,
.file-dropzone:focus-within {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
}

.file-dropzone--dragging {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
    border-style: solid;
}

.file-dropzone--has-file {
    border-color: var(--primary-color);
    border-style: solid;
}

.file-dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.file-dropzone__text {
    margin: 0;
    font-weight: 700;
    color: var(--text-strong-color);
    font-size: 1rem;
}

.file-dropzone__hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.file-dropzone__filename {
    margin: 0;
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.95rem;
}

/* User Cell with Avatar */
.user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    font-weight: inherit;
}

a.user-cell:hover {
    text-decoration: none;
}

a.user-cell:hover .user-name {
    color: var(--primary-color);
}

.user-cell__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
    border: 2px solid var(--nb-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.user-cell__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-cell__avatar-initials {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

/* Users Table - Mobile Card Layout */
@media (max-width: 640px) {
    .users-table thead {
        display: none;
    }

    .users-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name      active"
            "email     email"
            "companies companies"
            "jobs      jobs"
            "actions   actions";
        gap: 0.125rem 0.5rem;
        align-items: center;
        padding: 0.75rem;
        border-bottom: 2px solid var(--border-color);
    }

    .users-table tbody tr:last-child {
        border-bottom: none;
    }

    .users-table tbody td {
        padding: 0;
        border: none;
        width: auto;
        white-space: normal;
    }

    /* Name cell: avatar + name */
    .users-table__cell--name {
        grid-area: name;
    }

    .users-table__cell--name .user-cell {
        gap: 0.5rem;
    }

    .users-table__cell--name .user-cell__avatar {
        width: 32px;
        height: 32px;
    }

    .users-table__cell--name .user-name {
        font-weight: 600;
        font-size: 0.95rem;
    }

    /* Active toggle: aligned right on same row as name */
    .users-table__cell--active {
        grid-area: active;
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    /* Email: full width second row */
    .users-table__cell--email {
        grid-area: email;
        color: var(--text-muted-color);
        font-size: 0.85rem;
        padding-left: 42px !important;
    }

    /* Companies & Jobs: each on their own row with label prefix */
    .users-table__cell--companies {
        grid-area: companies;
        font-size: 0.8rem;
        color: var(--text-soft-color);
        padding-left: 42px !important;
    }

    .users-table__cell--jobs {
        grid-area: jobs;
        font-size: 0.8rem;
        color: var(--text-soft-color);
        padding-left: 42px !important;
    }

    .users-table__cell--companies::before,
    .users-table__cell--jobs::before {
        content: attr(data-cell-label) ": ";
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted-color);
    }

    /* Actions: full width bottom row */
    .users-table__cell--actions {
        grid-area: actions;
        padding-top: 0.375rem !important;
        padding-left: 42px !important;
    }

    .users-table__cell--actions .table-actions {
        justify-content: flex-start;
    }

    .users-table__cell--actions .table-actions .button {
        height: 30px;
        font-size: 0.75rem;
        padding: 0 0.625rem;
    }
}

/* Company Cell */
.company-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    font-weight: inherit;
}

a.company-cell:hover {
    text-decoration: none;
}

a.company-cell:hover .company-name {
    color: var(--primary-color);
}

.company-cell__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
    border: 2px solid var(--nb-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.company-cell__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company-cell__avatar-initials {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

.company-name {
    font-weight: 500;
    transition: color 0.15s ease;
}

/* Companies Table - Mobile Card Layout */
@media (max-width: 640px) {
    .companies-table thead {
        display: none;
    }

    .companies-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name    active"
            "url     url"
            "users   users"
            "actions actions";
        gap: 0.125rem 0.5rem;
        align-items: center;
        padding: 0.75rem;
        border-bottom: 2px solid var(--border-color);
    }

    .companies-table tbody tr:last-child {
        border-bottom: none;
    }

    .companies-table tbody td {
        padding: 0;
        border: none;
        width: auto;
        white-space: normal;
    }

    .companies-table__cell--name {
        grid-area: name;
    }

    .companies-table__cell--name .company-cell {
        gap: 0.5rem;
    }

    .companies-table__cell--name .company-cell__avatar {
        width: 32px;
        height: 32px;
    }

    .companies-table__cell--name .company-name {
        font-weight: 600;
        font-size: 0.95rem;
    }

    .companies-table__cell--active {
        grid-area: active;
        justify-self: end;
        display: flex;
        align-items: center;
    }

    .companies-table__cell--url {
        grid-area: url;
        font-size: 0.8rem;
        color: var(--text-soft-color);
        padding-left: 42px !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .companies-table__cell--url a {
        font-size: inherit;
        word-break: break-all;
    }

    .companies-table__cell--url::before {
        content: attr(data-cell-label) ": ";
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted-color);
    }

    .companies-table__cell--users {
        grid-area: users;
        font-size: 0.8rem;
        color: var(--text-soft-color);
        padding-left: 42px !important;
    }

    .companies-table__cell--users::before {
        content: attr(data-cell-label) ": ";
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted-color);
    }

    .companies-table__cell--actions {
        grid-area: actions;
        padding-top: 0.375rem !important;
        padding-left: 42px !important;
    }

    .companies-table__cell--actions .table-actions {
        justify-content: flex-start;
    }

    .companies-table__cell--actions .table-actions .button {
        height: 30px;
        font-size: 0.75rem;
        padding: 0 0.625rem;
    }
}

.space-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    font-weight: inherit;
}

a.space-cell:hover {
    text-decoration: none;
}

a.space-cell:hover .space-cell__title {
    color: var(--primary-color);
}

.space-cell__avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
    border: 2px solid var(--nb-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.space-cell__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.space-cell__avatar-initials {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

.space-cell__info {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.space-cell__title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: #000;
    text-decoration: none;
}

.space-cell__title:hover {
    color: var(--primary-color);
}

.space-cell__company {
    font-size: 0.9rem;
    color: var(--text-muted-color);
}

.space-cell__slug {
    font-size: 0.85rem;
    color: var(--primary-color);
    text-decoration: none;
}

.space-cell__slug:hover {
    text-decoration: underline;
}

/* Spaces table — mobile card layout */
@media (max-width: 640px) {
    .spaces-table thead {
        display: none;
    }

    .spaces-table tbody tr {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "name"
            "updated"
            "actions";
        gap: 0.125rem;
        padding: 0.75rem;
        border-bottom: 2px solid var(--border-color);
    }

    .spaces-table tbody tr:last-child {
        border-bottom: none;
    }

    .spaces-table tbody td {
        padding: 0;
        border: none;
        width: auto;
        white-space: normal;
    }

    /* Name cell */
    .spaces-table__cell--name {
        grid-area: name;
        min-width: 0;
    }

    .spaces-table__cell--name .space-cell {
        gap: 0.625rem;
        align-items: flex-start;
    }

    .spaces-table__cell--name .space-cell__avatar {
        width: 42px;
        height: 42px;
        margin-top: 0.125rem;
    }

    .spaces-table__cell--name .space-cell__title {
        font-size: 0.95rem;
        line-height: 1.15;
    }

    .spaces-table__cell--name .space-cell__company {
        font-size: 0.8rem;
    }

    .spaces-table__cell--name .space-cell__slug {
        font-size: 0.75rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
        display: block;
    }

    /* Updated date — below slug, indented to match text */
    .spaces-table__cell--updated {
        grid-area: updated;
        font-size: 0.75rem;
        color: var(--text-muted-color);
        white-space: nowrap;
        /* 42px avatar + 0.625rem gap */
        padding-left: calc(42px + 0.625rem) !important;
    }

    .spaces-table__cell--updated::before {
        display: none;
    }

    /* Actions row — buttons at original size, single line */
    .spaces-table__cell--actions {
        grid-area: actions;
        padding-top: 0.375rem !important;
        /* align with text content */
        padding-left: calc(42px + 0.625rem) !important;
    }

    .spaces-table__cell--actions .table-actions {
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    /* Delete button: icon-only on mobile */
    .spaces-table__cell--actions .two-step-action.button {
        width: 34px;
        padding: 0;
    }

    .spaces-table__cell--actions .two-step-action__trigger .button__icon {
        margin: 0;
    }

    /* Hide delete text label */
    .spaces-table__cell--actions .two-step-action__trigger {
        font-size: 0;
        gap: 0;
    }

    .spaces-table__cell--actions .two-step-action__trigger svg {
        font-size: initial;
    }

    /* On confirm: just show tick, hide No button */
    .spaces-table__cell--actions .two-step-action__confirm .btn-confirm--no {
        display: none;
    }

    .spaces-table__cell--actions .two-step-action__confirm .btn-confirm--yes {
        border: none;
        background: transparent;
        padding: 0;
        font-size: 0;
    }

    .spaces-table__cell--actions .two-step-action__confirm .btn-confirm--yes::before {
        content: "✓";
        font-size: 1.1rem;
        color: #fff;
    }
}

/* Topics Table — Mobile Card Layout */
@media (max-width: 640px) {
    .topics-table thead {
        display: none;
    }

    .topics-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name    status"
            "owner   owner"
            "date    date"
            "actions actions";
        gap: 0.125rem 0.5rem;
        align-items: center;
        padding: 0.75rem;
        border-bottom: 2px solid var(--border-color);
    }

    .topics-table tbody tr:last-child {
        border-bottom: none;
    }

    .topics-table tbody td {
        padding: 0;
        border: none;
        width: auto;
        white-space: normal;
    }

    /* Name cell */
    .topics-table__cell--name {
        grid-area: name;
        min-width: 0;
    }

    .topics-table__cell--name strong {
        font-size: 0.95rem;
        font-weight: 600;
    }

    /* Status toggle: top-right */
    .topics-table__cell--status {
        grid-area: status;
        justify-self: end;
        display: flex;
        align-items: center;
    }

    /* Owner: full width with label prefix */
    .topics-table__cell--owner {
        grid-area: owner;
        font-size: 0.8rem;
        color: var(--text-soft-color);
    }

    /* Created date: full width with label prefix */
    .topics-table__cell--date {
        grid-area: date;
        font-size: 0.8rem;
        color: var(--text-soft-color);
    }

    .topics-table__cell--owner::before,
    .topics-table__cell--date::before {
        content: attr(data-cell-label) ": ";
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted-color);
    }

    /* Actions: full width bottom row */
    .topics-table__cell--actions {
        grid-area: actions;
        padding-top: 0.375rem !important;
    }

    .topics-table__cell--actions .table-actions {
        justify-content: flex-start;
    }

    .topics-table__cell--actions .table-actions .button {
        height: 30px;
        font-size: 0.75rem;
        padding: 0 0.625rem;
    }

    .topics-table__cell--actions .two-step-action.button {
        width: 34px;
        min-width: 34px;
        height: 30px;
        padding: 0;
        flex-shrink: 0;
    }

    .topics-table__cell--actions .two-step-action__trigger {
        font-size: 0;
        gap: 0;
    }

    .topics-table__cell--actions .two-step-action__trigger .button__icon {
        width: 16px;
        height: 16px;
        margin: 0;
        flex-shrink: 0;
    }

    .topics-table__cell--actions .two-step-action__confirm .btn-confirm--no {
        display: none;
    }

    .topics-table__cell--actions .two-step-action__confirm .btn-confirm--yes {
        border: none;
        background: transparent;
        padding: 0;
        font-size: 0;
    }

    .topics-table__cell--actions .two-step-action__confirm .btn-confirm--yes::before {
        content: "✓";
        font-size: 1.1rem;
        color: #fff;
    }
}

/* Toggle Switch - Exact Boron data-switch style */
[data-switch] {
    display: none;
}

[data-switch] + label {
    width: 56px;
    height: 24px;
    background-color: #e3e6ed;
    background-image: none;
    border-radius: 2rem;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    position: relative;
    transition: all 0.1s ease-in-out;
    vertical-align: middle;
}

[data-switch] + label::before {
    color: var(--text-color, #313a46);
    content: attr(data-off-label);
    display: block;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 24px;
    position: absolute;
    right: 3px;
    margin: 0 0.21667rem;
    top: 0;
    text-align: center;
    min-width: 1.66667rem;
    overflow: hidden;
    transition: all 0.1s ease-in-out;
}

[data-switch] + label::after {
    content: "";
    position: absolute;
    left: 4px;
    background-color: #adb5bd;
    box-shadow: none;
    border-radius: 2rem;
    height: 18px;
    width: 18px;
    top: 3px;
    transition: all 0.1s ease-in-out;
}

[data-switch]:checked + label {
    background-color: #3b82f6;
}

[data-switch]:checked + label::before {
    color: #fff;
    content: attr(data-on-label);
    right: auto;
    left: 4px;
}

[data-switch]:checked + label::after {
    left: 34px;
    background-color: #fff;
}

[data-switch="success"]:checked + label {
    background-color: #0acf97;
}

[data-switch="primary"]:checked + label {
    background-color: #3b82f6;
}

[data-switch="danger"]:checked + label {
    background-color: #fa5c7c;
}

[data-switch="warning"]:checked + label {
    background-color: #ffbc00;
}

[data-switch]:disabled + label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Toggle Label - Wrapper for switch + text */
.toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.toggle-label [data-switch] + label {
    flex-shrink: 0;
    vertical-align: middle;
    margin-top: 7px;
}

.toggle-label__text {
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    user-select: none;
    line-height: 24px;
}

.media-table__identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.media-table__favicon {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    background-color: var(--surface-muted-color);
    object-fit: cover;
    flex-shrink: 0;
}

.media-table__favicon--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--text-strong-color);
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* Media Cell - Table row with avatar */
.media-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    font-weight: inherit;
}

a.media-cell:hover {
    text-decoration: none;
}

a.media-cell:hover .media-cell__name {
    color: var(--primary-color);
}

.media-cell__avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
    border: 2px solid var(--nb-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.media-cell__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-cell__avatar-initials {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

.media-cell__info {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.media-cell__name {
    font-weight: 600;
    color: #000;
}

.media-cell__url {
    font-size: 0.8rem;
    color: var(--text-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

/* Media Table — Mobile Card Layout */
@media (max-width: 640px) {
    .media-table thead {
        display: none;
    }

    .media-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name    status"
            "feeds   feeds"
            "actions actions";
        gap: 0.125rem 0.5rem;
        align-items: center;
        padding: 0.75rem;
        border-bottom: 2px solid var(--border-color);
    }

    .media-table tbody tr:last-child {
        border-bottom: none;
    }

    .media-table tbody td {
        padding: 0;
        border: none;
        width: auto;
        white-space: normal;
    }

    /* Name cell */
    .media-table__cell--name {
        grid-area: name;
        min-width: 0;
    }

    .media-table__cell--name .media-cell {
        gap: 0.625rem;
        align-items: flex-start;
    }

    .media-table__cell--name .media-cell__avatar {
        width: 36px;
        height: 36px;
        margin-top: 0.125rem;
    }

    .media-table__cell--name .media-cell__name {
        font-size: 0.95rem;
        line-height: 1.15;
    }

    .media-table__cell--name .media-cell__url {
        font-size: 0.75rem;
        max-width: 100%;
    }

    /* Status toggle: top-right */
    .media-table__cell--status {
        grid-area: status;
        justify-self: end;
        display: flex;
        align-items: center;
    }

    /* Feeds count: full width with label */
    .media-table__cell--feeds {
        grid-area: feeds;
        font-size: 0.8rem;
        color: var(--text-soft-color);
        /* 36px avatar + 0.625rem gap */
        padding-left: calc(36px + 0.625rem) !important;
    }

    .media-table__cell--feeds::before {
        content: attr(data-cell-label) ": ";
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted-color);
    }

    /* Actions: full width bottom row */
    .media-table__cell--actions {
        grid-area: actions;
        padding-top: 0.375rem !important;
        /* align with text content */
        padding-left: calc(36px + 0.625rem) !important;
    }

    .media-table__cell--actions .table-actions {
        justify-content: flex-start;
    }

    .media-table__cell--actions .table-actions .button {
        height: 30px;
        font-size: 0.75rem;
        padding: 0 0.625rem;
    }

    .media-table__cell--actions .two-step-action.button {
        width: 34px;
        min-width: 34px;
        height: 30px;
        padding: 0;
        flex-shrink: 0;
    }

    .media-table__cell--actions .two-step-action__trigger {
        font-size: 0;
        gap: 0;
    }

    .media-table__cell--actions .two-step-action__trigger .button__icon {
        width: 16px;
        height: 16px;
        margin: 0;
        flex-shrink: 0;
    }

    .media-table__cell--actions .two-step-action__confirm .btn-confirm--no {
        display: none;
    }

    .media-table__cell--actions .two-step-action__confirm .btn-confirm--yes {
        border: none;
        background: transparent;
        padding: 0;
        font-size: 0;
    }

    .media-table__cell--actions .two-step-action__confirm .btn-confirm--yes::before {
        content: "✓";
        font-size: 1.1rem;
        color: #fff;
    }
}

.media-name {
    font-weight: 500;
    transition: color 0.15s ease;
}

.table-link {
    color: var(--text-muted-color);
    text-decoration: none;
    max-width: 300px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.media-favicon-preview {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border: var(--border-brutal-thin);
    background-color: var(--surface-color);
}

/* Favicon Editor - 3 column layout */
.favicon-editor {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
}

.favicon-editor__preview {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    border: 2px solid var(--nb-black);
    background: var(--surface-muted-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.favicon-editor__preview-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.favicon-editor__placeholder {
    color: var(--text-muted-color);
}

.favicon-editor__action,
.favicon-editor__upload {
    flex: 1;
}

/* Reextract button - styled as a card */
.favicon-editor__reextract {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 1rem;
    height: 100%;
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-md);
    background: var(--surface-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    font-family: inherit;
}

.favicon-editor__reextract:hover {
    background: var(--surface-muted-color);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--nb-black);
}

.favicon-editor__reextract-icon {
    color: var(--text-muted-color);
}

.favicon-editor__reextract:hover .favicon-editor__reextract-icon {
    color: var(--text-color);
}

.favicon-editor__reextract-text {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-strong-color);
}

.favicon-editor__reextract-hint {
    font-size: 0.7rem;
    color: var(--text-muted-color);
    line-height: 1.3;
}

/* Dropzone */
.favicon-editor__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 1rem;
    height: 100%;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-muted-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.favicon-editor__dropzone:hover,
.favicon-editor__dropzone:focus-within {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
}

.favicon-editor__dropzone--dragover {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
    border-style: solid;
}

.favicon-editor__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.favicon-editor__dropzone-icon {
    color: var(--text-muted-color);
}

.favicon-editor__dropzone:hover .favicon-editor__dropzone-icon {
    color: var(--primary-color);
}

.favicon-editor__dropzone-text {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-strong-color);
}

.favicon-editor__dropzone-hint {
    font-size: 0.7rem;
    color: var(--text-muted-color);
    line-height: 1.3;
}

.favicon-editor__message {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    min-height: 1.25rem;
}

.favicon-editor__message:empty {
    display: none;
}

.favicon-editor__message--success {
    color: var(--success-color);
}

.favicon-editor__message--error {
    color: var(--error-color);
}

/* Favicon Editor — Mobile stacked layout */
@media (max-width: 640px) {
    .favicon-editor {
        grid-template-columns: 1fr;
    }

    .favicon-editor__preview {
        width: 64px;
        height: 64px;
        justify-self: center;
    }
}

/* Button outline variant */
.button--outline {
    background: var(--surface-color);
    color: var(--text-color);
    border: 2px solid var(--nb-black);
}

.button--outline:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* ==========================================================================
   Alerts - Neobrutalist Style with Auto-dismiss
   ========================================================================== */

.alert-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.alert-container .alert {
    box-shadow: 4px 4px 0 var(--nb-black);
}

.alert {
    padding: 1rem 1.25rem;
    padding-right: 3rem;
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-md);
    margin-bottom: 0;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    animation: alertSlideIn 0.3s ease;
    background: var(--card-bg);
}

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

.alert--dismissing {
    animation: alertSlideOut 0.3s ease forwards;
}

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

.alert__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.alert__content {
    flex: 1;
    min-width: 0;
}

.alert__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.alert__close:hover {
    opacity: 1;
}

.alert__close svg {
    width: 16px;
    height: 16px;
}

.alert__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.3;
    width: 100%;
    transform-origin: left;
    animation: alertProgress var(--alert-duration, 5s) linear forwards;
}

@keyframes alertProgress {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

.alert--success {
    background-color: var(--success-color-light);
    border-color: var(--success-color);
    color: #166534;
}

.alert--success .alert__progress {
    background: var(--success-color);
}

.alert--error {
    background-color: var(--danger-color-light);
    border-color: var(--danger-color);
    color: #991b1b;
}

.alert--error .alert__progress {
    background: var(--danger-color);
}

.alert--info {
    background-color: var(--primary-color-light);
    border-color: var(--primary-color);
    color: #9a3412;
}

.alert--info .alert__progress {
    background: var(--primary-color);
}

.alert--warning {
    background-color: var(--warning-color-light);
    border-color: var(--warning-color);
    color: #854d0e;
}

.alert--warning .alert__progress {
    background: var(--warning-color);
}

.alert ul {
    margin: 0;
    padding-left: 1.25rem;
}

/* ==========================================================================
   Badges - Neobrutalist Style
   ========================================================================== */

.badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--surface-muted-color);
    color: var(--text-strong-color);
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border: 2px solid var(--border-color);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge--success,
.status--validated {
    background-color: var(--success-color-light);
    border-color: var(--success-color);
    color: var(--success-color);
}

.status-badge--error,
.status--unvalidated {
    background-color: var(--danger-color-light);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.status-badge--pending {
    background-color: var(--primary-color-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.status-badge--warning {
    background-color: var(--warning-color-light);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

/* ==========================================================================
   Two-Step Confirm Action
   ========================================================================== */

.two-step-action.button {
    width: 125px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.two-step-action__trigger {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.two-step-action__confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(100%);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.two-step-action--active .two-step-action__trigger {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.two-step-action--active .two-step-action__confirm {
    opacity: 1;
    transform: translateY(-50%);
}

/* Pill-shaped Yes/No buttons inside the delete button */
.two-step-action__confirm .btn-confirm {
    height: 26px;
    padding: 0 0.45rem;
    border: 1px solid #fff;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: all 0.15s ease;
    box-shadow: none;
    outline: none;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.two-step-action__confirm .btn-confirm--yes:hover {
    background-color: #fff;
    color: #0acf97;
    border-color: #fff;
}

.two-step-action__confirm .btn-confirm--no:hover {
    background-color: #fff;
    color: var(--nb-black);
    border-color: #fff;
}

/* ==========================================================================
   Tabs - Neobrutalist Style
   ========================================================================== */

.tabs {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tabs__list {
    display: flex;
    gap: 0;
    border-bottom: var(--border-brutal);
    flex-wrap: wrap;
}

.tabs__tab {
    appearance: none;
    border: var(--border-brutal);
    border-bottom: none;
    background: var(--surface-muted-color);
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: -3px;
}

.tabs__tab:hover {
    background-color: var(--primary-color-light);
    color: var(--text-strong-color);
}

.tabs__tab.is-active {
    background-color: var(--primary-color);
    color: var(--text-strong-color);
    border-bottom: 3px solid var(--primary-color);
}

.tabs__tab:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.tabs__panel {
    display: grid;
    gap: 2.5rem;
    width: 100%;
}

.tabs__panel[hidden] {
    display: none;
}

.tabs__panel-section {
    margin-bottom: 1.5rem;
}

.tabs__actions--separated {
    padding-top: 1rem;
    border-top: var(--border-brutal-thin);
}

/* Tabs Nav (alternative naming) */
.tabs__nav {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}

.tabs__button {
    appearance: none;
    border: var(--border-brutal);
    border-bottom: none;
    background: var(--surface-muted-color);
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: -3px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    corner-shape: squircle;
}

.tabs__button:hover {
    background-color: var(--primary-color-light);
    color: var(--text-strong-color);
}

.tabs__button--active,
.tabs__button.is-active {
    background-color: var(--surface-color);
    color: var(--text-strong-color);
    border-bottom-color: var(--surface-color);
    position: relative;
    z-index: 1;
}

.tabs__button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Standalone Tabs (tabs outside cards) - Neobrutalism Style */
.tabs--standalone {
    gap: 0;
    width: 100%;
}

.tabs--standalone .tabs__nav {
    display: flex;
    width: 100%;
    height: 3rem;
    background: var(--surface-muted-color);
    border: 2px solid var(--nb-black);
    border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
    box-shadow: 4px 4px 0 var(--nb-black);
    margin-bottom: -4px;
    position: relative;
    z-index: 1;
}

.tabs--standalone .tabs__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    height: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--text-color);
    background: transparent;
    border: 0;
    border-right: 2px solid var(--nb-black);
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 100ms ease;
}

.tabs--standalone .tabs__button:last-child {
    border-right: 0;
}

.tabs--standalone .tabs__button svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    opacity: 0.6;
    transition: opacity 100ms ease;
}

.tabs--standalone .tabs__button:hover:not(.tabs__button--active) {
    background: var(--surface-secondary-color);
}

.tabs--standalone .tabs__button:hover svg {
    opacity: 0.8;
}

.tabs--standalone .tabs__button--active {
    background: var(--primary-color);
    color: #fff;
}

.tabs--standalone .tabs__button--active svg {
    opacity: 1;
}

.tabs--standalone > .card {
    position: relative;
    z-index: 1;
    border-radius: var(--radius-md);
}

.tabs--standalone > .tabs__panel {
    position: relative;
    z-index: 1;
    background-color: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: var(--card-padding);
    box-shadow: 4px 4px 0 var(--nb-black);
}

.tabs--standalone > .tabs__panel[hidden] {
    display: none;
}

@media (max-width: 900px) {
    .tabs--standalone .tabs__nav {
        flex-wrap: wrap;
        height: auto;
    }

    .tabs--standalone .tabs__button {
        flex: 1 1 auto;
        padding: 0.5rem 0.5rem;
        font-size: 0.7rem;
    }

    .tabs--standalone .tabs__button svg {
        width: 14px;
        height: 14px;
    }
}

/* Mobile "More" trigger — hidden by default, shown on mobile */
.tabs--standalone .tabs__more-trigger {
    display: none;
}

@media (max-width: 640px) {
    /* Hide non-active tabs, show only active + "more" */
    .tabs--standalone .tabs__nav {
        flex-wrap: nowrap;
        height: 3rem;
    }

    .tabs--standalone .tabs__button[data-tab-button]:not(.tabs__button--active) {
        display: none;
    }

    .tabs--standalone .tabs__button--active {
        flex: 1 1 auto;
        font-size: 0.95rem;
        font-weight: 700;
    }

    .tabs--standalone .tabs__more-trigger {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        flex: 0 0 auto;
        padding: 0.5rem 0.625rem;
        border-left: 2px solid var(--nb-black);
        border-right: 0;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-muted-color);
    }

    .tabs--standalone .tabs__more-trigger svg {
        opacity: 0.7;
    }

    .tabs--standalone .tabs__more-trigger span {
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .tabs--standalone .tabs__more-trigger:hover {
        color: var(--text-strong-color);
    }

    .tabs--standalone .tabs__more-trigger:hover svg {
        opacity: 1;
    }
}

/* Tabs "More" Modal — Bottom Sheet Style */
.tabs-more-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.tabs-more-modal[hidden] {
    display: none;
}

.tabs-more-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.tabs-more-modal--visible .tabs-more-modal__backdrop {
    opacity: 1;
}

.tabs-more-modal__sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - var(--topbar-height) - 1rem);
    display: flex;
    flex-direction: column;
    background: var(--surface-color);
    border: 3px solid var(--nb-black);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tabs-more-modal--visible .tabs-more-modal__sheet {
    transform: translateY(0);
}

.tabs-more-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--nb-black);
    border-bottom: 2px solid var(--nb-black);
    border-radius: calc(var(--radius-lg) - 3px) calc(var(--radius-lg) - 3px) 0 0;
}

.tabs-more-modal__title {
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}

.tabs-more-modal__close {
    appearance: none;
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.15s ease;
}

.tabs-more-modal__close:hover {
    color: #fff;
}

.tabs-more-modal__list {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.tabs-more-modal__item {
    appearance: none;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-align: left;
    width: 100%;
}

.tabs-more-modal__item:hover {
    background: var(--surface-secondary-color);
}

.tabs-more-modal__item svg:first-child {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    opacity: 0.5;
}

.tabs-more-modal__item span {
    flex: 1;
}

.tabs-more-modal__check {
    flex-shrink: 0;
    opacity: 0;
    color: var(--primary-color);
    transition: opacity 0.15s ease;
}

.tabs-more-modal__item--active {
    color: var(--primary-color);
}

.tabs-more-modal__item--active svg:first-child {
    opacity: 1;
}

.tabs-more-modal__item--active .tabs-more-modal__check {
    opacity: 1;
}

/* ==========================================================================
   Grid Layouts
   ========================================================================== */

.grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .grid--two-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid--three-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid--four-columns {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Metrics & Dashboard Cards
   ========================================================================== */

.metric {
    font-size: 3rem;
    font-weight: 800;
    margin: 0.5rem 0 1rem;
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    border: var(--border-brutal-thin);
    margin-bottom: 0.5rem;
}

.stat-card__icon svg {
    width: 24px;
    height: 24px;
    fill: var(--nb-black);
}

.stat-card__icon--blue {
    background: var(--nb-blue);
}

.stat-card__icon--green {
    background: var(--nb-green);
}

.stat-card__icon--orange {
    background: var(--nb-orange);
}

.stat-card__icon--pink {
    background: var(--nb-pink);
}

.stat-card__icon--blue svg,
.stat-card__icon--green svg,
.stat-card__icon--orange svg,
.stat-card__icon--pink svg {
    fill: #fff;
}

.stat-card__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted-color);
}

.stat-card__value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-strong-color);
}

/* ==========================================================================
   Login Page
   ========================================================================== */

.login-body {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    padding: 1rem;
}

.login-container {
    width: min(460px, 100%);
}

.login-container .card {
    margin: 0 auto;
    box-shadow: var(--shadow-brutal-lg);
}

.login-container h1 {
    margin-top: 0;
    text-transform: uppercase;
}

.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: calc(1rem - 5px);
}

.login-logo__icon {
    width: 56px;
    height: 56px;
}

.login-logo__text {
    height: 36px;
    width: auto;
}

.login-heading {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
}

.login-container .button--full {
    width: 100%;
    justify-content: center;
}

.login-container ul {
    margin: 0;
    padding-left: 1.25rem;
}

.login-divider {
    position: relative;
    margin: calc(1.5rem - 5px) 0;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-color);
}

.login-divider::before,
.login-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 2px;
    background-color: var(--border-color);
}

.login-divider::before {
    left: 0;
}

.login-divider::after {
    right: 0;
}

.login-divider span {
    display: inline-block;
    padding: 0 0.75rem;
    background-color: var(--surface-color);
}

.login-provider {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
}

.login-provider__hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted-color);
}

/* ==========================================================================
   Passkey Styles
   ========================================================================== */

.passkey-login {
    margin: 1.5rem 0 0.75rem;
    padding: 1.25rem;
    border: var(--border-brutal);
    background-color: var(--surface-muted-color);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.passkey-login h2 {
    margin: 0;
    font-size: 1rem;
    text-transform: uppercase;
}

.passkey-login__description {
    margin: 0;
    font-size: 0.95rem;
}

.passkey-login__hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted-color);
}

.passkey-login__status {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-color);
}

.passkey-login__status--error {
    color: var(--danger-color);
}

.passkey-login--ready {
    border-color: var(--primary-color);
}

.passkey-login--available {
    border-color: var(--primary-color);
    background-color: var(--primary-color-light);
}

.passkey-login--disabled {
    opacity: 0.7;
}

.passkey-description {
    margin: 0 0 0.5rem;
    color: var(--text-muted-color);
    font-size: 0.95rem;
    line-height: 1.5;
}

.passkey-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-top: 0.75rem;
    background: var(--surface-muted-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
}

.passkey-actions__text {
    margin: 0;
    color: var(--text-color);
    font-size: 0.9rem;
    line-height: 1.4;
    flex: 1;
}

.passkey-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.passkey-list__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 2px solid #444;
    padding: 1rem 1.25rem;
    background-color: var(--surface-color);
    border-radius: var(--radius-sm);
    box-shadow: 3px 3px 0 #aaa;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.passkey-list__item:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 #aaa;
}

.passkey-list__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--primary-color);
    color: #fff;
    border-radius: var(--radius-sm);
    border: 2px solid var(--nb-black);
}

.passkey-list__icon svg {
    width: 20px;
    height: 20px;
}

.passkey-list__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.passkey-list__name {
    font-weight: 700;
    color: var(--text-color);
    font-size: 1rem;
}

.passkey-list__dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-muted-color);
}

.passkey-list__separator {
    color: var(--text-muted-color);
}

.passkey-list__meta,
.passkey-list__hint {
    font-size: 0.85rem;
    color: var(--text-muted-color);
    margin: 0;
}

.passkey-list__revoke {
    flex-shrink: 0;
    position: relative;
    width: 120px;
    height: 36px;
    overflow: hidden;
    border: 2px solid var(--danger-color);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
}

.passkey-list__revoke-trigger {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--danger-color);
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.passkey-list__revoke-trigger:hover {
    background: var(--danger-color);
    color: #fff;
}

.passkey-list__revoke-trigger svg {
    width: 14px;
    height: 14px;
}

.passkey-list__revoke .two-step-action__confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(100%);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.passkey-list__revoke.two-step-action--active .passkey-list__revoke-trigger {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.passkey-list__revoke.two-step-action--active .two-step-action__confirm {
    opacity: 1;
    transform: translateY(-50%);
}

.passkey-list__revoke .btn-confirm {
    height: 26px;
    padding: 0 0.45rem;
    border: 1px solid var(--danger-color);
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: all 0.15s ease;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    color: var(--danger-color);
}

.passkey-list__revoke .btn-confirm--yes:hover {
    background-color: var(--danger-color);
    color: #fff;
    border-color: var(--danger-color);
}

.passkey-list__revoke .btn-confirm--no:hover {
    background-color: var(--text-muted-color);
    color: #fff;
    border-color: var(--text-muted-color);
}

.passkey-list__empty {
    margin-top: 1rem;
    color: var(--text-muted-color);
    font-style: italic;
}

.passkey-feedback {
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-color);
}

.passkey-feedback--error {
    color: var(--danger-color);
}

/* Button label desktop/mobile toggle */
.button__label--mobile {
    display: none;
}

@media (max-width: 640px) {
    .button__label--desktop {
        display: none;
    }

    .button__label--mobile {
        display: inline;
    }

    /* Stack passkey create box vertically */
    .passkey-actions {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 0.875rem 1rem;
    }

    .passkey-actions .button {
        align-self: stretch;
        justify-content: center;
    }

    /* Stack passkey list items vertically */
    .passkey-list__item {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
    }

    .passkey-list__item .passkey-list__icon {
        align-self: flex-start;
    }

    .passkey-list__revoke {
        width: 100%;
    }

    /* Stack google connected account vertically */
    .google-account--connected {
        flex-direction: column;
        align-items: stretch;
    }

    .google-account--connected .google-account__icon {
        align-self: flex-start;
    }

    .google-account__actions {
        width: 100%;
    }

    .google-account__actions .button--google-disconnect {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Settings Cards (Spaces Settings Tab)
   ========================================================================== */

.settings-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.settings-card {
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    background: var(--surface-color);
    box-shadow: var(--shadow-brutal-sm);
    overflow: hidden;
}

.settings-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface-muted-color);
    border-bottom: var(--border-brutal);
}

.settings-card__header h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.settings-card__body {
    padding: 1.25rem;
}

.settings-card__description {
    margin: 0;
    padding: 1rem 1.25rem;
    color: var(--text-muted-color);
    font-size: 0.9rem;
}

.settings-card__empty {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted-color);
    background: var(--surface-secondary-color);
    border-top: var(--border-brutal-thin);
}

.settings-card__limits {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: var(--border-brutal-thin);
}

.settings-card__limits h4 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.settings-card__actions {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: var(--border-brutal-thin);
}

.settings-card--admin {
    border-color: var(--primary-color);
}

.settings-card--admin .settings-card__header {
    background: var(--primary-color-lighter);
}

/* ==========================================================================
   Settings Page
   ========================================================================== */

.settings-hero {
    margin-bottom: 2rem;
    padding: 2rem;
    border: var(--border-brutal);
    background: var(--nb-blue);
    color: #fff;
    box-shadow: var(--shadow-brutal);
    position: relative;
}

.settings-hero__profile {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.settings-hero__avatar {
    width: 5rem;
    height: 5rem;
    border: var(--border-brutal);
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.settings-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.settings-hero__avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--nb-black);
}

.settings-hero__avatar-placeholder svg {
    width: 60%;
    height: 60%;
}

.settings-hero__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.settings-hero__eyebrow {
    margin: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    opacity: 0.8;
}

.settings-hero__title {
    margin: 0;
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 800;
}

.settings-hero__description {
    margin: 0;
    max-width: 48ch;
    font-size: 1rem;
    opacity: 0.9;
}

.settings-hero__meta {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.settings-hero__meta-item {
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.settings-hero__meta-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    opacity: 0.7;
}

.settings-hero__meta-value {
    font-size: 1rem;
    font-weight: 700;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.settings-section {
    border: var(--border-brutal);
    padding: 1.5rem;
    background-color: var(--surface-color);
    box-shadow: var(--shadow-brutal-sm);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.settings-section__header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.settings-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-strong-color);
}

.settings-section__description {
    margin: 0;
    color: var(--text-muted-color);
    max-width: 60ch;
}

.settings-section__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-section__fields.form-grid {
    display: grid;
}

.settings-section__fields--stacked {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.settings-section--stacked .contact-section {
    margin: 0;
}

.settings-section--stacked .contact-section + .contact-section {
    border-top: var(--border-brutal-thin);
    padding-top: 1.5rem;
}

.settings-section--list {
    gap: 1rem;
}

.settings-section--google {
    gap: 1rem;
}

.settings-section__empty {
    margin: 0;
    padding: 1rem;
    color: var(--text-muted-color);
    background: var(--surface-secondary-color);
    border: 2px dashed var(--border-subtle-color);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.settings-section--verification {
    border-color: var(--primary-color);
    background: var(--primary-color-lighter);
}

@media (max-width: 900px) {
    .settings-hero {
        padding: 1.5rem;
    }

    .settings-hero__profile {
        flex-direction: column;
        align-items: flex-start;
    }

    .settings-hero__meta {
        gap: 1rem;
    }
}

@media (max-width: 600px) {
    .settings-hero__title {
        font-size: 1.5rem;
    }

    .settings-section {
        padding: 1.25rem;
    }
}

/* ==========================================================================
   Session List
   ========================================================================== */

.session-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.session-list__summary {
    margin: 0 0 1rem;
    font-weight: 700;
    color: var(--text-soft-color);
}

.session-list__item {
    border: 2px solid #444;
    padding: 1.25rem;
    background-color: var(--surface-color);
    border-radius: var(--radius-sm);
    box-shadow: 3px 3px 0 #aaa;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.session-list__item:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 #aaa;
}

.session-list__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.session-list__details {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.session-list__device-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--primary-color);
    border: 2px solid #000;
    border-radius: var(--radius-sm);
    color: #ffffff;
    flex-shrink: 0;
}

.session-list__device-svg {
    width: 1.25rem;
    height: 1.25rem;
}

.session-list__device-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.session-list__type {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.session-list__name {
    font-weight: 700;
    color: var(--text-color);
}

.session-list__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.session-list__actions form {
    margin: 0;
}

.session-list__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    background-color: var(--success-color-light);
    border: 2px solid var(--success-color);
    color: var(--success-color);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.session-list__logout {
    font-weight: 700;
}

.session-list__meta {
    display: grid;
    gap: 0.5rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin: 1rem 0;
    padding: 0.75rem;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: var(--radius-sm);
}

.session-list__meta-item {
    margin: 0;
}

.session-list__meta-item dt {
    margin: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted-color);
    font-weight: 700;
}

.session-list__meta-item dd {
    margin: 0.25rem 0 0;
    font-weight: 700;
    color: var(--text-strong-color);
    word-break: break-word;
}

.session-list__user-agent {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-soft-color);
    word-break: break-word;
}

.session-list__bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
    align-items: center;
}

.session-list__bulk-actions form {
    margin: 0;
}

.session-list__empty {
    margin-top: 1rem;
    color: var(--text-muted-color);
}

@media (max-width: 640px) {
    .session-list__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .session-list__actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ==========================================================================
   Profile Page - User Edit
   ========================================================================== */

.profile-page {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.profile-page__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted-color);
    text-decoration: none;
    transition: color 0.15s ease;
}

.profile-page__back:hover {
    color: var(--text-strong-color);
}

/* Profile Header Card */
.profile-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    background: var(--surface-color);
    border: 3px solid var(--nb-black);
    border-radius: var(--radius-md);
    box-shadow: 6px 6px 0 var(--nb-black);
}

.profile-header__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
    border: 3px solid var(--nb-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-header__initials {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
}

/* Hero variant - red gradient background (options page) */
.profile-header--hero {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, #e63946 0%, #c1121f 50%, #a30d15 100%);
    color: #fff;
}

.profile-header--hero .profile-header__avatar {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.profile-header--hero .profile-header__name {
    color: #fff;
}

.profile-header--hero .profile-header__email {
    color: rgba(255, 255, 255, 0.85);
}

.profile-header--hero .profile-header__meta-item {
    color: rgba(255, 255, 255, 0.8);
}

.profile-header--hero .profile-header__meta-item svg {
    opacity: 0.7;
}

.profile-header__avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Space profile header - square avatar with border radius */
.profile-header--space .profile-header__avatar {
    border-radius: var(--radius-md);
}

.profile-header--space .profile-header__avatar-image {
    border-radius: var(--radius-md);
}

/* Media profile header - square avatar with border radius */
.profile-header--media .profile-header__avatar {
    border-radius: var(--radius-md);
}

.profile-header--media .profile-header__avatar-image {
    border-radius: var(--radius-md);
    object-fit: contain;
    padding: 4px;
}

.profile-header__info {
    flex: 1;
    min-width: 0;
}

.profile-header__name-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.profile-header__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-strong-color);
}

.profile-header__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 3px;
}

.profile-header__email {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
    color: var(--text-muted-color);
}

.profile-header__company {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
}

.profile-header__slug {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.15s ease;
}

.profile-header__slug:hover {
    color: var(--primary-color-hover);
    text-decoration: underline;
}

.profile-header__slug svg {
    opacity: 0.7;
}

.profile-header__meta {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.profile-header__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-soft-color);
}

.profile-header__meta-item svg {
    opacity: 0.6;
}

.profile-header__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
    flex-shrink: 0;
    align-self: flex-start;
}

.profile-header__toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-header__toggle-label {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-soft-color);
}

.profile-header__delete {
    margin: 0;
}

/* Profile Form */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Profile Sections */
.profile-section {
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow:
        4px 4px 0 0 #fff,
        4px 4px 0 2px var(--nb-black);
}

.profile-section__header {
    padding: 1rem 1.25rem;
    background: var(--nb-black);
    border-bottom: 2px solid var(--nb-black);
}

.profile-section__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.profile-section__title svg {
    color: #fff;
}

.profile-section__content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Form Rows */
.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .profile-section__content {
        padding: 1rem;
    }
}

/* Toggle Label */
.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.toggle-label__text {
    font-weight: 600;
    color: var(--text-strong-color);
}

/* Checkbox Group */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--surface-secondary-color);
    border: 2px solid var(--border-subtle-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.checkbox-item:hover {
    border-color: var(--nb-black);
}

.checkbox-item input {
    display: none;
}

.checkbox-item__box {
    width: 18px;
    height: 18px;
    border: 2px solid var(--nb-black);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: all 0.15s ease;
}

.checkbox-item__box::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 2px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.15s ease;
}

.checkbox-item input:checked + .checkbox-item__box::after {
    opacity: 1;
    transform: scale(1);
}

.checkbox-item input:checked ~ .checkbox-item__label {
    font-weight: 600;
}

/* Job Cards - Enhanced checkbox cards with icons */
.job-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.job-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    min-height: 120px;
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.job-card > * {
    flex-shrink: 0;
}

.job-card:hover {
    background: var(--surface-secondary-color);
    transform: translate(-3px, -3px);
    box-shadow: 3px 3px 0 var(--nb-black);
}

.job-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.job-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-secondary-color);
    border-radius: var(--radius-md);
    color: var(--text-muted-color);
    transition: all 0.15s ease;
    margin: 0 auto;
}

.job-card__icon svg {
    width: 24px;
    height: 24px;
}

.job-card__label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    transition: all 0.15s ease;
    margin: 0 auto;
}

.job-card__check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-subtle-color);
    border-radius: 50%;
    background: var(--surface-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.job-card__check svg {
    width: 12px;
    height: 12px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.15s ease;
    color: #fff;
}

/* Selected state */
.job-card input:checked ~ .job-card__icon {
    background: var(--primary-color);
    color: #fff;
}

.job-card input:checked ~ .job-card__label {
    font-weight: 600;
    color: var(--text-strong-color);
}

.job-card input:checked ~ .job-card__check {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.job-card input:checked ~ .job-card__check svg {
    opacity: 1;
    transform: scale(1);
}

/* Focus state */
.job-card:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

.checkbox-item__label {
    font-size: 0.875rem;
    color: var(--text-color);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted-color);
    font-size: 0.95rem;
}

/* Passkey Grid */
.passkey-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.passkey-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--surface-secondary-color);
    border: 2px solid var(--border-subtle-color);
    border-radius: var(--radius-sm);
}

.passkey-card__icon {
    width: 40px;
    height: 40px;
    background: var(--nb-green-light);
    border: 2px solid var(--nb-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.passkey-card__icon svg {
    color: var(--nb-green);
}

.passkey-card__info {
    flex: 1;
    min-width: 0;
}

.passkey-card__name {
    display: block;
    font-weight: 600;
    color: var(--text-strong-color);
    font-size: 0.9rem;
}

.passkey-card__meta {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted-color);
    margin-top: 0.15rem;
}

.passkey-card__revoke {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.passkey-card__revoke:hover {
    background: var(--danger-color-light);
    color: var(--danger-color);
}

/* Security Summary */
.security-summary {
    margin-bottom: 1.5rem;
}

.security-summary__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1rem 0;
}

.security-summary__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.security-summary__item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: var(--nb-gray-light, #f0f0f0);
    border: 2px solid var(--border-subtle-color);
    border-radius: var(--radius-sm);
}

.security-summary__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.security-summary__value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-strong-color);
}

/* Passkeys Section */
.passkeys-section__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1rem 0;
}

.passkeys-section--with-summary {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle-color);
}

/* Activity Log Section */
.activity-log__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.activity-log__email-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--text-muted-color);
    color: #fff;
    margin-left: 0.35rem;
}

.activity-log__email-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--nb-gray-light, #f0f0f0);
    border: 1px solid var(--border-subtle-color);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-muted-color);
}

.activity-log__email-summary a {
    color: var(--link-color);
    text-decoration: none;
}

.activity-log__email-summary a:hover {
    text-decoration: underline;
}

.activity-log__action {
    font-family: monospace;
    font-size: 0.8rem;
}

.activity-log__details {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--text-muted-color);
    display: block;
}

.activity-log__ip {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.activity-log__actor--self {
    font-size: 0.75rem;
    color: var(--text-muted-color);
    font-style: italic;
}

/* Profile Actions */
.profile-actions {
    display: flex;
    gap: 1rem;
    padding-top: 0.5rem;
}

.profile-actions--end {
    justify-content: flex-end;
}

.button--large {
    height: 48px;
    padding: 0 1.5rem;
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 600px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-header__name-row {
        justify-content: center;
    }

    .profile-header__meta {
        justify-content: center;
    }

    .profile-header__actions {
        margin-left: 0;
        margin-top: 1rem;
        width: 100%;
        justify-content: center;
    }

    .profile-actions {
        flex-direction: column;
    }

    .profile-actions .button {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Google Account
   ========================================================================== */

.google-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border: var(--border-brutal);
    background-color: var(--surface-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-brutal-xs);
    flex-wrap: wrap;
}

.google-account--connected {
    border: 2px solid #444;
    box-shadow: 3px 3px 0 #aaa;
}

.google-account__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #e8f4fd;
    border-radius: 50%;
    color: #1a73e8;
    flex-shrink: 0;
}

.google-account__details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.google-account__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted-color);
    font-weight: 700;
}

.google-account__email {
    font-weight: 700;
}

.google-account__name {
    font-size: 0.9rem;
    color: var(--text-muted-color);
}

.google-account__actions {
    margin: 0;
    flex-shrink: 0;
}

.google-account__hint {
    margin: 0 0 0.5rem;
    color: var(--text-muted-color);
}

.google-account--disconnected {
    flex-direction: column;
    align-items: flex-start;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    border: 2px dashed #c5ddf5;
    box-shadow: none;
}

.button--google-disconnect {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #1557b0;
    color: #ffffff;
    border-color: #0d4690;
}

.button--google-disconnect:hover {
    background-color: #0d4690;
    color: #ffffff;
}

/* ==========================================================================
   Media Edit / Tabs Card
   ========================================================================== */

.card--tabs .media-edit__summary {
    padding: 0 var(--card-padding) 1rem;
}

.media-edit__identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.media-edit__favicon {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border: var(--border-brutal-thin);
    background-color: var(--surface-color);
}

.media-edit__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-color);
}

/* ==========================================================================
   Keywords & Topics
   ========================================================================== */

.keyword-input {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.keyword-input input {
    flex: 1 1 220px;
    min-width: 200px;
}

.keyword-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.keyword-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background-color: var(--nb-blue-light);
    border: 2px solid var(--nb-blue);
    color: var(--nb-blue);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.keyword-tag--static {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.keyword-tag--highlight {
    background-color: var(--primary-color-light);
    border-color: var(--primary-color);
    color: var(--text-strong-color);
}

.keyword-tag__remove {
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

.keyword-tag__remove:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

.keyword-tag__count {
    font-size: 0.7rem;
    font-weight: 700;
}

.topic-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.topic-link {
    color: inherit;
}

.topic-link:hover,
.topic-link:focus {
    color: var(--primary-color);
}

/* ==========================================================================
   Feeds
   ========================================================================== */

.feed-suggestions {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: 1rem;
}

.feed-suggestions__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem;
    border: var(--border-brutal);
    background-color: var(--surface-muted-color);
}

.feed-suggestions__item > div {
    max-width: 100%;
    word-break: break-word;
}

.feed-content-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0;
}

.feed-content-filter label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.feed-content-filter select {
    padding: 0.5rem 0.75rem;
    border: var(--border-brutal-thin);
}

.feed-content-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: 1rem;
}

.feed-content-item {
    background-color: var(--surface-muted-color);
    border: var(--border-brutal);
    padding: 1rem;
}

.feed-content-item h4 {
    margin: 0 0 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
}

.feed-content-item__meta {
    font-size: 0.85rem;
    color: var(--text-muted-color);
    margin-bottom: 0.5rem;
}

.feed-content-item__media {
    margin: 0 0 0.75rem;
}

.feed-content-item__media img {
    display: block;
    max-width: 100%;
    height: auto;
    border: var(--border-brutal-thin);
    background-color: var(--surface-color);
}

.feed-content-item__summary {
    margin: 0;
}

.feed-content-item__preview {
    margin: 0;
    line-height: 1.5;
}

.feed-content-item__details {
    margin-top: 0.5rem;
}

.feed-content-item__toggle {
    list-style: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0;
    text-transform: uppercase;
}

.feed-content-item__toggle::-webkit-details-marker {
    display: none;
}

.feed-content-item__toggle::after {
    content: '\25BE';
    font-size: 0.7rem;
    transition: transform var(--transition-fast);
}

.feed-content-item__details[open] .feed-content-item__toggle::after {
    transform: rotate(180deg);
}

.feed-content-item__toggle-label--less {
    display: none;
}

.feed-content-item__details[open] .feed-content-item__toggle-label--more {
    display: none;
}

.feed-content-item__details[open] .feed-content-item__toggle-label--less {
    display: inline;
}

.feed-content-item__full-text {
    margin-top: 0.5rem;
    line-height: 1.6;
    color: var(--text-subtle-color);
}

/* ==========================================================================
   Social Accounts
   ========================================================================== */

.social-accounts__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.social-accounts__rescan {
    margin: 0;
}

.social-accounts__meta {
    margin: 0.5rem 0 0;
    color: var(--text-muted-color);
    font-size: 0.85rem;
}

.social-accounts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.social-accounts__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.social-accounts__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    border: var(--border-brutal);
    background-color: var(--surface-muted-color);
}

.social-accounts__field {
    flex: 1 1 220px;
    min-width: 180px;
}

.social-accounts__select,
.social-accounts__input {
    width: 100%;
    padding: 0.5rem;
    border: var(--border-brutal-thin);
}

.social-accounts__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.social-accounts__link {
    color: var(--primary-color);
    font-weight: 700;
}

.social-accounts__link:hover {
    text-decoration: underline;
}

.social-accounts__empty {
    margin: 0;
    color: var(--text-muted-color);
    font-size: 0.9rem;
}

.social-accounts__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   Search Input
   ========================================================================== */

.search-input {
    height: 42px;
    padding: 0 0.75rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-md);
    min-width: 300px;
    font-family: inherit;
}

.search-input:focus {
    outline: none;
    background: var(--surface-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

/* ==========================================================================
   Flag Select (Country Selector)
   ========================================================================== */

.flag-select {
    background-color: var(--surface-color);
}

.flag-select option {
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 20px 14px;
    padding-left: 2.5rem;
}

/* ==========================================================================
   Analytics Styles
   ========================================================================== */

.analytics-overview {
    display: grid;
    gap: 1.5rem;
}

.analytics-overview__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.analytics-overview__heading {
    display: grid;
    gap: 0.35rem;
}

.analytics-overview__eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted-color);
    font-weight: 700;
}

.analytics-overview__title {
    margin: 0;
    font-size: 1.5rem;
    text-transform: uppercase;
}

.analytics-overview__subtitle {
    margin: 0;
    color: var(--text-muted-color);
}

.analytics-overview__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.analytics-export-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.analytics-export-buttons .button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.analytics-export-buttons svg {
    flex-shrink: 0;
}

.analytics-range {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.analytics-range__summary {
    margin: 0;
    font-weight: 700;
}

.analytics-filters {
    display: grid;
    gap: 1.25rem;
}

.analytics-filters__group {
    margin: 0;
    padding: 1rem;
    border: var(--border-brutal);
    background-color: var(--surface-color);
    display: grid;
    gap: 0.75rem;
}

.analytics-filters__legend {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted-color);
}

.analytics-filters__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.analytics-preset-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-color);
    background-color: var(--surface-color);
    border: var(--border-brutal-thin);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.analytics-preset-btn:hover {
    background-color: var(--primary-color-light);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal-xs);
}

.analytics-preset-btn:active {
    transform: translate(0, 0);
    box-shadow: none;
}

.analytics-preset-btn--active {
    background-color: var(--primary-color);
}

.analytics-filters__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.analytics-filters__grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.analytics-filters__grid--stack {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.analytics-filters__field {
    display: grid;
    gap: 0.35rem;
    font-size: 0.9rem;
}

.analytics-filters__label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--text-muted-color);
}

.analytics-filters__field input {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.35rem 0.75rem;
    border: var(--border-brutal-thin);
    background-color: var(--surface-color);
    color: var(--text-color);
}

.analytics-filters__field input:focus {
    outline: none;
    box-shadow: var(--focus-ring);
    background-color: var(--primary-color-light);
}

.analytics-filters__hint {
    font-size: 0.75rem;
    color: var(--text-muted-color);
}

.analytics-filters__advanced {
    border: var(--border-brutal);
    padding: 0.75rem 1rem;
    background-color: var(--surface-color);
}

.analytics-filters__advanced > summary {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted-color);
    list-style: none;
}

.analytics-filters__advanced > summary::-webkit-details-marker {
    display: none;
}

.analytics-filters__advanced > summary::after {
    content: '\25BE';
    align-self: flex-end;
    font-size: 0.85rem;
    transition: transform var(--transition-fast);
    color: var(--text-muted-color);
}

.analytics-filters__advanced[open] > summary::after {
    transform: rotate(-180deg);
}

.analytics-filters__advanced[open] > summary {
    margin-bottom: 0.75rem;
}

.analytics-filters__advanced-hint {
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: none;
    color: var(--text-muted-color);
}

.analytics-filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.analytics-cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.analytics-card {
    padding: 1rem;
    border: var(--border-brutal);
    background-color: var(--surface-color);
    display: grid;
    gap: 0.35rem;
}

.analytics-card__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted-color);
    font-weight: 700;
}

.analytics-card__value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-strong-color);
}

.analytics-card__delta {
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

.analytics-card__delta--up {
    color: var(--success-color);
}

.analytics-card__delta--down {
    color: var(--danger-color);
}

.analytics-card__delta--neutral {
    color: var(--text-muted-color);
}

.analytics-empty {
    padding: 1rem;
    border: 2px dashed var(--border-color);
    background-color: var(--surface-muted-color);
    color: var(--text-muted-color);
}

.analytics-panels {
    display: grid;
    gap: 1.5rem;
}

.analytics-panel {
    border: var(--border-brutal);
    background-color: var(--surface-color);
    padding: 1.25rem;
    display: grid;
    gap: 1rem;
}

.analytics-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.analytics-panel__header-content {
    display: grid;
    gap: 0.35rem;
}

.analytics-panel__header h4 {
    margin: 0;
    font-size: 1rem;
    text-transform: uppercase;
}

.analytics-panel__header span {
    color: var(--text-muted-color);
    font-size: 0.85rem;
}

.analytics-chart-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-color);
    background-color: var(--surface-color);
    border: var(--border-brutal-thin);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.analytics-chart-reset:hover {
    background-color: var(--primary-color-light);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal-xs);
}

.analytics-chart-reset svg {
    flex-shrink: 0;
}

.analytics-chart-help {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--surface-muted-color);
    border: var(--border-brutal-thin);
    font-size: 0.85rem;
    color: var(--text-muted-color);
    margin-bottom: 0.5rem;
}

.analytics-chart-help svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.analytics-panel__empty {
    margin: 0;
    color: var(--text-muted-color);
}

.analytics-panel__chart {
    position: relative;
    height: 320px;
}

.analytics-panel__chart canvas {
    width: 100%;
    height: 100%;
}

@media (max-width: 640px) {
    .analytics-panel__chart {
        height: 260px;
    }
}

.analytics-panels__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.analytics-panel--wide {
    grid-column: span 2;
}

@media (max-width: 900px) {
    .analytics-panel--wide {
        grid-column: span 1;
    }
}

.analytics-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.analytics-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
    padding: 0.5rem 0;
    border-bottom: 2px solid var(--border-subtle-color);
}

.analytics-list__item:last-child {
    border-bottom: none;
}

.analytics-list__item strong {
    font-weight: 700;
    color: var(--text-strong-color);
}

.analytics-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    border: 2px dashed var(--border-color);
    background-color: var(--surface-muted-color);
    font-size: 0.85rem;
}

.analytics-active-filters ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.analytics-active-filters li {
    background-color: var(--surface-color);
    border: 2px solid var(--border-color);
    padding: 0.25rem 0.75rem;
    font-weight: 700;
}

.analytics-table__primary a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   Emulate Modal (content styles – shell uses generic .modal)
   ========================================================================== */

.emulate-modal .emulate-modal__body {
    padding: 1.5rem;
}

.emulate-modal__search {
    margin-bottom: 1rem;
}

.emulate-modal__input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: var(--border-brutal);
    border-radius: var(--radius-sm);
    corner-shape: squircle;
    font-size: 1rem;
    font-family: inherit;
}

.emulate-modal__input:focus {
    outline: none;
    box-shadow: var(--focus-ring);
    background-color: var(--primary-color-light);
}

.emulate-modal__results {
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
}

.emulate-modal__hint {
    margin: 0;
    color: var(--text-muted-color);
    font-size: 0.9rem;
}

.emulate-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.emulate-modal__user-button {
    display: block;
    width: 100%;
    padding: 0.75rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.emulate-modal__user-button:hover {
    background-color: var(--primary-color-light);
    border-color: var(--border-color);
}

.emulate-modal__user-name {
    font-weight: 700;
}

.emulate-modal__user-email {
    font-size: 0.85rem;
    color: var(--text-muted-color);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem var(--layout-gutter);
    color: var(--text-muted-color);
    border-top: 1px solid var(--border-color);
    margin-top: auto;
    font-size: 0.75rem;
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: 2px;
}

.footer__logo-icon,
.footer__logo-text {
    height: 14px;
    width: auto;
}

.footer__copy {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ==========================================================================
   Avatar Editor Styles
   ========================================================================== */

.avatar-editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.avatar-editor__preview {
    width: 120px;
    height: 120px;
    border: var(--border-brutal);
    background: var(--primary-color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

.avatar-editor__placeholder {
    font-size: 2rem;
    font-weight: 800;
    color: var(--nb-black);
}

/* Avatar Canvas Editor */
.avatar-editor__canvas {
    display: block;
    max-width: 100%;
    border: var(--border-brutal);
    background: var(--surface-muted-color);
    cursor: grab;
    touch-action: none;
}

.avatar-editor__canvas:active {
    cursor: grabbing;
}

.avatar-editor__controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.avatar-editor__control {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.avatar-editor__control span {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-color);
}

.avatar-editor__control input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--surface-muted-color);
    border: 2px solid var(--nb-black);
    appearance: none;
    cursor: pointer;
}

.avatar-editor__control input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid var(--nb-black);
    cursor: grab;
    transition: transform 0.15s ease;
}

.avatar-editor__control input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.avatar-editor__control input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid var(--nb-black);
    cursor: grab;
}

.avatar-editor__actions {
    display: flex;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

/* Avatar Layout - Responsive grid for avatar section */
.avatar-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 768px) {
    .avatar-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .avatar-layout__preview {
        display: flex;
        justify-content: center;
    }
}

.avatar-layout__controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Avatar Preview - Circular preview with proper sizing */
.avatar-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.avatar-preview__circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 3px solid var(--nb-black);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-brutal-sm);
    position: relative;
}

.avatar-preview__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-preview__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--nb-black);
}

.avatar-preview__placeholder-icon {
    width: 50%;
    height: 50%;
    fill: currentColor;
}

/* Avatar Dropzone - Dashed border, clear drop affordance, hover state */
.avatar-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1.5rem;
    border: 3px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-muted-color);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 180px;
}

.avatar-dropzone:hover,
.avatar-dropzone:focus-within {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-brutal-xs);
}

.avatar-dropzone--dragging {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
    border-style: solid;
}

.avatar-dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.avatar-dropzone__text {
    margin: 0;
    font-weight: 700;
    color: var(--text-strong-color);
    font-size: 1rem;
}

.avatar-dropzone__hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.avatar-dropzone__button {
    margin-top: 0.5rem;
}

/* Avatar Message - Status feedback */
.avatar-message {
    min-height: 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted-color);
    transition: color var(--transition-fast);
}

.avatar-message:empty {
    display: none;
}

.avatar-message--success {
    color: var(--success-color);
}

.avatar-message--error {
    color: var(--danger-color);
}

.avatar-message--loading {
    color: var(--primary-color);
}

/* ==========================================================================
   Company Logo Editor
   ========================================================================== */

.company-logo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.company-logo__description {
    margin: 0 0 0.5rem;
    color: var(--text-muted-color);
    font-size: 0.875rem;
}

.company-logo__row {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
}

.company-logo__preview {
    width: 120px;
    height: 120px;
    border: var(--border-brutal);
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    align-self: center;
}

.company-logo__preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.company-logo__placeholder {
    font-size: 2rem;
    font-weight: 800;
    color: var(--nb-white);
}

/* Dropzone */
.company-logo__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border: 2px dashed var(--border-subtle-color);
    border-radius: var(--radius-md);
    background: #f5f5f5;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex: 1;
}

.company-logo__dropzone:hover,
.company-logo__dropzone:focus-within {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
}

.company-logo__dropzone--dragover {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
    border-style: solid;
}

.company-logo__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.company-logo__dropzone-text {
    margin: 0;
    font-weight: 700;
    color: var(--text-strong-color);
}

.company-logo__dropzone-text--mobile {
    display: none;
}

@media (max-width: 640px) {
    .company-logo__row {
        flex-direction: column;
        align-items: center;
    }

    .company-logo__dropzone-text--desktop {
        display: none;
    }

    .company-logo__dropzone-text--mobile {
        display: block;
    }
}

.company-logo__dropzone-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

/* Message */
.company-logo__message {
    min-height: 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}

.company-logo__message:empty {
    display: none;
}

.company-logo__message--success {
    color: var(--success-color);
}

.company-logo__message--error {
    color: var(--danger-color);
}

.company-logo__message--info {
    color: var(--primary-color);
}

/* Modal */
.company-logo-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--animation-smooth), visibility 0.25s;
}

.company-logo-modal[data-visible="true"] {
    opacity: 1;
    visibility: visible;
}

.company-logo-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.company-logo-modal__dialog {
    position: relative;
    width: min(600px, 100%);
    background-color: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-lg);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s var(--animation-bounce);
}

.company-logo-modal[data-visible="true"] .company-logo-modal__dialog {
    transform: translateY(0) scale(1);
}

.company-logo-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: var(--border-brutal-thin);
    background: var(--nb-black);
}

.company-logo-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--nb-white);
}

.company-logo-modal__close {
    appearance: none;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.company-logo-modal__close:hover {
    background: var(--danger-color-light);
}

.company-logo-modal__body {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
}

.company-logo-modal__canvas {
    display: block;
    max-width: 100%;
    width: 400px;
    height: 400px;
    border: var(--border-brutal);
    border-radius: var(--radius-sm);
    cursor: grab;
    touch-action: none;
}

.company-logo-modal__canvas:active {
    cursor: grabbing;
}

.company-logo-modal__controls {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.company-logo-modal__control {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.company-logo-modal__control span {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-color);
}

.company-logo-modal__control input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--surface-muted-color);
    border: 2px solid var(--nb-black);
    appearance: none;
    cursor: pointer;
}

.company-logo-modal__control input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid var(--nb-black);
    cursor: grab;
}

.company-logo-modal__control input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid var(--nb-black);
    cursor: grab;
}

.company-logo-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.25rem 2rem;
    border-top: var(--border-brutal-thin);
}

/* ==========================================================================
   Space Icon Editor (matches company-logo style)
   ========================================================================== */

.space-icon-editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.space-icon-editor__row {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
}

.space-icon-editor__preview {
    aspect-ratio: 1;
    max-height: 160px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-secondary-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.space-icon-editor__preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.space-icon-editor__placeholder {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-muted-color);
}

/* Dropzone */
.space-icon-editor__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-subtle-color);
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.space-icon-editor__dropzone:hover,
.space-icon-editor__dropzone:focus-within {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
}

.space-icon-editor__dropzone--dragover {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
}

.space-icon-editor__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.space-icon-editor__dropzone-text {
    margin: 0;
    font-weight: 700;
}

.space-icon-editor__dropzone-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

/* Message */
.space-icon-editor__message {
    min-height: 1.5rem;
    font-size: 0.875rem;
    margin: 0;
}

.space-icon-editor__message:empty {
    display: none;
}

.space-icon-editor__message--success {
    color: var(--success-color);
}

.space-icon-editor__message--error {
    color: var(--danger-color);
}

.space-icon-editor__message--info {
    color: var(--primary-color);
}

/* Desktop/mobile dropzone text toggle */
.space-icon-editor__dropzone-text--mobile {
    display: none;
}

@media (max-width: 640px) {
    .space-icon-editor__row {
        flex-direction: column;
        align-items: center;
    }

    .space-icon-editor__dropzone-text--desktop {
        display: none;
    }

    .space-icon-editor__dropzone-text--mobile {
        display: block;
    }
}

/* Modal */
.space-icon-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.space-icon-modal[data-visible="true"] {
    opacity: 1;
    visibility: visible;
}

.space-icon-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.space-icon-modal__dialog {
    position: relative;
    width: min(600px, 100%);
    margin: 1rem;
    background: var(--card-background);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-lg);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.2s ease;
}

.space-icon-modal[data-visible="true"] .space-icon-modal__dialog {
    transform: translateY(0) scale(1);
}

.space-icon-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: var(--border-brutal-thin);
    background: var(--surface-secondary-color);
}

.space-icon-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.space-icon-modal__close {
    appearance: none;
    border: var(--border-brutal-thin);
    background: var(--card-background);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}

.space-icon-modal__close:hover {
    background: var(--danger-color-light);
}

.space-icon-modal__body {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.space-icon-modal__canvas {
    display: block;
    max-width: 100%;
    height: auto;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    background: var(--surface-secondary-color);
    cursor: grab;
    touch-action: none;
}

.space-icon-modal__canvas:active {
    cursor: grabbing;
}

.space-icon-modal__controls {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.space-icon-modal__control {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.space-icon-modal__control span {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted-color);
}

.space-icon-modal__control input[type="range"] {
    width: 100%;
    height: 8px;
    appearance: none;
    background: var(--surface-secondary-color);
    border: var(--border-brutal-thin);
    border-radius: 4px;
    cursor: pointer;
}

.space-icon-modal__control input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--nb-red);
    border: var(--border-brutal-thin);
    border-radius: 50%;
    cursor: grab;
}

.space-icon-modal__control input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--nb-red);
    border: var(--border-brutal-thin);
    border-radius: 50%;
    cursor: grab;
}

.space-icon-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.25rem 2rem;
    border-top: var(--border-brutal-thin);
}

/* ==========================================================================
   Services & Limits Grid
   ========================================================================== */

.services-grid {
    display: flex;
    flex-direction: column;
}

.services-grid__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.services-grid__row--last {
    border-bottom: none;
    padding-bottom: 0;
}

.services-grid__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--surface-muted-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted-color);
    flex-shrink: 0;
}

.services-grid__content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.services-grid__content--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.services-grid__item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.services-grid__item--inline {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.services-grid__label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
}

.services-grid__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.services-grid__toggle .services-grid__label {
    cursor: pointer;
}

.services-grid__input {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--surface-color);
    width: 100%;
    max-width: 120px;
}

.services-grid__input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.services-grid__input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.services-grid__input-suffix {
    font-size: 0.85rem;
    color: var(--text-muted-color);
    font-weight: 500;
}

@media (max-width: 640px) {
    .services-grid__content--split {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ==========================================================================
   Company Users Management
   ========================================================================== */

.company-users {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.company-users__search {
    position: relative;
}

.company-users__search-wrapper {
    position: relative;
}

.company-users__search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--surface-color);
}

.company-users__search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.company-users__search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin-top: 4px;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-brutal-sm);
    max-height: 300px;
    overflow-y: auto;
}

.company-users__search-empty {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted-color);
    font-size: 0.875rem;
}

.company-users__search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.company-users__search-item:hover {
    background: var(--primary-color-light);
}

.company-users__search-add {
    margin-left: auto;
    color: var(--primary-color);
    flex-shrink: 0;
}

.company-users__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.company-users__empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted-color);
    font-size: 0.875rem;
    margin: 0;
}

.company-users__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f0f0f0;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.company-users__item:hover {
    background: var(--danger-color-light);
}

.company-users__item:hover .company-users__item-name,
.company-users__item:hover .company-users__item-email,
.company-users__item:hover .company-users__job-icon {
    color: var(--danger-color);
}

.company-users__item-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.company-users__item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.company-users__item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company-users__item-avatar span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--nb-white);
}

.company-users__item-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.company-users__item-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-strong-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-users__item-email {
    font-size: 0.8rem;
    color: var(--text-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-users__item-jobs {
    display: inline-flex;
    gap: 0.25rem;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.company-users__job-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--text-muted-color);
}

.company-users__job-icon svg {
    width: 14px;
    height: 14px;
}

.company-users__item-remove {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-muted-color);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.company-users__item-remove:hover {
    color: var(--danger-color);
    background: var(--danger-color-light);
}

.company-users__remove-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-users__remove-icon--confirm {
    display: none;
}

.company-users__item-remove--confirm {
    background: var(--danger-color);
    color: white;
}

.company-users__item-remove--confirm:hover {
    background: var(--danger-color);
    color: white;
}

.company-users__item-remove--confirm .company-users__remove-icon--x {
    display: none;
}

.company-users__item-remove--confirm .company-users__remove-icon--confirm {
    display: flex;
}

/* ==========================================================================
   User Companies Section (in user edit page)
   ========================================================================== */

.user-companies {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-companies__search {
    position: relative;
}

.user-companies__search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--surface-color);
}

.user-companies__search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.user-companies__search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 0.25rem;
}

.user-companies__search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.user-companies__search-item:hover {
    background: var(--surface-muted-color);
}

.user-companies__search-add {
    margin-left: auto;
    color: var(--text-muted-color);
    flex-shrink: 0;
}

.user-companies__search-item:hover .user-companies__search-add {
    color: var(--primary-color);
}

.user-companies__search-empty {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted-color);
    font-size: 0.9rem;
}

.user-companies__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.user-companies__empty {
    color: var(--text-muted-color);
    font-size: 0.9rem;
    padding: 0.5rem 0;
    margin: 0;
}

.user-companies__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f0f0f0;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.user-companies__item:hover {
    background: var(--danger-color-light);
}

.user-companies__item:hover .user-companies__item-name {
    color: var(--danger-color);
}

.user-companies__item-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.user-companies__item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.user-companies__item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-companies__item-avatar span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--nb-white);
}

.user-companies__item-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

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

.user-companies__item-remove {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-muted-color);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.user-companies__item-remove:hover {
    color: var(--danger-color);
    background: var(--danger-color-light);
}

.user-companies__remove-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-companies__remove-icon--confirm {
    display: none;
}

.user-companies__item-remove--confirm {
    background: var(--danger-color);
    color: white;
}

.user-companies__item-remove--confirm:hover {
    background: var(--danger-color);
    color: white;
}

.user-companies__item-remove--confirm .user-companies__remove-icon--x {
    display: none;
}

.user-companies__item-remove--confirm .user-companies__remove-icon--confirm {
    display: flex;
}

/* ==========================================================================
   Contact Section Styles
   ========================================================================== */

/* Contact Tabs - Tabbed Contact Editor */
.contact-tabs {
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-md);
    background: var(--surface-color);
    overflow: hidden;
}

.contact-tabs__nav {
    display: flex;
    border-bottom: 2px solid var(--nb-black);
    background: var(--surface-secondary-color);
    overflow-x: auto;
    overflow-y: hidden;
}

.contact-tabs__tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    position: relative;
}

.contact-tabs__tab:hover {
    color: var(--text-color);
    background: var(--surface-color);
}

.contact-tabs__tab--active {
    color: var(--text-strong-color);
    background: var(--surface-color);
}

.contact-tabs__tab--active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
}

.contact-tabs__tab-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.contact-tabs__tab-icon svg {
    width: 18px;
    height: 18px;
}

.contact-tabs__tab-label {
    display: none;
}

@media (min-width: 640px) {
    .contact-tabs__tab-label {
        display: inline;
    }
}

.contact-tabs__tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--primary-color);
    color: white;
    border-radius: 10px;
}

.contact-tabs__panel {
    display: none;
    padding: 1rem;
}

.contact-tabs__panel--active {
    display: block;
}

/* Contact Panel */
.contact-panel__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.contact-panel__empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted-color);
    font-size: 0.875rem;
    margin: 0 0 1rem;
}

.contact-panel__add {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    width: 100%;
    justify-content: center;
}

.contact-panel__add:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-color-light);
}

.contact-panel__add-icon {
    width: 18px;
    height: 18px;
}

.contact-panel__add-icon svg {
    width: 18px;
    height: 18px;
}

/* Contact Card */
.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #f5f5f5;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast);
}

[data-theme="dark"] .contact-card {
    background: #2a2a2a;
}

.contact-card:hover {
    border-color: var(--border-strong-color);
}

.contact-card--address {
    flex-direction: column;
    gap: 1rem;
}

.contact-card__main {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.contact-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.contact-card__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--primary-color);
    margin-top: 0.5rem;
}

.contact-card__icon svg {
    width: 20px;
    height: 20px;
}

.contact-card__header .contact-card__icon {
    margin-top: 0;
}

.contact-card__fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.contact-card__fields--phone,
.contact-card__fields--social {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .contact-card__fields--phone {
        grid-template-columns: minmax(120px, 180px) 1fr auto;
    }

    .contact-card__fields--social {
        grid-template-columns: minmax(100px, 150px) 1fr 1fr;
    }
}

.contact-card__input,
.contact-card__select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    font-size: 0.875rem;
    color: var(--text-color);
    transition: border-color var(--transition-fast);
}

.contact-card__select {
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    appearance: none;
    -webkit-appearance: none;
}

.contact-card__input:focus,
.contact-card__select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.contact-card__input--primary {
    font-weight: 600;
}

.contact-card__input--secondary {
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.contact-card__input--label {
    flex: 1;
    font-weight: 600;
}

.contact-card__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.contact-card__star {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: var(--text-muted-color);
    transition: color var(--transition-fast);
}

.contact-card__star input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.contact-card__star-icon {
    width: 18px;
    height: 18px;
}

.contact-card__star-icon svg {
    width: 18px;
    height: 18px;
}

.contact-card__star-icon--filled {
    display: none;
    color: var(--primary-color);
}

.contact-card__star input:checked ~ .contact-card__star-icon--empty {
    display: none;
}

.contact-card__star input:checked ~ .contact-card__star-icon--filled {
    display: block;
}

.contact-card__star:hover {
    color: var(--primary-color);
}

.contact-card__delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted-color);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.contact-card__delete svg {
    width: 16px;
    height: 16px;
}

.contact-card__delete:hover {
    color: var(--danger-color);
    background: var(--danger-color-light);
}

.contact-card__delete-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-card__delete-icon--confirm {
    display: none;
}

.contact-card__delete--confirm {
    background: var(--danger-color);
    color: white;
    border-radius: var(--radius-sm);
}

.contact-card__delete--confirm:hover {
    background: var(--danger-color);
    color: white;
}

.contact-card__delete--confirm .contact-card__delete-icon--trash {
    display: none;
}

.contact-card__delete--confirm .contact-card__delete-icon--confirm {
    display: flex;
}

/* Country Selector - Smart Searchable Dropdown */
.country-selector {
    position: relative;
    width: 100%;
}

.country-selector__trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    padding-right: 2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    font-size: 0.875rem;
    color: var(--text-color);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition-fast);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.country-selector__trigger:hover,
.country-selector__trigger:focus {
    border-color: var(--primary-color);
    outline: none;
}

.country-selector--open .country-selector__trigger {
    border-color: var(--nb-black);
    border-width: 2px;
}

.country-selector__flag {
    width: 20px;
    height: 15px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-subtle-color);
}

.country-selector__flag--placeholder {
    background: var(--border-color);
}

.country-selector__text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.country-selector__text--placeholder {
    color: var(--text-muted-color);
}

.country-selector__dropdown {
    display: none;
    position: fixed;
    z-index: 9999;
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    box-shadow: 4px 4px 0 var(--nb-black);
    max-height: 280px;
    overflow: hidden;
    flex-direction: column;
    min-width: 250px;
}

.country-selector--open .country-selector__dropdown {
    display: flex;
}

.country-selector--open .country-selector__trigger {
    border-color: var(--nb-black);
}

.country-selector__search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.country-selector__search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    background: var(--surface-secondary-color);
    color: var(--text-color);
}

.country-selector__search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.country-selector__list {
    overflow-y: auto;
    flex: 1;
    max-height: 220px;
}

.country-selector__option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.country-selector__option:hover {
    background: var(--surface-secondary-color);
}

.country-selector__option--selected {
    background: var(--primary-color-light);
}

.country-selector__option--hidden {
    display: none;
}

.country-selector__option-flag {
    width: 24px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-subtle-color);
}

.country-selector__option-text {
    flex: 1;
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.country-selector__option-code {
    font-size: 0.75rem;
    color: var(--text-muted-color);
    flex-shrink: 0;
}

.country-selector__empty {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted-color);
    font-size: 0.8125rem;
}

/* Smart Select - Simple Searchable Dropdown (no flags) */
.smart-select {
    position: relative;
    width: 100%;
}

.smart-select__trigger {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    padding-right: 2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    font-size: 0.875rem;
    color: var(--text-color);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition-fast);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.smart-select__trigger:hover,
.smart-select__trigger:focus {
    border-color: var(--primary-color);
    outline: none;
}

.smart-select--open .smart-select__trigger {
    border-color: var(--nb-black);
    border-width: 2px;
}

.smart-select__text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 1.25em;
    line-height: 1.25;
}

.smart-select__text--placeholder {
    color: var(--text-muted-color);
}

/* Smart Select with Icons (Social) */
.smart-select--with-icons .smart-select__trigger {
    gap: 0.5rem;
}

.smart-select__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-muted-color);
}

.smart-select__icon svg {
    width: 100%;
    height: 100%;
}

.smart-select__option-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-muted-color);
}

.smart-select__option-icon svg {
    width: 100%;
    height: 100%;
}

.smart-select--with-icons .smart-select__option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.smart-select__dropdown {
    display: none;
    position: fixed;
    z-index: 9999;
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    box-shadow: 4px 4px 0 var(--nb-black);
    max-height: 280px;
    overflow: hidden;
    flex-direction: column;
    min-width: 200px;
}

.smart-select--open .smart-select__dropdown {
    display: flex;
}

.smart-select__search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.smart-select__search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    background: var(--surface-secondary-color);
    color: var(--text-color);
}

.smart-select__search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.smart-select__list {
    overflow-y: auto;
    flex: 1;
    max-height: 220px;
}

.smart-select__option {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.smart-select__option:hover {
    background: var(--surface-secondary-color);
}

.smart-select__option--selected {
    background: var(--primary-color-light);
}

.smart-select__option--hidden {
    display: none;
}

.smart-select__option-text {
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smart-select__empty {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted-color);
    font-size: 0.8125rem;
}

/* Address Card Grid */
.contact-card__address-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
}

@media (min-width: 640px) {
    .contact-card__address-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.contact-card__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-card__field--full {
    grid-column: 1 / -1;
}

.contact-card__field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.contact-card__field input,
.contact-card__field select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    font-size: 0.875rem;
    color: var(--text-color);
    transition: border-color var(--transition-fast);
}

.contact-card__field input:focus,
.contact-card__field select:focus {
    outline: none;
    border-color: var(--primary-color);
}

@media (max-width: 640px) {
    .contact-tabs__tab {
        padding: 0.875rem 0.75rem;
    }

    .contact-card__actions {
        flex-direction: column;
    }
}


/* ==========================================================================
   Spaces / Release Lists / Other Page Specific
   ========================================================================== */

.space-icon {
    width: 48px;
    height: 48px;
    border: var(--border-brutal-thin);
    object-fit: contain;
    background: var(--surface-muted-color);
}

.release-cover {
    width: 60px;
    height: 60px;
    border: var(--border-brutal-thin);
    object-fit: cover;
    background: var(--surface-muted-color);
}

/* ==========================================================================
   Badge Status Variants
   ========================================================================== */

.badge--draft     { background: var(--surface-muted-color); color: var(--text-muted-color); border-color: var(--border-color); }
.badge--published { background: var(--success-color-light); color: var(--success-color); border-color: var(--success-color); }
.badge--scheduled { background: var(--warning-color-light); color: var(--warning-color); border-color: var(--warning-color); }
.badge--sent      { background: var(--nb-blue-light); color: var(--nb-blue); border-color: var(--nb-blue); }
.badge--ready     { background: var(--nb-purple-light); color: var(--nb-purple); border-color: var(--nb-purple); }
.badge--failed    { background: var(--danger-color-light); color: var(--danger-color); border-color: var(--danger-color); }
.badge--bounced   { background: var(--warning-color-light); color: var(--warning-color); border-color: var(--warning-color); }

/* ==========================================================================
   Standalone Form Select
   ========================================================================== */

.form-select {
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    border: 1px solid var(--nb-black);
    border-radius: var(--radius-sm);
    background-color: var(--surface-color);
    color: var(--text-color);
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.5;
    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='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 14px;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

/* ==========================================================================
   Release Cell (thumbnail + title)
   ========================================================================== */

.release-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.release-cell__thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--nb-black);
    background: var(--surface-muted-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.release-cell__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.release-cell__thumb-placeholder {
    color: var(--text-muted-color);
    opacity: 0.4;
}

.release-cell__name {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
    transition: color 0.15s ease;
}

.release-cell__space {
    margin: 0.125rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted-color);
}

a.release-cell:hover {
    text-decoration: none;
}

a.release-cell:hover .release-cell__name {
    color: var(--primary-color);
}

/* Section header inside a card (full-bleed dark bar) –
   extend 1px into the border so both blacks overlap and no
   white card-background peeks through at rounded corners. */
.card > .space-form__section-header {
    margin: calc(-1 * var(--card-padding) - 1px) calc(-1 * var(--card-padding) - 1px) 0;
    border-radius: calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) 0 0;
}

/* ==========================================================================
   Releases Table
   ========================================================================== */

.releases-table__slug {
    margin: 0.125rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.releases-table__cell--title   { min-width: 200px; }
.releases-table__cell--status  { white-space: nowrap; }
.releases-table__cell--updated { white-space: nowrap; font-size: 0.875rem; color: var(--text-muted-color); }
.releases-table__cell--actions { white-space: nowrap; }

.releases-table__empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-muted-color);
    font-style: italic;
}

/* ==========================================================================
   Row Removal Animation
   ========================================================================== */

.releases-table__row--pending-removal {
    pointer-events: none;
}

.releases-table__row--pending-removal > td {
    opacity: 0.5;
}

.releases-table__row--removing > td {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ==========================================================================
   Releases Responsive
   ========================================================================== */

@media (max-width: 640px) {
    .releases-table thead {
        display: none;
    }

    .releases-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title   title"
            "status  updated"
            "actions actions";
        gap: 0.375rem 0.5rem;
        align-items: center;
        padding: 0.75rem;
        border-bottom: 2px solid var(--border-color);
    }

    .releases-table tbody tr:last-child {
        border-bottom: none;
    }

    .releases-table tbody td {
        padding: 0;
        border: none;
        width: auto;
        white-space: normal;
    }

    .releases-table tbody td::before {
        display: none;
    }

    /* Title cell */
    .releases-table__cell--title {
        grid-area: title;
        min-width: 0;
    }

    .releases-table__cell--title .release-cell__thumb {
        width: 40px;
        height: 40px;
    }

    /* Status + date row */
    .releases-table__cell--status {
        grid-area: status;
        white-space: nowrap;
    }

    .releases-table__cell--updated {
        grid-area: updated;
        justify-self: end;
        font-size: 0.75rem;
        color: var(--text-muted-color);
    }

    /* Actions — original button sizes, icon-only delete */
    .releases-table__cell--actions {
        grid-area: actions;
        padding-top: 0.375rem !important;
    }

    .releases-table__cell--actions .table-actions {
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .releases-table__cell--actions .two-step-action.button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        padding: 0;
        flex-shrink: 0;
    }

    .releases-table__cell--actions .two-step-action__trigger {
        font-size: 0;
        gap: 0;
    }

    .releases-table__cell--actions .two-step-action__trigger .button__icon {
        width: 16px;
        height: 16px;
        margin: 0;
        flex-shrink: 0;
    }

    .releases-table__cell--actions .two-step-action__confirm .btn-confirm--no {
        display: none;
    }

    .releases-table__cell--actions .two-step-action__confirm .btn-confirm--yes {
        border: none;
        background: transparent;
        padding: 0;
        font-size: 0;
    }

    .releases-table__cell--actions .two-step-action__confirm .btn-confirm--yes::before {
        content: "✓";
        font-size: 1.1rem;
        color: #fff;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .sidebar,
    .mobile-menu-toggle,
    .app-topbar,
    .top-bar {
        display: none !important;
    }

    .app-content {
        margin-left: 0 !important;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }

    .button {
        box-shadow: none;
    }
}

/* ==========================================================================
   Media Library
   ========================================================================== */

.media-library {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.media-library__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: var(--border-brutal-thin);
}

.media-library__title-block {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.media-library__title-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--primary-color-contrast);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.media-library__title-icon svg {
    width: 28px;
    height: 28px;
}

.media-library__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.media-library__subtitle {
    margin: 0.25rem 0 0;
    color: var(--text-muted-color);
    font-size: 0.9rem;
}

.media-library__space-select {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.media-library__space-select label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-color);
}

.media-library__space-select select {
    padding: 0.5rem 1rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    font-weight: 600;
    background: var(--surface-color);
    min-width: 200px;
}

.media-library__space-select-control {
    min-width: 0;
}

.media-library__space-select--page {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: -0.5rem;
    min-width: 0;
}

/* Stats Section */
.media-library__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.media-library__stat {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
}

.media-library__stat-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color-light);
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}

.media-library__stat-icon svg {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
}

.media-library__stat-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.media-library__stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-color);
}

.media-library__stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-strong-color);
}

.media-library__stat-remaining {
    font-size: 0.75rem;
    color: var(--text-muted-color);
}

.media-library__usage-bar {
    height: 6px;
    background: var(--surface-muted-color);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-top: 0.5rem;
}

.media-library__usage-bar-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.media-library__stat-value--list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.8rem;
}

.media-library__stat-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: var(--surface-muted-color);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.5;
}

.media-library__stat-tag small {
    font-weight: 700;
    color: var(--text-muted-color);
    font-size: 0.7rem;
}

.media-library__stat-tag--public {
    background: #dcfce7;
    color: #166534;
}

.media-library__stat-tag--public small {
    color: #15803d;
}

.media-library__stat-tag--private {
    background: #fef3c7;
    color: #92400e;
}

.media-library__stat-tag--private small {
    color: #b45309;
}

.media-library__stat-tag--list {
    background: #dbeafe;
    color: #1e40af;
}

.media-library__stat-tag--list small {
    color: #2563eb;
}

/* Controls */
.media-library__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.media-library__search {
    flex: 1;
    min-width: 200px;
}

.media-library__search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.media-library__search-icon {
    position: absolute;
    left: 0.75rem;
    width: 16px;
    height: 16px;
    color: var(--text-muted-color);
    pointer-events: none;
}

.media-library__search-input {
    width: 100%;
    font-size: 0.9rem;
    padding-left: 2.25rem !important;
}

.media-library__filter {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.media-library__filter label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-color);
}

.media-library__filter select {
    padding: 0.5rem 0.75rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: var(--surface-color);
}

/* Custom select dropdown */
.fancy-select {
    position: relative;
}

.fancy-select__trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    font-size: 0.85rem;
    color: var(--text-color);
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    white-space: nowrap;
}

.fancy-select__trigger:hover {
    border-color: var(--primary-color);
}

.fancy-select--open .fancy-select__trigger {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

.fancy-select__trigger-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
}

.fancy-select__trigger-icon svg {
    width: 14px;
    height: 14px;
}

.fancy-select__label {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fancy-select__chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--text-muted-color);
    transition: transform 200ms ease;
}

.fancy-select__chevron svg {
    width: 100%;
    height: 100%;
}

.fancy-select--open .fancy-select__chevron {
    transform: rotate(180deg);
}

.fancy-select__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 50;
    padding: 0.25rem;
    max-height: 300px;
    overflow-y: auto;
}

.fancy-select__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.625rem;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text-color);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: background 100ms ease;
    text-align: left;
    white-space: nowrap;
}

.fancy-select__option:hover {
    background: var(--surface-muted-color);
}

.fancy-select__option--active {
    background: var(--primary-color-light);
    font-weight: 600;
}

.fancy-select__option-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
}

.fancy-select__option-icon svg {
    width: 14px;
    height: 14px;
}

/* Breadcrumb */
.media-library__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
}

.media-library__crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: none;
    border: 2px solid transparent;
    border-radius: var(--radius-xs);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.media-library__crumb:hover {
    background: var(--primary-color-light);
    border-color: var(--border-color);
}

.media-library__crumb[style*="--folder-color"]:hover {
    background: var(--folder-color);
    color: #fff;
    border-color: var(--folder-color);
}

.media-library__crumb--current {
    background: var(--primary-color);
    color: var(--primary-color-contrast);
    border-color: var(--border-color);
}

.media-library__crumb--current[style*="--folder-color"] {
    background: var(--folder-color);
    color: #fff;
    border-color: var(--folder-color);
}

.media-library__crumb-size {
    font-size: 0.75rem;
    opacity: 0.7;
}

.media-library__breadcrumb .media-library__crumb:not(:last-child)::after {
    content: '/';
    margin-left: 0.5rem;
    color: var(--text-muted-color);
}

/* Dropzone */
.media-library__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.75rem 1.5rem;
    background: var(--surface-color);
    border: 3px dashed var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.media-library__dropzone:hover,
.media-library__dropzone:focus {
    background: var(--primary-color-lighter);
    border-color: var(--primary-color);
}

.media-library__dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.media-library__dropzone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--primary-color);
}

.media-library__dropzone-icon svg {
    width: 100%;
    height: 100%;
}

.media-library__dropzone-copy p {
    margin: 0;
    font-weight: 600;
    font-size: 0.85rem;
}

.media-library__dropzone-hint {
    font-size: 0.75rem;
    color: var(--text-muted-color);
    margin-top: 0.125rem;
}

.media-library__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.media-library__upload-progress {
    width: 100%;
    max-width: 300px;
    height: 8px;
    appearance: none;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-full);
    background: var(--surface-muted-color);
}

.media-library__upload-progress::-webkit-progress-bar {
    background: var(--surface-muted-color);
    border-radius: var(--radius-full);
}

.media-library__upload-progress::-webkit-progress-value {
    background: var(--primary-color);
    border-radius: var(--radius-full);
}

/* Sidebar header */
.media-library__sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.media-library__sidebar-header .media-library__sidebar-title {
    margin: 0;
}

/* New folder icon button */
.media-library__new-folder-btn {
    position: relative;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    color: var(--text-muted-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.media-library__new-folder-btn svg {
    width: 16px;
    height: 16px;
}

.media-library__new-folder-btn:hover {
    background: var(--primary-color-light);
    border-color: var(--border-color);
    color: var(--primary-color);
}

/* New folder button tooltip */
.media-library__new-folder-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: var(--nb-black);
    color: var(--nb-white);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1000;
    box-shadow: var(--shadow-brutal-sm);
}

.media-library__new-folder-btn::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    border: 5px solid transparent;
    border-top-color: var(--nb-black);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1000;
}

.media-library__new-folder-btn:hover::after,
.media-library__new-folder-btn:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* New folder modal */
.media-library__new-folder-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.media-library__new-folder-body label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted-color);
}

.media-library__new-folder-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    transition: border-color var(--transition-fast);
}

.media-library__new-folder-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-lighter);
}

.media-library__new-folder-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: var(--border-brutal-thin);
}

/* Layout */
.media-library__layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .media-library__layout {
        grid-template-columns: 1fr;
    }
}

/* Sidebar / Tree */
.media-library__sidebar {
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    padding: 1rem;
}

.media-library__sidebar-title {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-color);
}

.media-library__tree {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.media-library__tree-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
}

.media-library__tree-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: none;
    border: 2px solid transparent;
    border-radius: var(--radius-xs);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.media-library__tree-button:hover {
    background: var(--primary-color-light);
    border-color: var(--border-color);
}

.media-library__tree-button[style*="--folder-color"]:hover {
    background: var(--folder-color);
    color: #fff;
    border-color: var(--folder-color);
}

.media-library__tree-button--active {
    background: var(--primary-color);
    color: var(--primary-color-contrast);
    border-color: var(--border-color);
}

.media-library__tree-button--active[style*="--folder-color"] {
    background: var(--folder-color);
    color: #fff;
    border-color: var(--folder-color);
}

.media-library__tree-size {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Drag-and-drop states */
.media-library--dragging .media-library__tree-button {
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.media-library__tree-button--drop-target {
    background: var(--primary-color-lighter);
    border-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.media-library__row--drop-target {
    background: var(--primary-color-lighter) !important;
    box-shadow: inset 0 2px 0 var(--primary-color), inset 0 -2px 0 var(--primary-color);
}

.media-library--dragging .media-library__drag-handle {
    color: var(--primary-color);
}

/* List / Table */
.media-library__list {
    min-width: 0;
}

.media-library__status {
    padding: 0.75rem 1rem;
    background: var(--primary-color-light);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.media-library__status:empty {
    display: none;
}

.media-library__search-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

/* Toolbar: controls + selection bar swap */
.media-library__toolbar {
    position: relative;
}

.media-library__selection {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 1rem;
    background: #1a1a2e;
    color: #fff;
    border-radius: var(--radius-sm);
    border: 2px solid #1a1a2e;
}

.media-library__selection-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.media-library__selection-badge {
    font-size: 0.85rem;
    font-weight: 600;
}

.media-library__selection-size {
    font-size: 0.8rem;
    opacity: 0.7;
}

.media-library__selection-size:empty {
    display: none;
}

.media-library__selection-link {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.media-library__selection-link:hover {
    color: #fff;
}

.media-library__selection-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.media-library__selection-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
    white-space: nowrap;
}

.media-library__selection-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.media-library__selection-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.media-library__selection-btn--danger {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.media-library__selection-btn--danger:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.7);
}

/* Two-step delete in selection bar */
.media-library__selection-delete {
    position: relative;
    width: var(--confirm-delete-width, auto);
}

.media-library__selection-delete .confirm-delete__trigger {
    position: relative;
    overflow: hidden;
}

.media-library__selection-confirm-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.media-library__selection-delete .confirm-delete__trigger svg,
.media-library__selection-delete .confirm-delete__trigger .media-library__selection-delete-label {
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.media-library__selection-delete.confirm-delete--confirming .confirm-delete__trigger svg,
.media-library__selection-delete.confirm-delete--confirming .confirm-delete__trigger .media-library__selection-delete-label {
    opacity: 0;
    transform: translateY(-100%);
}

.media-library__selection-delete.confirm-delete--confirming .media-library__selection-confirm-pills {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.media-library__pill {
    height: 26px;
    padding: 0 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: all 0.15s ease;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.media-library__pill--yes:hover {
    background: #fff;
    color: #0acf97;
    border-color: #fff;
}

.media-library__pill--no:hover {
    background: #fff;
    color: var(--nb-black);
    border-color: #fff;
}

.media-library__table-container {
    overflow: hidden;
}

.media-library__table thead tr:first-child th:first-child {
    border-top-left-radius: calc(var(--radius-md) - 2px);
}

.media-library__table thead tr:first-child th:last-child {
    border-top-right-radius: calc(var(--radius-md) - 2px);
}

.media-library__table tbody tr:last-child td:first-child {
    border-bottom-left-radius: calc(var(--radius-md) - 2px);
}

.media-library__table tbody tr:last-child td:last-child {
    border-bottom-right-radius: calc(var(--radius-md) - 2px);
}

.media-library__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.media-library__table thead {
    background: var(--primary-color);
    color: var(--primary-color-contrast);
}

.media-library__table th {
    padding: 0.875rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    white-space: nowrap;
}

.media-library__table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle-color);
    vertical-align: middle;
}

.media-library__table tbody tr:hover {
    background: var(--primary-color-light);
}

.media-library__select-checkbox {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: var(--surface-color);
    cursor: pointer;
    transition: all 100ms ease;
}

.media-library__select-checkbox::after {
    content: '';
    display: block;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0) translateY(-0.5px);
    transition: transform 100ms ease;
}

.media-library__select-checkbox:hover {
    border-color: var(--primary-color);
}

.media-library__select-checkbox:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.media-library__select-checkbox:checked::after {
    transform: rotate(45deg) scale(1);
}

.media-library__select-checkbox:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Drag handle */
.media-library__drag-handle {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--border-color);
    cursor: grab;
    transition: color 0.1s ease;
}

.media-library__drag-handle svg {
    width: 100%;
    height: 100%;
}

.media-library__drag-handle:hover {
    color: var(--text-muted-color);
}

.media-library--has-folders .media-library__drag-handle {
    display: flex;
}

/* Sortable column headers */
.media-library__sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.1s ease;
}

.media-library__sortable:hover {
    color: #fff;
}

.media-library__sort-arrow {
    display: inline-block;
    width: 1em;
    margin-left: 0.25rem;
    font-size: 0.65rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.media-library__sort-arrow::after {
    content: '\2195';
}

.media-library__sortable:hover .media-library__sort-arrow {
    opacity: 0.5;
}

.media-library__sortable--active .media-library__sort-arrow {
    opacity: 1;
}

.media-library__sortable--asc .media-library__sort-arrow::after {
    content: '\2191';
}

.media-library__sortable--desc .media-library__sort-arrow::after {
    content: '\2193';
}

.media-library__table th.media-library__table-actions,
.media-library__table td.media-library__actions-cell {
    width: 140px;
    white-space: nowrap;
    padding-right: 14px;
}

/* Fixed-layout column widths */
.media-library__table th[data-sort-field="size"],
.media-library__table td:nth-child(2) {
    width: 90px;
}

.media-library__table th[data-sort-field="type"],
.media-library__table td:nth-child(3) {
    width: 110px;
}

.media-library__table th[data-sort-field="updated_at"],
.media-library__table td:nth-child(4) {
    width: 150px;
}

/* Name column: truncate long names */
.media-library__table td:first-child {
    overflow: hidden;
}

.media-library__file-name,
.media-library__item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-library__row--folder {
    background: var(--surface-subtle-color);
}

/* Colored folder icons: fill the SVG interior */
tr[data-folder-color]:not([data-folder-color=""]) .media-library__item-icon svg {
    fill: currentColor;
    fill-opacity: 0.15;
}

.media-library__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
}

.media-library__item:hover {
    color: var(--primary-color);
}

.media-library__item-icon {
    width: 24px;
    height: 24px;
    color: var(--primary-color);
}

.media-library__file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.media-library__file-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-xs);
}

.media-library__file-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-muted-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted-color);
}

.media-library__file-icon svg {
    width: 20px;
    height: 20px;
}

/* File type icon colors */
.media-library__file-icon[data-file-type="image"] {
    background: #dbeafe;
    color: #2563eb;
}

.media-library__file-icon[data-file-type="video"] {
    background: #ede9fe;
    color: #7c3aed;
}

.media-library__file-icon[data-file-type="audio"] {
    background: #fef3c7;
    color: #d97706;
}

.media-library__file-icon[data-file-type="document"] {
    background: #fee2e2;
    color: #dc2626;
}

.media-library__file-icon[data-file-type="archive"] {
    background: #d1fae5;
    color: #059669;
}

.media-library__file-icon[data-file-type="other"] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Meta columns: size and date */
.media-library__table td:nth-child(2),
.media-library__table td:nth-child(4) {
    font-size: 0.8rem;
    color: var(--text-color);
}

/* Folder type cell: match meta column sizing */
.media-library__row--folder td:nth-child(3) {
    font-size: 0.8rem;
    color: var(--text-color);
}

.media-library__file-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.media-library__file-name {
    font-weight: 600;
}

.media-library__file-description {
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.media-library__file-path {
    font-size: 0.75rem;
    color: var(--text-muted-color);
    font-style: italic;
}

.media-library__type-cell {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    font-size: 0.85rem;
}

.media-library__type-cell [data-field="type_label"] {
    color: var(--text-color);
}

.media-library__file-extension {
    font-size: 0.75rem;
    color: var(--text-muted-color);
}

/* Row action icon buttons (permission-remove style) */
.media-library__row-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.media-library__action-icon {
    position: relative;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    color: var(--text-muted-color);
    cursor: pointer;
    transition: all 100ms ease;
    text-decoration: none;
}

.media-library__action-icon svg {
    width: 16px;
    height: 16px;
}

.media-library__action-icon:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Danger variant (delete trigger) */
.media-library__action-icon--danger:hover {
    background: var(--nb-red-light);
    border-color: var(--nb-red);
    color: var(--nb-red);
}

/* Confirm variant (checkmark) */
.media-library__action-icon--confirm {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--nb-red);
    border: 2px solid var(--nb-red);
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
    transition: all 100ms ease;
}

.media-library__action-icon--confirm svg {
    width: 16px;
    height: 16px;
}

.media-library__action-icon--confirm:hover {
    background: var(--nb-red);
    border-color: var(--nb-red);
    color: #fff;
}

/* Delete container: hide trigger when confirming, show checkmark */
.media-library__action-delete {
    display: flex;
}

.media-library__action-delete.confirm-delete--confirming .confirm-delete__trigger {
    display: none;
}

/* Tooltip on action icons */
.media-library__action-icon[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: var(--nb-black);
    color: var(--nb-white);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1000;
    box-shadow: var(--shadow-brutal-sm);
}

.media-library__action-icon[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    border: 5px solid transparent;
    border-top-color: var(--nb-black);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1000;
}

.media-library__action-icon[data-tooltip]:hover::after,
.media-library__action-icon[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

.media-library__empty-row td {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted-color);
}

/* Details Modal */
.media-library__details .modal__dialog {
    width: min(1200px, calc(100% - 2rem));
}

.media-library__details-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: calc(100vh - 6rem);
}

/* Two columns: preview left, form fields right */
.media-library__details-columns {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
}

.media-library__details-col-preview {
    flex: 0 0 340px;
}

.media-library__details-col-preview:has([hidden]) {
    display: none;
}

.media-library__details-preview {
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-muted-color);
}

.media-library__details-preview img,
.media-library__details-preview video {
    display: block;
    width: 100%;
    height: auto;
}

.media-library__details-col-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.media-library__details-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.media-library__details-field label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-color);
}

.media-library__details-body input,
.media-library__details-body textarea,
.media-library__details-body select {
    padding: 0.625rem 0.875rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.media-library__details-body input:focus,
.media-library__details-body textarea:focus,
.media-library__details-body select:focus {
    outline: none;
    box-shadow: var(--focus-ring);
    background: var(--primary-color-lighter);
}

/* Meta info boxes: basic info + EXIF */
.media-library__details-meta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.media-library__details-meta > .media-library__details-list {
    order: 1;
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 0.75rem;
    padding: 0.875rem;
    background: var(--surface-muted-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
}

.media-library__details-meta > div {
    order: 2;
    padding: 0.875rem;
    background: var(--surface-muted-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    max-height: 180px;
    overflow-y: auto;
}

.media-library__details-meta > div > strong {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted-color);
    margin-bottom: 0.5rem;
}

.media-library__details-meta dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 0.75rem;
}

.media-library__details-meta dt {
    font-weight: 700;
    color: var(--text-muted-color);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    padding-top: 0.15em;
}

.media-library__details-meta dd {
    margin: 0;
    color: var(--text-color);
    word-break: break-all;
}

/* Full-width action bar at bottom */
.media-library__details-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: var(--border-brutal-thin);
    justify-content: flex-end;
}

@media (max-width: 700px) {
    .media-library__details-columns {
        flex-direction: column;
    }

    .media-library__details-col-preview {
        flex: none;
    }
}

/* Two-step delete in details modal */
.media-library__details-delete {
    position: relative;
    width: var(--confirm-delete-width, auto);
}

.media-library__details-delete .confirm-delete__trigger {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-brutal-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.media-library__details-delete .confirm-delete__trigger:hover {
    transform: translate(-4px, -4px);
    box-shadow: var(--shadow-brutal);
}

.media-library__details-confirm-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.media-library__details-delete .confirm-delete__trigger svg,
.media-library__details-delete .confirm-delete__trigger .media-library__details-delete-label {
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.media-library__details-delete.confirm-delete--confirming .confirm-delete__trigger svg,
.media-library__details-delete.confirm-delete--confirming .confirm-delete__trigger .media-library__details-delete-label {
    opacity: 0;
    transform: translateY(-100%);
}

.media-library__details-delete.confirm-delete--confirming .media-library__details-confirm-pills {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Folder info modal */
.media-library__folder-modal-body {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
}

.media-library__folder-modal-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fef3c7;
    color: #d97706;
    border-radius: var(--radius-sm);
    border: var(--border-brutal-thin);
}

.media-library__folder-modal-icon svg {
    width: 28px;
    height: 28px;
}

.media-library__folder-modal-info {
    flex: 1;
    min-width: 0;
}

.media-library__folder-modal-name {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    word-break: break-all;
}

.media-library__folder-modal-meta {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

.media-library__folder-modal-meta dt {
    font-weight: 700;
    color: var(--text-muted-color);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    padding-top: 0.15em;
}

.media-library__folder-modal-meta dd {
    margin: 0;
    color: var(--text-color);
}

.media-library__folder-modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: var(--border-brutal-thin);
}

/* Delete confirmation */
.media-library__delete-group {
    position: relative;
}

.media-library__delete-confirm {
    position: absolute;
    top: 100%;
    right: 0;
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-brutal-sm);
    z-index: 10;
    white-space: nowrap;
}

/* Move form */
.media-library__move-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.media-library__move-select {
    padding: 0.375rem 0.5rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.media-library__move-actions {
    display: flex;
    gap: 0.25rem;
}

/* Permissions form */
.media-library__permissions-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.media-library__permissions-select {
    padding: 0.375rem 0.5rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.media-library__dropzone-button {
    background: #fff;
    color: var(--nb-black);
    border-color: var(--nb-black);
    height: 40px;
    padding: 0 1.25rem;
}

.media-library__dropzone-button:hover {
    background: var(--nb-black);
    color: #fff;
}

.media-library__dropzone-actions .button__icon {
    width: 16px;
    height: 16px;
}

/* (old confirm-delete trigger styles removed — now using action-icon pattern) */

/* Visually hidden helper */
.visually-hidden,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Context menu */
@keyframes contextMenuIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.media-library__context-menu {
    position: fixed;
    z-index: 1100;
    min-width: 200px;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-brutal-sm);
    padding: 0.35rem 0;
    user-select: none;
    animation: contextMenuIn 0.12s ease-out;
    transform-origin: top left;
}

.media-library__context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.85rem;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text-color);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

.media-library__context-menu-item:hover {
    background: var(--nb-gray-50, #f9fafb);
}

.media-library__context-menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.media-library__context-menu-item--danger {
    color: #dc2626;
}

.media-library__context-menu-item--danger:hover {
    background: #fef2f2;
}

.media-library__context-menu-divider {
    height: 1px;
    background: var(--nb-gray-200, #e5e7eb);
    margin: 0.35rem 0;
}

.media-library__context-menu-colors {
    padding: 0.4rem 0.85rem 0.5rem;
}

.media-library__context-menu-colors-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--nb-gray-500, #6b7280);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.media-library__context-menu-colors-grid {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.media-library__color-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s ease;
    box-sizing: border-box;
}

.media-library__color-circle:hover {
    transform: scale(1.2);
}

.media-library__color-circle--active {
    border-color: var(--nb-black);
    box-shadow: 0 0 0 2px var(--surface-color), 0 0 0 4px var(--nb-black);
}


/* Rename modal footer */
.media-library__rename-footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: var(--border-brutal-thin);
}

/* Delete confirmation modal footer */
.media-library__delete-confirm-footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: var(--border-brutal-thin);
}

.media-library__delete-confirm-message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: #fef2f2;
    border-radius: var(--radius-sm);
    margin: 0.5rem 1.5rem;
    border: 1px solid #fecaca;
}

.media-library__delete-confirm-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #dc2626;
    margin-top: 0.1rem;
}

.media-library__delete-confirm-icon svg {
    width: 24px;
    height: 24px;
}

.media-library__delete-confirm-message p {
    margin: 0;
    line-height: 1.6;
    font-size: 0.9rem;
    color: #991b1b;
}

/* Media Library - Sort Trigger (mobile only)
   -------------------------------------------------------------------------- */

.media-library__sort-trigger {
    display: none;
}

/* Media Library - Sort Bottom Sheet
   -------------------------------------------------------------------------- */

.media-library__sort-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.media-library__sort-modal[hidden] {
    display: none;
}

.media-library__sort-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.media-library__sort-modal--visible .media-library__sort-modal-backdrop {
    opacity: 1;
}

.media-library__sort-modal-sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - var(--topbar-height) - 1rem);
    display: flex;
    flex-direction: column;
    background: var(--surface-color);
    border: 3px solid var(--nb-black);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.media-library__sort-modal--visible .media-library__sort-modal-sheet {
    transform: translateY(0);
}

.media-library__sort-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--nb-black);
    border-bottom: 2px solid var(--nb-black);
    border-radius: calc(var(--radius-lg) - 3px) calc(var(--radius-lg) - 3px) 0 0;
}

.media-library__sort-modal-title {
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}

.media-library__sort-modal-close {
    appearance: none;
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.15s ease;
}

.media-library__sort-modal-close:hover {
    color: #fff;
}

.media-library__sort-modal-list {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.media-library__sort-modal-item {
    appearance: none;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-align: left;
    width: 100%;
}

.media-library__sort-modal-item:hover {
    background: var(--surface-secondary-color);
}

.media-library__sort-modal-item-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.media-library__sort-modal-item-icon svg {
    width: 16px;
    height: 16px;
}

.media-library__sort-modal-item span {
    flex: 1;
}

.media-library__sort-modal-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    opacity: 0;
    color: var(--primary-color);
    transition: opacity 0.15s ease;
}

.media-library__sort-modal-check svg {
    width: 20px;
    height: 20px;
    display: block;
}

.media-library__sort-modal-item--active {
    color: var(--primary-color);
}

.media-library__sort-modal-item--active .media-library__sort-modal-check {
    opacity: 1;
}

/* Media Library - Mobile Header + Meta (hidden on desktop)
   -------------------------------------------------------------------------- */

.media-library__mobile-header {
    display: none;
}

.media-library__mobile-meta {
    display: none;
}

/* Media Library - Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .media-library__space-select--page {
        justify-content: flex-start;
    }

    .media-library__space-select .fancy-select {
        max-width: 100%;
    }

    .media-library__space-select .fancy-select__trigger {
        max-width: 100%;
        overflow: hidden;
    }

    .media-library__space-select .fancy-select__menu {
        width: auto;
        max-width: calc(100vw - 2rem);
        right: 0;
    }

    .media-library__space-select .fancy-select__option {
        white-space: normal;
    }

    .media-library__item {
        min-width: 0;
    }

    .media-library__item-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .media-library__file-info {
        min-width: 0;
    }

    .media-library__file-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---- Mobile card layout ---- */

    .media-library__table thead {
        display: none;
    }

    .media-library__table {
        display: block;
    }

    .media-library__table tbody {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .media-library__table tbody tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        padding: 0.5rem 0.625rem;
        background: var(--card-background);
        box-sizing: border-box;
    }

    .media-library__table tbody tr + tr {
        border-top: 1px solid var(--border-subtle-color);
    }

    .media-library__table tbody tr:hover {
        background: var(--card-background);
    }

    /* Name cell: full width, first line */
    .media-library__table tbody tr td:first-child {
        flex: 1 1 100%;
        min-width: 0;
        overflow: hidden;
        padding: 0 0 0.25rem 0;
        border-bottom: none;
    }

    /* Hide all middle td cells (size, type, date) — shown via JS mobile-meta.
       Uses :not() instead of nth-child to survive the injected <div> shifting indices. */
    .media-library__table tbody tr td:not(:first-child):not(.media-library__actions-cell) {
        display: none !important;
    }

    /* Actions cell: second line, right edge via space-between */
    .media-library__table tbody tr td.media-library__actions-cell {
        flex: 0 0 auto;
        width: auto;
        padding: 0 0.5rem 0 0;
        border-bottom: none;
        display: flex !important;
        align-items: flex-end;
    }

    .media-library__table tbody tr td.media-library__actions-cell .media-library__row-actions {
        gap: 0.375rem;
    }

    /* Action icons: comfortable tap targets */
    .media-library__action-icon {
        width: 34px;
        height: 34px;
        border-width: 1.5px;
    }

    .media-library__action-icon svg {
        width: 16px;
        height: 16px;
    }

    .media-library__action-icon--confirm {
        width: 34px;
        height: 34px;
        border-width: 1.5px;
    }

    .media-library__action-icon--confirm svg {
        width: 16px;
        height: 16px;
    }

    /* Mobile meta block: second line, left side */
    .media-library__mobile-meta {
        display: flex !important;
        flex-direction: column;
        flex: 0 1 auto;
        font-size: 11px;
        line-height: 1.4;
        color: var(--text-muted-color);
        min-width: 0;
    }

    .media-library__mobile-meta span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Smaller file name */
    .media-library__file-name {
        font-size: 0.8rem;
    }

    .media-library__item-name {
        font-size: 0.8rem;
    }

    /* File row: compact */
    .media-library__file {
        gap: 0.5rem;
    }

    .media-library__file-thumb {
        width: 28px;
        height: 28px;
    }

    .media-library__file-icon {
        width: 28px;
        height: 28px;
    }

    .media-library__file-icon svg {
        width: 14px;
        height: 14px;
    }

    /* Folder row */
    .media-library__item-icon {
        width: 18px;
        height: 18px;
    }

    /* Checkbox smaller */
    .media-library__select-checkbox {
        width: 16px;
        height: 16px;
    }

    /* Mobile header bar (replaces hidden thead) */
    .media-library__mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 0.625rem;
        background: var(--primary-color);
        color: var(--primary-color-contrast);
        border-radius: calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) 0 0;
    }

    .media-library__mobile-header-label {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* Sort trigger in header bar */
    .media-library__sort-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        appearance: none;
        border: 1.5px solid rgba(255, 255, 255, 0.35);
        background: rgba(255, 255, 255, 0.1);
        width: 28px;
        height: 28px;
        border-radius: var(--radius-xs);
        color: var(--primary-color-contrast);
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease;
        flex-shrink: 0;
    }

    .media-library__sort-trigger:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .media-library__sort-trigger svg {
        width: 14px;
        height: 14px;
    }

    /* Hide desktop order fancy-select on mobile */
    .media-library__filter--order .fancy-select {
        display: none;
    }

    .media-library__filter--order > label {
        display: none;
    }

    /* Empty row spans full width */
    .media-library__empty-row td {
        grid-column: 1 / -1;
    }

    /* Table container: keep wrapper border, clip inner corners, no shadow */
    .media-library__table-container {
        overflow: hidden;
    }

    .media-library__table-container.table-wrapper {
        box-shadow: none;
    }

    /* Drag handle: hide on mobile cards */
    .media-library--has-folders .media-library__drag-handle {
        display: none;
    }

    /* Action cell padding handled by the higher-specificity rule above */
}

/* ==========================================================================
   Categories Manager
   ========================================================================== */

.categories-manager {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Add Category Form */
.categories-manager__add {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1rem;
    background: #f5f5f6;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-md);
}

.categories-manager__add-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 150px;
}

.categories-manager__add-field--parent {
    flex: 0 0 200px;
}

.categories-manager__add-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted-color);
}

.categories-manager__add-input {
    padding: 0.5rem 0.75rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--card-background);
}

.categories-manager__add-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.categories-manager__add-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--card-background);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
}

.categories-manager__add-button {
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: var(--primary-color-contrast);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.categories-manager__add-button:hover {
    background: var(--primary-color-hover);
}

.categories-manager__add-button:active {
    transform: scale(0.98);
}

/* Categories Tree */
.categories-manager__tree {
    display: flex;
    flex-direction: column;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.categories-manager__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--surface-secondary-color);
}

.categories-manager__empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    color: var(--text-muted-color);
    opacity: 0.5;
}

.categories-manager__empty-text {
    margin: 0;
    color: var(--text-muted-color);
    font-size: 0.95rem;
}

/* Category Item */
.category-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--card-background);
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.category-item:last-child {
    border-bottom: none;
}

.category-item:hover {
    background: var(--surface-secondary-color);
}

.category-item--child {
    padding-left: 2.5rem;
    background: var(--surface-subtle-color);
}

.category-item--child:hover {
    background: var(--surface-secondary-color);
}

.category-item__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-muted-color);
}

.category-item--parent .category-item__icon {
    color: var(--primary-color);
}

.category-item__name {
    flex: 1;
    font-weight: 500;
    font-size: 0.95rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-item__badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    background: var(--surface-secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-muted-color);
}

.category-item__actions {
    display: flex;
    gap: 0.375rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.category-item:hover .category-item__actions {
    opacity: 1;
}

.category-item__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    background: var(--card-background);
    color: var(--text-muted-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.category-item__action:hover {
    background: var(--surface-secondary-color);
    color: var(--text-color);
}

.category-item__action--delete:hover {
    background: var(--danger-color-light);
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.category-item__action svg {
    width: 14px;
    height: 14px;
}

/* Inline Edit Form */
.category-item__edit-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.category-item__edit-input {
    flex: 1;
    padding: 0.375rem 0.625rem;
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    background: var(--card-background);
}

.category-item__edit-input:focus {
    outline: none;
}

.category-item__edit-actions {
    display: flex;
    gap: 0.25rem;
}

.category-item__edit-save,
.category-item__edit-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.category-item__edit-save {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.category-item__edit-save:hover {
    filter: brightness(1.1);
}

.category-item__edit-cancel {
    background: var(--card-background);
    color: var(--text-muted-color);
}

.category-item__edit-cancel:hover {
    background: var(--surface-secondary-color);
}

/* Drag Handle */
.category-item__drag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-muted-color);
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.category-item:hover .category-item__drag {
    opacity: 1;
}

.category-item__drag:active {
    cursor: grabbing;
}

.category-item__drag svg {
    width: 16px;
    height: 16px;
}

/* Drag and Drop States */
.category-item--dragging {
    opacity: 0.5;
    background: var(--surface-secondary-color);
}

.category-item--drag-over {
    border-top: 2px solid var(--primary-color);
}

.category-item--drag-over-child {
    background: var(--primary-color-light);
    border-left: 3px solid var(--primary-color);
}

/* Two-step Delete for Categories */
.category-item__delete {
    position: relative;
    display: flex;
    align-items: center;
}

.category-item__delete-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    background: var(--card-background);
    color: var(--text-muted-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.category-item__delete-trigger:hover {
    background: var(--danger-color-light);
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.category-item__delete-trigger svg {
    width: 14px;
    height: 14px;
}

.category-item__delete-confirm {
    display: none;
    align-items: center;
    gap: 0.25rem;
}

.category-item__delete--active .category-item__delete-trigger {
    display: none;
}

.category-item__delete--active .category-item__delete-confirm {
    display: flex;
}

.category-item__delete-yes,
.category-item__delete-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.85rem;
    font-weight: 700;
}

.category-item__delete-yes {
    background: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

.category-item__delete-yes:hover {
    filter: brightness(1.1);
}

.category-item__delete-no {
    background: var(--card-background);
    color: var(--text-muted-color);
}

.category-item__delete-no:hover {
    background: var(--surface-secondary-color);
}

/* Error state */
.categories-manager__error {
    padding: 0.75rem 1rem;
    background: var(--danger-color-light);
    border: 1px solid var(--danger-color);
    border-radius: var(--radius-sm);
    color: var(--danger-color);
    font-size: 0.9rem;
}

/* Toast notifications */
.categories-manager__toast {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    animation: toast-slide-in 0.3s ease;
}

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.categories-manager__toast--success {
    background: var(--success-color-light, #d4edda);
    border: 1px solid var(--success-color, #28a745);
    color: var(--success-color, #28a745);
}

.categories-manager__toast--error {
    background: var(--danger-color-light);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}

/* ==========================================================================
   Template Editor - Code Editor Styling
   ========================================================================== */

/* Template Tabs */
.template-tabs__nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.25rem;
}

.template-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted-color);
    background: none;
    border: 2px solid transparent;
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
    position: relative;
    bottom: -2px;
    transition: color 0.15s, background 0.15s;
}

.template-tabs__tab:hover {
    color: var(--text-color);
    background: var(--surface-muted-color);
}

.template-tabs__tab--active {
    color: var(--text-strong-color);
    background: var(--surface-color);
    border-color: var(--border-color);
    border-bottom: 2px solid var(--surface-color);
}

.template-tabs__tab svg {
    flex-shrink: 0;
}

.template-tabs__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.template-tabs__dot--custom {
    background: var(--nb-purple);
}

.template-tabs__panel {
    display: none;
}

.template-tabs__panel--active {
    display: block;
}

.template-tabs__panel-description {
    font-size: 0.8125rem;
    color: var(--text-muted-color);
    margin: 0 0 1rem 0;
}

.template-editor {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.template-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.template-editor__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-color);
}

.template-editor__label-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--nb-purple);
    border-radius: 4px;
    color: #fff;
}

.template-editor__status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.template-editor__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    border: 1.5px solid;
}

.template-editor__badge--default {
    background: var(--success-color-light);
    border-color: var(--success-color);
    color: var(--success-color);
}

.template-editor__badge--custom {
    background: var(--nb-purple-light);
    border-color: var(--nb-purple);
    color: var(--nb-purple);
}

.template-editor__badge svg {
    width: 12px;
    height: 12px;
}

.template-editor__code-wrapper {
    position: relative;
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: 3px 3px 0 0 var(--nb-black);
    transition: box-shadow 0.15s ease;
}

.template-editor__code-wrapper:focus-within {
    box-shadow: 4px 4px 0 0 var(--nb-purple);
    border-color: var(--nb-purple);
}

.template-editor__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #2d2d2d;
    border-bottom: 1px solid #3d3d3d;
}

.template-editor__toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.template-editor__toolbar-dots {
    display: flex;
    gap: 6px;
}

.template-editor__toolbar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.template-editor__toolbar-dot--red { background: #ff5f57; }
.template-editor__toolbar-dot--yellow { background: #ffbd2e; }
.template-editor__toolbar-dot--green { background: #28c840; }

.template-editor__toolbar-filename {
    margin-left: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #888;
}

.template-editor__toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.template-editor__toolbar-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--nb-green);
    color: #1a1a1a;
    border-radius: 3px;
}

.template-editor__textarea {
    display: block;
    width: 100%;
    min-height: 400px;
    max-height: 70vh;
    padding: 1rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.65;
    color: #e4e4e7;
    background: #1e1e1e;
    border: none;
    outline: none;
    resize: vertical;
    tab-size: 4;
}

.template-editor__textarea::placeholder {
    color: #52525b;
}

.template-editor__textarea::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.template-editor__textarea::-webkit-scrollbar-track {
    background: #27272a;
}

.template-editor__textarea::-webkit-scrollbar-thumb {
    background: #52525b;
    border-radius: 5px;
}

.template-editor__textarea::-webkit-scrollbar-thumb:hover {
    background: #71717a;
}

.template-editor__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: #2d2d2d;
    border-top: 1px solid #3d3d3d;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #888;
}

.template-editor__footer-left,
.template-editor__footer-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.template-editor__footer-stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.template-editor__footer-stat svg {
    width: 12px;
    height: 12px;
    opacity: 0.7;
}

.template-editor__help {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--text-muted-color);
    background: var(--surface-secondary-color);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.template-editor__help-icon {
    flex-shrink: 0;
    color: var(--nb-blue);
}

.template-editor__help a {
    color: var(--nb-purple);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.template-editor__help a:hover {
    color: var(--nb-blue);
}

.template-editor__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-color);
}

.template-editor__actions-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.template-editor__unsaved-indicator {
    display: none;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--warning-color);
}

.template-editor__unsaved-indicator svg {
    width: 14px;
    height: 14px;
}

.template-editor--dirty .template-editor__unsaved-indicator {
    display: flex;
}

.template-editor--dirty .template-editor__code-wrapper {
    border-color: var(--warning-color);
}

.template-editor--dirty .template-editor__code-wrapper:focus-within {
    border-color: var(--nb-purple);
}

/* Light Theme for Code Editor */
.template-editor__code-wrapper--light .template-editor__toolbar {
    background: #f5f5f5;
    border-bottom-color: #e0e0e0;
}

.template-editor__code-wrapper--light .template-editor__toolbar-filename {
    color: #666;
}

.template-editor__code-wrapper--light .template-editor__textarea {
    background: #fafafa;
    color: #1a1a1a;
}

.template-editor__code-wrapper--light .template-editor__textarea::placeholder {
    color: #999;
}

.template-editor__code-wrapper--light .template-editor__textarea::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.template-editor__code-wrapper--light .template-editor__textarea::-webkit-scrollbar-thumb {
    background: #ccc;
}

.template-editor__code-wrapper--light .template-editor__textarea::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

.template-editor__code-wrapper--light .template-editor__footer {
    background: #f5f5f5;
    border-top-color: #e0e0e0;
    color: #666;
}

/* Theme Toggle Button */
.template-editor__theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1.5px solid #555;
    border-radius: 4px;
    color: #888;
    cursor: pointer;
    transition: all 0.15s ease;
}

.template-editor__theme-toggle:hover {
    background: #444;
    border-color: #888;
    color: #fff;
}

.template-editor__theme-toggle svg {
    width: 14px;
    height: 14px;
}

.template-editor__theme-toggle .icon-sun {
    display: none;
}

.template-editor__theme-toggle .icon-moon {
    display: block;
}

.template-editor__code-wrapper--light .template-editor__theme-toggle {
    border-color: #ccc;
    color: #666;
}

.template-editor__code-wrapper--light .template-editor__theme-toggle:hover {
    background: #e8e8e8;
    border-color: #999;
    color: #333;
}

.template-editor__code-wrapper--light .template-editor__theme-toggle .icon-sun {
    display: block;
}

.template-editor__code-wrapper--light .template-editor__theme-toggle .icon-moon {
    display: none;
}

/* Button Icons */
.template-editor__actions .button svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.template-editor__actions .button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ==========================================================================
   Config Subsections - Footer & Social Links
   ========================================================================== */

.config-subsection {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: #f7f7f8;
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-md);
}

.config-subsection:last-of-type {
    margin-bottom: 1.5rem;
}

.config-subsection__header {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #d1d5db;
}

.config-subsection__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--nb-blue);
    border-radius: 8px;
    color: #fff;
    flex-shrink: 0;
}

.config-subsection__icon--social {
    background: var(--nb-pink);
}

.config-subsection__icon--team {
    background: #000;
}

.config-subsection__icon svg {
    width: 20px;
    height: 20px;
}

.config-subsection__title-group {
    flex: 1;
    min-width: 0;
}

.config-subsection__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--nb-black);
}

.config-subsection__counter {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--nb-black);
    color: #fff;
    border-radius: 10px;
}

.config-subsection__description {
    margin: 0;
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.5;
}

.config-subsection__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.config-subsection__action {
    margin-left: auto;
}

.config-subsection__meta {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
    padding-left: calc(2.25rem + 0.75rem);
}

.config-social__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

.config-social__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Social section — Mobile layout */
@media (max-width: 640px) {
    .config-subsection__header {
        flex-wrap: wrap;
    }

    .config-subsection__action {
        order: -1;
        width: 100%;
        margin-left: 0;
    }

    .config-subsection__action .button,
    .config-subsection__action .button--outline {
        width: 100%;
        justify-content: center;
    }

    .config-social__actions {
        flex-direction: column;
    }

    .config-social__actions .button {
        width: 100%;
        justify-content: center;
    }
}

.config-subsection__help {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.6rem 0.8rem;
    font-size: 0.75rem;
    color: #4b5563;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-sm);
}

.config-subsection__help svg {
    flex-shrink: 0;
    color: var(--nb-blue);
}

/* Domain DNS instruction box */
.config-domain-dns {
    margin-top: 0.5rem;
}

.config-domain-dns__table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.85rem;
}

.config-domain-dns__table th,
.config-domain-dns__table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.config-domain-dns__table th {
    background: var(--bg-subtle, #f7fafc);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #718096);
}

.config-domain-dns__table code {
    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.8rem;
    background: var(--bg-subtle, #f7fafc);
    padding: 0.15em 0.4em;
    border-radius: 3px;
}

.config-domain-dns__table tr:last-child td {
    border-bottom: none;
}

/* Domain status badges */
.config-domain-status {
    display: inline-flex;
    align-items: center;
    padding: 0.15em 0.55em;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.config-domain-status--verified {
    background: #c6f6d5;
    color: #22543d;
}

.config-domain-status--pending {
    background: #fefcbf;
    color: #744210;
}

.config-subsection__icon--feeds {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

/* Feeds List */
.feeds-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feeds-list__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.feeds-list__item:hover {
    border-color: var(--nb-black);
    box-shadow: 2px 2px 0 var(--nb-black);
}

.feeds-list__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #fff;
    flex-shrink: 0;
}

.feeds-list__item-icon svg {
    width: 14px;
    height: 14px;
}

.feeds-list__item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.feeds-list__item-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--nb-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feeds-list__item-url {
    font-size: 0.75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feeds-list__item-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.feeds-list__item-btn {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.5rem;
    cursor: pointer;
    color: #9ca3af;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.feeds-list__item-btn:hover {
    color: var(--nb-black);
    background: #f3f4f6;
}

.feeds-list__item-btn--danger:hover {
    color: var(--danger-color);
    background: var(--danger-color-light);
}

.feeds-list__item-delete {
    position: relative;
    display: flex;
    align-items: center;
}

.feeds-list__confirm-btn {
    appearance: none;
    border: none;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.feeds-list__confirm-btn[hidden] {
    display: none;
}

.feeds-list__confirm-btn--yes {
    background: var(--danger-color);
    color: #fff;
}

.feeds-list__confirm-btn--yes:hover {
    background: #b91c1c;
}

.feeds-list__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: var(--radius-sm);
    text-align: center;
}

.feeds-list__empty[hidden] {
    display: none;
}

.feeds-list__empty-icon {
    color: #9ca3af;
    margin-bottom: 0.5rem;
}

.feeds-list__empty-text {
    margin: 0;
    font-size: 0.875rem;
    color: #6b7280;
}

/* Feeds Add Form */
.feeds-add-form {
    margin-top: 1rem;
    padding: 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-sm);
}

.feeds-add-form__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
}

.feeds-add-form__fields {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.feeds-add-form__field {
    flex: 1;
}

.feeds-add-form__field--url {
    flex: 2;
}

.feeds-add-form__input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast);
}

.feeds-add-form__input:focus {
    outline: none;
    border-color: var(--nb-black);
}

.feeds-add-form__error {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--danger-color);
}

.feeds-add-form__error[hidden] {
    display: none;
}

@media (max-width: 640px) {
    .feeds-add-form__fields {
        flex-direction: column;
    }

    .feeds-add-form__field,
    .feeds-add-form__field--url {
        flex: none;
        width: 100%;
    }

    .feeds-add-form__fields .button {
        width: 100%;
        justify-content: center;
    }

    .feeds-list__item-actions {
        flex-direction: column;
    }

    [data-feeds-manager] .space-form__section-body {
        padding: 1rem;
    }
}

/* Feed Modal */
.feed-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--animation-smooth), visibility 0.25s;
}

.feed-modal[data-visible="true"] {
    opacity: 1;
    visibility: visible;
}

.feed-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.feed-modal__dialog {
    position: relative;
    width: min(500px, 100%);
    background-color: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-lg);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s var(--animation-bounce);
}

.feed-modal[data-visible="true"] .feed-modal__dialog {
    transform: translateY(0) scale(1);
}

.feed-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: var(--border-brutal-thin);
    background: var(--nb-black);
}

.feed-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--nb-white);
}

.feed-modal__close {
    appearance: none;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.feed-modal__close:hover {
    background: var(--danger-color-light);
}

.feed-modal__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feed-modal__body .form-group {
    margin-bottom: 0;
}

.feed-modal__error {
    margin: 0;
    padding: 0.75rem;
    font-size: 0.875rem;
    color: var(--danger-color);
    background: var(--danger-color-light);
    border-radius: var(--radius-sm);
}

.feed-modal__error[hidden] {
    display: none;
}

.feed-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.feed-modal__footer--end {
    justify-content: flex-end;
}

/* Feed Items Viewer */
.feed-items-viewer {
    margin-top: 0.25rem;
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.feed-items-viewer[hidden] {
    display: none;
}

.feed-items-viewer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--nb-black);
    color: var(--nb-white);
}

.feed-items-viewer__title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.feed-items-viewer__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--nb-white);
}

.feed-items-viewer__count {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.feed-items-viewer__close {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--nb-white);
    padding: 0.25rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.feed-items-viewer__close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.feed-items-viewer__content {
    padding: 0.75rem;
    max-height: 500px;
    overflow-y: auto;
}

.feed-items-viewer__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: #6b7280;
    font-size: 0.875rem;
}

.feed-items-viewer__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-top-color: var(--nb-black);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.feed-items-viewer__loading[hidden] {
    display: none;
}

.feed-items-viewer__list {
    display: grid;
    gap: 1rem;
}

.feed-items-viewer__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

.feed-items-viewer__empty svg {
    margin-bottom: 0.75rem;
    color: #9ca3af;
}

.feed-items-viewer__empty p {
    margin: 0;
    font-size: 0.875rem;
}

.feed-items-viewer__empty[hidden] {
    display: none;
}

/* Feed Item Card */
.feed-item-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-fast);
}

.feed-item-card:hover {
    border-color: var(--nb-black);
    box-shadow: 3px 3px 0 var(--nb-black);
    transform: translate(-2px, -2px);
    text-decoration: none;
}

.feed-item-card__image {
    flex-shrink: 0;
    width: 160px;
    height: 100px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #f3f4f6;
}

.feed-item-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feed-item-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.feed-item-card__title {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--nb-black);
    line-height: 1.35;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feed-item-card__summary {
    margin: 0;
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feed-item-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    font-size: 0.75rem;
    color: #9ca3af;
}

.feed-item-card__author {
    font-weight: 500;
}

.feed-item-card__date::before {
    content: "•";
    margin-right: 0.75rem;
}

/* Feed list active state */
.feeds-list__item--active {
    border-color: var(--nb-black);
    box-shadow: 2px 2px 0 var(--nb-black);
    background: #fef9c3;
}

@media (max-width: 640px) {
    .feed-item-card {
        flex-direction: column;
    }

    .feed-item-card__image {
        width: 100%;
        height: 140px;
    }
}

/* Footer Grid */
.config-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.config-footer-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.config-footer-item__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.config-footer-item__lang-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 0.4rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--nb-purple);
    color: #fff;
    border-radius: 4px;
}

.config-footer-item__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--nb-black);
}

.config-footer-item__textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-color);
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.config-footer-item__textarea:focus {
    outline: none;
    border-color: var(--nb-purple);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.config-footer-item__textarea::placeholder {
    color: var(--text-muted-color);
}

/* Social Networks */
.config-social__errors {
    padding: 0.75rem;
    background: var(--danger-color-light);
    border: 1px solid var(--danger-color);
    border-radius: var(--radius-sm);
}

.config-social__errors .form-help--error {
    margin: 0;
}

.config-social__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.config-social__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.config-social__item:focus-within {
    border-color: var(--nb-pink);
    box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.12);
}

.config-social__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--surface-secondary-color);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted-color);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.config-social__item-icon svg {
    width: 20px;
    height: 20px;
}

.config-social__item-icon--active,
.config-social__item:has(select option:checked:not([value=""])) .config-social__item-icon {
    background: var(--nb-pink);
    border-color: var(--nb-pink);
    color: #fff;
}

.config-social__item-fields {
    display: flex;
    flex: 1;
    gap: 0.75rem;
    min-width: 0;
}

@media (max-width: 600px) {
    .config-social__item {
        flex-wrap: wrap;
    }

    .config-social__item-fields {
        flex-direction: column;
        width: 100%;
    }
}

.config-social__field {
    display: flex;
    flex-direction: column;
}

.config-social__field--platform {
    flex: 0 0 160px;
}

.config-social__field--value {
    flex: 1;
    min-width: 0;
}

@media (max-width: 600px) {
    .config-social__field--platform,
    .config-social__field--value {
        flex: 1 1 100%;
    }
}

.config-social__select,
.config-social__input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-color);
    background: var(--surface-color);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease;
}

.config-social__select {
    padding-right: 2rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    cursor: pointer;
}

.config-social__select:focus,
.config-social__input:focus {
    outline: none;
    border-color: var(--nb-pink);
}

.config-social__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted-color);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.config-social__remove:hover {
    background: var(--danger-color);
    border-color: var(--danger-color);
    color: #fff;
}

.config-social__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    background: var(--surface-color);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-sm);
    text-align: center;
}

.config-social__empty[hidden] {
    display: none;
}

.config-social__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--surface-secondary-color);
    border-radius: 50%;
    color: var(--text-muted-color);
}

.config-social__empty-text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted-color);
}

.config-social__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--nb-pink);
    background: transparent;
    border: 2px dashed var(--nb-pink);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.config-social__add:hover {
    background: var(--nb-pink);
    border-style: solid;
    color: #fff;
}

.config-social__add svg {
    width: 16px;
    height: 16px;
}

/* Form actions button icon */
.config-subsection + .form-actions,
.config-subsection ~ .form-actions {
    display: flex;
    justify-content: flex-end;
}

.form-actions .button svg {
    width: 14px;
    height: 14px;
}

.form-actions .button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ==========================================================================
   Privacy Section - Legal Documents & Cookie Consent
   ========================================================================== */

.config-subsection__icon--legal {
    background: var(--nb-purple);
}

.config-subsection__icon--cookie {
    background: #f59e0b;
}

.config-subsection__icon--theme {
    background: #f59e0b;
}

.config-subsection__icon--typography {
    background: #8b5cf6;
}

.config-subsection__icon--colors {
    background: #ec4899;
}

/* ==========================================================================
   Design Section
   ========================================================================== */

.design-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.design-form .form-actions {
    margin-top: -0.5rem;
}

.design-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 900px) {
    .design-layout {
        grid-template-columns: 1fr 300px;
    }
}

.design-layout__settings {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.design-layout__preview {
    position: sticky;
    top: 5rem;
    align-self: start;
}

/* Design Fields */
.design-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.design-field__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.design-field__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-strong-color);
}

.design-field__select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    padding-right: 2rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    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='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 16px;
    cursor: pointer;
}

.design-field__select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

.design-field__help {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted-color);
}

.design-field__help--error {
    color: var(--danger-color);
}

.design-field--toggle {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.design-field--toggle .design-field__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.design-field__switch {
    flex-shrink: 0;
}

.design-theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

/* Font Selector */
.font-selector {
    position: relative;
}

.font-selector__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.font-selector__trigger:hover {
    border-color: var(--text-muted-color);
}

.font-selector__trigger:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

.font-selector__trigger[aria-expanded="true"] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

.font-selector__preview {
    flex: 1;
    font-size: 1rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.font-selector__arrow {
    flex-shrink: 0;
    margin-left: 0.5rem;
    color: var(--text-muted-color);
    transition: transform var(--transition-fast);
}

.font-selector__trigger[aria-expanded="true"] .font-selector__arrow {
    transform: rotate(180deg);
}

.font-selector__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin-top: 4px;
    padding: 0.375rem;
    list-style: none;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    max-height: 280px;
    overflow-y: auto;
}

.font-selector__dropdown[hidden] {
    display: none;
}

.font-selector__option {
    padding: 0.625rem 0.75rem;
    font-size: 1.0625rem;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.font-selector__option:hover {
    background: var(--surface-secondary-color);
}

.font-selector__option--selected {
    background: var(--primary-color-light);
    color: var(--primary-color);
    font-weight: 600;
}

.font-selector__option--selected:hover {
    background: var(--primary-color-light);
}

.design-typography-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* Design Colors */
.design-colors {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.design-colors__variant {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.design-colors__variant-header {
    display: flex;
    align-items: center;
}

.design-colors__variant-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 4px;
}

.design-colors__variant-badge--light {
    background: #fef3c7;
    color: #92400e;
}

.design-colors__variant-badge--dark {
    background: #1e293b;
    color: #e2e8f0;
}

.design-colors__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
}

/* Design Color Chip */
.design-color-chip {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    text-align: left;
}

.design-color-chip:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color-light);
}

.design-color-chip__swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: var(--border-brutal-thin);
    flex-shrink: 0;
}

.design-color-chip__label {
    flex: 1;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-color);
}

.design-color-chip__value {
    font-size: 0.625rem;
    font-family: var(--font-mono, monospace);
    color: var(--text-muted-color);
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Design Preview Card */
.design-preview-card {
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.design-preview-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--nb-black);
}

.design-preview-card__label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nb-white);
}

.design-preview-card__theme-toggle {
    display: flex;
    gap: 0.25rem;
}

.design-preview-card__theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--nb-white);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.design-preview-card__theme-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.design-preview-card__theme-btn.is-active {
    background: var(--nb-white);
    color: var(--nb-black);
}

.design-preview-card__surface {
    padding: 1.25rem;
    min-height: 180px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.design-preview-card__headline {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.design-preview-card__body {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    opacity: 0.9;
}

.design-preview-card__highlight {
    display: inline-flex;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
}

.design-preview-card__highlight-text {
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Privacy Documents Grid */
.privacy-documents {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.privacy-document {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.privacy-document:hover {
    border-color: var(--nb-purple);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.privacy-document:hover .privacy-document__icon {
    background: var(--nb-purple);
    color: #fff;
}

.privacy-document:hover .privacy-document__arrow {
    transform: translateX(2px);
    color: var(--nb-purple);
}

.privacy-document__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--surface-secondary-color);
    border-radius: 10px;
    color: var(--text-muted-color);
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.privacy-document__content {
    flex: 1;
    min-width: 0;
}

.privacy-document__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.15rem;
}

.privacy-document__action {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted-color);
}

.privacy-document__arrow {
    color: var(--text-muted-color);
    flex-shrink: 0;
    transition: all 0.15s ease;
}

/* CMP Status Badge */
.cmp-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.cmp-status-badge--active {
    background: #dcfce7;
    color: #166534;
}

.cmp-status-badge--inactive {
    background: var(--surface-secondary-color);
    color: var(--text-muted-color);
}

/* CMP Form */
.cmp-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* CMP Toggle Card */
.cmp-toggle-card {
    padding: 1rem 1.25rem;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.cmp-toggle-card__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cmp-toggle-card__info {
    flex: 1;
    min-width: 0;
}

.cmp-toggle-card__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.2rem;
}

.cmp-toggle-card__help {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted-color);
    line-height: 1.4;
}

.cmp-toggle-card__switch {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* CMP Options Container */
.cmp-options {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cmp-options[hidden] {
    display: none;
}

/* CMP Section */
.cmp-section {
    padding: 1rem 1.25rem;
    background: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.cmp-section__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--nb-black);
    border-bottom: 1px solid var(--border-color);
}

.cmp-section__title svg {
    color: var(--text-muted-color);
}

.cmp-section__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* CMP Field Rows */
.cmp-field-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cmp-field-row--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 640px) {
    .cmp-field-row--grid {
        grid-template-columns: 1fr;
    }
}

/* CMP Field */
.cmp-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cmp-field--toggle .cmp-field__toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cmp-field__switch {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.cmp-field__info {
    flex: 1;
    min-width: 0;
}

.cmp-field__label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-color);
}

.cmp-field__help {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted-color);
    margin-top: 0.15rem;
}

/* CMP Region Selector */
.cmp-field-row:has(.cmp-field--region) {
    display: block;
}

.cmp-field--region {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: nowrap;
}

.cmp-field--region .cmp-field__info {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.cmp-field--region .cmp-field__help {
    margin-top: 0.1rem;
}

.cmp-region-selector {
    display: flex;
    flex-shrink: 0;
}

.cmp-region-selector__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted-color);
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    margin-left: -2px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cmp-region-selector__option:first-of-type {
    border-radius: 6px 0 0 6px;
    margin-left: 0;
}

.cmp-region-selector__option:nth-of-type(2) {
    border-radius: 0 6px 6px 0;
}

.cmp-region-selector__option:hover:not(.cmp-region-selector__option--active) {
    background: var(--surface-secondary-color);
    color: var(--text-color);
}

.cmp-region-selector__option--active {
    background: #0acf97;
    color: #fff;
    position: relative;
    z-index: 1;
}

.cmp-region-selector__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.cmp-region-selector__label {
    white-space: nowrap;
}

/* CMP Inputs */
.cmp-input,
.cmp-select,
.cmp-textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-color);
    background: var(--surface-color);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease;
}

.cmp-input:focus,
.cmp-select:focus,
.cmp-textarea:focus {
    outline: none;
    border-color: var(--nb-purple);
}

.cmp-select {
    padding-right: 2rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    cursor: pointer;
}

.cmp-textarea {
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

/* CMP Color Grid */
.cmp-color-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 480px) {
    .cmp-color-grid {
        grid-template-columns: 1fr;
    }
}

/* CMP Color Field */
.cmp-color-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cmp-color-field__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-color);
}

.cmp-color-field__input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cmp-color-field__input {
    width: 36px;
    height: 36px;
    padding: 2px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.cmp-color-field__input:hover {
    border-color: var(--nb-purple);
}

.cmp-color-field__value {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-muted-color);
    text-transform: uppercase;
}

.cmp-color-field--compact {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.cmp-color-field--compact .cmp-color-field__label {
    font-size: 0.7rem;
    white-space: nowrap;
}

.cmp-color-field--compact .cmp-color-field__input {
    width: 28px;
    height: 28px;
}

/* CMP Buttons Grid */
.cmp-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 800px) {
    .cmp-buttons-grid {
        grid-template-columns: 1fr;
    }
}

/* CMP Button Config Card */
.cmp-button-config {
    padding: 1rem;
    background: var(--surface-secondary-color);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.cmp-button-config__header {
    margin-bottom: 0.75rem;
}

.cmp-button-config__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 4px;
}

.cmp-button-config__badge--accept {
    background: #dcfce7;
    color: #166534;
}

.cmp-button-config__badge--reject {
    background: #fee2e2;
    color: #991b1b;
}

.cmp-button-config__badge--customize {
    background: #e0e7ff;
    color: #3730a3;
}

.cmp-button-config__field {
    margin-bottom: 0.75rem;
}

.cmp-button-config__field .cmp-field__label {
    font-size: 0.7rem;
    margin-bottom: 0.3rem;
}

.cmp-button-config__field .cmp-input {
    padding: 0.5rem 0.6rem;
    font-size: 0.8125rem;
}

.cmp-button-config__colors {
    display: flex;
    gap: 1rem;
}

.cmp-button-config__colors[hidden] {
    display: none;
}

/* CMP Form Actions */
.cmp-form__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.cmp-form__actions .button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cmp-form__actions .button svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Modal (matches space-icon-modal style)
   ========================================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal:not([hidden]) {
    opacity: 1;
    visibility: visible;
}

.modal[hidden] {
    display: none;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(500px, 100%);
    max-height: calc(100vh - 2rem);
    background: var(--card-background);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-lg);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.2s ease;
}

.modal:not([hidden]) .modal__dialog {
    transform: translateY(0) scale(1);
}

.modal__dialog--wide {
    width: min(850px, 100%);
}

.modal__dialog:focus {
    outline: none;
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: var(--border-brutal-thin);
    background: var(--nb-black);
}

.modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-family: var(--font-sans);
    color: var(--nb-white);
}

.modal__close {
    appearance: none;
    border: var(--border-brutal-thin);
    background: var(--surface-color);
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}

.modal__close:hover {
    background: var(--danger-color-light);
}

.modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* ==========================================================================
   Policy Editor Modal
   ========================================================================== */

.policy-editor .modal__body {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.policy-editor__form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.policy-editor__hint {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--text-muted-color);
    background: var(--surface-secondary-color);
    border-top: 1px solid var(--border-color);
}

.policy-editor__actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.25rem 2rem;
    border-top: var(--border-brutal-thin);
}

.policy-editor__lang-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}

.policy-editor__lang-tab {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-muted-color);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.policy-editor__lang-tab:hover {
    color: var(--text-color);
}

.policy-editor__lang-tab--active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.policy-editor__lang-tab-code {
    font-weight: 700;
    font-size: 0.6875rem;
    padding: 0.125rem 0.3rem;
    background: var(--surface-secondary-color);
    border-radius: 3px;
    text-transform: uppercase;
}

.policy-editor__lang-tab--active .policy-editor__lang-tab-code {
    background: var(--primary-color-light);
    color: var(--primary-color);
}

.policy-editor__lang-tab-name {
    display: none;
}

@media (min-width: 480px) {
    .policy-editor__lang-tab-name {
        display: inline;
    }
}

.policy-editor__panels {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.policy-editor__panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.policy-editor__panel[hidden] {
    display: none;
}

.policy-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    border-bottom: var(--border-brutal-thin);
    background: #e5e7eb;
}

.policy-editor__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.policy-editor__tool:hover {
    background: var(--nb-white);
    transform: translateY(-1px);
}

.policy-editor__tool:active {
    background: var(--surface-muted-color);
    transform: translateY(0);
}

.policy-editor__tool svg {
    width: 16px;
    height: 16px;
}

.policy-editor__link-wrapper {
    position: relative;
}

.policy-editor__link-popover {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: 0.5rem;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-brutal);
    z-index: 10;
    overflow: hidden;
}

.policy-editor__link-popover[hidden] {
    display: none;
}

.policy-editor__link-input {
    width: 200px;
    padding: 0.5rem 0.75rem;
    border: none;
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    background: transparent;
}

.policy-editor__link-input:focus {
    outline: none;
}

.policy-editor__link-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    border: none;
    border-left: var(--border-brutal-thin);
    background: var(--primary-color);
    color: var(--nb-white);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.policy-editor__link-apply:hover {
    background: var(--nb-red);
}

.policy-editor__content {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    min-height: 200px;
    max-height: 60vh;
    line-height: 1.6;
    font-size: 0.9375rem;
}

.policy-editor__content:focus {
    outline: none;
}

.policy-editor__content h1,
.policy-editor__content h2,
.policy-editor__content h3 {
    margin: 1rem 0 0.5rem;
    font-family: var(--font-sans);
}

.policy-editor__content h1:first-child,
.policy-editor__content h2:first-child,
.policy-editor__content h3:first-child {
    margin-top: 0;
}

.policy-editor__content p {
    margin: 0 0 0.75rem;
}

.policy-editor__content ul,
.policy-editor__content ol {
    margin: 0 0 0.75rem;
    padding-left: 1.5rem;
}

.policy-editor__content a {
    color: var(--primary-color);
    text-decoration: underline;
}

/* CMP Language Tabs */
.cmp-lang-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.cmp-lang-tabs__tab {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-color-muted);
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.cmp-lang-tabs__tab:hover {
    color: var(--text-color);
}

.cmp-lang-tabs__tab--active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.cmp-lang-tabs__code {
    font-weight: 700;
    font-size: 0.6875rem;
    padding: 0.125rem 0.3rem;
    background: var(--surface-secondary-color);
    border-radius: 3px;
}

.cmp-lang-tabs__tab--active .cmp-lang-tabs__code {
    background: var(--primary-color-light);
    color: var(--primary-color);
}

.cmp-lang-tabs__name {
    display: none;
}

@media (min-width: 480px) {
    .cmp-lang-tabs__name {
        display: inline;
    }
}

.cmp-lang-panels {
    display: flex;
    flex-direction: column;
}

.cmp-lang-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cmp-lang-panel[hidden] {
    display: none;
}

/* CMP Button Labels (inline with badge) */
.cmp-button-labels {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.cmp-button-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cmp-button-label__badge {
    flex-shrink: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 4px;
    min-width: 70px;
    text-align: center;
}

.cmp-button-label__badge--accept {
    background: rgba(10, 207, 151, 0.12);
    color: #0acf97;
}

.cmp-button-label__badge--reject {
    background: rgba(250, 92, 124, 0.12);
    color: #fa5c7c;
}

.cmp-button-label__badge--customize {
    background: rgba(57, 175, 209, 0.12);
    color: #39afd1;
}

.cmp-button-label .cmp-input {
    flex: 1;
}

/* CMP Button config colors-only variant */
.cmp-button-config--colors-only {
    padding: 0.75rem;
    background: none;
    border: none;
}

.cmp-button-config--colors-only .cmp-button-config__colors {
    margin-top: 0.5rem;
}

/* CMP Preview (matches public site CMP styling) */
.cmp-preview {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2.5rem);
    z-index: 10000;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Position: Centered */
.cmp-preview[data-cmp-position="centered"] {
    align-items: center;
    pointer-events: auto;
}

.cmp-preview[data-cmp-position="centered"] .cmp-preview__overlay {
    background-color: rgba(15, 23, 42, 0.55);
}

/* Position: Bottom */
.cmp-preview[data-cmp-position="bottom"] .cmp-preview__dialog {
    width: min(100%, 48rem);
    border-radius: 20px 20px 0 0;
}

/* Position: Bottom Right */
.cmp-preview[data-cmp-position="bottom_right"] {
    justify-content: flex-end;
}

.cmp-preview[data-cmp-position="bottom_right"] .cmp-preview__dialog {
    width: min(100%, 26rem);
}

.cmp-preview__overlay {
    position: absolute;
    inset: 0;
    background-color: transparent;
    pointer-events: auto;
    cursor: pointer;
}

.cmp-preview__dialog {
    position: relative;
    pointer-events: auto;
    background-color: var(--cmp-background, #ffffff);
    color: var(--cmp-text, #1f2933);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.22);
    border: 1px solid rgba(15, 23, 42, 0.08);
    max-width: 32rem;
    width: min(100%, 32rem);
    display: grid;
    gap: 1.25rem;
}

.cmp-preview__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(15, 23, 42, 0.08);
    border-radius: 50%;
    cursor: pointer;
    color: var(--cmp-text, #1f2933);
    transition: background-color 0.15s ease;
}

.cmp-preview__close:hover {
    background: rgba(15, 23, 42, 0.15);
}

.cmp-preview__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    padding-right: 2.5rem;
}

.cmp-preview__message {
    margin: 0;
    line-height: 1.6;
    color: inherit;
    opacity: 0.85;
}

.cmp-preview__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cmp-preview__button {
    border: none;
    border-radius: 999px;
    padding: 0.75rem 1.6rem;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cmp-preview__button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.cmp-preview__button--accept {
    background-color: var(--cmp-accept-bg, #1f2933);
    color: var(--cmp-accept-text, #ffffff);
}

.cmp-preview__button--reject {
    background-color: var(--cmp-reject-bg, #f3f4f6);
    color: var(--cmp-reject-text, #1f2933);
}

.cmp-preview__button--customize {
    background-color: var(--cmp-customize-bg, #ffffff);
    color: var(--cmp-customize-text, #1f2933);
    border: 1px solid rgba(15, 23, 42, 0.15);
}

/* ==========================================================================
   Color Picker Modal
   ========================================================================== */

.design-color-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.design-color-modal[hidden] {
    display: none;
}

.design-color-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.design-color-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 620px;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-lg);
    box-shadow: 
        8px 8px 0 0 rgba(0, 0, 0, 0.15),
        0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    animation: colorModalIn 0.2s ease-out;
}

@keyframes colorModalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.design-color-modal__header {
    position: relative;
    padding: 1rem 1.25rem;
    background: var(--nb-black);
    color: var(--nb-white);
}

.design-color-modal__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--nb-white);
}

.design-color-modal__subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    opacity: 0.7;
    font-weight: 400;
}

.design-color-modal__close {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    color: var(--nb-black);
    cursor: pointer;
    transition: background 0.15s ease;
}

.design-color-modal__close svg {
    flex-shrink: 0;
}

.design-color-modal__close:hover {
    background: var(--danger-color-light);
}

.design-color-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Mode Toggle (Solid/Gradient) */
.design-color-modal__modes {
    display: flex;
    background: var(--surface-secondary-color);
    border-radius: var(--radius-md);
    padding: 4px;
    gap: 4px;
}

.design-color-modal__mode {
    flex: 1;
    padding: 0.625rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.design-color-modal__mode:hover:not(.is-active) {
    color: var(--text-color);
    background: rgba(0, 0, 0, 0.03);
}

.design-color-modal__mode.is-active {
    background: var(--nb-white);
    color: var(--nb-black);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Panel Sections */
.design-color-modal__panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.design-color-modal__panel[hidden] {
    display: none;
}

/* Form Fields */
.design-color-modal__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.design-color-modal__field > span {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Color Picker Input */
.design-color-modal__field input[type="color"] {
    width: 100%;
    height: 120px;
    padding: 0;
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: transparent;
}

.design-color-modal__field input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 8px;
}

.design-color-modal__field input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: var(--radius-sm);
}

.design-color-modal__field input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: var(--radius-sm);
}

/* Text Input */
.design-color-modal__field input[type="text"],
.design-color-modal__field input[type="number"] {
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    background: var(--surface-color);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.design-color-modal__field input[type="text"]:focus,
.design-color-modal__field input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

/* Range Slider */
.design-color-modal__field input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #d1d5db;
    border-radius: 4px;
    cursor: pointer;
}

.design-color-modal__field input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--nb-black);
    border: 3px solid var(--nb-white);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: grab;
    transition: transform 0.1s ease;
}

.design-color-modal__field input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.design-color-modal__field input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--nb-black);
    border: 3px solid var(--nb-white);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: grab;
}

.design-color-modal__field output {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted-color);
    text-align: right;
    min-width: 3rem;
}

/* Field with range and output */
.design-color-modal__field:has(input[type="range"]) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.design-color-modal__field:has(input[type="range"]) > span {
    width: 100%;
    margin-bottom: 0.25rem;
}

.design-color-modal__field:has(input[type="range"]) input[type="range"] {
    flex: 1;
}

/* Split Layout for Gradient Stop Editor */
.design-color-modal__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.design-color-modal__split .design-color-modal__field:first-child {
    grid-column: 1 / -1;
}

.design-color-modal__split .design-color-modal__field:first-child input[type="color"] {
    height: 60px;
}

.design-color-modal__split .design-color-modal__field:first-child input[type="text"] {
    margin-top: 0.5rem;
}

/* Gradient Editor Track */
.design-gradient-editor {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.design-gradient-editor__track {
    position: relative;
    height: 48px;
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-md);
    cursor: crosshair;
    background: linear-gradient(90deg, #f97316 0%, #fb7185 100%);
}

.design-gradient-editor__track::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: calc(var(--radius-md) - 2px);
    background-image: 
        linear-gradient(45deg, #e5e5e5 25%, transparent 25%),
        linear-gradient(-45deg, #e5e5e5 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e5e5e5 75%),
        linear-gradient(-45deg, transparent 75%, #e5e5e5 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
}

.design-gradient-editor__stop {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: currentColor;
    border: 3px solid var(--nb-white);
    border-radius: 50%;
    box-shadow:
        0 0 0 2px var(--nb-black),
        0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: grab;
    z-index: 1;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    overflow: hidden;
}

.design-gradient-editor__stop:hover,
.design-gradient-editor__stop:focus {
    transform: translate(-50%, -50%) scale(1.15);
    outline: none;
}

.design-gradient-editor__stop.is-active {
    box-shadow: 
        0 0 0 2px var(--primary-color),
        0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.design-gradient-editor__stop:active {
    cursor: grabbing;
}

.design-gradient-editor__hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted-color);
    text-align: center;
}

.design-gradient-editor__stop-picker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Gradient Stops List */
.design-gradient-stops {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.design-gradient-stops__item {
    display: grid;
    grid-template-columns: 36px 1fr 80px 80px auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.625rem;
    background: var(--surface-secondary-color);
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.design-gradient-stops__item:hover {
    background: var(--surface-color);
    border-color: var(--border-color);
}

.design-gradient-stops__item.is-selected {
    background: var(--primary-color-light);
    border-color: var(--primary-color);
}

.design-gradient-stops__color {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--nb-black);
    flex-shrink: 0;
    cursor: pointer;
}

.design-gradient-stops__color::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d1d5db 75%),
        linear-gradient(-45deg, transparent 75%, #d1d5db 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    border-radius: calc(var(--radius-sm) - 2px);
    z-index: 0;
}

.design-gradient-stops__color-fill {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: calc(var(--radius-sm) - 2px);
}

.design-gradient-stops__popover {
    position: fixed;
    padding: 8px;
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1100;
}

.design-gradient-stops__popover[hidden] {
    display: none;
}

.design-gradient-stops__palette {
    display: grid;
    grid-template-columns: repeat(10, 20px);
    gap: 3px;
    margin-bottom: 8px;
}

.design-gradient-stops__palette-color {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.1s ease;
}

.design-gradient-stops__palette-color:hover {
    transform: scale(1.2);
    border-color: var(--nb-black);
    z-index: 1;
}

.design-gradient-stops__custom-row {
    display: flex;
    gap: 4px;
}

.design-gradient-stops__custom-input {
    flex: 1;
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: var(--surface-color);
}

.design-gradient-stops__custom-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.design-gradient-stops__hex {
    width: 100%;
    min-width: 0;
    padding: 0.3125rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: var(--surface-color);
}

.design-gradient-stops__hex:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color-light);
}

.design-gradient-stops__opacity,
.design-gradient-stops__position {
    width: 100%;
    padding: 0.3125rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: var(--surface-color);
}

.design-gradient-stops__opacity:focus,
.design-gradient-stops__position:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color-light);
}

.design-gradient-stops__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-xs);
    color: var(--text-muted-color);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.design-gradient-stops__remove:hover {
    background: var(--danger-color-light);
    color: var(--danger-color);
}

.design-gradient-stops__remove:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.design-gradient-stops__remove:disabled:hover {
    background: transparent;
    color: var(--text-muted-color);
}

.design-gradient-stops__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem;
    background: transparent;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted-color);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.design-gradient-stops__add:hover {
    background: var(--surface-secondary-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.design-gradient-stops__add svg {
    flex-shrink: 0;
}

.design-gradient-stops__header {
    display: grid;
    grid-template-columns: 36px 1fr 80px 80px auto;
    gap: 0.5rem;
    padding: 0 0.75rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-color);
}

.design-gradient-stops__header span:first-child {
    grid-column: span 2;
}

/* Gradient Stop Remove Button (legacy) */
.design-gradient-stop-remove {
    align-self: flex-start;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--danger-color);
}

.design-gradient-stop-remove:hover {
    background: var(--danger-color-light);
}

/* Result Preview Area */
.design-color-modal__result {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface-secondary-color);
    border-radius: var(--radius-md);
}

.design-color-modal__result-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-color);
}

.design-color-modal__result-swatch {
    position: relative;
    height: 80px;
    border-radius: var(--radius-md);
    border: 2px solid var(--nb-black);
    overflow: hidden;
    /* Checkerboard pattern for transparency */
    background-image:
        linear-gradient(45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d1d5db 75%),
        linear-gradient(-45deg, transparent 75%, #d1d5db 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #ffffff;
}

.design-color-modal__result-color {
    position: absolute;
    inset: 0;
    /* Color is set via JavaScript */
}

/* Footer */
.design-color-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--surface-secondary-color);
    border-top: 1px solid var(--border-color);
}

.design-color-modal__footer .button {
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.design-color-modal__footer .button svg {
    flex-shrink: 0;
}

.design-color-modal__footer .button--secondary {
    background: var(--nb-black);
    color: var(--nb-white);
    border-color: var(--nb-black);
}

.design-color-modal__footer .button--secondary:hover {
    background: #333;
}

/* Mode Button Icons */
.design-color-modal__mode {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.design-color-modal__mode svg {
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.design-color-modal__mode.is-active svg {
    opacity: 1;
}

/* Improved color picker wrapper */
.design-color-modal__picker-wrapper {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Custom value field styling */
.design-color-modal__field input[type="text"]::placeholder {
    color: var(--text-muted-color);
    opacity: 0.5;
}

/* Angle slider - use grey background like opacity sliders */
.design-color-modal__field input[type="range"][data-design-gradient-angle] {
    background: #d1d5db;
}

/* Responsive adjustments */
@media (max-width: 500px) {
    .design-color-modal__dialog {
        max-height: calc(100vh - 1rem);
        margin: 0.5rem;
    }
    
    .design-color-modal__split {
        grid-template-columns: 1fr;
    }
    
    .design-color-modal__modes {
        flex-direction: column;
    }
    
    .design-color-modal__footer {
        flex-direction: column;
    }
    
    .design-color-modal__footer .button {
        width: 100%;
    }
}

/* ==========================================================================
   Press Lists
   ========================================================================== */

.press-lists {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.press-lists__card {
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.press-lists__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-brutal-sm);
}

.press-lists__card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.press-lists__card-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.press-lists__card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong-color);
    line-height: 1.3;
}

.press-lists__card-slug {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    color: var(--text-muted-color);
    background: var(--surface-muted-color);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-xs);
    width: fit-content;
}

.press-lists__card-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.press-lists__card-action {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted-color);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
}

.press-lists__card-action:hover {
    background: var(--surface-alt-color);
    color: var(--text-strong-color);
}

.press-lists__card-action--danger:hover {
    background: var(--danger-color-light);
    color: var(--danger-color);
}

.press-lists__card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.press-lists__avatars {
    display: flex;
    align-items: center;
}

.press-lists__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
    border: 2px solid var(--nb-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-left: -8px;
    position: relative;
}

.press-lists__avatar:first-child {
    margin-left: 0;
}

.press-lists__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.press-lists__avatar span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--nb-white);
    text-transform: uppercase;
}

.press-lists__avatar--more {
    background: var(--surface-alt-color);
    border-color: var(--nb-white);
}

.press-lists__avatar--more span {
    font-size: 0.65rem;
    color: var(--text-muted-color);
}

.press-lists__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.press-lists__count {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.press-lists__count svg {
    flex-shrink: 0;
}

.press-lists__add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 120px;
    background: var(--surface-muted-color);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-muted-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.press-lists__add:hover {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
    color: var(--primary-color);
}

.press-lists__add svg {
    width: 24px;
    height: 24px;
}

.press-lists__add span {
    font-weight: 600;
    font-size: 0.875rem;
}

/* Press Lists Modal */
.press-lists-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.press-lists-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.press-lists-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 2rem);
    background: var(--surface-color);
    border: 3px solid var(--nb-black);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-brutal);
}

/* Large modal variant */
.press-lists-modal--large .press-lists-modal__dialog {
    max-width: 1400px;
    height: calc(100vh - 3rem);
    max-height: 900px;
}

.press-lists-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--nb-black);
    color: var(--nb-white);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.press-lists-modal__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--nb-white);
}

.press-lists-modal__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--nb-white);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.press-lists-modal__close:hover {
    opacity: 1;
}

.press-lists-modal__body {
    flex: 1;
    overflow: hidden;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

.press-lists-modal__form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
    min-height: 0;
}

.press-lists-modal__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.press-lists-modal__summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: var(--primary-color-light);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-strong-color);
}

.press-lists-modal__summary svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.press-lists-modal__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    flex: 1;
    min-height: 0;
}

.press-lists-modal__columns--three {
    grid-template-columns: 1fr 1fr 1fr;
}

.press-lists-modal__column {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.press-lists-modal__section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
}

.press-lists-modal__section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-strong-color);
}

.press-lists-modal__section-description {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.press-lists-modal__search {
    position: relative;
    margin-bottom: 0.5rem;
}

.press-lists-modal__search::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: 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='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.press-lists-modal__search input {
    width: 100%;
    padding: 0.375rem 0.5rem 0.375rem 1.75rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-color);
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease;
}

.press-lists-modal__search input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.press-lists-modal__search input::placeholder {
    color: var(--text-muted-color);
}

.press-lists-modal__items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--surface-muted-color);
    border-radius: var(--radius-md);
}

.press-lists-modal__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-color);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.press-lists-modal__item:hover {
    border-color: var(--border-color);
}

.press-lists-modal__item.is-selected {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
}

.press-lists-modal__item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.press-lists-modal__item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
    border: 2px solid var(--nb-black);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.press-lists-modal__item-avatar--company {
    border-radius: 50%;
}

.press-lists-modal__item-avatar--media {
    border-radius: var(--radius-sm);
    background: var(--surface-alt-color);
}

.press-lists-modal__item-avatar--media img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.press-lists-modal__item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.press-lists-modal__item-avatar span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--nb-white);
    text-transform: uppercase;
}

.press-lists-modal__item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.press-lists-modal__item-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-strong-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.press-lists-modal__item-meta {
    font-size: 0.75rem;
    color: var(--text-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.press-lists-modal__loading,
.press-lists-modal__empty,
.press-lists-modal__error {
    text-align: center;
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--text-muted-color);
    margin: 0;
}

.press-lists-modal__error {
    color: var(--danger-color);
}

.press-lists-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 2px solid var(--border-color);
}

@media (max-width: 1200px) {
    .press-lists-modal__columns--three {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .press-lists-modal__columns,
    .press-lists-modal__columns--three {
        grid-template-columns: 1fr;
    }

    .press-lists-modal__items {
        max-height: 200px;
    }
}

@media (max-width: 640px) {
    .press-lists {
        grid-template-columns: 1fr;
    }

    .press-lists-modal__form-row {
        grid-template-columns: 1fr;
    }

    .press-lists-modal__dialog {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .press-lists-modal__footer {
        flex-direction: column;
    }

    .press-lists-modal__footer .button {
        width: 100%;
    }
}

/* ==========================================================================
   Team Members & User Medias Styles
   ========================================================================== */

/* Team Members List (Media Edit - Team Tab) */
.team-members {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.team-members__search {
    position: relative;
    margin-bottom: 1rem;
}

.team-members__search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--surface-color);
}

.team-members__search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.team-members__search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 0.25rem;
}

.team-members__search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.team-members__search-item:hover {
    background: var(--surface-muted-color);
}

.team-members__search-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.team-members__search-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-members__search-item-avatar span {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--nb-white);
}

.team-members__search-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.team-members__search-item-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-strong-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-members__search-item-email {
    font-size: 0.8rem;
    color: var(--text-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-members__search-add {
    margin-left: auto;
    color: var(--text-muted-color);
    flex-shrink: 0;
}

.team-members__search-item:hover .team-members__search-add {
    color: var(--primary-color);
}

.team-members__search-empty {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted-color);
    font-size: 0.9rem;
}

.team-members__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.team-members__empty {
    color: var(--text-muted-color);
    font-size: 0.9rem;
    padding: 1.5rem;
    text-align: center;
    background: var(--surface-muted-color);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-subtle-color);
}

.team-members__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f0f0f0;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

:root[data-theme="dark"] .team-members__item {
    background: var(--surface-muted-color);
}

.team-members__item-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.team-members__item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.team-members__item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-members__item-avatar span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--nb-white);
}

.team-members__item-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.team-members__item-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-strong-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-members__item-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted-color);
    flex-wrap: wrap;
}

.team-members__item-job {
    font-weight: 500;
}

.team-members__item-dates {
    opacity: 0.8;
}

.team-members__item-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.team-members__item-btn {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-muted-color);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.team-members__item-btn:hover {
    color: var(--text-color);
    background: rgba(0, 0, 0, 0.05);
}

.team-members__item-btn--danger:hover {
    color: var(--danger-color);
    background: var(--danger-color-light);
}

/* Two-step delete for team members */
.team-members__delete-action {
    display: flex;
    align-items: center;
}

.team-members__confirm-btn {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.team-members__confirm-btn--yes {
    background: var(--danger-color);
    color: white;
}

.team-members__confirm-btn--yes:hover {
    background: var(--danger-color-hover);
}

/* Team Modal (same structure as feed-modal) */
.team-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.team-modal[data-visible="true"] {
    display: flex;
}

.team-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.team-modal__dialog {
    position: relative;
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-lg);
    width: 100%;
    max-width: 580px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.team-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--nb-black);
    border-bottom: 2px solid var(--nb-black);
}

.team-modal__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.team-modal__close {
    appearance: none;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
}

.team-modal__close:hover {
    color: #fff;
}

.team-modal__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.team-modal__user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-muted-color);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle-color);
}

.team-modal__user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.team-modal__user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-modal__user-details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.team-modal__user-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-strong-color);
}

.team-modal__user-email {
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.team-modal__error {
    color: var(--danger-color);
    font-size: 0.9rem;
    margin: 0;
    padding: 0.75rem;
    background: var(--danger-color-light);
    border-radius: var(--radius-sm);
}

.team-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 2px solid var(--border-color);
}

.release-create-modal__body {
    padding: 1.25rem;
}

.release-create-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 2px solid var(--border-color);
}

/* Date fields for month/year selectors */
.date-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.date-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.date-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-strong-color);
}

.date-field__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-strong-color);
}

.date-field__inputs {
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: 0.5rem;
}

.date-field__inputs select,
.date-field__inputs input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--surface-color);
    color: var(--text-color);
}

.date-field__inputs select {
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    appearance: none;
    -webkit-appearance: none;
}

.date-field__inputs select:focus,
.date-field__inputs input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.date-field__hint {
    font-size: 0.75rem;
    color: var(--text-muted-color);
    margin-top: 0.25rem;
}

.date-field__help {
    font-size: 0.8rem;
    color: var(--text-muted-color);
    grid-column: 1 / -1;
}

/* User Medias Section (User Edit page) */
.user-medias {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-medias__search {
    position: relative;
    margin-bottom: 1rem;
}

.user-medias__search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--surface-color);
}

.user-medias__search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.user-medias__search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 0.25rem;
}

.user-medias__search-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.user-medias__search-item:hover {
    background: var(--surface-muted-color);
}

.user-medias__search-item-favicon {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: var(--surface-muted-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.user-medias__search-item-favicon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.user-medias__search-item-favicon span {
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--text-muted-color);
}

.user-medias__search-item-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-strong-color);
    white-space: nowrap;
}

.user-medias__search-item-url {
    font-size: 0.75rem;
    color: var(--text-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.user-medias__search-add {
    margin-left: auto;
    color: var(--text-muted-color);
    flex-shrink: 0;
}

.user-medias__search-item:hover .user-medias__search-add {
    color: var(--primary-color);
}

.user-medias__search-empty {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted-color);
    font-size: 0.9rem;
}

.user-medias__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.user-medias__empty {
    color: var(--text-muted-color);
    font-size: 0.9rem;
    padding: 0.5rem 0;
    margin: 0;
}

.user-medias__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f0f0f0;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

:root[data-theme="dark"] .user-medias__item {
    background: var(--surface-muted-color);
}

.user-medias__item-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.user-medias__item-favicon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    border: 1px solid var(--border-subtle-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.user-medias__item-favicon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.user-medias__item-favicon span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted-color);
}

.user-medias__item-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

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

.user-medias__item-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted-color);
    flex-wrap: wrap;
}

.user-medias__item-job {
    font-weight: 500;
}

.user-medias__item-dates {
    opacity: 0.8;
}

.user-medias__item-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.user-medias__item-btn {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-muted-color);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.user-medias__item-btn:hover {
    color: var(--text-color);
    background: rgba(0, 0, 0, 0.05);
}

.user-medias__item-btn--danger:hover {
    color: var(--danger-color);
    background: var(--danger-color-light);
}

/* Two-step delete for user medias */
.user-medias__item-delete {
    display: flex;
    align-items: center;
}

.user-medias__confirm-btn {
    appearance: none;
    border: none;
    background: var(--danger-color);
    color: white;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.user-medias__confirm-btn:hover {
    background: var(--danger-color-hover);
}

/* User Medias Modal (same structure as team-modal) */
.user-medias-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.user-medias-modal[data-visible="true"] {
    display: flex;
}

.user-medias-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.user-medias-modal__dialog {
    position: relative;
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-lg);
    width: 100%;
    max-width: 580px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.user-medias-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--nb-black);
    border-bottom: 2px solid var(--nb-black);
}

.user-medias-modal__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.user-medias-modal__close {
    appearance: none;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
}

.user-medias-modal__close:hover {
    color: #fff;
}

.user-medias-modal__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-medias-modal__media-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-muted-color);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle-color);
}

.user-medias-modal__media-favicon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.user-medias-modal__media-favicon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.user-medias-modal__media-favicon span {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted-color);
}

.user-medias-modal__media-details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.user-medias-modal__media-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-strong-color);
}

.user-medias-modal__media-url {
    font-size: 0.75rem;
    color: var(--text-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-medias-modal__error {
    color: var(--danger-color);
    font-size: 0.9rem;
    margin: 0;
    padding: 0.75rem;
    background: var(--danger-color-light);
    border-radius: var(--radius-sm);
}

.user-medias-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 2px solid var(--border-color);
}

/* ==========================================================================
   Help Center Section
   ========================================================================== */

.help-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--card-gap);
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: 0 var(--layout-gutter);
}

@media (max-width: 900px) {
    .help-layout {
        grid-template-columns: 1fr;
    }
}

/* Help Sidebar */
.help-sidebar {
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-sm);
    padding: 0;
    position: sticky;
    top: calc(var(--topbar-height) + 1.5rem);
    max-height: calc(100vh - var(--topbar-height) - 3rem);
    overflow-y: auto;
}

@media (max-width: 900px) {
    .help-sidebar {
        position: static;
        max-height: none;
    }

    /* On mobile, show content before sidebar (except on help home) */
    .help-layout:not(.help-layout--home) .help-sidebar {
        order: 2;
    }

    .help-layout:not(.help-layout--home) .help-content {
        order: 1;
    }
}

.help-sidebar__header {
    padding: 1rem 1.25rem;
    border-bottom: 2px solid var(--border-subtle-color);
}

.help-sidebar__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-color);
}

.help-sidebar__nav {
    padding: 0.5rem 0;
}

.help-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.help-sidebar__item {
    margin: 0;
}

.help-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.help-sidebar__link:hover {
    background-color: var(--sidebar-item-hover);
    text-decoration: none;
}

.help-sidebar__link--active {
    background-color: var(--primary-color);
    color: var(--primary-color-contrast);
}

.help-sidebar__link--active:hover {
    background-color: var(--primary-color-hover);
}

.help-sidebar__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.help-sidebar__icon svg {
    width: 100%;
    height: 100%;
}

.help-sidebar__text {
    flex: 1;
    min-width: 0;
}

.help-sidebar__count {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    background: var(--surface-muted-color);
    border-radius: var(--radius-full);
    color: var(--text-muted-color);
}

.help-sidebar__link--active .help-sidebar__count {
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
}

.help-sidebar__search {
    padding: 1rem 1.25rem;
    border-top: 2px solid var(--border-subtle-color);
}

.help-search-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.help-search-form__field {
    position: relative;
}

.help-search-form__icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted-color);
    pointer-events: none;
}

.help-search-form__input {
    width: 100%;
    padding: 0.625rem 0.75rem 0.625rem 2.25rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--surface-color);
    color: var(--text-color);
}

.help-search-form__input:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Help Content Area */
.help-content {
    min-width: 0;
}

/* Help Hero (Index Page) */
.help-hero {
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brutal);
    padding: 2.5rem;
    text-align: center;
    margin-bottom: var(--card-gap);
}

.help-hero__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    color: var(--primary-color);
}

.help-hero__icon svg {
    width: 100%;
    height: 100%;
}

.help-hero__title {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
    font-weight: 800;
}

.help-hero__description {
    margin: 0 0 1.5rem;
    color: var(--text-muted-color);
    font-size: 1rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.help-hero__search {
    display: flex;
    gap: 0.75rem;
    max-width: 500px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .help-hero__search {
        flex-direction: column;
    }
}

.help-hero__search-field {
    position: relative;
    flex: 1;
}

.help-hero__search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-muted-color);
    pointer-events: none;
}

.help-hero__search-input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: var(--surface-color);
    color: var(--text-color);
}

.help-hero__search-input:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Help Sections */
.help-section {
    margin-bottom: 2rem;
}

.help-section__title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Help Category Grid */
.help-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--card-gap);
}

.help-category-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-sm);
    text-decoration: none;
    color: var(--text-color);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.help-category-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal);
    text-decoration: none;
}

.help-category-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.help-category-card__icon svg {
    width: 100%;
    height: 100%;
}

.help-category-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-strong-color);
}

.help-category-card__description {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted-color);
    flex: 1;
}

.help-category-card__count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted-color);
}

/* Help Article Grid (Featured) */
.help-article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--card-gap);
}

.help-article-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-sm);
    text-decoration: none;
    color: var(--text-color);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.help-article-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal);
    text-decoration: none;
}

.help-article-card--featured {
    border-left: 4px solid var(--primary-color);
}

.help-article-card__category {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.help-article-card__title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong-color);
}

.help-article-card__summary {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted-color);
    flex: 1;
}

.help-article-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
}

.help-article-card__link svg {
    width: 16px;
    height: 16px;
}

/* Help Category Header */
.help-category-header {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brutal);
    margin-bottom: var(--card-gap);
}

.help-category-header__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    color: var(--primary-color);
}

.help-category-header__icon svg {
    width: 100%;
    height: 100%;
}

.help-category-header__content {
    flex: 1;
    min-width: 0;
}

.help-category-header__title {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 800;
}

.help-category-header__description {
    margin: 0;
    color: var(--text-muted-color);
}

/* Help Articles List */
.help-articles-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.help-article-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-sm);
    text-decoration: none;
    color: var(--text-color);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.help-article-item:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal);
    text-decoration: none;
}

.help-article-item__content {
    flex: 1;
    min-width: 0;
}

.help-article-item__title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.help-article-item__badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--primary-color);
    color: var(--primary-color-contrast);
    border-radius: var(--radius-full);
}

.help-article-item__summary {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted-color);
}

.help-article-item__arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--text-muted-color);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.help-article-item:hover .help-article-item__arrow {
    transform: translateX(4px);
    color: var(--primary-color);
}

/* Help Article Page */
.help-article {
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brutal);
    overflow: hidden;
}

.help-article__header {
    padding: 2rem;
    border-bottom: 2px solid var(--border-subtle-color);
}

.help-article__category {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.help-article__category:hover {
    text-decoration: underline;
}

.help-article__category svg {
    width: 18px;
    height: 18px;
}

.help-article__title {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
    font-weight: 800;
}

.help-article__summary {
    margin: 0;
    font-size: 1.125rem;
    color: var(--text-muted-color);
}

.help-article__body {
    padding: 2rem;
    font-size: 1rem;
    line-height: 1.7;
}

.help-article__body h2 {
    margin: 2rem 0 1rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.help-article__body h2:first-child {
    margin-top: 0;
}

.help-article__body h3 {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.help-article__body p {
    margin: 0 0 1rem;
}

.help-article__body ul,
.help-article__body ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.help-article__body li {
    margin-bottom: 0.5rem;
}

.help-article__body code {
    padding: 0.125rem 0.375rem;
    background: var(--surface-muted-color);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: 0.875em;
}

.help-article__body pre {
    margin: 0 0 1rem;
    padding: 1rem;
    background: var(--surface-muted-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

.help-article__body pre code {
    padding: 0;
    background: transparent;
}

.help-article__body img {
    max-width: 100%;
    height: auto;
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    margin: 1rem 0;
}

/* Help Steps (Numbered Instructions) */
.help-steps {
    counter-reset: step-counter;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.help-steps li {
    position: relative;
    padding-left: 3rem;
    margin-bottom: 1.25rem;
    counter-increment: step-counter;
}

.help-steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--primary-color-contrast);
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-color);
}

/* Help Callout Boxes */
.help-callout {
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: var(--radius-md);
    border-left: 4px solid;
}

.help-article__body .help-callout:last-child {
    margin-bottom: 0;
}

.help-callout--tip {
    background: var(--success-color-light);
    border-color: var(--success-color);
}

.help-callout--warning {
    background: var(--warning-color-light);
    border-color: var(--warning-color);
}

.help-callout--info {
    background: var(--nb-blue-light);
    border-color: var(--nb-blue);
}

.help-callout__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.help-callout--tip .help-callout__title {
    color: var(--success-color);
}

.help-callout--warning .help-callout__title {
    color: var(--warning-color);
}

.help-callout--info .help-callout__title {
    color: var(--nb-blue);
}

.help-callout__title svg {
    width: 18px;
    height: 18px;
}

.help-callout__content {
    margin: 0;
    font-size: 0.9rem;
}

/* Help Screenshot Placeholder */
.help-screenshot {
    margin: 1.5rem 0;
    padding: 3rem 1.5rem;
    background: var(--surface-muted-color);
    border: 2px dashed var(--border-subtle-color);
    border-radius: var(--radius-md);
    text-align: center;
}

.help-screenshot__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted-color);
}

.help-screenshot__placeholder svg {
    width: 48px;
    height: 48px;
    opacity: 0.5;
}

.help-screenshot__label {
    font-size: 0.875rem;
    font-style: italic;
}

/* Help Article Footer */
.help-article__footer {
    padding: 1.5rem 2rem;
    background: var(--surface-muted-color);
    border-top: 2px solid var(--border-subtle-color);
}

.help-article__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
    .help-article__nav {
        grid-template-columns: 1fr;
    }
}

.help-article__nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-color);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.help-article__nav-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal-xs);
    text-decoration: none;
}

.help-article__nav-link--prev {
    justify-content: flex-start;
}

.help-article__nav-link--next {
    justify-content: flex-end;
    text-align: right;
}

.help-article__nav-link--next:only-child {
    grid-column: 2;
}

@media (max-width: 600px) {
    .help-article__nav-link--next:only-child {
        grid-column: 1;
    }
}

.help-article__nav-link svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--text-muted-color);
}

.help-article__nav-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.help-article__nav-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-color);
}

.help-article__nav-title {
    font-weight: 600;
    color: var(--text-strong-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.help-article__feedback {
    text-align: center;
}

.help-article__feedback-text {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--text-muted-color);
}

.help-article__feedback-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.help-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 52px;
    padding: 0 2rem;
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    corner-shape: squircle;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    background-color: #fff;
    color: #000;
    line-height: 1;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: var(--shadow-brutal-sm);
}

.help-back-button:hover {
    transform: translate(-4px, -4px);
    box-shadow: var(--shadow-brutal);
    text-decoration: none;
    color: #000;
}

.help-back-button:active {
    transform: translate(0, 0);
    box-shadow: none;
}

.help-back-button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: #000;
}

/* Help Search Header */
.help-search-header {
    padding: 1.5rem;
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brutal);
    margin-bottom: var(--card-gap);
}

.help-search-header__title {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.help-search-header__count {
    margin: 0;
    color: var(--text-muted-color);
}

/* Help Search Results */
.help-search-results {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.help-search-result {
    display: block;
    padding: 1.25rem;
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-sm);
    text-decoration: none;
    color: var(--text-color);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.help-search-result:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal);
    text-decoration: none;
}

.help-search-result__category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.help-search-result__title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-strong-color);
}

.help-search-result__summary {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted-color);
}

.help-search-result__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
}

.help-search-result__link svg {
    width: 16px;
    height: 16px;
}

/* Help Empty State */
.help-empty {
    padding: 3rem 2rem;
    text-align: center;
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brutal);
}

.help-empty__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    color: var(--text-muted-color);
    opacity: 0.5;
}

.help-empty__title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.help-empty__text {
    margin: 0 0 1.5rem;
    color: var(--text-muted-color);
}

.help-empty__actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

/* ==========================================================================
   Release Editor
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Editor Card & Header
   -------------------------------------------------------------------------- */

.release-editor-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.release-editor-header__thumb {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    border: var(--border-brutal-thin);
    object-fit: cover;
    flex-shrink: 0;
}

.release-editor-header__info {
    min-width: 0;
    flex: 1;
}

.release-editor-header__title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.release-editor-header__title {
    margin: 0;
    flex: 1;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
}

.release-editor-header__slug {
    margin: 0.2rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.release-editor-header__slug-link {
    color: var(--text-muted-color);
    transition: color var(--transition-fast);
}

.release-editor-header__slug-link:hover {
    color: var(--primary-color);
}

.release-editor__panel {
    display: flex;
    flex-direction: column;
}

.release-editor__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem var(--card-padding);
    background: var(--surface-subtle-color);
    border-bottom: 1px solid var(--border-subtle-color);
}

.release-editor__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong-color);
    line-height: 1.4;
}

.release-editor__meta {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.release-editor__close {
    appearance: none;
    border: var(--border-brutal-thin);
    background: var(--surface-color);
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-color);
}

.release-editor__close:hover {
    background: var(--danger-color-light);
    text-decoration: none;
    color: var(--text-color);
}

/* --------------------------------------------------------------------------
   2. Message Bar
   -------------------------------------------------------------------------- */

.release-editor__message {
    padding: 0.75rem var(--card-padding);
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-subtle-color);
    animation: alertSlideIn 0.3s ease;
}

.release-editor__message[hidden] {
    display: none;
}

.release-editor__message--success {
    background: var(--success-color-light);
    color: #166534;
    border-color: var(--success-color);
}

.release-editor__message--error {
    background: var(--danger-color-light);
    color: #991b1b;
    border-color: var(--danger-color);
}

/* --------------------------------------------------------------------------
   3. Tab Navigation
   -------------------------------------------------------------------------- */

.release-editor__tabs-nav {
    display: flex;
    background: var(--nb-black);
    border-bottom: var(--border-brutal-thin);
}

.release-editor__tab-icon {
    flex-shrink: 0;
}

.release-editor__tab-button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    appearance: none;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    padding: 0 0.5rem;
    height: 2.25rem;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.release-editor__tab-button:last-child {
    border-right: none;
}

.release-editor__tab-button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.release-editor__tab-button--active {
    background: var(--primary-color);
    color: var(--primary-color-contrast);
}

.release-editor__tab-button--active:hover {
    background: var(--primary-color-hover);
    color: var(--primary-color-contrast);
}

.release-editor__tab[hidden] {
    display: none;
}

.release-editor__more-trigger {
    display: none;
}

.release-editor__tab {
    padding: var(--card-padding);
}

/* --------------------------------------------------------------------------
   4. Edit Tab Form
   -------------------------------------------------------------------------- */

.release-editor__form {
    display: flex;
    flex-direction: column;
}

#release-title {
    font-size: 1.0625rem;
    font-weight: 700;
}

.release-slug-field {
    display: flex;
    align-items: stretch;
}

.release-slug-field__lock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    flex-shrink: 0;
    appearance: none;
    border: 1px solid var(--nb-black);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--surface-muted-color);
    color: var(--text-muted-color);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.release-slug-field__lock:hover {
    background: var(--surface-subtle-color);
    color: var(--text-color);
}

.release-slug-field__lock[data-release-slug-locked="1"] .release-slug-field__icon--unlocked,
.release-slug-field__lock[data-release-slug-locked="0"] .release-slug-field__icon--locked {
    display: none;
}

.release-slug-field input {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.release-slug-field input[readonly] {
    background: var(--surface-muted-color);
    color: var(--text-muted-color);
}

.release-editor__form .form-group:last-of-type {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   5. WYSIWYG Editor
   -------------------------------------------------------------------------- */

.release-editor__wysiwyg {
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-brutal-xs);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
    position: relative;
    margin-top: 1.25rem;
    margin-bottom: 0;
}

.release-editor__wysiwyg:focus-within {
    box-shadow: var(--shadow-brutal-xs), 1px 1px 0 4px var(--nb-red-light);
}

.release-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 0.4rem;
    background: var(--nb-black);
    border-bottom: var(--border-brutal-thin);
}

.release-editor__toolbar-spacer {
    flex: 1;
}

.release-editor__tool {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: #fff;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.release-editor__tool:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.release-editor__tool:active,
.release-editor__tool--active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-color-contrast);
}

.release-editor__tool--disabled,
.release-editor__tool--disabled:hover {
    opacity: 0.3;
    cursor: default;
    background: transparent;
    border-color: transparent;
}

.release-editor__tool em {
    font-style: italic;
}

.release-editor__tool u {
    text-decoration: underline;
}

.release-editor__heading-dropdown {
    position: relative;
}

.release-editor__heading-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    background: var(--nb-black);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-xs);
    padding: 6px 2px 2px;
    gap: 2px;
    flex-direction: row;
    margin-top: -2px;
}

.release-editor__heading-dropdown:hover > .release-editor__heading-menu {
    display: flex;
}

.release-editor__heading-option {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: #fff;
    height: 30px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-xs);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.release-editor__heading-option:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.release-editor__heading-option:active,
.release-editor__heading-option--active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-color-contrast);
}

.release-editor__color-dropdown {
    position: relative;
}

.release-editor__color-indicator {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 3px;
    border-radius: 1px;
    background: #fff;
    pointer-events: none;
}

.release-editor__color-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: var(--nb-black);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-xs);
    padding: 6px;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: -2px;
    width: 208px;
}

.release-editor__color-dropdown:hover > .release-editor__color-menu {
    display: flex;
}

.release-editor__color-swatch {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.release-editor__color-swatch:hover {
    border-color: #fff;
    transform: scale(1.15);
}

.release-editor__color-swatch--remove {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
}

.release-editor__color-swatch--remove:hover {
    color: #fff;
}

.release-editor__color-swatch--custom {
    background: conic-gradient(
        #dc2626, #ea580c, #ca8a04, #16a34a,
        #0891b2, #2563eb, #7c3aed, #db2777, #dc2626
    );
    position: relative;
    overflow: hidden;
}

.release-editor__color-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

.release-editor__body {
    min-height: 400px;
    padding: 1.25rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-color);
    background: var(--surface-color);
    outline: none;
    overflow-y: auto;
    max-height: 70vh;
}

.release-editor__body::-webkit-scrollbar {
    width: 6px;
}

.release-editor__body::-webkit-scrollbar-track {
    background: transparent;
}

.release-editor__body::-webkit-scrollbar-thumb {
    background: var(--border-subtle-color);
    border-radius: var(--radius-full);
}

.release-editor__body::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted-color);
}

.release-editor__body h3 {
    margin: 1.5rem 0 0.75rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-strong-color);
}

.release-editor__body h3:first-child {
    margin-top: 0;
}

.release-editor__body p {
    margin: 0 0 1rem;
}

.release-editor__body ul,
.release-editor__body ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.release-editor__body li {
    margin-bottom: 0.35rem;
}

.release-editor__body a {
    color: var(--primary-color);
    text-decoration: underline;
}

.release-editor__body a:hover {
    color: var(--primary-color-hover);
}

.release-editor__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 0.75rem 0;
}

.release-editor__image-block {
    position: relative;
    background: var(--surface-muted-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-md);
    box-shadow: 2px 2px 0 #aaa;
    margin: 1rem 0;
}

.release-editor__image-block .release-editor__image-block-image {
    display: block;
    width: 100%;
    margin: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.release-editor__image-caption {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
}

.release-editor__image-caption-text {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-soft-color);
}

.release-editor__image-source {
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    color: var(--text-soft-color);
}

.release-editor__image-block[data-alt]::after {
    content: "ALT: " attr(data-alt);
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-block;
    font-size: 0.7rem;
    line-height: 1;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full);
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.release-editor__body blockquote {
    margin: 1rem 0;
    padding: 0.75rem 1.25rem;
    border-left: 4px solid var(--primary-color);
    background: var(--surface-muted-color);
    color: var(--text-soft-color);
    font-style: italic;
}

.release-editor__body[hidden] {
    display: none;
}

.release-editor__code-input {
    display: block;
    width: 100%;
    min-height: 400px;
    padding: 1.25rem;
    margin: 0;
    border: none;
    background: #1e1e1e;
    color: #d4d4d4;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.65;
    resize: vertical;
    outline: none;
    overflow-y: auto;
}

.release-editor__code-input[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   6. Counters Bar
   -------------------------------------------------------------------------- */

.release-editor__counters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    margin-top: 0.75rem;
}

.release-editor__counter {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.release-editor__counter span {
    font-weight: 700;
    color: var(--text-strong-color);
}

.release-editor__mode-toggle {
    appearance: none;
    border: var(--border-brutal-thin);
    background: var(--surface-color);
    padding: 0.3rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.release-editor__mode-toggle:hover {
    background: var(--surface-muted-color);
    color: var(--text-color);
}

/* --------------------------------------------------------------------------
   7. Save / Autosave Actions
   -------------------------------------------------------------------------- */

.release-editor__actions {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 2px dashed var(--border-subtle-color);
}

.release-editor__autosave {
    font-size: 0.8rem;
    color: var(--text-muted-color);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   8. Actions Tab (Publish / Send)
   -------------------------------------------------------------------------- */

.release-editor__actions-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.release-editor__fieldset {
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    margin: 0;
}

.release-editor__fieldset legend {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-strong-color);
    padding: 0 0.5rem;
}

.release-editor__fieldset .form-group {
    margin-bottom: 1rem;
}

.release-editor__fieldset .form-group:last-child {
    margin-bottom: 0;
}

.release-editor__previews {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.release-editor__preview-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--nb-black);
    background: #fff;
    border: 2px solid var(--nb-black);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.release-editor__preview-button:hover {
    background: var(--surface-muted-color);
    box-shadow: var(--shadow-brutal-xs);
    color: var(--nb-black);
    text-decoration: none;
}

.release-editor__preview-button svg {
    flex-shrink: 0;
}

/* Release Toggle Switch */

.release-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    margin-bottom: 1rem;
}

.release-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.release-toggle__slider {
    position: relative;
    width: 52px;
    height: 28px;
    background: var(--surface-muted-color);
    border: var(--border-brutal-thin);
    border-radius: 9999px;
    flex-shrink: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.release-toggle__slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--nb-black);
    border-radius: 9999px;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.release-toggle__input:checked + .release-toggle__slider {
    background: var(--success-color);
    border-color: var(--success-color);
}

.release-toggle__input:checked + .release-toggle__slider::after {
    transform: translateX(24px);
    background: #fff;
}

.release-toggle__input:focus-visible + .release-toggle__slider {
    box-shadow: var(--focus-ring);
}

.release-toggle__label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-strong-color);
}

/* Send Target Cards */

.send-target-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.send-target-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.375rem;
    min-width: 120px;
    max-width: 160px;
    padding: 0.75rem;
    background: #fff;
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.send-target-card:hover:not(.send-target-card--active):not([aria-disabled="true"]) {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal-xs);
}

.send-target-card--active {
    border-color: #0acf97;
    background: #f0fdf8;
    box-shadow: 0 2px 0 0 #0acf97;
}

.send-target-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--surface-muted-color);
    color: var(--text-muted-color);
    flex-shrink: 0;
}

.send-target-card--active .send-target-card__icon {
    background: #0acf97;
    color: #fff;
}

.send-target-card__name {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-color);
    line-height: 1.3;
}

.send-target-card__meta {
    font-size: 0.75rem;
    color: var(--text-muted-color);
}

.send-target-card--add {
    border-style: dashed;
    color: var(--text-muted-color);
}

.send-target-card--add .send-target-card__name {
    color: var(--text-muted-color);
}

.send-target-card--add:hover {
    border-color: var(--text-muted-color);
}

.send-target-card[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.release-visibility-selector {
    display: flex;
    flex-shrink: 0;
}

.release-visibility-selector__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted-color);
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    margin-left: -2px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.release-visibility-selector__option:first-of-type {
    border-radius: 6px 0 0 6px;
    margin-left: 0;
}

.release-visibility-selector__option:last-of-type {
    border-radius: 0 6px 6px 0;
}

.release-visibility-selector__option:hover:not(.release-visibility-selector__option--active) {
    background: var(--surface-secondary-color);
    color: var(--text-color);
}

.release-visibility-selector__option--active {
    background: #0acf97;
    color: #fff;
    position: relative;
    z-index: 1;
}

.release-visibility-selector__option:disabled,
.release-visibility-selector__option[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.release-visibility-selector__icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   9. Stats Tab
   -------------------------------------------------------------------------- */

.release-stats {
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    margin: 0;
    overflow: hidden;
}

.release-stats__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-subtle-color);
}

.release-stats__row:last-child {
    border-bottom: none;
}

.release-stats__row:nth-child(even) {
    background: var(--surface-muted-color);
}

.release-stats__row dt {
    font-size: 0.9rem;
    color: var(--text-muted-color);
}

.release-stats__row dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong-color);
}

.release-stats__log-title {
    margin: 1.5rem 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-strong-color);
}

.release-stats__log-table {
    width: 100%;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 0.85rem;
}

.release-stats__log-table th,
.release-stats__log-table td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle-color);
}

.release-stats__log-table thead th {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted-color);
    background: var(--surface-muted-color);
}

.release-stats__log-table tbody tr:last-child td {
    border-bottom: none;
}

.release-stats__log-table tbody tr:nth-child(even) {
    background: var(--surface-muted-color);
}

/* --------------------------------------------------------------------------
   10. Related Tab
   -------------------------------------------------------------------------- */

.release-editor__related-form {
    gap: 0;
}

.release-editor__related-intro {
    margin: 0 0 1rem;
    color: var(--text-muted-color);
    font-size: 0.9rem;
}

.release-editor__related-message {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    animation: alertSlideIn 0.3s ease;
}

.release-editor__related-message[hidden] {
    display: none;
}

.release-editor__related-message--success {
    background: var(--success-color-light);
    color: #166534;
}

.release-editor__related-message--error {
    background: var(--danger-color-light);
    color: #991b1b;
}

.release-editor__related-groups {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.release-editor__related-group {
    margin: 0;
}

.release-editor__related-group legend {
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.release-editor__related-legend-icon {
    flex-shrink: 0;
    opacity: 0.7;
}

.release-editor__related-description {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted-color);
}

.release-editor__related-search {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.release-editor__related-search-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-strong-color);
}

.release-editor__related-search-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--nb-black);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.release-editor__related-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.release-editor__related-results {
    position: relative;
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-brutal-xs);
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 0.75rem;
}

.release-editor__related-results[hidden] {
    display: none;
}

.release-editor__related-results-status {
    padding: 0.5rem 0.75rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted-color);
    font-style: italic;
    border-bottom: 1px solid var(--border-subtle-color);
}

.release-editor__related-results-status[hidden] {
    display: none;
}

.release-editor__related-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.release-editor__related-results-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--border-subtle-color);
}

.release-editor__related-results-list li:last-child {
    border-bottom: none;
}

.release-editor__related-results-list li:hover {
    background: var(--surface-muted-color);
}

.release-editor__related-results-list li button {
    appearance: none;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.release-editor__related-item-thumb {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-subtle-color);
}

.release-editor__related-item-thumb-placeholder {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: var(--surface-muted-color);
    border: 1px dashed var(--border-subtle-color);
}

.release-editor__related-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.release-editor__related-item-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-strong-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.release-editor__related-item-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.release-editor__related-item-action {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    color: var(--text-muted-color);
    border: 1px solid var(--border-subtle-color);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.release-editor__related-results-list li:hover .release-editor__related-item-action {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: var(--primary-color-light, rgba(0, 102, 255, 0.08));
}

.release-editor__related-results-empty {
    padding: 0.75rem;
    margin: 0;
    text-align: center;
    color: var(--text-muted-color);
    font-size: 0.85rem;
}

.release-editor__related-results-empty[hidden] {
    display: none;
}

.release-editor__related-selected {
    margin-top: 0.25rem;
}

.release-editor__related-selected-empty {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted-color);
    font-style: italic;
}

.release-editor__related-selected-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-subtle-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.release-editor__related-selected-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: var(--surface-color);
    font-size: 0.85rem;
    color: var(--text-strong-color);
    border-bottom: 1px solid var(--border-subtle-color);
    transition: background var(--transition-fast);
}

.release-editor__related-selected-list li:last-child {
    border-bottom: none;
}

.release-editor__related-selected-list li:hover {
    background: var(--surface-muted-color);
}

.release-editor__related-selected-list li button {
    appearance: none;
    border: none;
    background: transparent;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
    margin-left: auto;
}

.release-editor__related-selected-list li button:hover {
    background: var(--danger-color-light);
    color: var(--danger-color);
}

.release-editor__related-actions {
    margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   11. Inline Image Insert Modal (WYSIWYG)
   -------------------------------------------------------------------------- */

.release-editor__image-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.release-editor__image-modal[hidden] {
    display: none;
}

.release-editor__image-modal-dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 2rem);
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-lg);
    overflow: hidden;
}

.release-editor__image-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--nb-black);
    border-bottom: var(--border-brutal-thin);
}

.release-editor__image-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--nb-white);
}

.release-editor__image-modal-close {
    appearance: none;
    border: var(--border-brutal-thin);
    background: var(--surface-color);
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.release-editor__image-modal-close:hover {
    background: var(--danger-color-light);
}

.release-editor__image-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.release-editor__image-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.release-editor__image-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 2px dashed var(--border-subtle-color);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    min-height: 160px;
}

.release-editor__image-dropzone:hover,
.release-editor__image-dropzone--dragover {
    border-color: var(--primary-color);
    background: var(--primary-color-lighter);
}

.release-editor__image-dropzone-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.release-editor__image-dropzone-empty p {
    margin: 0;
    color: var(--text-muted-color);
    font-size: 0.9rem;
}

.release-editor__image-preview {
    width: 100%;
}

.release-editor__image-preview[hidden] {
    display: none;
}

.release-editor__image-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.release-editor__image-preview-image {
    max-width: 100%;
    max-height: 400px;
    display: block;
}

.release-editor__image-size-info {
    font-size: 0.75rem;
    color: var(--text-muted-color);
    text-align: center;
    padding: 0.35rem 0 0;
    font-family: var(--font-mono);
}

.release-editor__image-size-info[hidden] {
    display: none;
}

.release-editor__crop-overlay {
    position: absolute;
    inset: 0;
}

.release-editor__crop-overlay[hidden] {
    display: none;
}

.release-editor__crop-box {
    position: absolute;
    border: 2px solid var(--primary-color);
    background: rgba(227, 57, 70, 0.1);
}

.release-editor__crop-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border: 2px solid var(--nb-white);
}

.release-editor__crop-handle--nw {
    top: -6px;
    left: -6px;
    cursor: nw-resize;
}

.release-editor__crop-handle--ne {
    top: -6px;
    right: -6px;
    cursor: ne-resize;
}

.release-editor__crop-handle--se {
    bottom: -6px;
    right: -6px;
    cursor: se-resize;
}

.release-editor__crop-handle--sw {
    bottom: -6px;
    left: -6px;
    cursor: sw-resize;
}

.release-editor__crop-rotate {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background: var(--primary-color);
    cursor: grab;
}

.release-editor__image-error {
    margin: 0;
    padding: 0.75rem;
    background: var(--danger-color-light);
    color: #991b1b;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.release-editor__image-error[hidden] {
    display: none;
}

.release-editor__image-meta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.release-editor__image-meta[hidden] {
    display: none;
}

.release-editor__image-meta label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.release-editor__image-meta label span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-strong-color);
}

.release-editor__image-meta label input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--nb-black);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
}

.release-editor__image-meta label input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.release-editor__image-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

/* --------------------------------------------------------------------------
   12. Inline Link Popover
   -------------------------------------------------------------------------- */

.release-editor__link-modal {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    width: 360px;
    max-width: calc(100vw - 2rem);
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-sm);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.release-editor__link-modal[hidden] {
    display: none;
}

.release-editor__link-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.release-editor__link-field span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-strong-color);
}

.release-editor__link-field input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--nb-black);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
}

.release-editor__link-field input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.release-editor__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
}

.release-editor__toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.release-editor__toggle-slider {
    position: relative;
    width: 56px;
    height: 24px;
    background-color: #e3e6ed;
    border: none;
    border-radius: 2rem;
    flex-shrink: 0;
    transition: all 0.1s ease-in-out;
}

.release-editor__toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 18px;
    height: 18px;
    background-color: #adb5bd;
    border-radius: 2rem;
    box-shadow: none;
    transition: all 0.1s ease-in-out;
}

.release-editor__toggle-input:checked + .release-editor__toggle-slider {
    background-color: #0acf97;
}

.release-editor__toggle-input:checked + .release-editor__toggle-slider::after {
    left: 34px;
    background-color: #fff;
}

.release-editor__toggle-input:focus-visible + .release-editor__toggle-slider {
    box-shadow: var(--focus-ring);
}

.release-editor__toggle-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
}

.release-editor__link-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle-color);
}

/* --------------------------------------------------------------------------
   13. Version History
   -------------------------------------------------------------------------- */

.release-editor__versions {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
}

.release-versions {
    list-style: none;
    margin: 0;
    padding: 0;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.release-versions__item {
    border-bottom: 1px solid var(--border-subtle-color);
}

.release-versions__item:last-child {
    border-bottom: none;
}

.release-versions__toggle {
    appearance: none;
    border: none;
    background: transparent;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: background var(--transition-fast);
}

.release-versions__toggle:hover {
    background: var(--surface-muted-color);
}

.release-versions__toggle[aria-expanded="true"] {
    background: var(--surface-muted-color);
    border-bottom: 1px solid var(--border-subtle-color);
}

.release-versions__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.release-versions__author {
    font-weight: 600;
}

.release-versions__date {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.release-versions__title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-strong-color);
}

.release-versions__details {
    padding: 1rem;
    background: var(--surface-subtle-color);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.release-versions__details[hidden] {
    display: none;
}

.release-versions__summary h4 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted-color);
}

.release-versions__field-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.release-versions__field {
    display: flex;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.release-versions__field dt {
    flex-shrink: 0;
    width: 90px;
    font-weight: 600;
    color: var(--text-muted-color);
}

.release-versions__field dd {
    margin: 0;
    color: var(--text-color);
    min-width: 0;
    word-break: break-word;
}

.release-versions__body {
    margin: 0;
    padding: 0.75rem;
    background: #1e1e1e;
    color: #d4d4d4;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.5;
    border-radius: var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.release-versions__compare {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle-color);
}

.release-versions__compare-label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.release-versions__compare-label span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-strong-color);
}

.release-versions__compare-label select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--nb-black);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
}

.release-versions__compare-label select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.release-versions__comparison {
    font-size: 0.875rem;
}

.release-versions__comparison-empty {
    margin: 0;
    color: var(--text-muted-color);
    font-style: italic;
    font-size: 0.85rem;
}

.release-versions__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle-color);
}

.release-versions__status {
    font-size: 0.85rem;
    color: var(--text-muted-color);
    font-style: italic;
}

.release-versions__empty {
    text-align: center;
    color: var(--text-muted-color);
    font-style: italic;
    font-size: 0.9rem;
    margin: 0;
    padding: 1rem 0;
}

/* --------------------------------------------------------------------------
   14. Image Tab (Main Image Management)
   -------------------------------------------------------------------------- */

.release-image {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.release-image__intro {
    margin: 0;
}

.release-image__intro p {
    margin: 0;
    color: var(--text-muted-color);
    font-size: 0.9rem;
}

.release-image__upload {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.release-image__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1.5rem;
    border: 2px dashed var(--border-subtle-color);
    border-radius: var(--radius-md);
    background: #f3f4f6;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

:root[data-theme="dark"] .release-image__dropzone {
    background: #2a2a2a;
}

.release-image__dropzone:hover,
.release-image__dropzone--dragover {
    border-color: var(--primary-color);
    background: var(--primary-color-lighter);
}

.release-image__dropzone-icon {
    color: var(--text-muted-color);
    opacity: 0.5;
}

.release-image__dropzone-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-muted-color);
    font-size: 0.9rem;
}

.release-image__dropzone-action {
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: underline;
}

.release-image__dropzone-formats {
    font-size: 0.75rem;
    color: var(--text-muted-color);
    opacity: 0.7;
}

.release-image__hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted-color);
    text-align: center;
}

.release-image__progress {
    width: 100%;
    height: 8px;
    appearance: none;
    border: none;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--surface-muted-color);
}

.release-image__progress[hidden] {
    display: none;
}

.release-image__progress::-webkit-progress-bar {
    background: var(--surface-muted-color);
    border-radius: var(--radius-full);
}

.release-image__progress::-webkit-progress-value {
    background: var(--primary-color);
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
}

.release-image__progress::-moz-progress-bar {
    background: var(--primary-color);
    border-radius: var(--radius-full);
}

.release-image__status {
    font-size: 0.85rem;
    color: var(--text-muted-color);
    text-align: center;
    min-height: 1.25em;
}

.release-image__editor {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.release-image__editor[hidden] {
    display: none;
}

.release-image__source {
    padding: 1rem;
    background: var(--surface-muted-color);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle-color);
}

.release-image__source-label {
    margin: 0 0 0.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-strong-color);
}

.release-image__source-text {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    color: var(--text-color);
    word-break: break-all;
}

.release-image__source-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.release-image__cards {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.release-image__cards[hidden] {
    display: none;
}

.release-image__card {
    appearance: none;
    border: var(--border-brutal-thin);
    background: var(--surface-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    padding: 0;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: var(--shadow-brutal-xs);
}

.release-image__card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal-sm);
}

.release-image__card[hidden] {
    display: none;
}

.release-image__card-preview {
    height: 260px;
    background: var(--surface-muted-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--border-subtle-color);
}

[data-release-orientation-card="horizontal"] .release-image__card-preview {
    aspect-ratio: 16 / 9;
}

[data-release-orientation-card="square"] .release-image__card-preview {
    aspect-ratio: 1 / 1;
}

[data-release-orientation-card="vertical"] .release-image__card-preview {
    aspect-ratio: 9 / 16;
}

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

.release-image__card-preview img[hidden] {
    display: none;
}

.release-image__card-placeholder {
    font-size: 0.8rem;
    color: var(--text-muted-color);
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

.release-image__card-placeholder[hidden] {
    display: none;
}

.release-image__card-body {
    padding: 0.75rem;
}

.release-image__card-body h3 {
    margin: 0 0 0.2rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-strong-color);
}

.release-image__card-body p {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted-color);
}

.release-image__card-action {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-color);
}

.release-image__footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.release-image__feedback {
    font-size: 0.85rem;
    color: var(--text-muted-color);
    font-style: italic;
}

.release-image__error {
    padding: 0.75rem 1rem;
    background: var(--danger-color-light);
    color: #991b1b;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.release-image__error[hidden] {
    display: none;
}

/* Orientation Editor */

.release-image__orientation {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.release-image__orientation-header {
    padding: 0;
}

.release-image__orientation-header h3 {
    margin: 0 0 0.2rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong-color);
}

.release-image__orientation-header p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted-color);
}

.release-image__orientation-preview {
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-muted-color);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.release-image__orientation-preview canvas {
    max-width: 100%;
    display: block;
}

.release-image__orientation-preview canvas[hidden] {
    display: none;
}

.release-image__orientation-placeholder {
    padding: 2rem;
    color: var(--text-muted-color);
    font-style: italic;
    font-size: 0.9rem;
    text-align: center;
}

.release-image__orientation-placeholder[hidden] {
    display: none;
}

.release-image__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.release-image__controls label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 120px;
}

.release-image__controls label span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-strong-color);
}

.release-image__controls input[type="range"] {
    width: 100%;
    accent-color: var(--primary-color);
}

.release-image__thumbnails {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.release-image__thumb-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-soft-color);
    background: var(--surface-muted-color);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
}

.release-image__thumb-pill:hover {
    background: var(--danger-color, #e63946);
    color: #fff;
    text-decoration: none;
    border-color: var(--nb-black, #1a1a1a);
    box-shadow: 2px 2px 0 var(--nb-black, #1a1a1a);
    transform: translateY(-2px);
}

/* Image Tab Modal */

.release-image__modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.release-image__modal[hidden] {
    display: none;
}

.release-image__modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

[data-orientation="vertical"] .release-image__modal-dialog {
    max-width: 600px;
}

.release-image__modal-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 2rem);
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-lg);
    overflow: hidden;
}

.release-image__modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--nb-black);
    border-bottom: var(--border-brutal-thin);
}

.release-image__modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--nb-white);
}

.release-image__modal-close {
    appearance: none;
    border: var(--border-brutal-thin);
    background: var(--surface-color);
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.release-image__modal-close:hover {
    background: var(--danger-color-light);
}

.release-image__modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.release-image__modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--surface-muted-color);
    border-top: 2px solid var(--border-color);
}

.release-image__modal-feedback {
    padding: 0 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted-color);
    min-height: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .release-editor__tabs-nav {
        height: 2.25rem;
    }

    .release-editor__tab-button[data-release-tab-target]:not(.release-editor__tab-button--active) {
        display: none;
    }

    .release-editor__tab-button--active {
        flex: 1 1 auto;
        font-size: 0.8rem;
        font-weight: 700;
        height: 2.25rem;
        border-right: none;
    }

    .release-editor__tab-icon {
        width: 16px;
        height: 16px;
    }

    /* More trigger for release editor tabs */
    .release-editor__more-trigger {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0 0.75rem;
        appearance: none;
        border: none;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        background: transparent;
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        transition: color 0.15s ease;
    }

    .release-editor__more-trigger:hover {
        color: #fff;
    }

    .release-editor__more-trigger svg {
        opacity: 0.7;
    }

    .release-editor__more-trigger:hover svg {
        opacity: 1;
    }

    .release-editor__header {
        padding: 0.75rem 1rem;
    }

    .release-editor__tab {
        padding: 1rem;
    }

    .release-editor__fieldset {
        padding: 0.75rem;
    }

    .release-editor__body {
        min-height: 280px;
        padding: 1rem;
    }

    .release-editor__code-input {
        min-height: 280px;
        padding: 1rem;
    }

    .release-editor__link-modal {
        width: 100%;
        max-width: none;
        left: 0;
        right: 0;
    }

    .release-image__cards {
        flex-direction: column;
    }

    .release-image__card {
        width: 100%;
    }

    .release-image__card-preview {
        height: auto;
    }

    .release-versions__field {
        flex-direction: column;
        gap: 0.25rem;
    }

    .release-versions__field dt {
        width: auto;
    }
}

/* ==========================================================================
   Release Status Pill & Modal
   ========================================================================== */

button.release-status-pill {
    appearance: none;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: inherit;
}

.release-status-pill {
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    flex-shrink: 0;
}

.release-status-pill:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brutal-xs);
}

.release-status-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.release-status-modal[hidden] {
    display: none;
}

.release-status-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.release-status-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 440px;
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-lg);
    overflow: hidden;
}

.release-status-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--nb-black);
    border-bottom: var(--border-brutal-thin);
}

.release-status-modal__header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--nb-white);
}

.release-status-modal__close {
    appearance: none;
    border: var(--border-brutal-thin);
    background: var(--surface-color);
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.release-status-modal__close:hover {
    background: var(--danger-color-light);
}

.release-status-modal__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.release-status-modal__options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.release-status-modal__option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.release-status-modal__option:hover {
    background: var(--surface-muted-color);
}

.release-status-modal__option:has(input:checked) {
    border-color: var(--primary-color);
    background: var(--primary-color-lighter);
}

.release-status-modal__option input[type="radio"] {
    margin-top: 0.2rem;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}

.release-status-modal__option-label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.release-status-modal__option-desc {
    font-size: 0.825rem;
    color: var(--text-muted-color);
}

.release-status-modal__schedule {
    padding-top: 0.25rem;
}

.release-status-modal__schedule[hidden] {
    display: none;
}

.release-status-modal__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.release-status-modal__field span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-strong-color);
}

.release-status-modal__field input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--nb-black);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
}

.release-status-modal__field input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.release-status-modal__feedback {
    padding: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.release-status-modal__feedback[hidden] {
    display: none;
}

.release-status-modal__feedback--success {
    background: var(--success-color-light);
    color: #166534;
}

.release-status-modal__feedback--error {
    background: var(--danger-color-light);
    color: #991b1b;
}

.release-status-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--surface-muted-color);
    border-top: 2px solid var(--border-color);
}

/* ======================================================================
   Release Editor - Card Wrapper (Level 1 = standalone, Level 2 = space)
   ====================================================================== */

.release-editor__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.release-editor__card--1 {
    background-color: var(--card-background);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    corner-shape: squircle;
    box-shadow: var(--shadow-brutal);
}

.release-editor__card--2 {
    background-color: var(--card-background);
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
}

/* Release category pills */
.release-categories {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.release-categories__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.release-categories__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    background-color: var(--surface-subtle-color, var(--surface-color));
    color: var(--text-color);
}

.release-categories__pill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted-color);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 2px;
}

.release-categories__pill-remove:hover {
    color: var(--danger-color, #e53e3e);
    background-color: rgba(229, 62, 62, 0.1);
}

.release-categories__add {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.65rem;
    border: 1.5px dashed var(--border-color);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted-color);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    align-self: flex-start;
}

.release-categories__add:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Release categories modal */
.release-categories-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.release-categories-modal[hidden] {
    display: none;
}

.release-categories-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.release-categories-modal__dialog {
    position: relative;
    width: min(480px, 100%);
    background-color: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-lg);
    corner-shape: squircle;
    box-shadow: var(--shadow-brutal-lg);
    overflow: hidden;
}

.release-categories-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--nb-black);
    border-bottom: var(--border-brutal-thin);
}

.release-categories-modal__header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--nb-white);
}

.release-categories-modal__close {
    appearance: none;
    border: var(--border-brutal-thin);
    background: var(--surface-color);
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.release-categories-modal__close:hover {
    background: var(--danger-color-light);
}

.release-categories-modal__body {
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
}

.release-categories-modal__tree {
    display: flex;
    flex-direction: column;
}

.release-categories-modal__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.1s;
    margin: 0;
}

.release-categories-modal__item:last-child {
    border-bottom: none;
}

.release-categories-modal__item:hover {
    background-color: var(--surface-subtle-color, rgba(0, 0, 0, 0.03));
}

.release-categories-modal__item--child {
    padding-left: 2.5rem;
}

.release-categories-modal__item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

.release-categories-modal__item-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-color);
}

.release-categories-modal__item--parent > .release-categories-modal__item-name {
    font-weight: 600;
}

.release-categories-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: var(--border-brutal-thin);
    background-color: var(--surface-subtle-color, var(--surface-color));
}

/* ============================================================
   User Notes Editor (inline WYSIWYG — matches release editor)
   ============================================================ */

.user-notes-editor {
    border: var(--border-brutal-thin);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-brutal-xs);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
    position: relative;
}

.user-notes-editor:focus-within {
    box-shadow: var(--shadow-brutal-xs), 1px 1px 0 4px var(--nb-red-light);
}

.user-notes-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 0.4rem;
    background: var(--nb-black);
    border-bottom: var(--border-brutal-thin);
}

.user-notes-editor__tool {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: #fff;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.user-notes-editor__tool:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.user-notes-editor__tool:active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-color-contrast);
}

.user-notes-editor__tool--active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-color-contrast);
}

.user-notes-editor__tool--disabled,
.user-notes-editor__tool--disabled:hover {
    opacity: 0.3;
    cursor: default;
    background: transparent;
    border-color: transparent;
}

.user-notes-editor__tool em {
    font-style: italic;
}

.user-notes-editor__tool u {
    text-decoration: underline;
}

.user-notes-editor__tool svg {
    width: 18px;
    height: 18px;
}

.user-notes-editor__heading-dropdown {
    position: relative;
}

.user-notes-editor__heading-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    background: var(--nb-black);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-xs);
    padding: 6px 2px 2px;
    gap: 2px;
    flex-direction: row;
    margin-top: -2px;
}

.user-notes-editor__heading-dropdown:hover > .user-notes-editor__heading-menu {
    display: flex;
}

.user-notes-editor__heading-option {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: #fff;
    height: 30px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-xs);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.user-notes-editor__heading-option:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.user-notes-editor__heading-option:active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-color-contrast);
}

.user-notes-editor__color-dropdown {
    position: relative;
}

.user-notes-editor__color-indicator {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 3px;
    border-radius: 1px;
    background: #fff;
    pointer-events: none;
}

.user-notes-editor__color-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: var(--nb-black);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-xs);
    padding: 6px;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: -2px;
    width: 208px;
}

.user-notes-editor__color-dropdown:hover > .user-notes-editor__color-menu {
    display: flex;
}

.user-notes-editor__color-swatch {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.user-notes-editor__color-swatch:hover {
    border-color: #fff;
    transform: scale(1.15);
}

.user-notes-editor__color-swatch--remove {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
}

.user-notes-editor__color-swatch--remove:hover {
    color: #fff;
}

.user-notes-editor__color-swatch--custom {
    background: conic-gradient(
        #dc2626, #ea580c, #ca8a04, #16a34a,
        #0891b2, #2563eb, #7c3aed, #db2777, #dc2626
    );
    position: relative;
    overflow: hidden;
}

.user-notes-editor__color-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

.user-notes-editor__toolbar-spacer {
    flex: 1;
}

.user-notes-editor__link-modal {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    width: 360px;
    max-width: calc(100vw - 2rem);
    background: var(--surface-color);
    border: var(--border-brutal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal-sm);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.user-notes-editor__link-modal[hidden] {
    display: none;
}

.user-notes-editor__link-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.user-notes-editor__link-field span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-strong-color);
}

.user-notes-editor__link-field input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--nb-black);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--surface-color);
    color: var(--text-color);
    font-family: inherit;
}

.user-notes-editor__link-field input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.user-notes-editor__link-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle-color);
}

.user-notes-editor__body {
    min-height: 150px;
    padding: 1.25rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-color);
    background: var(--surface-color);
    outline: none;
    overflow-y: auto;
    max-height: 50vh;
}

.user-notes-editor__body:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted-color);
    pointer-events: none;
}

.user-notes-editor__body h2,
.user-notes-editor__body h3,
.user-notes-editor__body h4,
.user-notes-editor__body h5,
.user-notes-editor__body h6 {
    margin: 1.5rem 0 0.75rem;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-strong-color);
}

.user-notes-editor__body h2 { font-size: 1.375rem; }
.user-notes-editor__body h3 { font-size: 1.25rem; }
.user-notes-editor__body h4 { font-size: 1.125rem; }
.user-notes-editor__body h5 { font-size: 1rem; }
.user-notes-editor__body h6 { font-size: 0.875rem; }

.user-notes-editor__body h2:first-child,
.user-notes-editor__body h3:first-child,
.user-notes-editor__body h4:first-child,
.user-notes-editor__body h5:first-child,
.user-notes-editor__body h6:first-child {
    margin-top: 0;
}

.user-notes-editor__body p {
    margin: 0 0 1rem;
}

.user-notes-editor__body ul,
.user-notes-editor__body ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.user-notes-editor__body li {
    margin-bottom: 0.35rem;
}

.user-notes-editor__body a {
    color: var(--primary-color);
    text-decoration: underline;
}

.user-notes-editor__body a:hover {
    color: var(--primary-color-hover);
}

/* ── Space Contacts ──────────────────────────────────── */

.space-contacts__search-wrap {
    position: relative;
    margin-bottom: 1rem;
}

.space-contacts__search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--surface-color);
    color: var(--text-color);
}

.space-contacts__search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.space-contacts__results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    background: var(--surface-color);
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.space-contacts__result-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.space-contacts__result-item:hover {
    background: var(--hover-color, rgba(0, 0, 0, 0.05));
}

.space-contacts__result-item--empty {
    color: var(--text-muted-color);
    cursor: default;
    font-style: italic;
}

.space-contacts__result-item--empty:hover {
    background: none;
}

.space-contacts__result-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.space-contacts__result-email {
    color: var(--text-muted-color);
    font-size: 0.8rem;
    margin-left: auto;
}

.space-contacts__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.space-contacts__item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 2px solid var(--nb-black);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    background: var(--surface-color);
    transition: opacity 0.2s, box-shadow 0.2s;
}

.space-contacts__item--dragging {
    opacity: 0.4;
}

.space-contacts__item--drag-over {
    box-shadow: 0 -3px 0 0 var(--primary-color);
}

.space-contacts__drag-handle {
    cursor: grab;
    color: var(--text-muted-color);
    font-size: 1rem;
    line-height: 1;
    padding: 0.25rem 0;
    user-select: none;
    flex-shrink: 0;
}

.space-contacts__drag-handle:active {
    cursor: grabbing;
}

.space-contacts__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.space-contacts__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.space-contacts__avatar--initials {
    background: var(--primary-color);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
}

.space-contacts__result-item .space-contacts__avatar {
    width: 24px;
    height: 24px;
    font-size: 0.55rem;
}

.space-contacts__info {
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 220px;
}

.space-contacts__name-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.space-contacts__name {
    font-size: 0.85rem;
    word-break: break-word;
}

.space-contacts__email {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted-color);
    word-break: break-all;
}

.space-contacts__badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    line-height: 1.3;
    white-space: nowrap;
}

.space-contacts__badge--user {
    background: #dbeafe;
    color: #1e40af;
}

.space-contacts__badge--contact {
    background: #dcfce7;
    color: #166534;
}

.space-contacts__fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.space-contacts__field-input,
.space-contacts__field-textarea {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-family: inherit;
    background: var(--surface-color);
    color: var(--text-color);
    resize: vertical;
}

.space-contacts__field-input:focus,
.space-contacts__field-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.space-contacts__remove {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--text-muted-color);
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    border-radius: var(--radius-sm);
}

.space-contacts__remove:hover {
    color: var(--nb-red, #dc2626);
    background: rgba(220, 38, 38, 0.08);
}

.space-contacts__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
}

.space-contacts__status {
    font-size: 0.85rem;
}

.space-contacts__status--success {
    color: var(--nb-green, #16a34a);
}

.space-contacts__status--error {
    color: var(--nb-red, #dc2626);
}