/* ============================================================================
   StudySphere CSS Architecture
   ============================================================================

   This stylesheet establishes the foundational design system for StudySphere.
   It follows a modular-first architecture with clear boundaries between core
   and module-specific styles.

   CSS Variable Organization:
   - Spacing scale (--spacing-xs through --spacing-3xl)
   - Border radius scale (--radius-sm through --radius-full)
   - RGB color components (--color-primary-base, --color-primary-accent, etc.)
   - Theme-specific overrides (binary-theme--light, binary-theme--dark)
   
   Usage Guidelines:
   - Core variables defined here are available throughout the application
   - Module-specific styles should be placed in their respective module directories
   - Use RGB triplets with rgba() for flexible opacity adjustments
   - Prefer spacing and radius scale variables over hard-coded values
   
   File Structure:
   - /src/frontend/public/static/style.css (this file)
   - /src/frontend/public/static/styles/app-shell.css (navigation, layout)
   - /src/frontend/public/static/styles/pages/*.css (page-specific styles)
   - /src/modules/*/
public
/*.css (module-specific styles)
   - /src/frontend/languages/*/
public
/*.css (language plugin styles)

   ============================================================================ */

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

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    color: var(--app-text-body);
    line-height: 1.5;
    min-height: 100vh;
    scrollbar-gutter: stable both-edges;
    overflow-x: hidden;
    max-width: 100vw;
}

:root {
    /* Spacing scale for consistent layout */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    --spacing-3xl: 3rem;

    /* Border radius scale */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 0.85rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 999px;

    /* Base colors - Light theme */
    --color-primary-base: 27, 67, 50;
    --color-primary-accent: 42, 127, 98;
    --color-contrast-base: 193, 18, 31;

    /* Text colors */
    --app-text-body: #1f3d3d;
    --app-text-strong: #1b4332;
    --app-text-subtle: rgba(var(--color-primary-base), 0.65);
    --app-text-muted: rgba(var(--color-primary-base), 0.65);
    --app-contact-text-strong: #0f2d21;
    --app-contact-text-secondary: rgba(var(--color-primary-base), 0.7);
    --app-contact-text-tertiary: rgba(var(--color-primary-base), 0.55);

    /* Accent colors */
    --app-accent-primary: #2a7f62;
    --app-accent-primary-strong: #1b4332;
    --app-accent-contrast: #c1121f;
    --app-accent-contrast-strong: #7f0a14;

    /* Surface colors */
    --app-card-background: rgba(255, 255, 255, 0.85);
    --app-card-shadow: none;
    --app-card-hover-shadow: none;
    --app-panel-background: rgba(237, 246, 249, 0.6);
    --app-panel-shadow: inset 0 0 0 1px rgba(var(--color-primary-accent), 0.1);
    --app-panel-refresh-bg: rgba(237, 246, 249, 0.78);
    --app-panel-refresh-border: rgba(var(--color-primary-base), 0.2);
    --app-panel-refresh-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.45));

    /* Interactive states */
    --app-contact-hover-bg: rgba(var(--color-primary-accent), 0.12);
    --app-contact-hover-border: rgba(var(--color-primary-accent), 0.25);

    /* Avatar */
    --app-avatar-gradient: linear-gradient(135deg, rgba(var(--color-primary-accent), 0.28), rgba(var(--color-primary-base), 0.45));
    --app-avatar-text: #ffffff;

    /* Archive/danger states */
    --app-archive-background: rgba(227, 93, 106, 0.15);
    --app-archive-border: rgba(227, 93, 106, 0.45);
    --app-archive-text: #6a040f;

    /* Borders */
    --app-border-subtle: rgba(var(--color-primary-base), 0.1);
    --app-border-divider: rgba(var(--color-primary-base), 0.12);
    --app-border-strong: rgba(var(--color-primary-base), 0.2);

    /* Messages */
    --app-message-sent-bg: linear-gradient(135deg, rgba(58, 181, 149, 0.32), rgba(27, 102, 88, 0.28));
    --app-message-sent-border: rgba(var(--color-primary-base), 0.2);
    --app-message-received-bg: #ffffff;
    --app-message-received-border: rgba(var(--color-primary-base), 0.15);
    --app-message-sent-text: #0f2d21;
    --app-message-received-text: #1b4332;
    --app-message-hover-shadow: 0 12px 26px rgba(var(--color-primary-base), 0.16);
    --app-message-focus-outline: rgba(31, 111, 139, 0.45);
    --app-message-context-outline: rgba(144, 224, 239, 0.85);

    /* Context menus */
    --app-context-menu-bg: #0b132b;
    --app-context-menu-text: #f1f5f9;
    --app-context-menu-hover-bg: rgba(241, 245, 249, 0.12);
    --app-context-menu-hover-text: #90e0ef;
    --app-context-menu-shadow: 0 22px 46px rgba(11, 19, 43, 0.4);

    /* Compose/input focus */
    --app-compose-focus-border: rgba(var(--color-primary-accent), 0.35);
    --app-compose-focus-shadow: 0 0 0 4px rgba(var(--color-primary-accent), 0.12);

    /* Page backgrounds */
    --app-page-background: linear-gradient(160deg, #f4f7f7 0%, #f9fbfc 60%, #eef4f1 100%);

    /* Header and footer */
    --app-site-header-bg: linear-gradient(135deg, #f1f8f5, #dff5ec);
    --app-site-header-text: #0f2d21;
    --app-site-header-shadow: 0 18px 38px rgba(var(--color-primary-accent), 0.18);
    --app-site-footer-bg: linear-gradient(135deg, #e6f4ef, #cfe9de);
    --app-site-footer-text: #0f2d21;
    --app-site-footer-shadow: 0 -14px 32px rgba(var(--color-primary-accent), 0.18);

    /* Navigation */
    --app-nav-item-color: #1b4332;
    --app-nav-item-hover-color: #0f2d21;
    --app-nav-item-hover-bg: rgba(var(--color-primary-accent), 0.16);
    --app-nav-item-active-bg: rgba(var(--color-primary-accent), 0.16);
    --app-nav-dropdown-surface: rgba(255, 255, 255, 0.98);
    --app-nav-dropdown-border: rgba(var(--color-primary-base), 0.14);
    --app-nav-dropdown-shadow: 0 24px 54px rgba(var(--color-primary-base), 0.18);
    --app-nav-dropdown-text: #1b4332;
    --app-nav-dropdown-hover-bg: rgba(var(--color-primary-accent), 0.18);
    --app-nav-focus-outline: rgba(var(--color-primary-accent), 0.4);
    --app-nav-language-flag-outline: rgba(var(--color-primary-base), 0.25);
    --app-nav-language-caret: rgba(var(--color-primary-base), 0.65);
    --app-nav-user-toggle-active-bg: rgba(var(--color-primary-accent), 0.22);
    --app-nav-notification-bg: rgba(var(--color-primary-accent), 0.12);
    --app-nav-notification-hover-bg: rgba(var(--color-primary-accent), 0.22);
    --app-nav-notification-color: #1b4332;
    --app-nav-notification-focus-outline: rgba(var(--color-primary-accent), 0.35);
    --app-nav-dropdown-radius: var(--radius-lg);

    /* Form inputs - Light theme */
    --button-min-height: 44px;
    --input-border-color: rgba(var(--color-primary-base), 0.22);
    --input-focus-border: #2a7f62;
    --input-focus-shadow: rgba(var(--color-primary-accent), 0.18);
    --input-background: rgba(255, 255, 255, 0.92);
    --input-focus-background: rgba(255, 255, 255, 0.98);
    --input-text-color: #1f3d3d;
    --input-rest-shadow: 0 12px 24px rgba(15, 49, 49, 0.08);
    --input-placeholder-color: rgba(53, 96, 90, 0.65);
    --input-disabled-bg: rgba(236, 244, 243, 0.8);
    --input-disabled-text: rgba(31, 61, 61, 0.6);

    /* Buttons - Light theme */
    --button-border-color: rgba(var(--color-primary-base), 0.2);
    --button-background: #ffffff;
    --button-text-color: #1b4332;
    --button-rest-shadow: 0 12px 20px rgba(var(--color-primary-base), 0.12);
    --button-hover-border-color: rgba(var(--color-primary-accent), 0.65);
    --button-hover-background: rgba(var(--color-primary-accent), 0.12);
    --button-hover-shadow: 0 16px 26px rgba(var(--color-primary-base), 0.2);
    --button-hover-text-color: #0f2d21;

    /* Primary buttons - Light theme */
    --primary-button-background: linear-gradient(135deg, #60e0b9, #2d9b7c);
    --primary-button-text: #08241a;
    --primary-button-shadow: 0 14px 28px rgba(var(--color-primary-base), 0.16);
    --primary-button-hover-shadow: 0 18px 36px rgba(var(--color-primary-base), 0.2);

    /* Surfaces - Light theme */
    --surface-background: #ffffff;
    --surface-border: rgba(var(--color-primary-base), 0.12);
    --surface-shadow: 0 24px 64px rgba(31, 61, 61, 0.14);
    --surface-muted: rgba(31, 61, 61, 0.65);

    /* Documentation components - Light theme */
    --docs-chip-background: rgba(45, 155, 124, 0.12);
    --docs-chip-text: #205c4a;
    --docs-chip-hover-background: rgba(45, 155, 124, 0.2);
    --docs-chip-hover-text: #164536;
    --docs-group-background: rgba(255, 255, 255, 0.96);
    --docs-group-border: rgba(var(--color-primary-base), 0.12);
    --docs-group-summary: #205c4a;
    --docs-group-icon: rgba(var(--color-primary-base), 0.5);
    --docs-group-text: #1f3d3d;
    --docs-code-background: rgba(15, 49, 49, 0.06);
    --docs-code-text: #12362f;

    /* Integration components - Light theme */
    --integration-feature-background: rgba(255, 255, 255, 0.98);
    --integration-feature-border: rgba(var(--color-primary-base), 0.14);
    --integration-feature-text: #174b3a;
    --integration-feature-shadow: 0 18px 34px rgba(31, 61, 61, 0.12);
    --integration-field-background: rgba(var(--color-primary-accent), 0.04);
    --integration-field-border: rgba(var(--color-primary-base), 0.12);
    --integration-field-label: #1b4332;

    /* Links - Light theme */
    --link-color: #1f7a60;
    --link-hover-color: #145441;
    --link-underline-color: rgba(33, 94, 74, 0.45);

    /* Classroom/video components - Light theme */
    --classroom-video-background: #f1f5f9;
    --classroom-video-overlay-background: rgba(248, 250, 252, 0.92);
    --classroom-video-overlay-border: rgba(var(--color-primary-base), 0.12);
    --classroom-video-overlay-shadow: 0 22px 48px rgba(31, 61, 61, 0.14);
    --classroom-video-overlay-text: #1f3d3d;
    --jitsi-embed-surface-background: #f1f5f9;

    /* Broadcast banner - Light theme */
    --broadcast-background: rgba(var(--color-primary-base), 0.88);
    --broadcast-text: #f8fafc;
    --broadcast-border: rgba(255, 255, 255, 0.35);
    --broadcast-shadow: 0 18px 36px rgba(var(--color-primary-base), 0.28);
}

body.binary-theme--dark {
    /* Base colors - Dark theme */
    --color-primary-base: 148, 163, 184;
    --color-primary-accent: 59, 130, 246;
    --color-contrast-base: 248, 113, 113;

    /* Background gradients */
    background: radial-gradient(circle at top right, rgba(var(--color-primary-accent), 0.22), transparent 48%),
        radial-gradient(circle at 12% 18%, rgba(45, 212, 191, 0.2), transparent 55%),
        linear-gradient(150deg, #030a14 0%, #071421 45%, #020813 100%);
    color: var(--app-text-body);

    /* Text colors */
    --app-text-body: #e2e8f0;
    --app-text-strong: #f1f5f9;
    --app-text-subtle: rgba(226, 232, 240, 0.72);
    --app-text-muted: rgba(226, 232, 240, 0.68);
    --app-contact-text-strong: rgba(226, 232, 240, 0.85);
    --app-contact-text-secondary: rgba(var(--color-primary-base), 0.75);
    --app-contact-text-tertiary: rgba(var(--color-primary-base), 0.65);

    /* Accent colors */
    --app-accent-contrast: #fca5a5;
    --app-accent-contrast-strong: #fecaca;

    /* Surface colors */
    --app-card-background: rgba(23, 32, 49, 0.85);
    --app-card-shadow: 0 20px 44px rgba(2, 6, 23, 0.45);
    --app-card-hover-shadow: 0 26px 58px rgba(2, 6, 23, 0.6);
    --app-panel-background: rgba(15, 23, 42, 0.7);
    --app-panel-shadow: inset 0 0 0 1px rgba(var(--color-primary-accent), 0.12);
    --app-panel-refresh-bg: rgba(30, 41, 59, 0.78);
    --app-panel-refresh-border: rgba(129, 161, 255, 0.32);
    --app-panel-refresh-overlay: linear-gradient(180deg, rgba(var(--color-primary-accent), 0.1), rgba(30, 41, 59, 0.45));

    /* Interactive states */
    --app-contact-hover-bg: rgba(var(--color-primary-accent), 0.22);
    --app-contact-hover-border: rgba(129, 161, 255, 0.45);

    /* Avatar */
    --app-avatar-gradient: linear-gradient(135deg, rgba(30, 64, 175, 0.35), rgba(14, 116, 144, 0.45));
    --app-avatar-text: #e0f2fe;

    /* Archive/danger states */
    --app-archive-background: rgba(var(--color-contrast-base), 0.14);
    --app-archive-border: rgba(var(--color-contrast-base), 0.32);
    --app-archive-text: #fecaca;

    /* Borders */
    --app-border-subtle: rgba(var(--color-primary-base), 0.24);
    --app-border-divider: rgba(var(--color-primary-base), 0.18);
    --app-border-strong: rgba(129, 161, 255, 0.32);

    /* Messages */
    --app-message-sent-bg: linear-gradient(135deg, var(--app-accent-primary), var(--app-accent-primary-strong));
    --app-message-sent-border: transparent;
    --app-message-received-bg: rgba(37, 51, 75, 0.88);
    --app-message-received-border: rgba(var(--color-primary-base), 0.28);
    --app-message-sent-text: #ffffff;
    --app-message-received-text: #e2e8f0;
    --app-message-hover-shadow: 0 18px 42px rgba(2, 6, 23, 0.55);
    --app-message-focus-outline: rgba(144, 224, 239, 0.85);

    /* Context menus */
    --app-context-menu-bg: rgba(6, 12, 24, 0.95);
    --app-context-menu-text: #e2e8f0;
    --app-context-menu-hover-bg: rgba(var(--color-primary-accent), 0.18);
    --app-context-menu-hover-text: #bfdbfe;
    --app-context-menu-shadow: 0 28px 60px rgba(2, 6, 23, 0.55);

    /* Page backgrounds */
    --app-page-background: linear-gradient(160deg, rgba(3, 10, 20, 0.98) 0%, rgba(6, 16, 28, 0.96) 55%, rgba(2, 8, 19, 0.94) 100%);

    /* Header and footer */
    --app-site-header-bg: linear-gradient(135deg, rgba(13, 33, 25, 0.94), rgba(8, 21, 15, 0.94));
    --app-site-header-text: #e7f5ef;
    --app-site-header-shadow: 0 18px 40px rgba(2, 6, 23, 0.65);
    --app-site-footer-bg: linear-gradient(135deg, rgba(8, 21, 15, 0.95), rgba(6, 17, 12, 0.95));
    --app-site-footer-text: #e7f5ef;
    --app-site-footer-shadow: 0 -18px 40px rgba(2, 6, 23, 0.65);

    /* Navigation */
    --app-nav-item-color: #e7f5ef;
    --app-nav-item-hover-color: #f8fafc;
    --app-nav-item-hover-bg: rgba(var(--color-primary-accent), 0.22);
    --app-nav-item-active-bg: rgba(var(--color-primary-accent), 0.22);
    --app-nav-dropdown-surface: rgba(15, 23, 42, 0.92);
    --app-nav-dropdown-border: rgba(var(--color-primary-base), 0.24);
    --app-nav-dropdown-shadow: 0 28px 60px rgba(2, 6, 23, 0.65);
    --app-nav-dropdown-text: #e2e8f0;
    --app-nav-dropdown-hover-bg: rgba(var(--color-primary-accent), 0.24);
    --app-nav-focus-outline: rgba(129, 161, 255, 0.45);
    --app-nav-language-flag-outline: rgba(var(--color-primary-base), 0.35);
    --app-nav-language-caret: rgba(226, 232, 240, 0.72);
    --app-nav-user-toggle-active-bg: rgba(var(--color-primary-accent), 0.22);
    --app-nav-notification-bg: rgba(var(--color-primary-accent), 0.16);
    --app-nav-notification-hover-bg: rgba(var(--color-primary-accent), 0.26);
    --app-nav-notification-color: #e2e8f0;
    --app-nav-notification-focus-outline: rgba(129, 161, 255, 0.45);
    --app-nav-dropdown-radius: 0.95rem;

    /* Compose/input focus */
    --app-compose-focus-border: rgba(129, 161, 255, 0.45);
    --app-compose-focus-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);

    /* Form inputs */
    --input-border-color: rgba(var(--color-primary-base), 0.38);
    --input-focus-border: rgba(129, 140, 248, 0.85);
    --input-focus-shadow: rgba(129, 140, 248, 0.32);
    --input-background: rgba(11, 25, 40, 0.88);
    --input-focus-background: rgba(14, 27, 44, 0.95);
    --input-text-color: #f8fafc;
    --input-rest-shadow: 0 22px 48px rgba(2, 6, 23, 0.55);
    --input-placeholder-color: rgba(203, 213, 225, 0.68);
    --input-disabled-bg: rgba(30, 41, 59, 0.65);
    --input-disabled-text: rgba(var(--color-primary-base), 0.65);

    /* Buttons */
    --button-border-color: rgba(129, 140, 248, 0.45);
    --button-background: rgba(15, 23, 42, 0.82);
    --button-text-color: #e2e8f0;
    --button-rest-shadow: 0 24px 46px rgba(2, 6, 23, 0.55);
    --button-hover-border-color: rgba(99, 102, 241, 0.6);
    --button-hover-background: rgba(88, 28, 135, 0.28);
    --button-hover-shadow: 0 28px 58px rgba(2, 6, 23, 0.68);
    --button-hover-text-color: #f8fafc;

    /* Primary buttons */
    --primary-button-background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(30, 64, 175, 0.92));
    --primary-button-text: #f8fafc;
    --primary-button-shadow: 0 26px 56px rgba(2, 6, 23, 0.65);
    --primary-button-hover-shadow: 0 32px 70px rgba(2, 6, 23, 0.78);

    /* Surfaces */
    --surface-background: rgba(8, 18, 32, 0.9);
    --surface-border: rgba(var(--color-primary-base), 0.28);
    --surface-shadow: 0 32px 76px rgba(2, 6, 23, 0.68);
    --surface-muted: rgba(226, 232, 240, 0.72);

    /* Documentation components */
    --docs-chip-background: rgba(15, 23, 42, 0.78);
    --docs-chip-text: #d1fae5;
    --docs-chip-hover-background: rgba(37, 99, 235, 0.35);
    --docs-chip-hover-text: #f8fafc;
    --docs-group-background: rgba(10, 21, 38, 0.82);
    --docs-group-border: rgba(var(--color-primary-base), 0.32);
    --docs-group-summary: rgba(226, 232, 240, 0.9);
    --docs-group-icon: rgba(165, 180, 252, 0.88);
    --docs-group-text: rgba(226, 232, 240, 0.82);
    --docs-code-background: rgba(15, 23, 42, 0.85);
    --docs-code-text: #f8fafc;

    /* Integration components */
    --integration-feature-background: rgba(15, 23, 42, 0.82);
    --integration-feature-border: rgba(99, 102, 241, 0.42);
    --integration-feature-text: #e2e8f0;
    --integration-feature-shadow: 0 24px 60px rgba(2, 6, 23, 0.6);
    --integration-field-background: rgba(10, 21, 38, 0.82);
    --integration-field-border: rgba(var(--color-primary-base), 0.28);
    --integration-field-label: rgba(226, 232, 240, 0.85);

    /* Links */
    --link-color: #93c5fd;
    --link-hover-color: #bfdbfe;
    --link-underline-color: rgba(var(--color-primary-base), 0.55);

    /* Classroom/video components */
    --classroom-video-background: rgba(6, 14, 26, 0.95);
    --classroom-video-overlay-background: rgba(4, 12, 24, 0.82);
    --classroom-video-overlay-border: rgba(var(--color-primary-base), 0.32);
    --classroom-video-overlay-shadow: 0 26px 54px rgba(2, 6, 23, 0.7);
    --classroom-video-overlay-text: #f8fafc;
    --jitsi-embed-surface-background: rgba(6, 14, 26, 0.95);

    /* Broadcast banner */
    --broadcast-background: rgba(15, 23, 42, 0.92);
    --broadcast-text: #e2e8f0;
    --broadcast-border: rgba(var(--color-primary-base), 0.32);
    --broadcast-shadow: 0 26px 48px rgba(2, 6, 23, 0.6);
}

.app-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

body.binary-theme--dark .app-page {
    background: radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.18), transparent 60%),
        radial-gradient(circle at 82% 0%, rgba(139, 92, 246, 0.16), transparent 65%),
        linear-gradient(160deg, rgba(3, 10, 20, 0.98) 0%, rgba(6, 16, 28, 0.96) 55%, rgba(2, 8, 19, 0.94) 100%);
}

body.binary-theme--dark .muted,
body.binary-theme--dark .small {
    color: rgba(226, 232, 240, 0.75);
    opacity: 1;
}

body.binary-theme--dark input::placeholder,
body.binary-theme--dark textarea::placeholder {
    color: rgba(226, 232, 240, 0.5);
    opacity: 1;
}

.app-page main {
    flex: 1 0 auto;
    display: block;
    width: 100%;
    max-width: 100%;
}

html {
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

.app-broadcast-banner[hidden] {
    display: none !important;
}

.app-broadcast-banner {
    position: relative;
    width: 100%;
    padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
    background: var(--broadcast-background);
    color: var(--broadcast-text);
    border-bottom: 1px solid var(--broadcast-border);
    backdrop-filter: blur(12px);
    box-shadow: var(--broadcast-shadow);
    z-index: 60;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.18s ease, transform 0.22s ease;
}

.app-broadcast-banner.visible {
    opacity: 1;
    transform: translateY(0);
}

.app-broadcast-banner__content {
    max-width: min(1200px, 92vw);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
}

.app-broadcast-banner__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.92;
}

.app-broadcast-banner__message {
    font-size: 0.95rem;
    font-weight: 500;
}

.app-broadcast-banner__message a {
    color: inherit;
    text-decoration: underline;
}

button,
input,
select,
textarea {
    font-family: inherit;
    max-width: 100%;
    box-sizing: border-box;
}

/* Prevent zoom on iOS when focusing inputs and buttons */
@media (max-width: 768px) {

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    textarea,
    select,
    button {
        font-size: 16px;
    }
}

/* -------------------------------------------------------------------------- */
/*  Site footer                                                               */
/* -------------------------------------------------------------------------- */
.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xl);
}

.site-footer .footer-left,
.site-footer .footer-right {
    flex: 1 1 0;
    display: flex;
    align-items: center;
}

.site-footer .footer-left {
    justify-content: flex-start;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    font-size: 0.95rem;
}

.site-footer .footer-center {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-footer .footer-right {
    justify-content: flex-end;
    gap: var(--spacing-lg);
}

.site-footer .footer-divider {
    opacity: 0.6;
}

.site-footer .footer-link {
    font-weight: 600;
}

.site-footer .footer-git-link {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    background: rgba(var(--color-primary-base), 0.12);
    border: 1px solid rgba(var(--color-primary-base), 0.24);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.site-footer .footer-git-link:hover,
.site-footer .footer-git-link:focus {
    transform: translateY(-1px);
    background: rgba(27, 67, 50, 0.18);
    border-color: rgba(42, 127, 98, 0.38);
    box-shadow: 0 12px 24px rgba(17, 49, 41, 0.22);
}

.site-footer .footer-git-icon {
    width: 1.4rem;
    height: 1.4rem;
}

body.binary-theme--dark .site-footer .footer-divider {
    opacity: 0.5;
}

body.binary-theme--dark .site-footer .footer-git-link {
    background: rgba(148, 163, 184, 0.14);
    border-color: rgba(148, 163, 184, 0.3);
}

body.binary-theme--dark .site-footer .footer-git-link:hover,
body.binary-theme--dark .site-footer .footer-git-link:focus {
    background: rgba(99, 102, 241, 0.32);
    border-color: rgba(129, 140, 248, 0.55);
    box-shadow: 0 16px 32px rgba(2, 6, 23, 0.58);
}

:root {
    --button-min-height: 44px;
    --input-border-color: rgba(27, 67, 50, 0.22);
    --input-focus-border: #2a7f62;
    --input-focus-shadow: rgba(42, 127, 98, 0.18);
    --input-background: rgba(255, 255, 255, 0.92);
    --input-focus-background: rgba(255, 255, 255, 0.98);
    --input-text-color: #1f3d3d;
    --input-rest-shadow: 0 12px 24px rgba(15, 49, 49, 0.08);
    --input-placeholder-color: rgba(53, 96, 90, 0.65);
    --input-disabled-bg: rgba(236, 244, 243, 0.8);
    --input-disabled-text: rgba(31, 61, 61, 0.6);
    --button-border-color: rgba(27, 67, 50, 0.2);
    --button-background: #ffffff;
    --button-text-color: #1b4332;
    --button-rest-shadow: 0 12px 20px rgba(27, 67, 50, 0.12);
    --button-hover-border-color: rgba(42, 127, 98, 0.65);
    --button-hover-background: rgba(42, 127, 98, 0.12);
    --button-hover-shadow: 0 16px 26px rgba(27, 67, 50, 0.2);
    --button-hover-text-color: #0f2d21;
    --primary-button-background: linear-gradient(135deg, #60e0b9, #2d9b7c);
    --primary-button-text: #08241a;
    --primary-button-shadow: 0 14px 28px rgba(27, 67, 50, 0.16);
    --primary-button-hover-shadow: 0 18px 36px rgba(27, 67, 50, 0.2);
    --surface-background: #ffffff;
    --surface-border: rgba(27, 67, 50, 0.12);
    --surface-shadow: 0 24px 64px rgba(31, 61, 61, 0.14);
    --surface-muted: rgba(31, 61, 61, 0.65);
    --docs-chip-background: rgba(45, 155, 124, 0.12);
    --docs-chip-text: #205c4a;
    --docs-chip-hover-background: rgba(45, 155, 124, 0.2);
    --docs-chip-hover-text: #164536;
    --docs-group-background: rgba(255, 255, 255, 0.96);
    --docs-group-border: rgba(27, 67, 50, 0.12);
    --docs-group-summary: #205c4a;
    --docs-group-icon: rgba(27, 67, 50, 0.5);
    --docs-group-text: #1f3d3d;
    --docs-code-background: rgba(15, 49, 49, 0.06);
    --docs-code-text: #12362f;
    --integration-feature-background: rgba(255, 255, 255, 0.98);
    --integration-feature-border: rgba(27, 67, 50, 0.14);
    --integration-feature-text: #174b3a;
    --integration-feature-shadow: 0 18px 34px rgba(31, 61, 61, 0.12);
    --integration-field-background: rgba(42, 127, 98, 0.04);
    --integration-field-border: rgba(27, 67, 50, 0.12);
    --integration-field-label: #1b4332;
    --link-color: #1f7a60;
    --link-hover-color: #145441;
    --link-underline-color: rgba(33, 94, 74, 0.45);
    --classroom-video-background: #f1f5f9;
    --classroom-video-overlay-background: rgba(248, 250, 252, 0.92);
    --classroom-video-overlay-border: rgba(27, 67, 50, 0.12);
    --classroom-video-overlay-shadow: 0 22px 48px rgba(31, 61, 61, 0.14);
    --classroom-video-overlay-text: #1f3d3d;
    --jitsi-embed-surface-background: #f1f5f9;
    --broadcast-background: rgba(27, 67, 50, 0.88);
    --broadcast-text: #f8fafc;
    --broadcast-border: rgba(255, 255, 255, 0.35);
    --broadcast-shadow: 0 18px 36px rgba(27, 67, 50, 0.28);
}

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

.login-body {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f9ff 0%, #eef6ff 40%, #f4fffb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-layout {
    width: 100%;
    max-width: 1080px;
    margin: clamp(2.5rem, 6vw, 4rem) auto;
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 5vw, 2.5rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3rem);
    box-sizing: border-box;
}

.login-hero {
    background: rgba(255, 255, 255, 0.75);
    border-radius: 24px;
    padding: clamp(2rem, 4vw, 2.75rem);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.hero-lockup {
    width: 240px;
    max-width: 100%;
    object-fit: contain;
}

.hero-tagline {
    font-size: 1.15rem;
    line-height: 1.5;
    color: #1e3a3a;
    margin: 0;
}

.hero-highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.hero-highlights li {
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    background: rgba(42, 127, 98, 0.1);
    color: #1b4332;
    font-weight: 500;
}

.login-panel {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.login-panel,
.login-hero {
    min-width: 0;
}

#email-mfa-success-continue,
#verify-email-return {
    display: flex;
    justify-content: center;
    width: min(100%, 360px);
    margin: 0 auto;
}

.login-card {
    background: #ffffff;
    border-radius: 20px;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    box-shadow: 0 24px 48px rgba(16, 49, 49, 0.1);
    width: min(100%, 460px);
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.registration-page .registration-card {
    width: min(100%, 520px);
}

.registration-name-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.registration-name-field input {
    margin-bottom: 0;
}

.registration-custom-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.registration-custom-field .input-label {
    margin-bottom: 0.35rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.registration-optional {
    font-size: 0.875rem;
    color: rgba(31, 61, 61, 0.65);
    margin-left: 0.5rem;
}

.registration-custom-field select,
.registration-custom-field input,
.registration-custom-field textarea {
    margin-bottom: 0;
}

.registration-notes-field textarea {
    min-height: 120px;
}

.registration-page .form-feedback {
    margin-top: 1.25rem;
    text-align: center;
}

.switch-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #1f3d3d;
}

.switch-field input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.registration-details-row td {
    background: rgba(42, 127, 98, 0.04);
    padding: 1.25rem 1.5rem;
}

.registration-details {
    display: grid;
    gap: 0.75rem;
}

.registration-detail {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 0.35rem 1rem;
    align-items: baseline;
}

.registration-detail dt {
    font-weight: 600;
    color: #1f3d3d;
}

.registration-detail dd {
    margin: 0;
    color: rgba(27, 67, 50, 0.85);
}

.login-register-hint {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    text-align: center;
    color: rgba(27, 67, 50, 0.8);
}

.login-register-hint a {
    margin-left: 0.5rem;
    color: #1b4332;
    font-weight: 600;
    text-decoration: none;
}

.login-register-hint a:hover,
.login-register-hint a:focus {
    text-decoration: underline;
}

.login-card h2,
.login-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #1b4332;
}

.input-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: #1f3d3d;
}

.login-card input[type="text"],
.login-card input[type="password"],
.login-card input[type="date"],
.login-card textarea,
.login-card select {
    width: 100%;
    max-width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(27, 67, 50, 0.2);
    border-radius: 0.85rem;
    font-size: 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.tfa-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.tfa-method-button {
    flex: 1 1 45%;
    min-width: 9rem;
    text-transform: none;
}

.tfa-method-button.active {
    background: linear-gradient(135deg, #2a7f62, #1b4332);
    border-color: rgba(27, 67, 50, 0.85);
    color: #ffffff;
    box-shadow: 0 16px 28px rgba(27, 67, 50, 0.18);
}

.tfa-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

#tfa-hint {
    margin-bottom: 0.5rem;
}

#tfa-cancel {
    margin-top: 0.25rem;
    align-self: flex-start;
}

.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus,
.login-card input[type="date"]:focus,
.login-card textarea:focus,
.login-card select:focus {
    border-color: #2a7f62;
    box-shadow: 0 0 0 4px rgba(42, 127, 98, 0.12);
    outline: none;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 27, 27, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 2000;
}

.modal-dialog {
    background: #ffffff;
    color: #1f3d3d;
    border-radius: 1rem;
    box-shadow: 0 30px 70px rgba(16, 49, 49, 0.18);
    padding: 1.75rem;
    max-width: 440px;
    width: 100%;
    outline: none;
}

.modal-dialog h2 {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    color: #1b4332;
}

.modal-dialog p {
    margin: 0 0 1rem;
    line-height: 1.5;
}

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

.modal-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.95rem;
}

.modal-field span {
    font-weight: 600;
    color: #1b4332;
}

.modal-field input[type="password"],
.modal-field input[type="text"],
.modal-field select {
    border: 1px solid rgba(27, 67, 50, 0.28);
    border-radius: 0.65rem;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.modal-field input[type="password"]:focus,
.modal-field input[type="text"]:focus,
.modal-field select:focus {
    border-color: #2a7f62;
    box-shadow: 0 0 0 4px rgba(42, 127, 98, 0.12);
    outline: none;
}

.modal-error {
    min-height: 1.25rem;
    margin: 0;
    color: #d64545;
    font-size: 0.9rem;
}

.modal-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 1rem;
    font-size: 0.95rem;
}

.modal-checkbox-input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
}

.modal-actions {
    margin-top: 1.75rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

body.login-blocking-active {
    overflow: hidden;
}

.login-verification-overlay {
    z-index: 2500;
}

.login-verification-dialog {
    max-width: 520px;
}

.login-verification-dialog .form-feedback {
    margin-bottom: 1rem;
}

.login-verification-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
}

.login-verification-actions .primary-button,
.login-verification-actions .default-button {
    flex: 1 1 220px;
}

.login-verification-signout {
    margin-top: 0.75rem;
    font-size: 0.95rem;
}

.modal-cancel,
.modal-confirm {
    border-radius: 0.75rem;
    padding: 0.75rem 1.35rem;
    font-weight: 600;
    cursor: pointer;
    min-height: var(--button-min-height);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.modal-cancel {
    background: #ffffff;
    border: 1px solid rgba(27, 67, 50, 0.28);
    color: #1b4332;
}

.modal-cancel:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(27, 67, 50, 0.08);
}

.modal-confirm {
    border: none;
    color: #ffffff;
    background: linear-gradient(135deg, #d64545, #962d2d);
    box-shadow: 0 16px 32px rgba(214, 69, 69, 0.25);
}

.modal-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(214, 69, 69, 0.32);
}

.modal-confirm:disabled,
.modal-cancel:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.primary-button {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.85rem 1.2rem;
    border: none;
    border-radius: 0.85rem;
    font-weight: 600;
    font-size: 1rem;
    background: var(--primary-button-background);
    color: var(--primary-button-text);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    min-height: var(--button-min-height);
    box-shadow: var(--primary-button-shadow);
}

.primary-button:hover,
.primary-button:focus {
    transform: translateY(-1px);
    box-shadow: var(--primary-button-hover-shadow);
    outline: none;
}

.primary-button.button-inactive {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
}

.primary-button.button-inactive:hover,
.primary-button.button-inactive:focus {
    transform: none;
    box-shadow: none;
}

.form-feedback {
    min-height: 1.5rem;
    color: #1f6f8b;
}

.form-feedback.success {
    color: #1b4332;
}

.form-feedback.failure,
.form-feedback.error {
    color: #c1121f;
}

.form-feedback.progress {
    color: #1f6f8b;
}

.demo-account-list {
    display: grid;
    gap: 0.75rem;
}

.demo-account-button {
    width: 100%;
    border: 1px solid rgba(27, 67, 50, 0.15);
    border-radius: 0.85rem;
    background: #f8fffb;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}

.demo-account-button:hover,
.demo-account-button:focus {
    border-color: #2a7f62;
    box-shadow: 0 12px 24px rgba(42, 127, 98, 0.16);
    transform: translateY(-1px);
    outline: none;
}

.demo-account-button.loading {
    opacity: 0.6;
    cursor: progress;
}

.assignments-page .card {
    min-height: 0;
}

.assignment-list {
    display: grid;
    gap: 1rem;
}

.teacher-overview {
    grid-column: 1 / -1;
}

.assignment-details summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: baseline;
    cursor: pointer;
    font-weight: 600;
}

.assignment-title {
    font-size: 1.05rem;
    color: #1b4332;
}

.assignment-meta {
    font-size: 0.9rem;
    color: #35605a;
}

.assignment-stats {
    display: inline-flex;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: #1b4332;
}

.assignment-student-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: 0.6rem;
}

.assignment-student-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.75rem;
    background: rgba(42, 127, 98, 0.08);
    border-radius: 0.75rem;
}

.student-name {
    font-weight: 600;
    color: #1b4332;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.status-badge.status-assigned {
    background: rgba(42, 127, 98, 0.1);
    color: #1b4332;
}

.status-badge.status-inprogress {
    background: rgba(245, 166, 35, 0.18);
    color: #a35c00;
}

.status-badge.status-completed {
    background: rgba(39, 125, 161, 0.18);
    color: #0b7285;
}

.assignment-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.action-spacer {
    display: inline-block;
    width: 0.25rem;
}

.assignment-roster {
    border: 1px solid rgba(27, 67, 50, 0.15);
    border-radius: 1rem;
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1.25rem;
    display: grid;
    gap: 0.85rem;
    background: rgba(248, 255, 251, 0.85);
}

.assignment-roster legend {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.roster-option {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    cursor: pointer;
    padding: 0.5rem 0.6rem;
    border-radius: 0.75rem;
    transition: background-color 0.18s ease;
}

.roster-option:hover,
.roster-option:focus-within {
    background-color: rgba(42, 127, 98, 0.08);
}

.roster-option input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.35rem;
}

.roster-option .muted {
    display: block;
    font-size: 0.85rem;
}

.demo-role {
    font-weight: 700;
    color: #1b4332;
}

.demo-name {
    font-weight: 500;
    color: #1f3d3d;
}

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

.empty-state {
    padding: 1rem;
    border-radius: 0.75rem;
    background: rgba(33, 79, 60, 0.08);
    color: #1f3d3d;
    margin: 0;
}

.empty-state a,
.muted a {
    color: var(--link-color);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-decoration-color: var(--link-underline-color);
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.empty-state a:hover,
.empty-state a:focus-visible,
.muted a:hover,
.muted a:focus-visible {
    color: var(--link-hover-color);
    text-decoration-color: var(--link-hover-color);
}

@media (max-width: 960px) {
    .login-layout {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 4vw, 2.25rem);
        margin: clamp(1.5rem, 5vw, 3rem) auto;
        padding: clamp(1.25rem, 4vw, 2rem) clamp(1rem, 5vw, 2rem);
    }

    .login-hero {
        order: 2;
        text-align: center;
        align-items: center;
        padding: clamp(1.75rem, 5vw, 2.25rem);
    }

    .login-panel {
        order: 1;
    }

    .login-card {
        width: min(100%, 520px);
    }
}

@media (max-width: 720px) {
    .login-layout {
        margin: clamp(1.25rem, 6vw, 2.5rem) auto;
        padding: clamp(1rem, 5vw, 1.75rem) clamp(0.75rem, 5vw, 1.5rem);
    }

    .login-card {
        padding: clamp(1.25rem, 5vw, 1.75rem);
    }

    .hero-tagline {
        font-size: 1.05rem;
    }
}

@media (max-width: 480px) {
    .login-layout {
        margin: clamp(0.75rem, 4vw, 1.5rem) auto;
        padding: clamp(0.75rem, 3vw, 1rem);
    }

    .login-hero {
        border-radius: 16px;
        padding: clamp(1rem, 4vw, 1.5rem);
    }

    .login-card {
        padding: clamp(1rem, 4vw, 1.35rem);
        border-radius: 16px;
    }

    .hero-lockup {
        width: 180px;
    }

    .hero-tagline {
        font-size: 0.95rem;
    }
}


main {
    padding: 2rem;
}

@media (max-width: 720px) {
    main {
        padding: 1.5rem 1rem;
    }
}

.login-container {
    max-width: 400px;
    /* Set a maximum width */
    margin: auto;
    /* Center the container */
    padding: 20px;
    /* Inner padding */
    background-color: #ffffff;
    /* Background color for the container */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
}

/* -------------------------------------------------------------------------- */
/*  Form inputs                                                               */
/* -------------------------------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea {
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--input-border-color);
    background: var(--input-background);
    color: var(--input-text-color);
    box-shadow: var(--input-rest-shadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 4px var(--input-focus-shadow);
    outline: none;
    background: var(--input-focus-background, var(--input-background));
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
input[type="date"]::placeholder,
input[type="time"]::placeholder,
textarea::placeholder {
    color: var(--input-placeholder-color);
}

input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="email"]:disabled,
input[type="url"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
textarea:disabled,
select:disabled {
    background: var(--input-disabled-bg);
    color: var(--input-disabled-text);
    cursor: not-allowed;
    box-shadow: none;
}

/* -------------------------------------------------------------------------- */
/*  Buttons                                                                   */
/* -------------------------------------------------------------------------- */
.default-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.65rem 1.1rem;
    min-height: var(--button-min-height);
    border-radius: var(--radius-lg);
    border: 1px solid var(--button-border-color);
    background: var(--button-background);
    color: var(--button-text-color);
    box-shadow: var(--button-rest-shadow);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.375;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    text-decoration: none;
}

.default-button:hover,
.default-button:focus {
    border-color: var(--button-hover-border-color);
    background: var(--button-hover-background);
    color: var(--button-hover-text-color, var(--button-text-color));
    box-shadow: var(--button-hover-shadow);
    outline: none;
    text-decoration: none;
}

.default-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.voice-record-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.voice-record-button__icon {
    font-size: 1.05em;
}

.voice-record-button.is-recording {
    background: var(--app-accent-contrast);
    border-color: var(--app-accent-contrast-strong, var(--app-accent-contrast));
    color: #fff;
}

body.binary-theme--dark .voice-record-button.is-recording {
    color: #fff;
    box-shadow: 0 0 0 1px var(--app-border-strong);
}

.default-button.primary-outline {
    border-color: rgba(var(--color-primary-accent), 0.55);
    background: rgba(var(--color-primary-accent), 0.1);
    color: var(--app-text-strong);
}

.default-button.primary-outline:hover,
.default-button.primary-outline:focus {
    border-color: rgba(var(--color-primary-base), 0.75);
    background: rgba(var(--color-primary-accent), 0.18);
}

.default-button.danger-button,
.default-button.remove-button {
    background: var(--app-accent-contrast);
    border-color: #9a0f19;
    color: #ffffff;
}

.default-button.danger-button:hover,
.default-button.danger-button:focus,
.default-button.remove-button:hover,
.default-button.remove-button:focus {
    background: #a00d1a;
    border-color: #7f0a14;
}

.post-delete-button,
.button-danger,
.default-button.danger {
    background: rgba(239, 68, 68, 0.85);
    border-color: rgba(239, 68, 68, 1);
    color: #ffffff;
}

.post-delete-button:hover,
.button-danger:hover,
.default-button.danger:hover {
    background: rgba(220, 38, 38, 0.95);
    border-color: rgba(220, 38, 38, 1);
}

.icon-button {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    font-size: 0.95rem;
}

#error-message {
    margin-top: 10px;
    /* Space above error message */
}






/* Administration page styles */
.admin-shell #admin-panel {
    width: 100%;
}

.tab-button {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    padding: 0;
    text-align: inherit;
    cursor: pointer;
}

.tab-button:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.6);
    outline-offset: 4px;
}

.tab-pane {
    display: none;
}

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

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.panel-header h2 {
    margin: 0;
}

.panel-header .default-button {
    margin-left: auto;
}

.configuration-warnings-card {
    margin-bottom: 1.5rem;
    border-left: 4px solid rgba(245, 158, 11, 0.6);
    padding-left: 1.75rem;
}

.configuration-warnings-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.configuration-warning {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--surface-border);
}

.configuration-warning:first-child {
    border-top: none;
    padding-top: 0;
}

.configuration-warning__indicator {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
    flex-shrink: 0;
}

.configuration-warning__content {
    flex: 1 1 auto;
}

.configuration-warning__label {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b45309;
}

.configuration-warning__message {
    margin: 0.25rem 0 0;
}

.configuration-warning--critical .configuration-warning__indicator {
    background: rgba(248, 113, 113, 0.18);
    color: #b91c1c;
}

.configuration-warning--critical .configuration-warning__label {
    color: #b91c1c;
}

.configuration-warning--info .configuration-warning__indicator {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}

.configuration-warning--info .configuration-warning__label {
    color: #1d4ed8;
}

body.binary-theme--dark .configuration-warnings-card {
    border-left-color: rgba(253, 186, 116, 0.72);
}

body.binary-theme--dark .configuration-warning__indicator {
    background: rgba(253, 186, 116, 0.22);
    color: #fbbf24;
}

body.binary-theme--dark .configuration-warning__label {
    color: #facc15;
}

body.binary-theme--dark .configuration-warning--critical .configuration-warning__indicator {
    background: rgba(248, 113, 113, 0.28);
    color: #fca5a5;
}

body.binary-theme--dark .configuration-warning--critical .configuration-warning__label {
    color: #f87171;
}

body.binary-theme--dark .configuration-warning--info .configuration-warning__indicator {
    background: rgba(96, 165, 250, 0.24);
    color: #93c5fd;
}

body.binary-theme--dark .configuration-warning--info .configuration-warning__label {
    color: #bfdbfe;
}

/* Overlay for the popup */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 1.5rem;
}

body.binary-theme--light .popup-overlay {
    background-color: rgba(15, 49, 49, 0.26);
}

body.binary-theme--dark .popup-overlay {
    background-color: rgba(2, 6, 23, 0.7);
}

body.libprompt-open {
    overflow: hidden;
}

.libprompt-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: rgba(15, 23, 42, 0.32);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1200;
}

body.binary-theme--dark .libprompt-overlay {
    background-color: rgba(2, 6, 23, 0.58);
}

.libprompt-overlay.is-visible {
    opacity: 1;
}

.libprompt {
    width: min(420px, 100%);
    background: #ffffff;
    border-radius: 1.1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 28px 48px rgba(15, 23, 42, 0.18);
    padding: clamp(1.6rem, 2.8vw, 2.1rem);
    color: #0f172a;
}

body.binary-theme--dark .libprompt {
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow: 0 28px 52px rgba(2, 6, 23, 0.65);
    color: #e2e8f0;
}

.libprompt__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.libprompt__message {
    margin: 0.9rem 0 0;
    font-size: 1rem;
    line-height: 1.55;
}

.libprompt__buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.75rem;
    flex-wrap: wrap;
}

.libprompt__button {
    border-radius: 0.85rem;
    padding: 0.75rem 1.35rem;
    font-weight: 600;
    cursor: pointer;
    min-height: var(--button-min-height, 2.75rem);
    border: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.libprompt__button:hover,
.libprompt__button:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.libprompt__button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.libprompt__button--secondary {
    background: #ffffff;
    border: 1px solid rgba(27, 67, 50, 0.24);
    color: #1b4332;
    box-shadow: 0 12px 22px rgba(27, 67, 50, 0.08);
}

body.binary-theme--dark .libprompt__button--secondary {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #e2e8f0;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.55);
}

.libprompt__button--secondary:hover,
.libprompt__button--secondary:focus-visible {
    box-shadow: 0 16px 28px rgba(27, 67, 50, 0.12);
}

body.binary-theme--dark .libprompt__button--secondary:hover,
body.binary-theme--dark .libprompt__button--secondary:focus-visible {
    box-shadow: 0 18px 32px rgba(2, 6, 23, 0.65);
}

.libprompt__button--primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.28);
}

.libprompt__button--primary:hover,
.libprompt__button--primary:focus-visible {
    box-shadow: 0 22px 40px rgba(37, 99, 235, 0.32);
}

.libprompt__button--danger {
    background: linear-gradient(135deg, #d64545, #962d2d);
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(214, 69, 69, 0.28);
}

.libprompt__button--danger:hover,
.libprompt__button--danger:focus-visible {
    box-shadow: 0 22px 42px rgba(214, 69, 69, 0.35);
}

/* Popup container */
.popup {
    position: relative;
    width: min(420px, 100%);
    padding: clamp(1.5rem, 2.8vw, 2rem);
    border-radius: 1.25rem;
    background: var(--surface-background);
    border: 1px solid var(--surface-border);
    box-shadow: var(--surface-shadow);
    color: inherit;
    backdrop-filter: blur(18px);
}

.language-manager-popup {
    width: min(640px, 100%);
}

/* Close button */
.popup .close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--surface-muted);
    transition: color 0.2s ease, transform 0.2s ease;
}

.popup .close:hover,
.popup .close:focus-visible {
    color: var(--button-hover-text-color);
    transform: scale(1.08);
    outline: none;
}

/* Form styling */
#create-user-form {
    display: grid;
    gap: 0.9rem;
}

#create-user-form input,
#create-user-form select {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.85rem;
    border: 1px solid var(--input-border-color);
    background: var(--input-background);
    color: var(--input-text-color);
    box-shadow: var(--input-rest-shadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

#create-user-form input::placeholder {
    color: var(--input-placeholder-color);
}

#create-user-form input:focus,
#create-user-form select:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 4px var(--input-focus-shadow);
    outline: none;
    background: var(--input-background);
}

#create-user-form button {
    width: 100%;
}

/* Select Styles */

select {
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 0.85rem;
    border: 1px solid var(--input-border-color);
    background: var(--input-background);
    color: var(--input-text-color);
    font-weight: 500;
    min-height: var(--button-min-height);
    box-shadow: var(--input-rest-shadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

select:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 4px var(--input-focus-shadow);
    outline: none;
    background: var(--input-background);
    color: var(--input-text-color);
}

.language-manager-list {
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 1.5rem;
    padding-right: 0.25rem;
}

.language-manager-empty {
    text-align: center;
    padding: 1rem 0;
    color: var(--surface-muted);
}

.language-manager-table,
.user-table,
.role-table,
.teacher-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface-background);
    border: 1px solid var(--surface-border);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--surface-shadow);
}

.language-manager-table thead th,
.user-table thead th,
.role-table thead th,
.teacher-table thead th {
    background: linear-gradient(135deg, rgba(42, 127, 98, 0.16), rgba(27, 67, 50, 0.22));
    color: #0f2d21;
    font-weight: 700;
    text-align: left;
    padding: 0.85rem 1.1rem;
    letter-spacing: 0.01em;
    border-bottom: 1px solid rgba(27, 67, 50, 0.12);
}

.language-manager-table thead th:last-child,
.user-table thead th:last-child,
.role-table thead th:last-child,
.teacher-table thead th:last-child {
    text-align: right;
}

.language-manager-table tbody tr,
.user-table tbody tr,
.role-table tbody tr,
.teacher-table tbody tr {
    transition: background-color 0.2s ease;
}

.language-manager-table tbody tr:nth-child(even),
.user-table tbody tr:nth-child(even),
.role-table tbody tr:nth-child(even),
.teacher-table tbody tr:nth-child(even) {
    background: rgba(42, 127, 98, 0.035);
}

.language-manager-table tbody tr:hover,
.user-table tbody tr:hover,
.role-table tbody tr:hover,
.teacher-table tbody tr:hover {
    background: rgba(42, 127, 98, 0.085);
}

.language-manager-table td,
.user-table td,
.role-table td,
.teacher-table td {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid rgba(27, 67, 50, 0.12);
    text-align: left;
    color: #1f3d3d;
    vertical-align: middle;
    min-width: 0;
}

.language-manager-table tbody tr:last-child td,
.user-table tbody tr:last-child td,
.role-table tbody tr:last-child td,
.teacher-table tbody tr:last-child td {
    border-bottom: none;
}

.language-manager-table td:last-child,
.user-table td:last-child,
.role-table td:last-child,
.teacher-table td:last-child {
    text-align: right;
}

.user-table td:nth-child(4) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.binary-theme--dark :is(.language-manager-table, .user-table, .role-table, .teacher-table) thead th {
    background: rgba(59, 130, 246, 0.24);
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    color: #f8fafc;
}

body.binary-theme--dark :is(.language-manager-table, .user-table, .role-table, .teacher-table) tbody tr:nth-child(even) {
    background: rgba(30, 41, 59, 0.55);
}

body.binary-theme--dark :is(.language-manager-table, .user-table, .role-table, .teacher-table) tbody tr:hover {
    background: rgba(99, 102, 241, 0.28);
}

body.binary-theme--dark :is(.language-manager-table, .user-table, .role-table, .teacher-table) td {
    border-bottom: 1px solid rgba(148, 163, 184, 0.24);
    color: #e2e8f0;
}

.language-manager-actions,
.table-actions-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.language-manager-actions {
    flex-wrap: wrap;
}

.table-actions-content {
    flex-wrap: nowrap;
    white-space: nowrap;
}

td.table-actions {
    text-align: right;
}

.registration-role-control {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.registration-role-control select {
    min-width: 8rem;
}

.language-manager-actions .default-button,
.language-manager-actions .remove-button,
.language-manager-actions .save-button,
.table-actions-content .default-button,
.table-actions-content .remove-button,
.table-actions-content .cancel-button,
.table-actions-content .password-button,
.table-actions-content .add-button {
    min-width: 2.75rem;
    padding-inline: 0.75rem;
}

.table-actions-content .cancel-edit-button {
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.5rem;
}

.table-actions-content .cancel-edit-button span[aria-hidden="true"] {
    display: block;
    transform: translateY(-1px);
}

.user-avatar-cell {
    min-width: 0;
}

.user-avatar-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.user-avatar-figure {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.user-table .user-profile-link {
    color: inherit;
    text-decoration: none;
}

.user-table .user-profile-link:hover,
.user-table .user-profile-link:focus-visible {
    text-decoration: underline;
}

.user-table .user-profile-link--avatar {
    display: inline-flex;
    align-items: center;
}

.user-avatar-content .user-expand-button {
    flex: 0 0 auto;
}

.user-expand-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: none;
    background: rgba(27, 67, 50, 0.12);
    color: #124c3a;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.user-expand-button:hover,
.user-expand-button:focus-visible {
    background: rgba(27, 67, 50, 0.2);
    color: #0a3224;
    outline: none;
}

.user-expand-button.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.user-expand-button .button-icon {
    transition: transform 0.2s ease;
}

.user-expand-button.expanded .button-icon {
    transform: rotate(180deg);
}

.user-summary-row.expanded {
    background: rgba(42, 127, 98, 0.08);
}

.user-details-row {
    background: rgba(42, 127, 98, 0.04);
}

.user-details-row td {
    border-top: 1px solid rgba(27, 67, 50, 0.12);
}

.user-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.user-detail {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 12rem;
}

.user-detail-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2a7f62;
    font-weight: 600;
}

.user-detail-value {
    font-weight: 600;
    color: #0f2d21;
    word-break: break-word;
}

.user-edit-input {
    width: 100%;
    border: 1px solid rgba(27, 67, 50, 0.25);
    border-radius: 0.7rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    background: var(--input-background);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.user-edit-input:focus {
    border-color: #2a7f62;
    box-shadow: 0 0 0 3px rgba(42, 127, 98, 0.18);
    outline: none;
}

body.binary-theme--dark .user-edit-input {
    border-color: var(--input-border-color);
    color: var(--input-text-color);
    box-shadow: var(--input-rest-shadow);
}

body.binary-theme--dark .user-edit-input:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 4px var(--input-focus-shadow);
}

.user-edit-input+.user-edit-input {
    margin-top: 0.5rem;
}

.language-manager-table select,
.role-table select,
.teacher-table select {
    min-width: 180px;
}

body.binary-theme--dark .language-manager-table select,
body.binary-theme--dark .role-table select,
body.binary-theme--dark .teacher-table select {
    background: var(--input-background);
    color: var(--input-text-color);
    border-color: rgba(148, 163, 184, 0.4);
}

.language-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    white-space: normal;
}

.app-shell .data-table td.language-actions {
    max-width: none;
}

.language-actions .default-button,
.language-actions .primary-button,
.language-actions .remove-button {
    min-width: 120px;
    flex: 0 1 auto;
}

.language-actions .primary-button {
    width: auto;
}

/* Distinct Symbols for Buttons */

.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1;
}

/* Add Language Form and Student Management Styles */

#add-language-form {
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
}

#add-language-form .checkbox-label,
.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
}

#add-language-form .form-actions {
    justify-content: flex-start;
}

#student-management {
    width: 100%;
    margin: 1rem 0 0;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--surface-border);
    background: var(--surface-background);
    box-shadow: var(--surface-shadow);
}

/* Student Management List Styles */

#student-management ul {
    list-style-type: none;
    padding: 0;
}

#student-management li {
    margin-top: 10px;
}

.add-button {
    background: linear-gradient(135deg, #2a7f62, #1b4332);
    color: #ffffff;
    border: none;
}

.add-button:hover,
.add-button:focus {
    box-shadow: 0 12px 24px rgba(42, 127, 98, 0.2);
}

.small-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0.5rem 0.75rem;
}

.default-button.cancel-button {
    background: rgba(27, 67, 50, 0.06);
    border-color: rgba(27, 67, 50, 0.18);
    color: #1b4332;
}

.default-button.cancel-button:hover,
.default-button.cancel-button:focus {
    background: rgba(27, 67, 50, 0.12);
    border-color: rgba(27, 67, 50, 0.32);
}

.default-button.edit-button {
    background: rgba(42, 127, 98, 0.12);
    border-color: rgba(42, 127, 98, 0.32);
    color: #1b4332;
}

.default-button.edit-button:hover,
.default-button.edit-button:focus {
    background: rgba(42, 127, 98, 0.18);
    border-color: rgba(27, 67, 50, 0.45);
}

.default-button.enable-button,
.default-button.save-button,
.default-button.confirm-button {
    background: var(--button-background);
    border-color: var(--button-border-color);
    color: var(--button-text-color);
    box-shadow: var(--button-rest-shadow);
}

.default-button.enable-button:hover,
.default-button.enable-button:focus,
.default-button.save-button:hover,
.default-button.save-button:focus,
.default-button.confirm-button:hover,
.default-button.confirm-button:focus {
    background: var(--button-hover-background);
    border-color: var(--button-hover-border-color);
    color: var(--button-hover-text-color, var(--button-text-color));
    box-shadow: var(--button-hover-shadow);
}

.default-button.password-button {
    background: #6c63ff;
    border-color: #574bdb;
    color: #ffffff;
}

.default-button.password-button:hover,
.default-button.password-button:focus {
    background: #574bdb;
    border-color: #473fc4;
}

/* -------------------------------------------------------------------------- */
/*  Dark theme button treatments                                              */
/* -------------------------------------------------------------------------- */

body.binary-theme--dark .default-button {
    background: var(--button-background);
    border-color: var(--button-border-color);
    color: var(--button-text-color);
}

body.binary-theme--dark .default-button:hover,
body.binary-theme--dark .default-button:focus {
    color: var(--button-hover-text-color, var(--button-text-color));
}

body.binary-theme--dark .default-button.primary-outline {
    background: rgba(37, 99, 235, 0.25);
    border-color: rgba(99, 102, 241, 0.48);
    color: #e0e7ff;
    box-shadow: 0 26px 56px rgba(2, 6, 23, 0.6);
}

body.binary-theme--dark .default-button.primary-outline:hover,
body.binary-theme--dark .default-button.primary-outline:focus {
    background: rgba(129, 140, 248, 0.32);
    border-color: rgba(165, 180, 252, 0.6);
    color: #f8fafc;
}

body.binary-theme--dark .default-button.danger-button,
body.binary-theme--dark .default-button.remove-button {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.92), rgba(153, 27, 27, 0.9));
    border-color: rgba(248, 113, 113, 0.45);
    box-shadow: 0 28px 60px rgba(127, 29, 29, 0.5);
}

body.binary-theme--dark .default-button.danger-button:hover,
body.binary-theme--dark .default-button.danger-button:focus,
body.binary-theme--dark .default-button.remove-button:hover,
body.binary-theme--dark .default-button.remove-button:focus {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.98), rgba(185, 28, 28, 0.95));
    border-color: rgba(248, 113, 113, 0.65);
}

body.binary-theme--dark .default-button.cancel-button {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.42);
    color: rgba(226, 232, 240, 0.88);
}

body.binary-theme--dark .default-button.cancel-button:hover,
body.binary-theme--dark .default-button.cancel-button:focus {
    background: rgba(71, 85, 105, 0.35);
    border-color: rgba(203, 213, 225, 0.5);
    color: #f1f5f9;
}

body.binary-theme--dark .default-button.cancel-edit-button {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(185, 28, 28, 0.92));
    border-color: rgba(248, 113, 113, 0.65);
    color: #fee2e2;
    box-shadow: 0 26px 56px rgba(127, 29, 29, 0.55);
}

body.binary-theme--dark .default-button.cancel-edit-button:hover,
body.binary-theme--dark .default-button.cancel-edit-button:focus {
    background: linear-gradient(135deg, rgba(248, 113, 113, 1), rgba(220, 38, 38, 0.98));
    border-color: rgba(252, 165, 165, 0.75);
    color: #ffffff;
}

body.binary-theme--dark .default-button.edit-button {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.82), rgba(59, 130, 246, 0.9));
    border-color: rgba(147, 197, 253, 0.55);
    color: #f8fafc;
    box-shadow: 0 28px 60px rgba(30, 64, 175, 0.5);
}

body.binary-theme--dark .default-button.edit-button:hover,
body.binary-theme--dark .default-button.edit-button:focus {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.95));
    border-color: rgba(191, 219, 254, 0.75);
}

body.binary-theme--dark .default-button.password-button {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.88), rgba(99, 102, 241, 0.92));
    border-color: rgba(167, 139, 250, 0.55);
    box-shadow: 0 28px 60px rgba(88, 28, 135, 0.5);
}

body.binary-theme--dark .default-button.password-button:hover,
body.binary-theme--dark .default-button.password-button:focus {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.96), rgba(99, 102, 241, 0.98));
    border-color: rgba(196, 181, 253, 0.72);
}

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

.avatar-preview {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.avatar-preview img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #ddd;
}

.user-status-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: rgba(219, 68, 55, 0.12);
    color: #b3261e;
}

.user-summary-row.user-disabled td {
    opacity: 0.72;
}

.avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.avatar-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.avatar-buttons .default-button {
    width: auto;
}

.profile-page {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 1.25rem;
}

.profile-hero {
    position: relative;
    padding: 2.5rem;
    border-radius: 1.75rem;
    overflow: hidden;
    background: linear-gradient(135deg, #0b1f33 0%, #172c49 40%, #1b3a5f 100%);
    color: #e7f4ff;
    box-shadow: 0 40px 70px rgba(10, 30, 60, 0.35);
    z-index: 0;
}

.profile-hero-banner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;
    pointer-events: none;
}

.profile-hero-banner.is-visible {
    opacity: 1;
}

.profile-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.45), transparent 60%),
        radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.35), transparent 55%);
    opacity: 0.8;
    pointer-events: none;
    z-index: 2;
}

.profile-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(120deg,
            rgba(231, 244, 255, 0.08) 0%,
            transparent 40%),
        linear-gradient(-120deg,
            rgba(94, 234, 212, 0.12) 0%,
            transparent 45%);
    opacity: 0.6;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
}

/* Increase gradient opacity when banner is visible for better text readability */
.profile-hero.has-banner::before {
    opacity: 0.9;
}

.profile-hero.has-banner::after {
    opacity: 0.7;
}

/* Add text shadows for better contrast when banner is visible */
.profile-hero.has-banner .profile-hero-heading h2,
.profile-hero.has-banner .profile-hero-handle,
.profile-hero.has-banner .profile-hero-bio,
.profile-hero.has-banner .profile-hero-location,
.profile-hero.has-banner .profile-role-pill,
.profile-hero.has-banner .profile-visibility-chip,
.profile-hero.has-banner .profile-stat-value,
.profile-hero.has-banner .profile-stat-label {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Enhanced button contrast when banner is visible */
.profile-hero.has-banner .profile-action-button,
.profile-hero.has-banner .profile-edit-button,
.profile-hero.has-banner .profile-achievement-icon {
    backdrop-filter: blur(8px);
    background: rgba(231, 244, 255, 0.25);
    border-color: rgba(231, 244, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
        0 18px 36px rgba(7, 24, 46, 0.45);
}


.profile-hero-inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.profile-hero-layout {
    display: flex;
    gap: 2rem;
    align-items: stretch;
    flex-wrap: wrap;
}

.profile-hero-primary {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.profile-hero-main {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.profile-hero-header {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.profile-hero-avatar-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-width: 180px;
    max-width: 180px;
    flex: 0 0 auto;
}

.profile-avatar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: transform 0.18s ease;
    text-decoration: none;
}

.profile-avatar-button::before,
.profile-avatar-button::after {
    display: none;
}

.profile-avatar-button:hover,
.profile-avatar-button:focus-visible {
    transform: scale(1.02);
    text-decoration: none;
}

.profile-avatar-button:focus-visible {
    outline: 2px solid rgba(231, 244, 255, 0.8);
    outline-offset: 4px;
}

.profile-hero-avatar {
    width: 152px;
    height: 152px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(231, 244, 255, 0.72);
    box-shadow: 0 18px 40px rgba(7, 24, 46, 0.45);
    background: #0d1b2a;
}

.profile-avatar-button--empty .profile-hero-avatar {
    border-color: rgba(231, 244, 255, 0.35);
    opacity: 0.85;
}

.avatar-remove-button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(193, 18, 31, 0.92);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.85);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.profile-hero-avatar-block:hover .avatar-remove-button,
.profile-hero-avatar-block:focus-within .avatar-remove-button {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.profile-hero-details {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-hero-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.profile-hero-heading h2 {
    margin: 0;
    font-size: 2rem;
    color: #f1f7ff;
}

.profile-edit-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(231, 244, 255, 0.35);
    background: rgba(231, 244, 255, 0.18);
    color: #f1f7ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.profile-edit-button:hover,
.profile-edit-button:focus-visible {
    background: rgba(231, 244, 255, 0.28);
    border-color: rgba(231, 244, 255, 0.55);
    transform: scale(1.05);
    outline: none;
}

.profile-hero-handle {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    color: rgba(231, 244, 255, 0.8);
}

.profile-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.5rem;
}

.profile-role-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.2);
    color: #9bdcff;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.03em;
}

.profile-hero-location {
    font-size: 0.95rem;
    color: rgba(231, 244, 255, 0.7);
}

.profile-hero-bio {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(231, 244, 255, 0.85);
}

.profile-hero-website {
    font-size: 0.95rem;
    color: rgba(231, 244, 255, 0.7);
    text-decoration: none;
    font-style: normal;
    transition: color 0.18s ease;
}

.profile-hero-website:hover,
.profile-hero-website:focus {
    color: rgba(231, 244, 255, 0.9);
}

.profile-hero-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    justify-content: space-between;
}

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

.profile-banner-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.profile-action-button {
    background: rgba(231, 244, 255, 0.18);
    border-color: rgba(231, 244, 255, 0.4);
    color: #f1f7ff;
    padding: 0.7rem 1.45rem;
    border-radius: 999px;
    min-width: 0;
    box-shadow: 0 18px 36px rgba(7, 24, 46, 0.35);
    font-size: 1rem;
}

.profile-action-button:hover,
.profile-action-button:focus {
    background: rgba(231, 244, 255, 0.28);
    border-color: rgba(231, 244, 255, 0.65);
}

.profile-hero-achievements {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-achievement-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.profile-achievement-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(231, 244, 255, 0.28);
    background: rgba(231, 244, 255, 0.16);
    color: #f1f7ff;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.profile-achievement-icon:hover,
.profile-achievement-icon:focus-visible {
    background: rgba(231, 244, 255, 0.24);
    border-color: rgba(231, 244, 255, 0.45);
    transform: translateY(-1px);
    outline: none;
}

.profile-achievement-icon__symbol {
    font-size: 1.2rem;
    line-height: 1;
}

.profile-achievement-icon__progress {
    position: absolute;
    bottom: 2px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: rgba(231, 244, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.profile-achievement-icon__progress-fill {
    height: 100%;
    background: var(--app-accent-primary, #2a7f62);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.profile-achievement-icon--progressive {
    position: relative;
    padding-bottom: 0.6rem;
}

.profile-hero-rail {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.profile-hero-suggestions {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 1.25rem;
    background: rgba(6, 21, 36, 0.55);
    box-shadow: 0 22px 48px rgba(7, 24, 46, 0.45);
    backdrop-filter: blur(12px);
    max-height: 460px;
}

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

.profile-suggestions-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: rgba(231, 244, 255, 0.9);
}

.profile-suggested-contacts {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    overflow-y: auto;
    padding-right: 0.35rem;
}

.profile-suggested-contacts::-webkit-scrollbar {
    width: 6px;
}

.profile-suggested-contacts::-webkit-scrollbar-track {
    background: transparent;
}

.profile-suggested-contacts::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 999px;
}

.profile-suggested-contacts::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}

.profile-suggested-empty {
    margin: 0;
    color: rgba(231, 244, 255, 0.65);
}

.achievement-popover {
    position: absolute;
    z-index: 40;
    min-width: 260px;
    max-width: 320px;
    padding: 1.25rem 1.5rem;
    border-radius: 1.25rem;
    background: rgba(6, 21, 36, 0.92);
    border: 1px solid rgba(231, 244, 255, 0.28);
    box-shadow: 0 26px 56px rgba(7, 24, 46, 0.55);
    backdrop-filter: blur(14px);
}

.achievement-popover[hidden] {
    display: none;
}

.achievement-popover__content {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.achievement-popover__icon {
    font-size: 2rem;
    line-height: 1;
}

.achievement-popover__body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    color: rgba(231, 244, 255, 0.9);
}

.achievement-popover__language {
    font-size: 0.85rem;
    color: rgba(231, 244, 255, 0.65);
}

.achievement-popover__close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(231, 244, 255, 0.32);
    background: rgba(231, 244, 255, 0.16);
    color: #f1f7ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.achievement-popover__close:hover,
.achievement-popover__close:focus-visible {
    background: rgba(231, 244, 255, 0.26);
    border-color: rgba(231, 244, 255, 0.45);
    transform: scale(1.05);
    outline: none;
}

.achievement-popover__progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: rgba(231, 244, 255, 0.75);
}

.achievement-popover__progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(231, 244, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
}

.achievement-popover__progress-fill {
    height: 100%;
    background: var(--app-accent-primary, #2a7f62);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.achievement-popover__progress-label {
    white-space: nowrap;
    font-weight: 500;
}

#profile-achievement-modal .profile-modal__dialog {
    width: min(920px, 95vw);
    background: var(--app-card-background);
    color: var(--app-text-body);
    border-color: var(--app-border-divider);
    box-shadow: 0 32px 68px rgba(7, 24, 46, 0.4);
}

#profile-achievement-modal .profile-modal__backdrop {
    background: rgba(4, 12, 24, 0.65);
    backdrop-filter: blur(6px);
}

.achievement-modal__header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.achievement-modal__subtitle {
    margin: 0;
    color: var(--app-text-muted);
}

.achievement-modal__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.achievement-modal__section {
    background: var(--app-panel-background);
    border: 1px solid var(--app-border-divider);
    border-radius: 1.2rem;
    padding: 1rem;
}

.achievement-modal__section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.75rem;
    color: var(--app-text-strong);
}

.achievement-modal__language {
    color: var(--app-text-muted);
    font-size: 0.95rem;
}

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

.achievement-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 1rem;
    background: var(--app-card-background);
    border: 1px solid var(--app-border-divider);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.achievement-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--app-panel-refresh-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.achievement-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

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

.achievement-card__title {
    margin: 0;
    font-size: 1rem;
    color: var(--app-text-strong);
}

.achievement-card__status {
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.85rem;
    border: 1px solid var(--app-border-divider);
    color: var(--app-text-muted);
    background: var(--app-panel-refresh-bg);
}

.achievement-card__status--earned {
    color: var(--app-accent-primary);
    border-color: var(--app-accent-primary);
    background: rgba(42, 127, 98, 0.12);
}

.achievement-card__status--locked {
    color: var(--app-text-muted);
}

.achievement-card__description {
    margin: 0.2rem 0 0.35rem;
    color: var(--app-text-body);
}

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

.achievement-card--locked {
    opacity: 0.92;
}

.achievement-card--highlighted {
    border-color: var(--app-border-strong);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.achievement-card__progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.achievement-card__progress-bar {
    flex: 1;
    height: 6px;
    background: var(--app-border-divider);
    border-radius: 3px;
    overflow: hidden;
}

.achievement-card__progress-fill {
    height: 100%;
    background: var(--app-accent-primary, #2a7f62);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.achievement-card__progress-label {
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--app-text-muted);
}

.achievement-modal__empty {
    margin: 0.25rem 0 0;
}

.profile-modal[hidden] {
    display: none;
}

.profile-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 12, 24, 0.65);
    backdrop-filter: blur(6px);
}

.profile-modal__dialog {
    position: relative;
    background: rgba(6, 21, 36, 0.94);
    border: 1px solid rgba(231, 244, 255, 0.22);
    border-radius: 1.5rem;
    padding: 2.25rem 2rem 2rem;
    width: min(640px, 90vw);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 36px 68px rgba(7, 24, 46, 0.55);
}

.profile-modal__header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: #f1f7ff;
}

.profile-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(231, 244, 255, 0.3);
    background: rgba(231, 244, 255, 0.18);
    color: #f1f7ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.profile-modal__close:hover,
.profile-modal__close:focus-visible {
    background: rgba(231, 244, 255, 0.28);
    border-color: rgba(231, 244, 255, 0.5);
    transform: scale(1.05);
    outline: none;
}

body.profile-modal-open {
    overflow: hidden;
}

.suggested-contact {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.85rem;
    border-radius: 1.1rem;
    background: rgba(8, 28, 45, 0.52);
    border: 1px solid rgba(231, 244, 255, 0.12);
    transition: background 0.18s ease, border-color 0.18s ease;
}

.suggested-contact:hover,
.suggested-contact:focus-within {
    background: rgba(14, 48, 72, 0.6);
    border-color: rgba(231, 244, 255, 0.24);
}

.suggested-contact-avatar {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(7, 24, 46, 0.35);
}

.suggested-contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.suggested-contact-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.suggested-contact-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.suggested-contact-name {
    font-weight: 600;
    color: #f1f7ff;
    text-decoration: none;
}

.suggested-contact-name:hover,
.suggested-contact-name:focus {
    text-decoration: underline;
}

.suggested-contact-role {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(173, 216, 255, 0.85);
    white-space: nowrap;
}

.suggested-contact-username {
    font-size: 0.9rem;
}

.suggested-contact-location {
    margin: 0;
    font-size: 0.85rem;
}

.suggested-contact-bio {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(231, 244, 255, 0.85);
}

.suggested-contact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.suggested-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.profile-action-button.secondary-button {
    background: rgba(231, 244, 255, 0.18);
    border-color: rgba(231, 244, 255, 0.4);
    color: #f1f7ff;
    box-shadow: none;
}

.profile-action-button.secondary-button:hover,
.profile-action-button.secondary-button:focus {
    background: rgba(231, 244, 255, 0.28);
    border-color: rgba(231, 244, 255, 0.65);
    color: #ffffff;
}

body.binary-theme--light .profile-hero-suggestions {
    background: rgba(237, 246, 249, 0.9);
    box-shadow: 0 26px 48px rgba(27, 67, 50, 0.22);
}

body.binary-theme--light .profile-suggestions-header h3 {
    color: #1b4332;
}

body.binary-theme--light .profile-suggested-contacts::-webkit-scrollbar-thumb {
    background: rgba(27, 67, 50, 0.35);
}

body.binary-theme--light .profile-suggested-empty {
    color: rgba(27, 67, 50, 0.65);
}

body.binary-theme--light .suggested-contact {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(27, 67, 50, 0.12);
}

body.binary-theme--light .suggested-contact:hover,
body.binary-theme--light .suggested-contact:focus-within {
    background: rgba(237, 246, 249, 0.98);
    border-color: rgba(27, 67, 50, 0.2);
}

body.binary-theme--light .suggested-contact-name {
    color: #1b4332;
}

body.binary-theme--light .suggested-contact-role {
    color: rgba(27, 67, 50, 0.7);
}

body.binary-theme--light .suggested-contact-username,
body.binary-theme--light .suggested-contact-location,
body.binary-theme--light .profile-suggested-empty {
    color: rgba(27, 67, 50, 0.65);
}

body.binary-theme--light .suggested-contact-bio {
    color: rgba(27, 67, 50, 0.82);
}

body.binary-theme--light .achievement-popover {
    background: rgba(237, 246, 249, 0.96);
    border-color: rgba(27, 67, 50, 0.18);
    box-shadow: 0 26px 56px rgba(27, 67, 50, 0.18);
}

body.binary-theme--light .achievement-popover__body {
    color: #1b4332;
}

body.binary-theme--light .achievement-popover__language {
    color: rgba(27, 67, 50, 0.65);
}

body.binary-theme--light .achievement-popover__close {
    background: rgba(42, 127, 98, 0.18);
    border-color: rgba(27, 67, 50, 0.26);
    color: #1b4332;
}

body.binary-theme--light .achievement-popover__close:hover,
body.binary-theme--light .achievement-popover__close:focus-visible {
    background: rgba(42, 127, 98, 0.26);
    border-color: rgba(27, 67, 50, 0.32);
}

body.binary-theme--light .profile-modal__dialog {
    background: rgba(237, 246, 249, 0.96);
    border-color: rgba(27, 67, 50, 0.12);
    box-shadow: 0 36px 68px rgba(27, 67, 50, 0.22);
}

body.binary-theme--light .profile-modal__header {
    color: #1b4332;
}

body.binary-theme--light .profile-modal__close {
    background: rgba(42, 127, 98, 0.18);
    border-color: rgba(27, 67, 50, 0.26);
    color: #1b4332;
}

body.binary-theme--light .profile-modal__close:hover,
body.binary-theme--light .profile-modal__close:focus-visible {
    background: rgba(42, 127, 98, 0.26);
    border-color: rgba(27, 67, 50, 0.36);
}

body.binary-theme--light .profile-post-form {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(27, 67, 50, 0.12);
}

body.binary-theme--light .profile-post-form textarea {
    background: var(--input-background);
    color: var(--input-text-color);
    border-color: var(--surface-border);
    box-shadow: inset 0 1px 1px rgba(27, 67, 50, 0.1);
}

body.binary-theme--light .profile-post-controls select {
    background: var(--input-background);
    color: var(--input-text-color);
    border-color: var(--surface-border);
}

body.binary-theme--light .profile-post {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(27, 67, 50, 0.12);
}

body.binary-theme--light .profile-post-meta {
    color: rgba(27, 67, 50, 0.7);
}

body.binary-theme--light .profile-post-timestamp {
    color: rgba(27, 67, 50, 0.45);
}

body.binary-theme--light .profile-post-content {
    color: #1f3d3d;
}

body.binary-theme--light .profile-posts-empty {
    color: rgba(15, 45, 33, 0.65);
}

body.binary-theme--light .profile-hero {
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(209, 250, 229, 0.92));
    color: #0f2d21;
    box-shadow: 0 28px 54px rgba(27, 67, 50, 0.18);
}

body.binary-theme--light .profile-hero::before {
    background: radial-gradient(circle at top left, rgba(42, 127, 98, 0.25), transparent 60%),
        radial-gradient(circle at bottom right, rgba(134, 239, 172, 0.3), transparent 55%);
    opacity: 1;
}

body.binary-theme--light .profile-hero::after {
    background-image: linear-gradient(120deg,
            rgba(42, 127, 98, 0.22) 0%,
            transparent 38%),
        linear-gradient(-120deg,
            rgba(15, 45, 33, 0.12) 0%,
            transparent 48%);
    opacity: 0.5;
}

/* Light theme: Increase gradient opacity when banner is visible for better text readability */
body.binary-theme--light .profile-hero.has-banner::before {
    opacity: 0.85;
}

body.binary-theme--light .profile-hero.has-banner::after {
    opacity: 0.65;
}

/* Light theme: Add text shadows for better contrast when banner is visible */
body.binary-theme--light .profile-hero.has-banner .profile-hero-heading h2,
body.binary-theme--light .profile-hero.has-banner .profile-hero-handle,
body.binary-theme--light .profile-hero.has-banner .profile-hero-bio,
body.binary-theme--light .profile-hero.has-banner .profile-hero-location,
body.binary-theme--light .profile-hero.has-banner .profile-role-pill,
body.binary-theme--light .profile-hero.has-banner .profile-visibility-chip,
body.binary-theme--light .profile-hero.has-banner .profile-stat-value,
body.binary-theme--light .profile-hero.has-banner .profile-stat-label {
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.6),
        0 4px 16px rgba(255, 255, 255, 0.5);
}

/* Light theme: Enhanced button contrast when banner is visible */
body.binary-theme--light .profile-hero.has-banner .profile-action-button,
body.binary-theme--light .profile-hero.has-banner .profile-edit-button,
body.binary-theme--light .profile-hero.has-banner .profile-achievement-icon {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(42, 127, 98, 0.45);
    box-shadow: 0 4px 12px rgba(27, 67, 50, 0.2),
        0 14px 28px rgba(27, 67, 50, 0.25);
}

body.binary-theme--light .profile-hero-avatar {
    border-color: rgba(42, 127, 98, 0.35);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 16px 32px rgba(27, 67, 50, 0.15);
}

body.binary-theme--light .profile-hero-heading h2 {
    color: #0f2d21;
}

body.binary-theme--light .profile-hero-handle {
    color: rgba(15, 45, 33, 0.7);
}

body.binary-theme--light .profile-hero-meta {
    color: rgba(15, 45, 33, 0.75);
}

body.binary-theme--light .profile-role-pill {
    background: rgba(42, 127, 98, 0.18);
    color: #1b4332;
}

body.binary-theme--light .profile-hero-location {
    color: rgba(15, 45, 33, 0.7);
}

body.binary-theme--light .profile-hero-bio {
    color: rgba(15, 45, 33, 0.82);
}

body.binary-theme--light .profile-hero-website {
    color: rgba(15, 45, 33, 0.7);
}

body.binary-theme--light .profile-hero-website:hover,
body.binary-theme--light .profile-hero-website:focus {
    color: rgba(15, 45, 33, 0.95);
}

body.binary-theme--light .profile-action-button {
    background: rgba(42, 127, 98, 0.18);
    border-color: rgba(27, 67, 50, 0.26);
    color: #1b4332;
    box-shadow: 0 14px 28px rgba(27, 67, 50, 0.18);
}

body.binary-theme--light .profile-action-button:hover,
body.binary-theme--light .profile-action-button:focus {
    background: rgba(42, 127, 98, 0.24);
    border-color: rgba(27, 67, 50, 0.36);
    color: #0f2d21;
    box-shadow: 0 18px 36px rgba(27, 67, 50, 0.2);
}

body.binary-theme--light .profile-action-button.secondary-button {
    background: rgba(42, 127, 98, 0.18);
    border-color: rgba(27, 67, 50, 0.26);
    color: #1b4332;
}

body.binary-theme--light .profile-edit-button {
    background: rgba(42, 127, 98, 0.18);
    border-color: rgba(27, 67, 50, 0.26);
    color: #1b4332;
}

body.binary-theme--light .profile-edit-button:hover,
body.binary-theme--light .profile-edit-button:focus-visible {
    background: rgba(42, 127, 98, 0.26);
    border-color: rgba(27, 67, 50, 0.36);
}

body.binary-theme--light .profile-action-button.secondary-button:hover,
body.binary-theme--light .profile-action-button.secondary-button:focus {
    background: rgba(42, 127, 98, 0.24);
    border-color: rgba(27, 67, 50, 0.36);
    color: #0f2d21;
}

body.binary-theme--light .profile-visibility-chip {
    background: rgba(42, 127, 98, 0.16);
    color: #1b4332;
}

body.binary-theme--light .profile-achievement-icon {
    background: rgba(42, 127, 98, 0.16);
    border-color: rgba(27, 67, 50, 0.24);
    color: #1b4332;
}

body.binary-theme--light .profile-achievement-icon:hover,
body.binary-theme--light .profile-achievement-icon:focus-visible {
    background: rgba(42, 127, 98, 0.24);
    border-color: rgba(27, 67, 50, 0.34);
}

body.binary-theme--light .profile-hero-stats li+li::before {
    background: rgba(27, 67, 50, 0.18);
}

body.binary-theme--light .profile-stat-value {
    color: #0f2d21;
}

body.binary-theme--light .profile-stat-label {
    color: rgba(15, 45, 33, 0.6);
}

body.binary-theme--light .profile-hero-avatar-block .avatar-actions input[type="file"] {
    color: #1b4332;
}

.profile-visibility-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(15, 76, 117, 0.35);
    color: rgba(231, 244, 255, 0.85);
    font-weight: 600;
    text-transform: none;
}

.profile-hero-stats {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: center;
}

.profile-hero-stats li {
    flex: 0 0 auto;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: rgba(231, 244, 255, 0.85);
    position: relative;
}

.profile-hero-stats li+li::before {
    content: "";
    position: absolute;
    left: -1.25rem;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 1px;
    background: rgba(231, 244, 255, 0.32);
}

.profile-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #f8fbff;
}

.profile-stat-label {
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(231, 244, 255, 0.68);
}

.profile-columns {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 1.5rem;
    align-items: flex-start;
}

.profile-columns.profile-columns--balanced {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
}

.profile-columns.profile-columns--single {
    grid-template-columns: minmax(0, 1fr);
}

.profile-columns.profile-columns--single .profile-side-column {
    display: none;
}

.profile-main-column,
.profile-side-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.profile-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.profile-panel-header h2 {
    margin: 0;
}

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

.profile-panel label {
    color: var(--surface-muted);
    font-weight: 600;
}

.profile-panel :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], textarea, select) {
    color: var(--input-text-color);
    background: var(--input-background);
    box-shadow: var(--input-rest-shadow);
}

.profile-panel :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], textarea, select)::placeholder {
    color: var(--input-placeholder-color);
}

.profile-panel :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], textarea, select):focus {
    background: var(--input-focus-background, var(--input-background));
    color: var(--input-text-color);
}

body.binary-theme--dark .profile-panel label {
    color: rgba(226, 232, 240, 0.78);
}

.profile-posts {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.profile-post-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(8, 28, 45, 0.45);
    border: 1px solid rgba(231, 244, 255, 0.14);
}

.profile-post-form textarea {
    width: 100%;
    min-height: 120px;
    padding: 1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(231, 244, 255, 0.18);
    background: rgba(5, 20, 35, 0.68);
    color: #f1f7ff;
    resize: vertical;
    box-shadow: inset 0 1px 1px rgba(7, 24, 46, 0.35);
}

.profile-post-form textarea:focus {
    outline: none;
    border-color: rgba(231, 244, 255, 0.45);
}

.profile-post-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
}

.profile-post-controls select {
    padding: 0.55rem 0.9rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(231, 244, 255, 0.25);
    background: rgba(5, 20, 35, 0.65);
    color: #f1f7ff;
}

.profile-posts-feedback {
    margin: 0;
}

.profile-posts-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-post {
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(8, 28, 45, 0.4);
    border: 1px solid rgba(231, 244, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.profile-post-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: rgba(231, 244, 255, 0.75);
}

.profile-post-visibility {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.profile-post-timestamp {
    font-size: 0.8rem;
    color: rgba(231, 244, 255, 0.6);
}

.profile-post-content {
    margin: 0;
    color: rgba(231, 244, 255, 0.9);
    line-height: 1.55;
    word-break: break-word;
}

.profile-post-preview {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--app-border-divider);
    background: var(--app-card-background);
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 0.75rem;
    align-items: center;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.16);
    color: var(--app-text-body);
    text-decoration: none;
}

.profile-post-preview:visited {
    color: var(--app-text-body);
}

.profile-post-preview__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.profile-post-preview__eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--app-text-muted);
}

.profile-post-preview__title {
    margin: 0;
    font-weight: 700;
    color: var(--app-text-strong);
    line-height: 1.35;
}

.profile-post-preview__subtitle {
    margin: 0;
    color: var(--app-text-muted);
    font-size: 0.95rem;
}

.profile-post-preview__cta {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--app-accent-primary-strong);
}

.profile-post-preview__cta .action-icon {
    display: inline-flex;
    width: 1.35rem;
    height: 1.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--color-primary-accent), 0.12);
}

body.binary-theme--dark .profile-post-preview {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(23, 32, 49, 0.82);
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.35);
}

body.binary-theme--dark .profile-post-preview__cta {
    color: #93c5fd;
}

body.binary-theme--dark .profile-post-preview__cta .action-icon {
    background: rgba(147, 197, 253, 0.14);
}

.profile-posts-empty {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: rgba(231, 244, 255, 0.65);
    font-style: normal;
    text-align: center;
    padding: 2rem 1rem;
}

body.binary-theme--dark .profile-panel :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], textarea, select) {
    box-shadow: inset 0 1px 1px rgba(2, 6, 23, 0.35), var(--input-rest-shadow);
}



.profile-view {
    display: none;
    color: #0f172a;
}

.profile-view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.profile-view-field dt {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.35rem;
}

.profile-view-field dd {
    margin: 0;
    font-size: 1rem;
    color: #0f172a;
    word-break: break-word;
}

.profile-view-section {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 1.5rem;
}

.profile-view-section h3 {
    margin: 0 0 0.75rem;
}

.profile-view-bio {
    margin: 0;
    line-height: 1.6;
    color: #1f2937;
}

.profile-view-website {
    color: #0b7285;
    text-decoration: none;
    word-break: break-all;
}

.profile-view-website:hover,
.profile-view-website:focus {
    text-decoration: underline;
}

.profile-readonly #profile-viewer,
html[data-profile-mode="readonly"] #profile-viewer {
    display: block;
}

.profile-readonly #profile-form,
.profile-readonly .avatar-actions,
.profile-readonly #connections-card,
html[data-profile-mode="readonly"] #profile-form,
html[data-profile-mode="readonly"] .avatar-actions,
html[data-profile-mode="readonly"] #connections-card {
    display: none;
}

.profile-readonly .profile-hero,
html[data-profile-mode="readonly"] .profile-hero {
    padding-bottom: 1.5rem;
}

.profile-readonly .profile-hero-actions,
html[data-profile-mode="readonly"] .profile-hero-actions {
    gap: 0.75rem;
}

.profile-readonly .profile-hero-bio.muted,
html[data-profile-mode="readonly"] .profile-hero-bio.muted {
    font-style: normal;
}

.user-table-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.app-shell .user-table-avatar {
    width: 48px;
    height: 48px;
    border: 2px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 16px 36px rgba(6, 13, 24, 0.48);
    background: rgba(15, 23, 42, 0.72);
    padding: 0.15rem;
}

.muted {
    color: #777;
    font-style: italic;
}

.info-note {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #555;
}

.warning-text {
    color: #b54708;
    font-weight: 600;
}

.doc-layout {
    display: grid;
    grid-template-columns: minmax(260px, 35%) minmax(0, 65%);
    gap: 1.5rem;
    align-items: stretch;
}

.doc-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.doc-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.doc-links button {
    background: var(--docs-chip-background);
    border: none;
    padding: 0.45rem 0.75rem;
    border-radius: 0.75rem;
    color: var(--docs-chip-text);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.doc-links button:hover,
.doc-links button.active {
    background: var(--docs-chip-hover-background);
    color: var(--docs-chip-hover-text);
}

.doc-link-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.doc-body {
    width: 100%;
    max-height: none;
    overflow-y: visible;
    line-height: 1.6;
    color: var(--docs-group-text);
}

.docs-page .doc-body h2,
.docs-page .doc-body h3,
.docs-page .doc-body h4,
.docs-page .doc-body h5,
.docs-page .doc-body h6 {
    color: inherit;
}

.docs-page .doc-body a {
    color: #2563eb;
    text-decoration-color: rgba(37, 99, 235, 0.55);
}

body.binary-theme--dark .docs-page .doc-body a {
    color: #93c5fd;
    text-decoration-color: rgba(147, 197, 253, 0.65);
}

.doc-body pre {
    background-color: var(--docs-code-background);
    color: var(--docs-code-text);
    padding: 1rem;
    border-radius: 0.85rem;
    border: 1px solid var(--docs-group-border);
    overflow-x: auto;
    box-shadow: 0 18px 32px rgba(15, 49, 49, 0.08);
}

.doc-body code {
    background-color: var(--docs-code-background);
    color: var(--docs-code-text);
    padding: 0.1rem 0.35rem;
    border-radius: 0.6rem;
}

.doc-body blockquote {
    margin: 1.25rem 0;
    padding: 0.9rem 1.1rem;
    border-left: 4px solid var(--docs-chip-hover-background);
    background: var(--docs-group-background);
    border-radius: 0.9rem;
}

body.binary-theme--dark .doc-body blockquote {
    box-shadow: 0 24px 48px rgba(2, 6, 23, 0.45);
}

body.binary-theme--dark .doc-body pre {
    box-shadow: 0 28px 52px rgba(2, 6, 23, 0.55);
}

body.binary-theme--light .docs-page .card h2 {
    color: #0f2d21;
}

body.binary-theme--dark .docs-page .card h2 {
    color: #f8fafc;
}

@media (max-width: 900px) {
    .doc-layout {
        grid-template-columns: 1fr;
    }
}

.content-container {
    padding: 2rem;
}

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

.card-grid.doc-layout {
    grid-template-columns: minmax(300px, 40%) minmax(0, 60%);
}


.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    grid-auto-rows: minmax(0, 1fr);
}

@media (max-width: 1200px) {
    .responsive-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

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

.card {
    background: var(--surface-background);
    border-radius: 8px;
    border: 1px solid var(--surface-border);
    box-shadow: var(--surface-shadow);
    padding: 1.5rem;
    color: inherit;
}

.card h2 {
    margin-top: 0;
}

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

.stat-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.stat-card {
    background: rgba(76, 175, 80, 0.12);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.stat-card .stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4b4b4b;
}

.stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2c6f3b;
}

.stat-card.compact {
    padding: 0.6rem 0.75rem;
}

body.binary-theme--dark .stat-card {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 24px 58px rgba(2, 6, 23, 0.6);
}

body.binary-theme--dark .stat-card .stat-label {
    color: rgba(226, 232, 240, 0.7);
}

body.binary-theme--dark .stat-card .stat-value {
    color: #f8fafc;
}

.stat-card.compact .stat-value {
    font-size: 1.2rem;
}

.spotlight-kanji,
.kanji-character {
    font-size: 3rem;
    font-weight: 700;
    color: #2c2c2c;
}

body.binary-theme--dark .spotlight-kanji,
body.binary-theme--dark .kanji-character {
    color: #f8fafc;
}

.spotlight-body {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.spotlight-footer {
    margin-top: 0.75rem;
}

.spotlight-footer .dropdown-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--button-background);
    border: 1px solid var(--button-border-color);
    border-radius: 0.85rem;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--button-text-color);
    box-shadow: var(--button-rest-shadow);
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease,
        transform 0.18s ease;
    text-decoration: none;
}

.spotlight-footer .dropdown-item:hover,
.spotlight-footer .dropdown-item:focus-visible {
    background: var(--button-hover-background);
    border-color: var(--button-hover-border-color);
    color: var(--button-hover-text-color);
    box-shadow: var(--button-hover-shadow);
    transform: translateY(-1px);
}

.spotlight-footer .dropdown-item:focus-visible {
    outline: none;
}

body.binary-theme--dark .spotlight-footer .dropdown-item {
    background: var(--button-background);
    border-color: var(--button-border-color);
    color: var(--button-text-color);
}

body.binary-theme--dark .spotlight-footer .dropdown-item:hover,
body.binary-theme--dark .spotlight-footer .dropdown-item:focus-visible {
    background: var(--button-hover-background);
    border-color: var(--button-hover-border-color);
    color: var(--button-hover-text-color);
}

.kanji-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.kanji-toolbar label {
    font-size: 0.9rem;
    font-weight: 600;
}

.kanji-toolbar select,
.kanji-toolbar input[type="search"] {
    width: auto;
    flex: 1 1 200px;
    min-width: 180px;
    padding: 0.55rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid var(--input-border-color);
    background: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
    box-shadow: inset 0 1px 1px rgba(15, 49, 49, 0.05), 0 8px 18px rgba(15, 49, 49, 0.05);
}

.kanji-toolbar select:focus,
.kanji-toolbar input[type="search"]:focus {
    box-shadow: 0 0 0 4px var(--input-focus-shadow);
}

.kanji-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.kanji-list-item {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: #f8f8f8;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.kanji-list-item:hover,
.kanji-list-item.active {
    border-color: #4caf50;
    background-color: #f0fff2;
}

.kanji-symbol {
    font-size: 2rem;
    font-weight: 700;
    color: #2c2c2c;
}

.kanji-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
}

.kanji-meaning {
    font-weight: 600;
    color: #333;
}

.kanji-level {
    font-size: 0.85rem;
    color: #616161;
}

.kanji-detail {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.kanji-detail-header {
    display: flex;
    gap: 1.2rem;
    align-items: center;
}

.kanji-info p {
    margin: 0.2rem 0;
}

.kanji-etymology ul,
.kanji-flashcards ul {
    margin: 0.5rem 0 0;
    padding-left: 1rem;
}

.tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    margin: 0.1rem;
    border-radius: 12px;
    background-color: rgba(76, 175, 80, 0.15);
    color: #2f6f3b;
    font-size: 0.8rem;
}

.tag.subtle {
    background-color: rgba(33, 82, 243, 0.12);
    color: #1b48a3;
}

.data-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.data-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(27, 67, 50, 0.12);
}

.data-list li:last-child {
    border-bottom: none;
}

.data-list .label {
    font-weight: 600;
    color: rgba(31, 61, 61, 0.68);
}

.data-list .value {
    color: #134e39;
}

body.binary-theme--dark .data-list li {
    border-bottom-color: rgba(148, 163, 184, 0.24);
}

body.binary-theme--dark .data-list .label {
    color: rgba(226, 232, 240, 0.75);
}

body.binary-theme--dark .data-list .value {
    color: #f8fafc;
}

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

.data-table th,
.data-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e6e6e6;
}

.data-table th {
    background: #f0f7f4;
    color: #1b4332;
    font-weight: 600;
}

@media (max-width: 768px) {

    .data-table,
    .app-shell .data-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-spacing: 0;
    }

    .data-table thead,
    .app-shell .data-table thead {
        background: inherit;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-row .form-group {
    flex: 1;
    min-width: 160px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    border-radius: 0.85rem;
    border: 1px solid var(--input-border-color);
    padding: 0.75rem 1rem;
    background: var(--input-background);
    color: #1f3d3d;
    box-shadow: inset 0 1px 1px rgba(15, 49, 49, 0.05), 0 8px 18px rgba(15, 49, 49, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 4px var(--input-focus-shadow);
    outline: none;
    background: #ffffff;
}

.form-group textarea {
    resize: vertical;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.form-actions .default-button,
.form-actions .primary-button,
.inline-actions .default-button,
.inline-actions .primary-button {
    width: auto;
    min-width: 140px;
}

/* Integration surfaces */

.integration-settings,
#integration-modules {
    display: grid;
    gap: 1.5rem;
}

.integration-card,
.integration-admin-card {
    background: var(--surface-background);
    border-radius: 1.25rem;
    padding: 1.5rem;
    border: 1px solid var(--surface-border);
    box-shadow: var(--surface-shadow);
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.integration-card header h3,
.integration-admin-card header h3 {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    color: #12362f;
}

.integration-card header p,
.integration-admin-card header p {
    margin: 0;
}

/* Module administration */

.module-admin-warning {
    --module-warning-stripe-1: rgba(255, 214, 102, 0.72);
    --module-warning-stripe-2: rgba(27, 67, 50, 0.16);
    --module-warning-icon: #c1760a;

    margin: 1.25rem 0 1.5rem;
    padding: 1.15rem 1.3rem 1.3rem;
    border-radius: 1.1rem;
    border: 1.5px solid var(--app-border-strong, rgba(27, 67, 50, 0.2));
    background:
        repeating-linear-gradient(135deg,
            var(--module-warning-stripe-1) 0,
            var(--module-warning-stripe-1) 18px,
            var(--module-warning-stripe-2) 18px,
            var(--module-warning-stripe-2) 36px),
        var(--app-panel-background, rgba(237, 246, 249, 0.6));
    color: var(--app-text-body, #1f3d3d);
    display: grid;
    gap: 0.5rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.module-admin-warning__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.module-admin-warning__icon {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--module-warning-icon);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M29.28 6.61 2.37 53.38C0.34 56.93 2.88 61 6.76 61h50.48c3.88 0 6.42-4.07 4.39-7.62L34.72 6.61c-1.94-3.49-7.06-3.49-9 0Z'/%3E%3Cpath fill='white' d='M29.74 24.8c-.02-.99.75-1.8 1.74-1.82h1.04c.99.02 1.76.83 1.74 1.82l-.5 13.57c-.02.94-.8 1.7-1.74 1.7h-.88c-.94 0-1.72-.76-1.74-1.7l-.66-13.57Zm3.76 20.67a2.5 2.5 0 0 1-2.5 2.5h-1a2.5 2.5 0 0 1-2.5-2.5v-.51a2.5 2.5 0 0 1 2.5-2.5h1a2.5 2.5 0 0 1 2.5 2.5v.51Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M29.28 6.61 2.37 53.38C0.34 56.93 2.88 61 6.76 61h50.48c3.88 0 6.42-4.07 4.39-7.62L34.72 6.61c-1.94-3.49-7.06-3.49-9 0Z'/%3E%3Cpath fill='white' d='M29.74 24.8c-.02-.99.75-1.8 1.74-1.82h1.04c.99.02 1.76.83 1.74 1.82l-.5 13.57c-.02.94-.8 1.7-1.74 1.7h-.88c-.94 0-1.72-.76-1.74-1.7l-.66-13.57Zm3.76 20.67a2.5 2.5 0 0 1-2.5 2.5h-1a2.5 2.5 0 0 1-2.5-2.5v-.51a2.5 2.5 0 0 1 2.5-2.5h1a2.5 2.5 0 0 1 2.5 2.5v.51Z'/%3E%3C/svg%3E") center / contain no-repeat;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    border-radius: 0.5rem;
}

.module-admin-warning strong {
    font-size: 1.05rem;
    color: var(--app-text-strong, #1b4332);
}

.module-admin-warning p {
    margin: 0;
}

body.binary-theme--dark .module-admin-warning {
    --module-warning-stripe-1: rgba(255, 186, 58, 0.58);
    --module-warning-stripe-2: rgba(241, 245, 249, 0.08);
    --module-warning-icon: #fbbf24;

    background:
        repeating-linear-gradient(135deg,
            var(--module-warning-stripe-1) 0,
            var(--module-warning-stripe-1) 18px,
            var(--module-warning-stripe-2) 18px,
            var(--module-warning-stripe-2) 36px),
        var(--app-panel-background, rgba(30, 41, 59, 0.78));
    border-color: var(--app-border-strong, rgba(129, 161, 255, 0.32));
    color: var(--app-text-body, #e2e8f0);
    box-shadow: 0 14px 32px rgba(2, 6, 23, 0.44);
}

body.binary-theme--dark .module-admin-warning strong {
    color: var(--app-text-strong, #f1f5f9);
}

.module-admin-list {
    display: grid;
    gap: 1.5rem;
}

.module-admin-card {
    background: var(--surface-background);
    border-radius: 1.25rem;
    padding: 1.5rem;
    border: 1px solid var(--surface-border);
    box-shadow: var(--surface-shadow);
    display: grid;
    gap: 1rem;
}

.module-admin-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

.module-admin-card__info h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #12362f;
}

.module-admin-card__info p {
    margin: 0.35rem 0 0;
    color: var(--surface-muted);
}

body.binary-theme--dark .module-admin-card__info h3 {
    color: #f8fafc;
}

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

.module-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--surface-muted-strong, #0f2f28);
}

body.binary-theme--dark .module-toggle {
    color: rgba(226, 232, 240, 0.88);
}

.module-toggle input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
}

body.binary-theme--dark .module-toggle input[type="checkbox"] {
    accent-color: #38bdf8;
}

.module-admin-card__meta {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin: 0;
}

.module-admin-card__meta dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.25rem;
    color: var(--surface-muted);
}

.module-admin-card__meta dd {
    margin: 0;
    font-weight: 600;
    color: #12362f;
}

body.binary-theme--dark .module-admin-card__meta dd {
    color: #f8fafc;
}

.module-admin-card .small-text {
    font-size: 0.85rem;
}

body.binary-theme--dark .integration-card header h3,
body.binary-theme--dark .integration-admin-card header h3 {
    color: #f8fafc;
}

body.binary-theme--dark .integration-card header p,
body.binary-theme--dark .integration-admin-card header p {
    color: var(--surface-muted);
}

.integration-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.integration-feature-list li {
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
    background: var(--integration-feature-background);
    border: 1px solid var(--integration-feature-border);
    color: var(--integration-feature-text);
    box-shadow: var(--integration-feature-shadow);
    display: grid;
    gap: 0.35rem;
}

.integration-feature-list strong {
    font-size: 1rem;
    color: inherit;
}

.integration-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem 1.5rem;
    padding: 1.1rem 1.4rem;
    border-radius: 1rem;
    border: 1px solid rgba(27, 67, 50, 0.14);
    background: rgba(255, 255, 255, 0.96);
}

body.binary-theme--dark .integration-section {
    background: linear-gradient(160deg, rgba(12, 22, 36, 0.9), rgba(7, 16, 30, 0.86));
    border-color: rgba(148, 163, 184, 0.32);
    box-shadow: 0 30px 72px rgba(2, 6, 23, 0.6);
    color: rgba(226, 232, 240, 0.85);
}

body.binary-theme--dark .integration-section h3,
body.binary-theme--dark .integration-section h4 {
    color: #f8fafc;
}

body.binary-theme--dark .integration-section .muted {
    color: rgba(226, 232, 240, 0.72);
}

.integration-section> :first-child {
    grid-column: 1;
}

.integration-section .integration-actions {
    grid-column: 2;
}

.integration-section> :not(:first-child):not(.integration-actions) {
    grid-column: 1 / -1;
}

:is(.card,
    .integration-card,
    .integration-admin-card,
    #student-management,
    .community-card,
    .error-card) .muted {
    color: var(--surface-muted);
}

@media (max-width: 720px) {
    .integration-section {
        grid-template-columns: 1fr;
    }

    .integration-section .integration-actions,
    .integration-section> :not(:first-child):not(.integration-actions) {
        grid-column: 1;
    }

    .integration-section .integration-actions {
        justify-content: flex-start;
    }
}

.integration-section.disabled {
    opacity: 0.65;
    background: rgba(203, 213, 225, 0.28);
}

.integration-section.pending {
    border-color: rgba(217, 119, 6, 0.35);
    background: rgba(255, 247, 237, 0.94);
}

body.binary-theme--dark .integration-section {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.3);
    color: #e2e8f0;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.55);
}

body.binary-theme--dark .integration-section.disabled {
    background: rgba(51, 65, 85, 0.45);
}

body.binary-theme--dark .integration-section.pending {
    border-color: rgba(249, 115, 22, 0.45);
    background: rgba(248, 153, 48, 0.22);
}

.integration-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    background: rgba(27, 67, 50, 0.12);
    color: #1b4332;
}

.status-pill.success {
    background: rgba(33, 122, 84, 0.16);
    color: #0f5132;
}

.status-pill.muted {
    background: rgba(17, 24, 39, 0.08);
    color: #3f4d4f;
}

.status-pill.pending {
    background: rgba(253, 230, 138, 0.35);
    color: #854d0e;
}

.integration-inline-form {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 1rem;
    border: 1px dashed rgba(27, 67, 50, 0.25);
    background: rgba(240, 249, 244, 0.65);
}

.integration-inline-form label {
    font-weight: 600;
    color: #1b4332;
}

.integration-inline-form input[type="text"],
.integration-inline-form input[type="password"],
.integration-inline-form input[type="number"],
.integration-inline-form input[type="email"] {
    width: 100%;
    border-radius: 0.85rem;
    border: 1px solid var(--input-border-color);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    background: var(--input-background);
    box-shadow: inset 0 1px 1px rgba(15, 49, 49, 0.05), 0 8px 18px rgba(15, 49, 49, 0.06);
}

.integration-inline-form input:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 4px var(--input-focus-shadow);
    outline: none;
    background: var(--input-background);
    color: var(--input-text-color);
}

.integration-inline-form--compact {
    margin-top: 0.5rem;
    padding: 1rem 1.1rem;
}

body.binary-theme--dark .integration-inline-form {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(148, 163, 184, 0.32);
    color: rgba(226, 232, 240, 0.85);
}

body.binary-theme--dark .integration-inline-form label {
    color: rgba(226, 232, 240, 0.85);
}

body.binary-theme--dark .integration-inline-form :is(input[type="text"], input[type="password"], input[type="number"], input[type="email"]) {
    box-shadow: inset 0 1px 1px rgba(2, 6, 23, 0.35), 0 12px 28px rgba(2, 6, 23, 0.45);
}

.input-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.input-row input[type="email"],
.input-row input[type="text"],
.input-row select {
    flex: 1 1 220px;
    min-width: 200px;
}

.integration-card-extra {
    border-top: 1px solid rgba(27, 67, 50, 0.1);
    padding-top: 1rem;
    display: grid;
    gap: 0.9rem;
}

.integration-card-extra h4 {
    margin: 0;
    color: #12362f;
}

body.binary-theme--dark .integration-card-extra {
    border-top-color: rgba(148, 163, 184, 0.22);
}

body.binary-theme--dark .integration-card-extra h4 {
    color: rgba(226, 232, 240, 0.92);
}

.diagnostic-details {
    background: rgba(27, 67, 50, 0.06);
    border-radius: 0.85rem;
    padding: 0.5rem 0.75rem 0.9rem;
}

.diagnostic-details summary {
    cursor: pointer;
    font-weight: 600;
    color: #1b4332;
    margin-bottom: 0.5rem;
    list-style: none;
}

body.binary-theme--dark .diagnostic-details {
    background: rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.24);
}

body.binary-theme--dark .diagnostic-details summary {
    color: rgba(226, 232, 240, 0.92);
}

.diagnostic-details summary::-webkit-details-marker {
    display: none;
}

.diagnostic-details[open] summary {
    margin-bottom: 0.75rem;
}

.diagnostic-log {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    background: #0f2d26;
    color: #e5f5ef;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    overflow-x: auto;
}

.jitsi-embed-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border: 1px solid var(--border-subtle, #d9dde8);
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--jitsi-embed-surface-background, #0f172a);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
}

.jitsi-embed-surface {
    position: absolute;
    inset: 0;
    background: var(--jitsi-embed-surface-background, #0f172a);
}

.jitsi-embed-surface iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
}

.integration-test-result {
    border: 1px dashed rgba(27, 67, 50, 0.25);
    border-radius: 1rem;
    padding: 1rem 1.2rem;
    display: grid;
    gap: 0.75rem;
    background: rgba(240, 249, 244, 0.55);
}

.copy-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.copy-row .copyable {
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    background: rgba(27, 67, 50, 0.08);
    font-family: 'Roboto Mono', monospace;
    font-size: 0.95rem;
    word-break: break-all;
}

.muted.small {
    font-size: 0.85rem;
    color: rgba(17, 24, 39, 0.78);
}

.default-button.link-button {
    background: transparent;
    border: none;
    padding: 0;
    min-width: auto;
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-color: var(--link-underline-color);
    cursor: pointer;
}

.default-button.link-button:hover {
    background: transparent;
    color: var(--link-hover-color);
}

.totp-secret-block {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    border: 1px dashed var(--integration-field-border);
    background: var(--integration-field-background);
    box-shadow: 0 14px 32px rgba(var(--color-primary-base), 0.12);
    justify-items: start;
}

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

.totp-secret-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.totp-secret-mask {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    padding: 0.6rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid var(--app-border-subtle);
    background: rgba(var(--color-primary-base), 0.1);
    color: var(--app-text-strong);
}

.totp-qr-image {
    width: 148px;
    max-width: 100%;
    border-radius: 0.75rem;
    box-shadow: 0 12px 28px rgba(var(--color-primary-base), 0.2);
}

body.binary-theme--dark .totp-secret-block {
    border-color: var(--app-border-subtle);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.55);
}

body.binary-theme--dark .totp-secret-mask {
    background: rgba(var(--color-primary-accent), 0.16);
    border-color: var(--app-border-strong);
}

.integration-admin-fields {
    display: grid;
    gap: 1rem;
}

.integration-field {
    display: grid;
    gap: 0.45rem;
    padding: 1rem 1.2rem;
    border-radius: 1rem;
    border: 1px solid var(--integration-field-border);
    background: var(--integration-field-background);
}

.integration-field label {
    font-weight: 600;
    color: var(--integration-field-label);
}

.integration-field input,
.integration-field textarea {
    width: 100%;
    border-radius: 0.85rem;
    border: 1px solid var(--input-border-color);
    padding: 0.7rem 1rem;
    background: var(--input-background);
    color: var(--input-text-color);
    box-shadow: inset 0 1px 1px rgba(15, 49, 49, 0.05), var(--input-rest-shadow);
}

.integration-field input:focus,
.integration-field textarea:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 4px var(--input-focus-shadow);
    outline: none;
    background: var(--input-background);
    color: var(--input-text-color);
}

body.binary-theme--dark .integration-field {
    color: rgba(226, 232, 240, 0.85);
    box-shadow: 0 22px 52px rgba(2, 6, 23, 0.5);
}

body.binary-theme--dark .integration-field input,
body.binary-theme--dark .integration-field textarea {
    box-shadow: inset 0 1px 1px rgba(2, 6, 23, 0.35), var(--input-rest-shadow);
}

.integration-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: #1b4332;
}

.integration-checkbox input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #2a7f62;
}

body.binary-theme--dark .integration-checkbox {
    color: rgba(226, 232, 240, 0.88);
}

body.binary-theme--dark .integration-checkbox input[type="checkbox"] {
    accent-color: #22d3ee;
}

.origin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: fit-content;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.origin-badge.origin-default {
    background: rgba(27, 67, 50, 0.12);
    color: #1b4332;
}

.origin-badge.origin-custom {
    background: rgba(42, 127, 98, 0.16);
    color: #0f2d21;
}

body.binary-theme--dark .origin-badge {
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35);
}

body.binary-theme--dark .origin-badge.origin-default {
    background: rgba(71, 85, 105, 0.45);
    color: rgba(241, 245, 249, 0.95);
}

body.binary-theme--dark .origin-badge.origin-custom {
    background: rgba(16, 185, 129, 0.3);
    color: #ecfdf5;
}

.feedback-message {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #555;
}

.feedback-message.success {
    color: #2e7d32;
}

.feedback-message.failure,
.feedback-message.error {
    color: #c62828;
}

.feedback-message.progress {
    color: #1f6f8b;
}

.muted.success {
    color: #2e7d32;
}

.muted.failure,
.muted.error {
    color: #c62828;
}

.language-gate-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    z-index: 1000;
}

.language-gate-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.language-gate-card h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.language-gate-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin: 1.5rem 0 1rem;
}

.language-gate-actions .default-button {
    flex: 1;
}

.language-gate-actions .secondary-link {
    color: #2e7d32;
    text-decoration: none;
    font-weight: 600;
}

.language-gate-actions .secondary-link:hover {
    text-decoration: underline;
}

.doc-group {
    margin: 0;
}

.doc-group details {
    border: 1px solid var(--docs-group-border);
    border-radius: 0.95rem;
    padding: 0.6rem 0.85rem;
    background: var(--docs-group-background);
    color: var(--docs-group-text);
    box-shadow: 0 18px 38px rgba(15, 49, 49, 0.08);
}

body.binary-theme--dark .doc-group details {
    box-shadow: 0 26px 52px rgba(2, 6, 23, 0.55);
}

.doc-group summary {
    margin: 0;
    font-size: 1rem;
    color: var(--docs-group-summary);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.doc-group summary::-webkit-details-marker {
    display: none;
}

.doc-group summary::after {
    content: '▾';
    font-size: 0.85rem;
    color: var(--docs-group-icon);
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

.doc-group details[open] summary::after {
    transform: rotate(180deg);
}

.doc-group-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

.app-shell {
    position: relative;
    width: min(96vw, 1520px);
    margin: clamp(2rem, 5vh, 3rem) auto clamp(2.5rem, 6vh, 4rem);
    padding: clamp(2.25rem, 5vw, 3.5rem);
    padding-left: clamp(0.6rem, 1.25vw, 0.9rem);
    border-radius: 2.4rem;
    background: linear-gradient(155deg, #0b1723 0%, #11263a 45%, #081521 100%);
    color: #e2e8f0;
    box-shadow: 0 40px 110px rgba(6, 12, 20, 0.58);
    overflow: hidden;
    min-height: clamp(720px, 80vh, 880px);
}

.app-shell::before {
    content: '';
    position: absolute;
    inset: -6%;
    background: radial-gradient(circle at 16% 20%, rgba(56, 189, 248, 0.18), transparent 55%),
        radial-gradient(circle at 82% 12%, rgba(139, 92, 246, 0.16), transparent 60%),
        radial-gradient(circle at 12% 86%, rgba(45, 212, 191, 0.12), transparent 60%);
    background-repeat: no-repeat;
    background-size: 140% 140%;
    pointer-events: none;
}

.app-shell :is(.shell-layout, .settings-layout) {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(280px, 28%) minmax(0, 1fr);
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    align-items: start;
}

.app-shell :is(.shell-nav, .settings-nav) {
    position: sticky;
    top: clamp(1.25rem, 4vh, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    padding: clamp(1.5rem, 2.75vw, 2.25rem);
    border-radius: 1.9rem;
    background: linear-gradient(165deg, rgba(23, 36, 52, 0.95), rgba(10, 20, 32, 0.88));
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 32px 72px rgba(3, 10, 18, 0.55);
    backdrop-filter: blur(16px);
    min-width: 0;
    align-self: start;
}

.app-shell :is(.shell-nav, .settings-nav) h2 {
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f8fafc;
}

.app-shell :is(.shell-menu, .settings-menu) {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.app-shell :is(.shell-nav-button, .settings-nav-button) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    border-radius: 1.2rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.55);
    color: #dbeafe;
    font-weight: 600;
    padding: 0.85rem 1.15rem;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.app-shell :is(.shell-nav-button, .settings-nav-button):hover,
.app-shell :is(.shell-nav-button, .settings-nav-button):focus {
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(129, 161, 255, 0.45);
    color: #f8fafc;
    transform: translateX(4px);
    outline: none;
}

.app-shell :is(.shell-nav-button, .settings-nav-button).active {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.4), rgba(59, 130, 246, 0.38));
    border-color: rgba(129, 161, 255, 0.65);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.35);
    color: #ffffff;
}

.app-shell :is(.shell-content, .settings-content) {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    min-width: 0;
}

.app-shell :is(.shell-panel, .settings-panel) {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-content: start;
    min-width: 0;
}

.app-shell .shell-content .tab-pane:not(.active) {
    display: none !important;
}

.app-shell .card {
    background: linear-gradient(155deg, rgba(12, 24, 38, 0.92), rgba(9, 18, 30, 0.88));
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 1.85rem;
    box-shadow: 0 32px 82px rgba(5, 12, 22, 0.6);
    color: #e2e8f0;
    padding: clamp(2.2rem, 3.75vw, 3.1rem);
    max-width: 100%;
    overflow: hidden;
}

.app-shell .card h2,
.app-shell .card h3 {
    color: #f8fafc;
    letter-spacing: 0.01em;
}

.app-shell .card .muted {
    color: rgba(226, 232, 240, 0.74);
}

.app-shell .card a {
    color: #93c5fd;
    font-weight: 600;
}

.app-shell .card a:hover,
.app-shell .card a:focus {
    color: #bfdbfe;
}

.table-container {
    width: 100%;
}

.app-shell .table-container {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 1.35rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
    padding-bottom: 0.35rem;
}

.app-shell .table-container::-webkit-scrollbar {
    height: 0.5rem;
}

.app-shell .table-container::-webkit-scrollbar-track {
    background: transparent;
}

.app-shell .table-container::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
}

.app-shell .table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.65);
}

.app-shell .table-container .data-table {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

.app-shell .data-table {
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(11, 22, 36, 0.52);
    border-radius: 1.35rem;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.16), 0 26px 60px rgba(6, 13, 24, 0.42);
    backdrop-filter: blur(12px);
}

.app-shell .data-table th,
.app-shell .data-table td {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
    padding: 1rem 1.35rem;
    max-width: 16rem;
    overflow-wrap: anywhere;
}

.app-shell .data-table th {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.78), rgba(37, 99, 235, 0.34));
    color: #e0f2fe;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.82rem;
}

.app-shell .data-table thead th:first-child {
    border-top-left-radius: 1.35rem;
}

.app-shell .data-table thead th:last-child {
    border-top-right-radius: 1.35rem;
}

.app-shell .data-table tbody tr {
    background: rgba(11, 22, 36, 0.38);
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.app-shell .data-table tbody tr:nth-child(even) {
    background: rgba(11, 22, 36, 0.28);
}

.app-shell .data-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.18);
    transform: translateY(-1px);
}

.app-shell .data-table tbody tr:last-child td {
    border-bottom: none;
}

.app-shell .table-actions-content {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.app-shell .table-actions-content .default-button,
.app-shell .table-actions-content .primary-button,
.app-shell .table-actions-content .cancel-button {
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.35rem;
}

.app-shell .table-actions-content .muted {
    margin-left: auto;
}

@media (max-width: 720px) {

    .table-actions-content,
    .app-shell .table-actions-content {
        flex-wrap: wrap;
        white-space: normal;
    }
}

.app-shell :is(.shell-nav, .settings-nav)+.shell-menu {
    margin-top: 0;
}

.app-shell .form-group label,
.app-shell .form-row .form-group label {
    color: #f1f5f9;
    font-weight: 600;
}

.app-shell .form-group input,
.app-shell .form-group textarea,
.app-shell .form-group select,
.app-shell .preferences-editor textarea,
.app-shell textarea,
.app-shell select {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.32);
    color: #f8fafc;
    border-radius: 0.85rem;
    padding: 0.75rem 1rem;
    box-shadow: inset 0 1px 2px rgba(8, 14, 26, 0.55);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.app-shell .preferences-editor textarea {
    min-height: 260px;
    font-size: 0.95rem;
}

.app-shell .form-group input:focus,
.app-shell .form-group textarea:focus,
.app-shell .form-group select:focus,
.app-shell .preferences-editor textarea:focus {
    border-color: rgba(96, 165, 250, 0.9);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25);
    outline: none;
    background: rgba(15, 23, 42, 0.95);
}

.notification-settings {
    display: grid;
    gap: 1.75rem;
}

.notification-section {
    display: grid;
    gap: 1rem;
}

.notification-streams {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.notification-streams li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border-radius: 1.2rem;
}

.notification-streams li.disabled {
    opacity: 0.55;
}

.notification-streams li h3 {
    margin: 0;
    font-size: 1.05rem;
}

.notification-streams li p {
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
}

.notification-stream-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.notification-stream-toggle input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
}

.notification-event-list {
    display: grid;
    gap: 1.35rem;
}

.notification-event-card {
    border-radius: 1.35rem;
    padding: 1.35rem 1.5rem;
    display: grid;
    gap: 1rem;
}

.notification-event-card header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.notification-event-card header p {
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
}

.notification-event-streams {
    display: grid;
    gap: 0.85rem;
}

.notification-event-stream {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
}

.notification-event-stream.disabled {
    opacity: 0.6;
}

.notification-event-stream strong {
    font-size: 0.95rem;
}

.notification-event-modes {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.notification-event-modes label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
}

.notification-event-modes input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
}

.tutorial-preference {
    align-items: center;
    gap: 0.65rem 1rem;
}

.tutorial-preference .tutorial-preference-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tutorial-preference .tutorial-preference-copy strong {
    font-size: 1rem;
}

.tutorial-preference .tutorial-preference-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    cursor: pointer;
}

.tutorial-preference .tutorial-preference-toggle input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
}

.notification-event-empty {
    font-style: italic;
}

.notification-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.notification-actions .feedback-message {
    margin: 0;
}

body.binary-theme--dark .notification-streams li {
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.55);
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08);
}

body.binary-theme--dark .notification-streams li p,
body.binary-theme--dark .notification-event-card header p,
body.binary-theme--dark .notification-event-empty {
    color: rgba(226, 232, 240, 0.72);
}

body.binary-theme--dark .notification-event-card {
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(11, 22, 36, 0.6);
}

body.binary-theme--dark .notification-event-stream {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

body.binary-theme--dark .app-shell .form-group input::placeholder,
body.binary-theme--dark .app-shell .form-group textarea::placeholder {
    color: rgba(226, 232, 240, 0.55);
}

body.binary-theme--light .notification-streams li {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(248, 250, 252, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body.binary-theme--light .notification-streams li p,
body.binary-theme--light .notification-event-card header p,
body.binary-theme--light .notification-event-empty {
    color: rgba(71, 85, 105, 0.8);
}

body.binary-theme--light .notification-event-card {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(148, 163, 184, 0.12);
}

body.binary-theme--light .notification-event-stream {
    background: rgba(226, 232, 240, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.3);
}

body.binary-theme--light .app-shell .form-group input::placeholder,
body.binary-theme--light .app-shell .form-group textarea::placeholder {
    color: rgba(71, 85, 105, 0.6);
}

.app-shell .default-button {
    background: var(--button-background);
    border-color: var(--button-border-color);
    color: var(--button-text-color);
    box-shadow: var(--button-rest-shadow);
}

.app-shell .default-button:hover,
.app-shell .default-button:focus {
    background: var(--button-hover-background);
    border-color: var(--button-hover-border-color);
    color: var(--button-hover-text-color, var(--button-text-color));
    box-shadow: var(--button-hover-shadow);
}

.app-shell .default-button.cancel-button {
    background: rgba(248, 113, 113, 0.16);
    border-color: rgba(248, 113, 113, 0.4);
    color: #fecaca;
    box-shadow: none;
}

.app-shell .default-button.cancel-edit-button {
    background: linear-gradient(135deg, #f87171, #dc2626);
    border-color: rgba(248, 113, 113, 0.6);
    color: #fef2f2;
    box-shadow: 0 20px 42px rgba(127, 29, 29, 0.4);
}

.app-shell .default-button.cancel-edit-button:hover,
.app-shell .default-button.cancel-edit-button:focus {
    background: linear-gradient(135deg, #fca5a5, #ef4444);
    border-color: rgba(248, 113, 113, 0.75);
    color: #ffffff;
    box-shadow: 0 24px 48px rgba(127, 29, 29, 0.45);
}

.app-shell .primary-button {
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    color: #0b1220;
    box-shadow: 0 24px 55px rgba(99, 102, 241, 0.45);
}

.app-shell .primary-button:hover,
.app-shell .primary-button:focus {
    box-shadow: 0 28px 60px rgba(99, 102, 241, 0.55);
}

.app-shell .feedback-message {
    color: rgba(226, 232, 240, 0.75);
}

.app-shell .feedback-message.failure,
.app-shell .feedback-message.error {
    color: #fca5a5;
}

.app-shell .feedback-message.success {
    color: #a7f3d0;
}

.app-shell .feedback-message.progress {
    color: #93c5fd;
}

.app-shell .schedule-list li {
    background: rgba(51, 65, 85, 0.48);
    color: #e2e8f0;
}

.app-shell .schedule-list li button {
    color: #fecaca;
    background: rgba(248, 113, 113, 0.15);
}

.app-shell .schedule-list li button:hover,
.app-shell .schedule-list li button:focus {
    background: rgba(248, 113, 113, 0.28);
}

.app-shell .inline-form {
    background: rgba(10, 17, 28, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 1.1rem;
}

.app-shell .integration-actions {
    display: inline-flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.app-shell .integration-actions .default-button,
.app-shell .integration-actions .primary-button {
    min-height: var(--button-min-height);
    padding-inline: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-shell .integration-actions .status-pill {
    align-self: center;
}

.app-shell .integration-card[data-module-id="calendar"] .calendar-subscription-grid {
    display: grid;
    gap: 1.15rem;
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-row {
    display: grid;
    gap: 0.75rem;
    align-items: center;
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-row--header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-row--header h3 {
    margin: 0;
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-row--header .default-button {
    justify-self: end;
}

.app-shell .integration-card[data-module-id="calendar"] :is(.subscription-row--manage,
    .subscription-row--rotate,
    .subscription-row--actions) {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.app-shell .integration-card[data-module-id="calendar"] :is(.subscription-row--manage,
    .subscription-row--rotate,
    .subscription-row--actions) button {
    justify-self: stretch;
    width: 100%;
    padding: 0.65rem 1.1rem;
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-row--meta {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.35rem 1.5rem;
    align-items: baseline;
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-row--meta .muted.small {
    line-height: 1.4;
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-row--help {
    grid-template-columns: minmax(0, 1fr);
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-row--help p {
    margin: 0;
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-row--link {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: stretch;
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-row--token {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: center;
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-credential {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-credential--token {
    grid-template-columns: auto auto;
    justify-content: space-between;
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-credential__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-token-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--integration-feature-text, rgba(15, 23, 42, 0.9));
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-credential .icon-button {
    width: 2.2rem;
    height: 2.2rem;
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-credential .icon-button .icon {
    width: 1rem;
    height: 1rem;
}

.app-shell .integration-card[data-module-id="calendar"] :is(.subscription-row--link,
    .subscription-row--meta,
    .subscription-row--help,
    .subscription-row--token) {
    border-top: 1px solid var(--integration-field-border, rgba(15, 23, 42, 0.12));
    padding-top: 0.85rem;
    margin-top: 0.15rem;
}

.app-shell .integration-card[data-module-id="calendar"] .subscription-token {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border-radius: 0.65rem;
    border: 1px solid var(--integration-field-border, rgba(15, 23, 42, 0.16));
    background: var(--integration-field-background, rgba(255, 255, 255, 0.82));
    color: var(--integration-feature-text, rgba(15, 23, 42, 0.9));
    font-size: 0.95rem;
    font-family: 'Roboto Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    letter-spacing: 0.03em;
}

body.binary-theme--dark .app-shell .integration-card[data-module-id="calendar"] :is(.subscription-row--link,
    .subscription-row--meta,
    .subscription-row--help,
    .subscription-row--token) {
    border-top-color: var(--integration-field-border, rgba(148, 163, 184, 0.28));
}

body.binary-theme--dark .app-shell .integration-card[data-module-id="calendar"] .subscription-row--header .default-button {
    color: var(--button-text-color);
}

body.binary-theme--dark .app-shell .integration-card[data-module-id="calendar"] .subscription-token {
    background: var(--integration-field-background, rgba(10, 21, 38, 0.82));
    border-color: var(--integration-field-border, rgba(148, 163, 184, 0.28));
    color: var(--integration-field-label, rgba(226, 232, 240, 0.88));
}

.settings-shell .integration-card,
.settings-shell .integration-admin-card {
    background: rgba(10, 20, 32, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 26px 52px rgba(6, 12, 24, 0.5);
    color: #e2e8f0;
}

.settings-shell .integration-card header h3,
.settings-shell .integration-admin-card header h3 {
    color: #f8fafc;
}

.settings-shell .empty-state {
    background: rgba(148, 163, 184, 0.12);
    color: #e2e8f0;
}

.app-shell .muted {
    color: rgba(226, 232, 240, 0.72);
}

.app-shell :is(.shell-content, .settings-content) h3 {
    color: #f8fafc;
}

.app-shell :is(.shell-content, .settings-content) p {
    color: rgba(226, 232, 240, 0.78);
}

.app-shell :is(.shell-content, .settings-content) strong {
    color: #ffffff;
}

.settings-shell #integration-modules {
    gap: clamp(1.75rem, 3.5vw, 2.5rem);
}

.settings-shell .integration-feature-list li {
    background: var(--integration-feature-background);
    border: 1px solid var(--integration-feature-border);
    color: var(--integration-feature-text);
}

.settings-shell .integration-section {
    background: linear-gradient(135deg, rgba(16, 43, 60, 0.78), rgba(11, 32, 46, 0.74));
    border-color: rgba(94, 234, 212, 0.22);
    box-shadow: 0 20px 48px rgba(5, 18, 30, 0.45);
}

.settings-shell .integration-section.disabled {
    background: rgba(19, 38, 54, 0.62);
    border-color: rgba(148, 163, 184, 0.2);
}

.settings-shell .integration-section.pending {
    border-color: rgba(250, 204, 21, 0.35);
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.78), rgba(55, 48, 163, 0.48));
}

.settings-shell .status-pill {
    background: rgba(51, 65, 85, 0.55);
    color: #e2e8f0;
}

.settings-shell .status-pill.success {
    background: rgba(45, 212, 191, 0.24);
    color: #99f6e4;
}

.settings-shell .status-pill.muted {
    background: rgba(100, 116, 139, 0.32);
    color: rgba(226, 232, 240, 0.78);
}

.settings-shell .integration-inline-form {
    background: rgba(15, 32, 46, 0.72);
    border-color: rgba(148, 163, 184, 0.28);
}

@media (max-width: 1200px) {
    .app-shell {
        margin: clamp(2.25rem, 7vw, 3.25rem) auto clamp(2.75rem, 7vw, 4rem);
        padding: clamp(2.5rem, 6vw, 3.75rem);
        padding-left: clamp(0.65rem, 1.5vw, 0.95rem);
        border-radius: 2.1rem;
    }

    .app-shell :is(.shell-layout, .settings-layout) {
        grid-template-columns: clamp(260px, 32%, 320px) minmax(0, 1fr);
        gap: clamp(1rem, 2vw, 1.5rem);
    }
}

@media (max-width: 940px) {
    .app-shell :is(.shell-layout, .settings-layout) {
        grid-template-columns: 1fr;
    }

    .app-shell :is(.shell-nav, .settings-nav) {
        position: static;
        padding: clamp(1.75rem, 6vw, 2rem);
    }

    .app-shell :is(.shell-menu, .settings-menu) {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .app-shell :is(.shell-nav-button, .settings-nav-button) {
        flex: 1 1 220px;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .app-shell {
        padding: 1.65rem;
        padding-left: 0.5rem;
        border-radius: 1.6rem;
    }

    .app-shell :is(.shell-nav, .settings-nav) {
        gap: 1rem;
        padding: 1.25rem;
    }

    .app-shell :is(.shell-menu, .settings-menu) {
        gap: 0.5rem;
    }

    .app-shell :is(.shell-nav-button, .settings-nav-button) {
        flex: 1 1 100%;
        justify-content: center;
    }
}

.preferences-editor textarea {
    width: 100%;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.95rem;
    min-height: 240px;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(27, 67, 50, 0.2);
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(27, 67, 50, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.preferences-editor textarea:focus {
    border-color: #2a7f62;
    box-shadow: 0 0 0 4px rgba(42, 127, 98, 0.12);
    outline: none;
    background: #ffffff;
}

.appearance-form {
    margin: 0;
    padding: 0;
}

.appearance-fieldset {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.appearance-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.appearance-option {
    position: relative;
    display: inline-flex;
}

.appearance-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appearance-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.35);
    background: rgba(59, 130, 246, 0.18);
    color: #e0f2fe;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.appearance-option input[type="radio"]:hover+.appearance-chip,
.appearance-option input[type="radio"]+.appearance-chip:hover {
    border-color: rgba(125, 211, 252, 0.65);
}

.appearance-option input[type="radio"]:focus-visible+.appearance-chip {
    outline: 2px solid rgba(125, 211, 252, 0.85);
    outline-offset: 3px;
}

.appearance-time-format {
    margin-top: 1.5rem;
    display: grid;
    gap: 0.5rem;
}

.appearance-time-format legend {
    font-size: 1rem;
    font-weight: 600;
    color: var(--surface-muted-strong, #0f2f28);
    margin: 0;
}

body.binary-theme--dark .appearance-time-format legend {
    color: #f8fafc;
}

.appearance-time-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--surface-muted-strong, #0f2f28);
}

body.binary-theme--dark .appearance-time-toggle {
    color: #f8fafc;
}

.appearance-time-toggle input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
}

.appearance-option input[type="radio"]:checked+.appearance-chip {
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    border-color: rgba(99, 102, 241, 0.85);
    color: #0b1220;
    box-shadow: 0 18px 40px rgba(99, 102, 241, 0.35);
}

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

.availability-hours,
.availability-slots {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.schedule-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.schedule-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.85rem;
    background: rgba(27, 67, 50, 0.08);
    color: #1b4332;
}

.schedule-list li button {
    border: none;
    background: none;
    color: #c1121f;
    font-weight: 600;
    cursor: pointer;
}

.schedule-list li button {
    padding: 0.35rem 0.6rem;
    border-radius: 0.65rem;
    background: rgba(193, 18, 31, 0.1);
}

.schedule-list li button:hover,
.schedule-list li button:focus {
    background: rgba(193, 18, 31, 0.18);
    outline: none;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    padding: 1rem;
    border: 1px solid rgba(27, 67, 50, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.6);
}

.inline-actions {
    justify-content: flex-start;
}

.inline-actions .default-button {
    min-width: 140px;
}

.chip-button {
    border: none;
    background: rgba(42, 127, 98, 0.12);
    color: #1b4332;
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    font-weight: 600;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.chip-button:hover,
.chip-button:focus {
    background: rgba(42, 127, 98, 0.22);
    outline: none;
    box-shadow: 0 10px 20px rgba(27, 67, 50, 0.12);
}

.chip-button.danger {
    background: rgba(193, 18, 31, 0.12);
    color: #c1121f;
}

.chip-button.danger:hover,
.chip-button.danger:focus {
    background: rgba(193, 18, 31, 0.22);
    box-shadow: 0 10px 20px rgba(193, 18, 31, 0.18);
}

@media (max-width: 1080px) {
    .profile-columns {
        grid-template-columns: 1fr;
    }

    .profile-side-column {
        order: -1;
    }
}

@media (max-width: 768px) {
    .profile-hero {
        padding: 1.75rem;
    }

    .profile-hero-avatar {
        width: 128px;
        height: 128px;
        border-radius: 24px;
    }

    .profile-hero-details {
        width: 100%;
    }

    .profile-hero-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-hero-suggestions {
        flex: 1 1 100%;
        max-height: none;
        width: 100%;
    }

    .profile-hero-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .profile-hero-stats {
        justify-content: center;
        gap: 1.75rem;
    }
}

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

    .profile-hero-toolbar {
        align-items: stretch;
    }

    .profile-hero-stats li {
        min-width: 120px;
    }

    .profile-hero-stats li+li::before {
        display: none;
    }
}



.toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 3100;
    pointer-events: none;
}

.toast-message {
    min-width: 240px;
    max-width: min(90vw, 420px);
    border-radius: 0.85rem;
    padding: 0.85rem 1.25rem;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 18px 36px rgba(27, 67, 50, 0.22);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.toast-message.progress,
.toast-message.info {
    background: linear-gradient(135deg, #1f6f8b, #1c4966);
}

.toast-message.success {
    background: linear-gradient(135deg, #2a7f62, #1b4332);
}

.toast-message.failure,
.toast-message.error,
.toast-message.warning {
    background: linear-gradient(135deg, #c1121f, #780000);
}

.hidden {
    display: none !important;
}

.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;
}

.community-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.community-controls select {
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(27, 67, 50, 0.18);
    background: #ffffff;
    color: #1b4332;
}

body.binary-theme--dark .community-controls select {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(148, 163, 184, 0.28);
    color: rgba(226, 232, 240, 0.85);
}

.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.6rem 1.2rem;
    min-height: var(--button-min-height);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(27, 67, 50, 0.2);
    background: rgba(237, 246, 249, 0.92);
    color: var(--app-text-strong);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.35;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.secondary-button:hover,
.secondary-button:focus {
    background: rgba(237, 246, 249, 1);
    border-color: rgba(27, 67, 50, 0.3);
    box-shadow: 0 14px 28px rgba(27, 67, 50, 0.16);
    color: var(--app-text-strong);
    outline: none;
}

body.binary-theme--dark .secondary-button {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(148, 163, 184, 0.28);
    color: rgba(226, 232, 240, 0.9);
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.55);
}

body.binary-theme--dark .secondary-button:hover,
body.binary-theme--dark .secondary-button:focus {
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(148, 163, 184, 0.42);
    color: rgba(226, 232, 240, 0.95);
}

.connection-section {
    margin-bottom: 1.5rem;
}

.connection-section h3 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: #1b4332;
}

body.binary-theme--dark .connection-section h3 {
    color: rgba(226, 232, 240, 0.85);
}

.requests-section .request-groups {
    display: grid;
    gap: 1rem;
}

.request-group h4 {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--app-text-body, #1f3d3d);
}

body.binary-theme--dark .request-group h4 {
    color: rgba(226, 232, 240, 0.8);
}

.request-list,
.contact-list {
    background: var(--surface-background);
    border: 1px solid var(--surface-border);
    border-radius: 0.85rem;
    padding: 0.75rem;
    display: grid;
    gap: 0.6rem;
    box-shadow: var(--surface-shadow);
}

body.binary-theme--light .request-list,
body.binary-theme--light .contact-list {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(236, 250, 244, 0.92));
    border-color: rgba(27, 67, 50, 0.15);
    box-shadow: 0 16px 34px rgba(31, 61, 61, 0.12);
}

body.binary-theme--dark .request-list,
body.binary-theme--dark .contact-list {
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.78), rgba(8, 17, 33, 0.82));
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: 0 28px 60px rgba(2, 6, 23, 0.5);
    color: rgba(226, 232, 240, 0.85);
}

.request-item,
.contact-item,
.contact-items li {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.75rem;
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 0.65rem 0.85rem;
    box-shadow: 0 4px 12px rgba(27, 67, 50, 0.08);
}

body.binary-theme--dark .request-item,
body.binary-theme--dark .contact-item,
body.binary-theme--dark .contact-items li {
    background: rgba(15, 23, 42, 0.78);
    box-shadow: 0 20px 44px rgba(2, 6, 23, 0.5);
    color: rgba(226, 232, 240, 0.85);
}

.contact-summary {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-name-link {
    color: inherit;
    text-decoration: none;
}

.contact-name-link:hover,
.contact-name-link:focus {
    text-decoration: underline;
}

.contact-username-link {
    color: inherit;
    text-decoration: none;
}

.contact-username-link.muted {
    color: #777;
}

.contact-username-link:hover,
.contact-username-link:focus {
    text-decoration: underline;
}

.contact-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
}

.contact-actions .profile-action-button {
    font-size: 0.875rem;
    padding: 0.4rem 1rem;
    white-space: nowrap;
    flex-shrink: 1;
}

.contact-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(27, 67, 50, 0.08);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.8rem;
    color: #1b4332;
}

body.binary-theme--dark .contact-chip {
    background: rgba(59, 130, 246, 0.22);
    color: #e2e8f0;
}

.contact-chip.pending {
    background: rgba(233, 196, 106, 0.28);
}

.contact-chip.incoming {
    background: rgba(231, 111, 81, 0.28);
}

.contact-chip.teacher {
    background: rgba(69, 123, 157, 0.28);
}

body.binary-theme--dark .contact-chip.pending {
    background: rgba(250, 204, 21, 0.28);
    color: #fef3c7;
}

body.binary-theme--dark .contact-chip.incoming {
    background: rgba(248, 113, 113, 0.32);
    color: #fee2e2;
}

body.binary-theme--dark .contact-chip.teacher {
    background: rgba(96, 165, 250, 0.32);
    color: #e0f2fe;
}


.app-page__main.messages-page {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.messages-page .profile-panel-header {
    margin-bottom: 0.75rem;
}

.messages-page .profile-panel-header h2 {
    color: var(--app-text-strong);
}

.messaging-shell {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.messaging-layout {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
}

.messaging-contacts {
    width: 260px;
    border-right: 1px solid var(--app-border-subtle);
    padding: 0.25rem 1rem 0.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.messaging-list-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.messaging-list-group+.messaging-list-group {
    border-top: 1px solid var(--app-border-divider);
    padding-top: 1rem;
}

.messaging-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.messaging-section-header .messaging-section-title {
    margin: 0;
}

.messaging-section-header .default-button.link-button {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--app-accent-contrast);
}

.messaging-section-header .default-button.link-button:hover,
.messaging-section-header .default-button.link-button:focus {
    color: var(--app-accent-contrast-strong);
}

.messaging-section-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--app-text-strong);
}

.contact-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.contact-items li {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
}

.contact-items button {
    border: none;
    background: transparent;
    cursor: pointer;
}

.contact-items button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.contact-items button.contact-entry {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.85rem;
    background: var(--app-card-background);
    border: 1px solid var(--app-border-subtle);
    box-shadow: var(--app-card-shadow);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
    width: 100%;
    height: 4.9rem;
    overflow: hidden;
}

.contact-items button.contact-entry.classroom-chat-entry {
    height: auto;
    min-height: 4.25rem;
}

.contact-items button.contact-entry.classroom-chat-entry .contact-details {
    gap: 0.2rem;
}

.contact-items button.contact-entry.classroom-chat-entry .contact-name-row {
    flex-wrap: wrap;
    align-items: flex-start;
}

.contact-items button.contact-entry.classroom-chat-entry .contact-name-row .contact-name {
    flex: 1 1 auto;
}

.contact-items button.contact-entry.classroom-chat-entry .contact-name-row .contact-time {
    margin-left: auto;
}

.contact-items button.contact-entry.classroom-chat-entry .contact-username-row {
    width: 100%;
}

.contact-items button.contact-entry.classroom-chat-entry .contact-preview {
    display: none;
}

.contact-items button.contact-entry:hover,
.contact-items button.contact-entry:focus {
    background: var(--app-contact-hover-bg);
    border-color: var(--app-contact-hover-border);
    box-shadow: var(--app-card-hover-shadow);
}

.contact-items button.contact-entry.active {
    background: linear-gradient(135deg, rgba(42, 127, 98, 0.24), rgba(17, 94, 89, 0.16));
    color: var(--app-contact-text-strong);
    border-color: var(--app-border-strong);
    box-shadow: 0 14px 26px rgba(27, 67, 50, 0.18);
}

.contact-items button.contact-entry.active .contact-name,
.contact-items button.contact-entry.active .contact-preview {
    color: var(--app-contact-text-strong);
}

.contact-items button.contact-entry.active .contact-time {
    color: var(--app-contact-text-tertiary);
}

.contact-items button.contact-entry.active .contact-unread {
    background: rgba(42, 127, 98, 0.18);
    color: var(--app-contact-text-strong);
    box-shadow: none;
}

.contact-items button.contact-entry.active .contact-username {
    color: var(--app-contact-text-secondary);
}

.contact-identity {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
    height: 100%;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
}

.contact-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    font-weight: 600;
    color: var(--app-text-strong);
    gap: 0.4rem;
}

.contact-username-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    gap: 0.35rem;
}

.contact-username-row.is-stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
}

.contact-username-row .contact-username {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-username-row .contact-time {
    margin-left: auto;
    text-align: right;
}

.contact-username-row .contact-time.is-stacked,
.contact-username-row.is-stacked .contact-time {
    margin-left: 0;
    width: 100%;
    text-align: right;
    white-space: normal;
    word-break: break-word;
}

.contact-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    max-width: 45%;
    justify-content: flex-end;
    text-align: right;
    overflow: hidden;
}

.contact-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: #d90429;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 14px rgba(217, 4, 41, 0.25);
}

.contact-preview {
    font-size: 0.85rem;
    color: var(--app-contact-text-secondary);
    display: block;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-time {
    font-size: 0.75rem;
    color: var(--app-contact-text-tertiary);
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.contact-username {
    font-size: 0.8rem;
}

.contact-avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-avatar-gradient);
    color: var(--app-avatar-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 16px rgba(28, 73, 102, 0.18);
    flex-shrink: 0;
}

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

.contact-avatar.contact-avatar--image .contact-initials {
    display: none;
}

.contact-avatar.contact-avatar--initials {
    background: linear-gradient(135deg, #1f6f8b, #1c4966);
    color: #ffffff;
}

.contact-avatar.small {
    width: 2rem;
    height: 2rem;
    font-size: 0.8rem;
    box-shadow: 0 6px 12px rgba(28, 73, 102, 0.16);
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    border: 1px solid rgba(27, 67, 50, 0.16);
    background: rgba(255, 255, 255, 0.92);
    color: #1c4966;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.icon-button .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
}

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

.icon-button:hover,
.icon-button:focus {
    background: #edf2fb;
    border-color: rgba(28, 73, 102, 0.35);
    color: #16324f;
    box-shadow: 0 10px 20px rgba(28, 73, 102, 0.24);
}

.icon-button.destructive {
    color: #c1121f;
    border-color: rgba(193, 18, 31, 0.35);
    background: rgba(254, 245, 245, 0.92);
}

.icon-button.destructive:hover,
.icon-button.destructive:focus {
    color: #7f0a14;
    border-color: rgba(193, 18, 31, 0.6);
    background: rgba(255, 235, 235, 0.95);
    box-shadow: 0 10px 20px rgba(193, 18, 31, 0.22);
}

body.binary-theme--dark .icon-button {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(148, 163, 184, 0.28);
    color: rgba(226, 232, 240, 0.85);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.55);
}

body.binary-theme--dark .icon-button:hover,
body.binary-theme--dark .icon-button:focus {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(129, 161, 255, 0.5);
    color: #f8fafc;
    box-shadow: 0 24px 52px rgba(2, 6, 23, 0.65);
}

body.binary-theme--dark .icon-button.destructive {
    background: rgba(127, 29, 29, 0.45);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fecaca;
    box-shadow: 0 20px 44px rgba(127, 29, 29, 0.5);
}

body.binary-theme--dark .icon-button.destructive:hover,
body.binary-theme--dark .icon-button.destructive:focus {
    background: rgba(248, 113, 113, 0.45);
    border-color: rgba(252, 165, 165, 0.65);
    color: #fee2e2;
    box-shadow: 0 26px 56px rgba(127, 29, 29, 0.55);
}

.icon-button.is-loading {
    pointer-events: none;
    color: rgba(28, 73, 102, 0.55);
}

.icon-button.is-loading .icon {
    opacity: 0;
}

.icon-button.is-loading::after {
    content: '';
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: spinIcon 0.6s linear infinite;
}

@keyframes spinIcon {
    to {
        transform: rotate(360deg);
    }
}

.messaging-thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.conversation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--app-border-subtle);
    margin-bottom: 0.35rem;
}

.conversation-summary {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.conversation-avatar {
    width: 3.15rem;
    height: 3.15rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f6f8b, #1c4966);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 18px 30px rgba(28, 73, 102, 0.35);
    overflow: hidden;
    flex-shrink: 0;
}

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

.conversation-avatar .conversation-initials {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.conversation-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--app-text-strong);
}

.conversation-header p {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: var(--app-text-subtle);
}

.conversation-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.archive-notice {
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--app-archive-background);
    border: 1px solid var(--app-archive-border);
    border-radius: 0.85rem;
    color: var(--app-archive-text);
    font-size: 0.9rem;
}

.message-scroll {
    flex: 1;
    background: var(--app-panel-background);
    border: 1px solid var(--app-border-subtle);
    border-radius: 0.85rem;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    box-shadow: var(--app-panel-shadow);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.message-scroll.updating {
    background: var(--app-panel-refresh-bg);
    border-color: var(--app-panel-refresh-border);
}

.message-scroll.updating::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--app-panel-refresh-overlay);
    pointer-events: none;
    animation: messageRefreshFade 0.28s ease;
}

@keyframes messageRefreshFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.message-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.message-group.empty {
    padding: 0.5rem 0;
}


.message-bubble {
    max-width: 75%;
    padding: 0.6rem 0.9rem;
    border-radius: 1rem;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.4;
    cursor: default;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.message-bubble.sent {
    margin-left: auto;
    background: var(--app-message-sent-bg);
    border: 1px solid var(--app-message-sent-border);
    color: var(--app-message-sent-text);
}

.message-bubble.received {
    margin-right: auto;
    background: var(--app-message-received-bg);
    border: 1px solid var(--app-message-received-border);
    color: var(--app-message-received-text);
    padding-left: 2.5rem;
}

.message-bubble.received.one-on-one {
    padding-left: 0.9rem;
}

.message-avatar {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    position: absolute;
    left: -1.25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.message-avatar .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--app-card-background);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.message-wrapper {
    flex: 1;
    min-width: 0;
}

.message-sender-name {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--app-text-strong);
    opacity: 0.85;
}

.message-bubble:hover {
    box-shadow: var(--app-message-hover-shadow);
    transform: translateY(-2px);
}

.message-bubble:focus-visible {
    outline: 3px solid var(--app-message-focus-outline);
    outline-offset: 3px;
}

.message-bubble.context-menu-open {
    outline: 2px solid var(--app-message-context-outline);
    outline-offset: 4px;
}

.message-content {
    white-space: pre-wrap;
    word-break: break-word;
}

.message-meta {
    font-size: 0.75rem;
    margin-top: 0.35rem;
    opacity: 0.75;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.message-meta__separator {
    display: inline-flex;
}

.message-timestamp {
    color: inherit;
}

.message-timestamp.hidden-timestamp {
    display: none;
}

.message-bubble:hover .message-timestamp.hidden-timestamp {
    display: inline;
}

.message-read {
    color: var(--app-text-muted);
}

.read-receipt-indicator {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.35rem;
    margin-right: 0;
    padding: 0 0.5rem;
}

.read-receipt-text {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    opacity: 0.85;
}

.message-status {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    margin-left: 0.35rem;
    opacity: 0.75;
}

.message-status .status-tick {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--app-text-muted);
}

.message-status.read-status .status-tick {
    color: var(--app-accent-primary);
}

.message-status.read-status .status-tick:first-child {
    margin-right: -0.35rem;
}

.message-date-separator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
    text-align: center;
}

.date-separator-line {
    flex: 1;
    height: 1px;
    background: var(--app-border-divider);
}

.date-separator-text {
    font-size: 0.8rem;
    color: var(--app-text-subtle);
    font-weight: 500;
    white-space: nowrap;
    padding: 0 0.5rem;
}

.typing-indicator {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--app-text-subtle);
}

.typing-indicator.is-visible {
    display: inline-flex;
}

.typing-indicator__dots {
    display: inline-flex;
    gap: 0.2rem;
}

.typing-indicator__dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--app-text-muted);
    opacity: 0.6;
    animation: typingIndicatorBlink 1.4s infinite ease-in-out;
}

.typing-indicator__dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator__dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingIndicatorBlink {

    0%,
    80%,
    100% {
        transform: scale(0.8);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

body.binary-theme--dark .typing-indicator {
    color: rgba(203, 213, 225, 0.82);
}

body.binary-theme--dark .typing-indicator__dot {
    background: rgba(148, 163, 184, 0.75);
}

body.binary-theme--dark .read-receipt-text {
    color: rgba(203, 213, 225, 0.68);
}

body.binary-theme--dark .message-status .status-tick {
    color: rgba(148, 163, 184, 0.85);
}

body.binary-theme--dark .message-status.read-status .status-tick {
    color: rgba(59, 130, 246, 0.9);
}

body.binary-theme--dark .date-separator-line {
    background: rgba(148, 163, 184, 0.25);
}

body.binary-theme--dark .date-separator-text {
    color: rgba(203, 213, 225, 0.75);
}

.message-compose {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.message-compose textarea {
    border: 1px solid var(--app-border-divider);
    border-radius: 0.75rem;
    padding: 0.75rem;
    resize: vertical;
    min-height: 90px;
    background: var(--app-card-background);
    color: var(--app-text-body);
}

.message-compose textarea:focus {
    outline: none;
    border-color: var(--app-compose-focus-border);
    box-shadow: var(--app-compose-focus-shadow);
}

.message-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.message-voice-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-inline: 0.9rem;
}

.message-voice-toggle__icon {
    font-size: 1.05rem;
    line-height: 1;
}

.message-voice-status {
    min-height: 1.25rem;
    margin: 0;
}

#record-voice-button.is-recording {
    background: var(--app-accent-contrast);
    color: #fff;
    border-color: var(--app-accent-contrast);
}

body.binary-theme--dark #record-voice-button.is-recording {
    color: var(--app-text-strong);
}

.message-context-menu {
    position: fixed;
    background: var(--app-context-menu-bg);
    color: var(--app-context-menu-text);
    border-radius: 0.9rem;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 200px;
    box-shadow: var(--app-context-menu-shadow);
    z-index: 9999;
}

.message-context-menu.hidden {
    display: none;
}

.message-content--voice {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.message-voice-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--app-border-divider);
    background: linear-gradient(135deg, var(--app-panel-background), var(--app-card-background));
    color: var(--app-text-strong);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
}

.message-voice-play.is-active {
    border-color: var(--app-border-strong);
    background: linear-gradient(135deg, var(--app-accent-primary), var(--app-accent-primary-strong));
    color: var(--app-card-background);
}

.message-voice-play:hover,
.message-voice-play:focus-visible {
    border-color: var(--app-border-strong);
    box-shadow: var(--app-card-hover-shadow);
}

.message-voice-play__icon {
    font-size: 1rem;
}

.message-voice-clip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--app-card-background);
    border: 1px solid var(--app-border-divider);
    border-radius: 14px;
    padding: 0.65rem 0.95rem;
    box-shadow: var(--app-card-hover-shadow);
}

.message-voice-visual {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
}

.message-voice-wave {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    flex: 1 1 auto;
    min-width: 160px;
    --voice-bar-count: 24;
    --voice-bar-width: 3px;
    --voice-bar-gap: 3px;
    --voice-bar-step: calc(var(--voice-bar-width) + var(--voice-bar-gap));
    --voice-wave-width: 320px;
    width: var(--voice-wave-width, calc(var(--voice-bar-count, 24) * var(--voice-bar-step)));
    max-width: none;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    --voice-progress: 0%;
    flex: 0 0 auto;
}

.message-voice-wave__layer {
    display: inline-flex;
    align-items: flex-end;
    gap: var(--voice-bar-gap);
    pointer-events: none;
}

.message-voice-wave__base {
    position: relative;
    z-index: 1;
    width: 100%;
}

.message-voice-wave__fill {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: flex-end;
    gap: var(--voice-bar-gap);
    z-index: 2;
    width: var(--voice-progress, 0%);
    max-width: 100%;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(42, 127, 98, 0.15), rgba(42, 127, 98, 0.3));
}

.message-voice-wave__bar {
    width: clamp(2px, calc(var(--voice-wave-width, 320px) / (var(--voice-bar-count, 24) * 2)), 8px);
    border-radius: 6px;
    height: 16px;
    background: var(--app-border-strong);
    opacity: 0.75;
    transform-origin: center;
    transition: background 0.2s ease;
}

.message-voice-wave__fill .message-voice-wave__bar {
    background: var(--app-accent-primary);
    opacity: 0.95;
}

.message-voice-clip.is-playing .message-voice-wave__fill .message-voice-wave__bar {
    animation: voice-wave 1s ease-in-out infinite;
}

body.binary-theme--dark .message-voice-wave__fill {
    background: linear-gradient(90deg, rgba(124, 221, 192, 0.18), rgba(124, 221, 192, 0.38));
    opacity: 0.9;
}

.message-voice-wave__bar:nth-child(3n) {
    height: 22px;
}

.message-voice-wave__bar:nth-child(2n) {
    height: 12px;
}

.message-voice-time {
    font-variant-numeric: tabular-nums;
    color: var(--app-text-muted);
    font-weight: 600;
}

.message-voice-transcript {
    margin: 0;
    color: var(--app-text-body);
}

@keyframes voice-wave {
    0%,
    100% {
        transform: scaleY(0.6);
    }
    50% {
        transform: scaleY(1.2);
    }
}

.voice-player-bar {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 1200;
    min-width: 280px;
    max-width: 720px;
    width: 92%;
    background: var(--app-card-background);
    color: var(--app-text-body);
    border: 1px solid var(--app-border-divider);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
    border-radius: 14px;
    padding: 0.75rem 1rem;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.voice-player-bar.is-visible {
    display: flex;
}

.voice-player-bar__info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.voice-player-bar__label {
    font-size: 0.85rem;
    color: var(--app-text-muted);
}

.voice-player-bar__title {
    font-weight: 700;
    color: var(--app-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-player-bar__controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.voice-player-bar__toggle,
.voice-player-bar__close {
    border: 1px solid var(--app-border-divider);
    background: var(--app-panel-background);
    color: var(--app-text-strong);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.voice-player-bar__toggle:hover,
.voice-player-bar__close:hover {
    background: var(--app-panel-refresh-bg);
    border-color: var(--app-border-strong);
}

.voice-player-bar__audio {
    display: none;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-radius: 0.6rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.context-menu-item:hover,
.context-menu-item:focus {
    background: var(--app-context-menu-hover-bg);
    color: var(--app-context-menu-hover-text);
}

.context-menu-item .icon {
    display: inline-flex;
    width: 1.1rem;
    height: 1.1rem;
    align-items: center;
    justify-content: center;
}

.context-menu-item .icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.message-actions button:disabled,
#message-contacts-list button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.message-scroll.empty,
.request-list.empty,
.contact-list.empty,
.contact-items.empty {
    color: var(--app-text-muted);
}

@media (max-width: 960px) {
    .messaging-layout {
        flex-direction: column;
    }

    .messaging-contacts {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--app-border-subtle);
        padding-right: 0;
        padding-bottom: 1rem;
    }
}

@media (max-width: 600px) {
    .conversation-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
}

/* Responsive design for small screens */

/* Error page layout */
body.error-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--app-page-background);
    color: var(--app-text-body);
}

.error-container {
    width: 100%;
    padding: 2.5rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    box-sizing: border-box;
}

.error-card {
    background: var(--app-card-background);
    border-radius: 1.5rem;
    padding: 3rem;
    max-width: 520px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-shadow: var(--app-message-hover-shadow);
    border: 1px solid var(--app-border-subtle);
}

.error-pill {
    display: inline-flex;
    align-self: center;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--app-contact-hover-bg);
    color: var(--app-text-strong);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.7rem;
}

.error-code {
    margin: 0;
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--app-text-strong);
}

.error-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--app-text-strong);
}

.error-message {
    margin: 0;
    color: var(--app-text-muted);
    line-height: 1.6;
    text-align: center;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
}

.error-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.error-actions .default-button,
.error-actions .secondary-button {
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    min-width: 150px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.error-actions .default-button {
    border: none;
    background: linear-gradient(135deg, var(--app-accent-primary), var(--app-accent-primary-strong));
    color: #f8fafc;
    box-shadow: var(--app-message-hover-shadow);
}

.error-actions .default-button:hover,
.error-actions .default-button:focus {
    background: linear-gradient(135deg, var(--app-accent-primary-strong), var(--app-accent-primary));
    color: #f8fafc;
    box-shadow: var(--app-message-hover-shadow);
}

.error-actions .secondary-button {
    border: 1px solid var(--app-border-subtle);
    background: var(--app-contact-hover-bg);
    color: var(--app-text-strong);
    box-shadow: none;
}

.error-actions .secondary-button:hover,
.error-actions .secondary-button:focus {
    background: var(--app-panel-refresh-bg);
    color: var(--app-text-strong);
}

.error-footer {
    padding-bottom: 3rem;
    text-align: center;
    color: var(--app-text-muted);
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .error-card {
        padding: 2.25rem 1.75rem;
    }

    .error-code {
        font-size: 3rem;
    }

    .error-title {
        font-size: 1.75rem;
    }
}

/* Classroom layout */
.classroom-page .classroom-shell {
    margin-top: 1.5rem;
}

.classroom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.classroom-actions {
    display: flex;
    gap: 0.75rem;
}

#open-classroom-link.classroom-open-link--attention {
    animation: classroom-open-link-pulse 1.2s ease-in-out 0s 3;
    box-shadow: 0 0 0 0.25rem rgba(57, 112, 237, 0.25);
}

@keyframes classroom-open-link-pulse {
    from {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(57, 112, 237, 0.35);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 0.4rem rgba(57, 112, 237, 0.2);
    }

    to {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(57, 112, 237, 0.35);
    }
}

.classroom-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.classroom-pane {
    background: var(--surface-background, #ffffff);
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid var(--surface-border, rgba(27, 67, 50, 0.12));
    box-shadow: var(--surface-shadow, 0 2px 12px rgba(15, 23, 42, 0.08));
    min-height: 320px;
}

.classroom-contact-line {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}


.classroom-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #eef2ff;
    background-position: center;
    background-size: cover;
    flex-shrink: 0;
}

.classroom-contact-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    position: relative;
}

.classroom-contact-toggle {
    appearance: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0.35rem 1.75rem 0.35rem 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.classroom-contact-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.35rem;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid rgba(15, 23, 42, 0.32);
    border-bottom: 2px solid rgba(15, 23, 42, 0.32);
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}

.classroom-contact-toggle:focus-visible {
    outline: 3px solid rgba(99, 102, 241, 0.35);
    border-radius: 10px;
}

.classroom-contact-toggle[aria-disabled='true'],
.classroom-contact-toggle:disabled {
    cursor: default;
    opacity: 0.65;
}

.classroom-contact-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 0.85rem;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
    max-height: 320px;
    overflow-y: auto;
    z-index: 20;
}

.classroom-contact-menu.hidden {
    display: none;
}

.classroom-contact-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.classroom-contact-option__name {
    font-weight: 600;
    color: #0f172a;
}

.classroom-contact-option__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.classroom-contact-option:hover,
.classroom-contact-option:focus {
    background: rgba(99, 102, 241, 0.1);
    outline: none;
}

.classroom-contact-option.is-selected {
    font-weight: 600;
    background: rgba(99, 102, 241, 0.12);
}

.classroom-contact-option__username {
    color: #64748b;
    font-size: 0.85rem;
    display: block;
}

.classroom-contact-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(42, 127, 98, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1b4332;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(27, 67, 50, 0.08);
}

.classroom-contact-toggle__avatar {
    flex-shrink: 0;
}

.classroom-contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.classroom-contact-avatar--initials {
    background: rgba(27, 67, 50, 0.1);
    color: #1b4332;
}

.classroom-contact-avatar__initials {
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}

.classroom-contact-toggle__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.classroom-contact-menu__status {
    padding: 0.65rem 0.9rem;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.4;
}

.classroom-partner-line {
    font-weight: 600;
    font-size: 1.05rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.classroom-video {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.classroom-video-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: var(--classroom-video-background, #0f172a);
    border-radius: 16px;
    overflow: hidden;
}

.classroom-video-frame [data-role="classroom-meeting-frame"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--classroom-video-background, #0f172a);
}

.classroom-video-frame [data-role="classroom-meeting-frame"] iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: var(--classroom-video-background, #0f172a);
}

.classroom-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--classroom-video-overlay-background, rgba(15, 23, 42, 0.75));
    color: var(--classroom-video-overlay-text, #f8fafc);
    text-align: center;
    padding: 1.5rem;
    transition: opacity 0.2s ease;
    border: 1px solid var(--classroom-video-overlay-border, transparent);
    box-shadow: var(--classroom-video-overlay-shadow, none);
}

.classroom-video-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.classroom-leave-prompt {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    max-width: min(320px, 85%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.97);
    color: #0f172a;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(148, 163, 184, 0.35);
    z-index: 25;
}

.classroom-leave-prompt.hidden {
    display: none;
}

.classroom-leave-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.classroom-status {
    font-size: 0.95rem;
    color: #475569;
}

.classroom-chat {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.classroom-chat-thread {
    flex: 1;
    overflow-y: auto;
    max-height: 420px;
    padding: 0.75rem;
    border-radius: 8px;
    background: #f8fafc;
}

.classroom-chat-message {
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.classroom-chat-message--self {
    text-align: right;
}

.classroom-chat-message time {
    color: inherit;
}

.classroom-chat-meta {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.classroom-chat-meta__separator {
    display: inline-flex;
}

.classroom-chat-read {
    color: #475569;
}

.classroom-chat-form textarea {
    width: 100%;
    resize: vertical;
    min-height: 80px;
    border-radius: 8px;
    border: 1px solid #cbd5f5;
    padding: 0.75rem;
    font-size: 1rem;
}

.classroom-chat-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.classroom-chat-header h3 {
    margin-bottom: 0.25rem;
}

.classroom-shell .icon-button .icon {
    width: 1rem;
    height: 1rem;
}

body.binary-theme--dark .classroom-pane {
    background: var(--surface-background);
    border: 1px solid var(--surface-border);
    box-shadow: var(--surface-shadow);
    color: #e2e8f0;
}

body.binary-theme--dark .classroom-partner-line {
    color: #f8fafc;
}

body.binary-theme--dark .classroom-contact-text .muted {
    color: rgba(148, 163, 184, 0.82);
}

body.binary-theme--dark .classroom-video,
body.binary-theme--dark .classroom-chat {
    background: var(--surface-background);
}

body.binary-theme--dark .classroom-contact-toggle::after {
    border-right-color: rgba(226, 232, 240, 0.58);
    border-bottom-color: rgba(226, 232, 240, 0.58);
}

body.binary-theme--dark .classroom-contact-menu {
    background: var(--surface-background);
    border: 1px solid rgba(129, 140, 248, 0.42);
    box-shadow: 0 28px 64px rgba(2, 6, 23, 0.65);
}

body.binary-theme--dark .classroom-contact-option {
    color: #e2e8f0;
}

body.binary-theme--dark .classroom-contact-option__name {
    color: #f8fafc;
}

body.binary-theme--dark .classroom-contact-option__username,
body.binary-theme--dark .classroom-contact-menu__status {
    color: rgba(148, 163, 184, 0.78);
}

body.binary-theme--dark .classroom-contact-avatar {
    background: rgba(148, 163, 184, 0.18);
    color: #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.25);
}

body.binary-theme--dark .classroom-contact-avatar--initials {
    background: rgba(148, 163, 184, 0.24);
    color: #f8fafc;
}

body.binary-theme--dark .classroom-contact-option:hover,
body.binary-theme--dark .classroom-contact-option:focus {
    background: rgba(37, 99, 235, 0.22);
}

body.binary-theme--dark .classroom-contact-option.is-selected {
    background: rgba(37, 99, 235, 0.28);
}

body.binary-theme--dark .classroom-status {
    color: rgba(226, 232, 240, 0.75);
}

body.binary-theme--dark .classroom-video-frame,
body.binary-theme--dark .classroom-video-frame [data-role="classroom-meeting-frame"],
body.binary-theme--dark .classroom-video-frame [data-role="classroom-meeting-frame"] iframe {
    background: var(--classroom-video-background, rgba(6, 14, 26, 0.95));
}

body.binary-theme--dark .classroom-leave-prompt {
    background: rgba(15, 23, 42, 0.92);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.55);
}

body.binary-theme--dark .jitsi-embed-frame {
    background: var(--jitsi-embed-surface-background, rgba(6, 14, 26, 0.95));
    border-color: rgba(148, 163, 184, 0.26);
    box-shadow: 0 20px 42px rgba(2, 6, 23, 0.6);
}

body.binary-theme--dark .jitsi-embed-surface,
body.binary-theme--dark .jitsi-embed-surface iframe {
    background: var(--jitsi-embed-surface-background, rgba(6, 14, 26, 0.95));
}

body.binary-theme--dark .classroom-video-overlay {
    background: var(--classroom-video-overlay-background, rgba(4, 12, 24, 0.82));
    border: 1px solid var(--classroom-video-overlay-border, rgba(148, 163, 184, 0.32));
    box-shadow: var(--classroom-video-overlay-shadow, 0 26px 54px rgba(2, 6, 23, 0.7));
    color: var(--classroom-video-overlay-text, #f8fafc);
}

body.binary-theme--dark .classroom-chat-thread {
    background: rgba(8, 18, 32, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #e2e8f0;
}

body.binary-theme--dark .classroom-chat-message time {
    color: rgba(148, 163, 184, 0.72);
}

body.binary-theme--dark .classroom-chat-read {
    color: rgba(226, 232, 240, 0.78);
}

body.binary-theme--dark .classroom-chat-form textarea {
    background: var(--input-background);
    border: 1px solid var(--input-border-color);
    color: var(--input-text-color);
    box-shadow: var(--input-rest-shadow);
}

body.binary-theme--dark .classroom-chat-form textarea:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 4px var(--input-focus-shadow);
    background: var(--input-focus-background);
}

@media (max-width: 1200px) {
    .classroom-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    .classroom-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .classroom-pane {
        min-height: auto;
    }

    .classroom-video-frame {
        padding-top: 62.5%;
    }
}

body.classroom-fullscreen .app-page__header,
body.classroom-fullscreen .app-page__nav,
body.classroom-fullscreen .app-page__footer {
    display: none;
}

body.classroom-fullscreen .app-page__main {
    flex: 1 1 auto;
    display: flex;
    padding: 0;
}

body.classroom-fullscreen .content-container.classroom-page {
    flex: 1 1 auto;
    padding: 1.25rem 1.75rem;
    max-width: none;
}

body.classroom-fullscreen .classroom-shell {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

body.classroom-fullscreen .classroom-header,
body.classroom-fullscreen .classroom-actions,
body.classroom-fullscreen .classroom-contact-line {
    display: none;
}

body.classroom-fullscreen .classroom-layout {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 2.15fr) minmax(280px, 1fr);
    gap: 1.5rem;
    margin-top: 0;
    min-height: 0;
}

body.classroom-fullscreen .classroom-pane {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 0;
}

body.classroom-fullscreen .classroom-video {
    flex: 1 1 auto;
}

body.classroom-fullscreen .classroom-video-frame {
    flex: 1 1 auto;
    height: 100%;
    padding-top: 0;
    border-radius: 18px;
    background: #0f172a;
    min-height: 0;
}

body.classroom-fullscreen .classroom-video-frame [data-role="classroom-meeting-frame"],
body.classroom-fullscreen .classroom-video-frame [data-role="classroom-meeting-frame"] iframe {
    border-radius: 18px;
}

body.classroom-fullscreen .classroom-chat {
    height: 100%;
    background: rgba(255, 255, 255, 0.82);
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

body.classroom-fullscreen .classroom-chat-thread {
    max-height: none;
    flex: 1 1 auto;
}

body.classroom-fullscreen .classroom-status {
    display: none;
}

body.binary-theme--dark.classroom-fullscreen .classroom-chat {
    background: rgba(15, 23, 42, 0.78);
    box-shadow: 0 20px 48px rgba(2, 6, 23, 0.6);
}

body.binary-theme--dark.classroom-fullscreen .classroom-video-frame,
body.binary-theme--dark.classroom-fullscreen .classroom-video-frame [data-role="classroom-meeting-frame"],
body.binary-theme--dark.classroom-fullscreen .classroom-video-frame [data-role="classroom-meeting-frame"] iframe {
    background: rgba(6, 14, 26, 0.95);
}

@media (max-width: 1024px) {
    body.classroom-fullscreen .classroom-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    body.classroom-fullscreen .classroom-chat {
        min-height: 360px;
    }
}

@media (max-width: 720px) {
    body.classroom-fullscreen .content-container.classroom-page {
        padding: 1rem;
    }

    body.classroom-fullscreen .classroom-chat {
        padding: 1rem;
    }

    body.classroom-fullscreen .classroom-leave-prompt {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}

/* -------------------------------------------------------------------------- */
/*  Binary theme: light mode overrides                                       */
/* -------------------------------------------------------------------------- */
body.binary-theme--light {
    background-color: #f4f7f7;
    color: #1f3d3d;
}

body.binary-theme--light .app-page {
    color: #1f3d3d;
    background: linear-gradient(160deg, #f4f7f7 0%, #f8fbfb 45%, #eef6f2 100%);
}

body.binary-theme--light .app-shell {
    background: linear-gradient(150deg, #ffffff 0%, #f3faf5 60%, #e8f4ec 100%);
    color: #1f3d3d;
    box-shadow: 0 30px 80px rgba(31, 61, 61, 0.18);
}

body.binary-theme--light .app-shell::before {
    background: radial-gradient(circle at 18% 18%, rgba(42, 127, 98, 0.14), transparent 58%),
        radial-gradient(circle at 82% 10%, rgba(59, 130, 246, 0.12), transparent 55%),
        radial-gradient(circle at 12% 88%, rgba(250, 204, 21, 0.1), transparent 60%);
    opacity: 0.9;
}

body.binary-theme--light .app-shell :is(.shell-nav, .settings-nav) {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(27, 67, 50, 0.12);
    box-shadow: 0 20px 48px rgba(31, 61, 61, 0.16);
    color: #1f3d3d;
}

body.binary-theme--light .app-shell :is(.shell-nav, .settings-nav) h2 {
    color: #1b4332;
}

body.binary-theme--light .app-shell :is(.shell-nav-button, .settings-nav-button) {
    background: rgba(42, 127, 98, 0.12);
    border: 1px solid rgba(27, 67, 50, 0.18);
    color: #1b4332;
    box-shadow: none;
}

body.binary-theme--light .app-shell :is(.shell-nav-button, .settings-nav-button):hover,
body.binary-theme--light .app-shell :is(.shell-nav-button, .settings-nav-button):focus {
    background: rgba(42, 127, 98, 0.22);
    border-color: rgba(27, 67, 50, 0.28);
    color: #0f2d21;
    transform: translateX(4px);
}

body.binary-theme--light .app-shell :is(.shell-nav-button, .settings-nav-button).active {
    background: linear-gradient(135deg, rgba(42, 127, 98, 0.35), rgba(56, 189, 148, 0.28));
    border-color: rgba(27, 67, 50, 0.32);
    box-shadow: 0 18px 36px rgba(27, 67, 50, 0.2);
    color: #0f2d21;
}

body.binary-theme--light .app-shell .card {
    background: #ffffff;
    border: 1px solid rgba(27, 67, 50, 0.12);
    box-shadow: 0 24px 64px rgba(31, 61, 61, 0.14);
    color: #1f3d3d;
}

body.binary-theme--light .app-shell .card h2,
body.binary-theme--light .app-shell .card h3 {
    color: #1b4332;
}

body.binary-theme--light .app-shell .card .muted {
    color: rgba(31, 61, 61, 0.65);
}

body.binary-theme--light .app-shell .card a {
    color: #1b7a5d;
}

body.binary-theme--light .app-shell .card a:hover,
body.binary-theme--light .app-shell .card a:focus {
    color: #12513d;
}

body.binary-theme--light .app-shell .table-container {
    background: transparent;
}

body.binary-theme--light .app-shell .data-table {
    background: #ffffff;
    border: 1px solid rgba(27, 67, 50, 0.12);
    box-shadow: 0 14px 40px rgba(27, 67, 50, 0.12);
}

body.binary-theme--light .app-shell .data-table th,
body.binary-theme--light .app-shell .data-table td {
    border-bottom: 1px solid rgba(27, 67, 50, 0.1);
    color: #1f3d3d;
}

body.binary-theme--light .app-shell .data-table th {
    background: rgba(42, 127, 98, 0.14);
    color: #1b4332;
}

body.binary-theme--light .app-shell .data-table tbody tr {
    background: rgba(255, 255, 255, 0.9);
}

body.binary-theme--light .app-shell .data-table tbody tr:nth-child(even) {
    background: rgba(236, 249, 243, 0.9);
}

body.binary-theme--light .app-shell .data-table tbody tr:hover {
    background: rgba(214, 240, 226, 0.9);
    transform: translateY(-1px);
}

body.binary-theme--light .app-shell .form-group label,
body.binary-theme--light .app-shell .form-row .form-group label {
    color: #1f3d3d;
}

body.binary-theme--light .app-shell .form-group input,
body.binary-theme--light .app-shell .form-group textarea,
body.binary-theme--light .app-shell .form-group select,
body.binary-theme--light .app-shell .preferences-editor textarea,
body.binary-theme--light .app-shell textarea,
body.binary-theme--light .app-shell select {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(27, 67, 50, 0.16);
    color: #1f3d3d;
    box-shadow: inset 0 1px 2px rgba(27, 67, 50, 0.08);
}

body.binary-theme--light .app-shell .form-group input:focus,
body.binary-theme--light .app-shell .form-group textarea:focus,
body.binary-theme--light .app-shell .form-group select:focus,
body.binary-theme--light .app-shell .preferences-editor textarea:focus {
    border-color: #2a7f62;
    box-shadow: 0 0 0 4px rgba(42, 127, 98, 0.18);
    background: #ffffff;
}

body.binary-theme--light .app-shell .form-group input::placeholder,
body.binary-theme--light .app-shell .form-group textarea::placeholder {
    color: rgba(31, 61, 61, 0.5);
}

body.binary-theme--light .app-shell .default-button {
    background: var(--button-background);
    border-color: var(--button-border-color);
    color: var(--button-text-color);
    box-shadow: var(--button-rest-shadow);
}

body.binary-theme--light .app-shell .default-button:hover,
body.binary-theme--light .app-shell .default-button:focus {
    background: var(--button-hover-background);
    border-color: var(--button-hover-border-color);
    color: var(--button-hover-text-color, var(--button-text-color));
    box-shadow: var(--button-hover-shadow);
}

body.binary-theme--light .app-shell .default-button.cancel-button {
    background: rgba(193, 18, 31, 0.12);
    border-color: rgba(193, 18, 31, 0.28);
    color: #8b1a1a;
    box-shadow: none;
}

body.binary-theme--light .app-shell .primary-button {
    background: var(--primary-button-background);
    color: var(--primary-button-text);
    box-shadow: var(--primary-button-shadow);
}

body.binary-theme--light .app-shell .primary-button:hover,
body.binary-theme--light .app-shell .primary-button:focus {
    box-shadow: var(--primary-button-hover-shadow);
}

body.binary-theme--light .app-shell .feedback-message {
    color: rgba(31, 61, 61, 0.7);
}

body.binary-theme--light .app-shell .feedback-message.failure,
body.binary-theme--light .app-shell .feedback-message.error {
    color: #b91c1c;
}

body.binary-theme--light .app-shell .feedback-message.success {
    color: #047857;
}

body.binary-theme--light .app-shell .feedback-message.progress {
    color: #1d4ed8;
}

body.binary-theme--light .app-shell .schedule-list li {
    background: rgba(42, 127, 98, 0.12);
    color: #1b4332;
}

body.binary-theme--light .app-shell .schedule-list li button {
    color: #8b1a1a;
    background: rgba(193, 18, 31, 0.12);
}

body.binary-theme--light .app-shell .schedule-list li button:hover,
body.binary-theme--light .app-shell .schedule-list li button:focus {
    background: rgba(193, 18, 31, 0.2);
}

body.binary-theme--light .app-shell .inline-form {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(27, 67, 50, 0.12);
}

body.binary-theme--light .settings-shell .integration-card,
body.binary-theme--light .settings-shell .integration-admin-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(236, 250, 244, 0.94));
    border: 1px solid rgba(42, 127, 98, 0.18);
    box-shadow: 0 18px 38px rgba(31, 61, 61, 0.14);
    color: #1f3d3d;
}

body.binary-theme--light .settings-shell .integration-card header h3,
body.binary-theme--light .settings-shell .integration-admin-card header h3 {
    color: #145c47;
}

body.binary-theme--light .settings-shell .empty-state {
    background: rgba(42, 127, 98, 0.12);
    color: #1f3d3d;
}

body.binary-theme--light .settings-shell .status-pill {
    background: rgba(42, 127, 98, 0.16);
    color: #1b4332;
}

body.binary-theme--light .settings-shell .status-pill.success {
    background: rgba(34, 197, 94, 0.2);
    color: #166534;
}

body.binary-theme--light .settings-shell .status-pill.muted {
    background: rgba(148, 163, 184, 0.22);
    color: #1f2937;
}

body.binary-theme--light .settings-shell .integration-inline-form {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(27, 67, 50, 0.12);
}

body.binary-theme--light .settings-shell .integration-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(226, 246, 239, 0.9));
    border-color: rgba(42, 127, 98, 0.2);
    box-shadow: 0 16px 34px rgba(31, 61, 61, 0.12);
}

body.binary-theme--light .settings-shell .integration-section.disabled {
    background: rgba(245, 252, 250, 0.88);
    border-color: rgba(148, 163, 184, 0.2);
}

body.binary-theme--light .settings-shell .integration-section.pending {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(199, 236, 216, 0.88));
    border-color: rgba(56, 189, 248, 0.24);
}

.notifications-page .notifications-surface {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

.notifications-heading h2 {
    margin: 0;
}

.notifications-heading p {
    margin: 0.5rem 0 0;
}

.notification-history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.notification-entry {
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.notification-entry,
.notification-entry-link,
.notification-entry-title,
.notification-entry-snippet {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.notification-entry:hover {
    transform: translateY(-1px);
}

.notification-entry-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.notification-entry-feed {
    font-weight: 600;
    font-size: 0.95rem;
}

.notification-entry-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.notification-entry-time {
    font-size: 0.85rem;
    opacity: 0.85;
}

.notification-entry-link {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-decoration: none;
    color: inherit;
}

.notification-entry-link:hover .notification-entry-title {
    text-decoration: underline;
}

.notification-entry-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.notification-entry-snippet {
    line-height: 1.45;
    font-size: 0.95rem;
}

.notification-entry-actions {
    display: flex;
    justify-content: flex-end;
}

.notification-entry-delete {
    border: none;
    background: none;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.notification-entry-delete:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.notifications-page .feedback-message {
    margin: 0;
}

@media (max-width: 720px) {
    .notifications-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
    }

    .notifications-header .default-button {
        align-self: flex-start;
    }
}

body.binary-theme--light .notification-entry {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(27, 67, 50, 0.12);
    box-shadow: 0 18px 38px rgba(27, 67, 50, 0.12);
    color: #1f3d3d;
}

body.binary-theme--light .notification-entry:hover {
    box-shadow: 0 22px 44px rgba(27, 67, 50, 0.16);
}

body.binary-theme--light .notification-entry-badge {
    background: rgba(42, 127, 98, 0.18);
    color: #1b4332;
}

body.binary-theme--light .notification-entry-delete {
    color: #1b7a5d;
}

body.binary-theme--light .notification-entry-delete:hover,
body.binary-theme--light .notification-entry-delete:focus {
    background: rgba(27, 67, 50, 0.12);
    color: #0f2d21;
}

body.binary-theme--dark .notification-entry {
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.45);
    color: #e2e8f0;
}

body.binary-theme--dark .notification-entry:hover {
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.55);
}

body.binary-theme--dark .notification-entry-badge {
    background: rgba(56, 189, 248, 0.2);
    color: #e0f2fe;
}

body.binary-theme--dark .notification-entry-delete {
    color: #38bdf8;
}

body.binary-theme--dark .notification-entry-delete:hover,
body.binary-theme--dark .notification-entry-delete:focus {
    background: rgba(56, 189, 248, 0.18);
    color: #f8fafc;
}

body.binary-theme--dark .notification-entry-snippet {
    opacity: 0.85;
}

body.binary-theme--light .app-shell .muted {
    color: rgba(31, 61, 61, 0.7);
}

body.binary-theme--light .app-shell :is(.shell-content, .settings-content) h3 {
    color: #1b4332;
}

body.binary-theme--light .app-shell :is(.shell-content, .settings-content) p {
    color: rgba(31, 61, 61, 0.75);
}

body.binary-theme--light .app-shell :is(.shell-content, .settings-content) strong {
    color: #0f2d21;
}

body.binary-theme--light .site-header {
    background: var(--app-site-header-bg);
    color: var(--app-site-header-text);
    box-shadow: var(--app-site-header-shadow);
}

body.binary-theme--light .site-header a,
body.binary-theme--light .site-header button {
    color: inherit;
}

body.binary-theme--light .navbar {
    --nav-dropdown-radius: var(--app-nav-dropdown-radius);
}

body.binary-theme--light .nav-button,
body.binary-theme--light .nav-greeting {
    color: var(--app-nav-item-color);
}

body.binary-theme--light .dropdown-content,
body.binary-theme--light .user-dropdown-content {
    background-color: var(--app-nav-dropdown-surface);
    border: 1px solid var(--app-nav-dropdown-border);
    color: var(--app-nav-dropdown-text);
    box-shadow: var(--app-nav-dropdown-shadow);
}

body.binary-theme--light .dropdown-item:hover,
body.binary-theme--light .dropdown-item:focus,
body.binary-theme--light .language-menu .language-option:hover,
body.binary-theme--light .language-menu .language-option:focus {
    background-color: var(--nav-dropdown-item-hover-bg);
}

body.binary-theme--light .language-menu .language-option.active {
    background-color: var(--nav-item-active-bg);
    color: var(--nav-item-hover-color);
}

body.binary-theme--light .notification-panel {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(27, 67, 50, 0.12);
    box-shadow: 0 22px 48px rgba(27, 67, 50, 0.16);
    color: #1f3d3d;
}

body.binary-theme--light .notification-panel header {
    color: #0f2d21;
}

body.binary-theme--light .notification-panel header a {
    color: #1b7a5d;
}

body.binary-theme--light .notification-list li {
    background: rgba(42, 127, 98, 0.12);
    border: 1px solid rgba(42, 127, 98, 0.18);
    color: #1f3d3d;
}

body.binary-theme--light .notification-button {
    background: rgba(42, 127, 98, 0.12);
    color: #1b4332;
}

body.binary-theme--light .notification-button:hover,
body.binary-theme--light .notification-button:focus {
    background: rgba(42, 127, 98, 0.22);
}

body.binary-theme--light .site-footer {
    background: var(--app-site-footer-bg);
    color: var(--app-site-footer-text);
    box-shadow: var(--app-site-footer-shadow);
}

body.binary-theme--light .site-footer a {
    color: var(--app-site-footer-text);
}

body.binary-theme--light .site-footer .language-dropdown .language-toggle {
    background: var(--app-nav-notification-bg);
    color: var(--app-site-footer-text);
}

body.binary-theme--light .site-footer .language-dropdown .language-toggle:hover,
body.binary-theme--light .site-footer .language-dropdown .language-toggle:focus {
    background: var(--app-nav-notification-hover-bg);
}

body.binary-theme--light .modal-overlay {
    background: rgba(15, 46, 38, 0.35);
}

body.binary-theme--light .modal-dialog {
    background: #ffffff;
    color: #1f3d3d;
    border: 1px solid rgba(27, 67, 50, 0.12);
    box-shadow: 0 28px 60px rgba(27, 67, 50, 0.18);
}

body.binary-theme--light .appearance-chip {
    background: rgba(42, 127, 98, 0.12);
    border-color: rgba(42, 127, 98, 0.28);
    color: #1b4332;
}

body.binary-theme--light .appearance-option input[type="radio"]:hover+.appearance-chip,
body.binary-theme--light .appearance-option input[type="radio"]+.appearance-chip:hover {
    border-color: rgba(42, 127, 98, 0.4);
}

body.binary-theme--light .appearance-option input[type="radio"]:focus-visible+.appearance-chip {
    outline: 2px solid rgba(42, 127, 98, 0.45);
    outline-offset: 3px;
}

body.binary-theme--light .appearance-option input[type="radio"]:checked+.appearance-chip {
    background: linear-gradient(135deg, #2a7f62, #1b4332);
    border-color: rgba(27, 67, 50, 0.4);
    color: #ffffff;
    box-shadow: 0 16px 32px rgba(27, 67, 50, 0.22);
}

body.binary-theme--light .brand-lockup,
body.binary-theme--light .hero-lockup {
    background: rgba(42, 127, 98, 0.12);
    border-radius: 0.75rem;
    padding: 0.35rem 0.75rem;
    display: inline-block;
    box-shadow: 0 8px 22px rgba(27, 67, 50, 0.18);
}

body.binary-theme--dark .login-body {
    background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 45%),
        radial-gradient(circle at left 40%, rgba(45, 212, 191, 0.16), transparent 55%),
        linear-gradient(145deg, #050e1a 0%, #0b1a2b 55%, #07111f 100%);
}

body.binary-theme--dark .login-hero {
    background: rgba(11, 25, 40, 0.85);
    color: #e2e8f0;
    box-shadow: 0 32px 64px rgba(5, 12, 24, 0.55);
}

body.binary-theme--dark .hero-tagline {
    color: #e0f2fe;
}

body.binary-theme--dark .hero-highlights li {
    background: rgba(59, 130, 246, 0.18);
    color: #e2e8f0;
}

body.binary-theme--dark .login-card {
    background: rgba(8, 18, 30, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.32);
    box-shadow: 0 34px 82px rgba(5, 12, 24, 0.58);
    color: #e2e8f0;
}

body.binary-theme--dark .login-card h2,
body.binary-theme--dark .login-card h3 {
    color: #f8fafc;
}

body.binary-theme--dark .input-label {
    color: #cbd5f5;
}

body.binary-theme--dark .login-card input[type="text"],
body.binary-theme--dark .login-card input[type="password"],
body.binary-theme--dark .login-card input[type="date"],
body.binary-theme--dark .login-card textarea,
body.binary-theme--dark .login-card select {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.32);
    color: #f8fafc;
    box-shadow: inset 0 1px 2px rgba(5, 12, 24, 0.65);
}

body.binary-theme--dark .registration-optional {
    color: rgba(148, 191, 233, 0.75);
}

body.binary-theme--dark .registration-page .form-feedback {
    color: #e2e8f0;
}

body.binary-theme--dark .switch-field {
    color: #dbeafe;
}

body.binary-theme--dark .registration-details-row td {
    background: rgba(59, 130, 246, 0.12);
}

body.binary-theme--dark .registration-detail dt {
    color: #e2e8f0;
}

body.binary-theme--dark .registration-detail dd {
    color: rgba(191, 219, 254, 0.9);
}

body.binary-theme--dark .login-register-hint {
    color: rgba(191, 219, 254, 0.85);
}

body.binary-theme--dark .login-register-hint a {
    color: #60a5fa;
}

body.binary-theme--dark .login-register-hint a:hover,
body.binary-theme--dark .login-register-hint a:focus {
    color: #93c5fd;
}

body.binary-theme--dark .login-card input[type="text"]:focus,
body.binary-theme--dark .login-card input[type="password"]:focus,
body.binary-theme--dark .login-card input[type="date"]:focus,
body.binary-theme--dark .login-card textarea:focus,
body.binary-theme--dark .login-card select:focus {
    border-color: rgba(96, 165, 250, 0.9);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25);
}

body.binary-theme--dark .form-feedback.success {
    color: #4ade80;
}

body.binary-theme--dark .tfa-method-button {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #e2e8f0;
}

body.binary-theme--dark .tfa-method-button:hover,
body.binary-theme--dark .tfa-method-button:focus {
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(96, 165, 250, 0.45);
}

body.binary-theme--dark .tfa-method-button.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.85), rgba(37, 99, 235, 0.78));
    border-color: rgba(129, 161, 255, 0.55);
    color: #f8fafc;
    box-shadow: 0 22px 48px rgba(30, 64, 175, 0.45);
}

body.binary-theme--dark .demo-account-button {
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #e2e8f0;
    box-shadow: 0 22px 48px rgba(5, 12, 24, 0.45);
}

body.binary-theme--dark .demo-account-button:hover,
body.binary-theme--dark .demo-account-button:focus {
    border-color: rgba(96, 165, 250, 0.55);
    box-shadow: 0 26px 56px rgba(5, 12, 24, 0.6);
}

body.binary-theme--dark .modal-overlay {
    background: rgba(5, 12, 24, 0.78);
}

body.binary-theme--dark .modal-dialog {
    background: rgba(11, 25, 40, 0.95);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.32);
    box-shadow: 0 34px 82px rgba(5, 12, 24, 0.6);
}

body.binary-theme--dark .modal-dialog h2 {
    color: #f8fafc;
}

body.binary-theme--dark .modal-field span {
    color: #e0f2fe;
}

body.binary-theme--dark .modal-field input[type="password"],
body.binary-theme--dark .modal-field input[type="text"],
body.binary-theme--dark .modal-field select {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.32);
    color: #f8fafc;
}

body.binary-theme--dark .modal-field input[type="password"]:focus,
body.binary-theme--dark .modal-field input[type="text"]:focus,
body.binary-theme--dark .modal-field select:focus {
    border-color: rgba(96, 165, 250, 0.9);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25);
}

body.binary-theme--dark .modal-cancel {
    background: rgba(10, 20, 32, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #e2e8f0;
}

body.binary-theme--dark .modal-cancel:hover {
    box-shadow: 0 18px 40px rgba(5, 12, 24, 0.45);
}

/* Classroom view */
.classroom-shell .classroom-nav-select {
    margin-bottom: 1.5rem;
}

.classroom-shell .classroom-nav-select label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.classroom-shell .classroom-nav-select select {
    width: 100%;
}

.classroom-card {
    margin-bottom: 1.5rem;
}

.app-shell .classroom-panel {
    display: none;
}

.app-shell .classroom-panel.active {
    display: grid;
}

.classroom-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.classroom-metrics {
    display: grid;
    grid-auto-flow: column;
    gap: 1.5rem;
    text-align: right;
    font-size: 0.95rem;
}

.classroom-metrics dt {
    font-weight: 600;
}

.classroom-metrics dd {
    margin: 0.125rem 0 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.classroom-seat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.classroom-seat {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 0;
    border: 1px dashed var(--classroom-seat-border, rgba(148, 163, 184, 0.4));
    border-radius: 12px;
    background: var(--classroom-seat-background, rgba(148, 163, 184, 0.08));
    min-height: 72px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.classroom-seat-body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    border-radius: 12px;
    flex: 1;
    min-width: 0;
}

.classroom-seat-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.classroom-seat-link:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.6);
    outline-offset: 2px;
}

.classroom-profile-restriction-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.35rem;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.75;
    color: currentColor;
    pointer-events: none;
}

.classroom-seat.is-occupied {
    border-style: solid;
    border-color: var(--classroom-seat-occupied-border, rgba(59, 130, 246, 0.35));
    background: var(--classroom-seat-occupied-background, rgba(59, 130, 246, 0.12));
}

.classroom-seat-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--classroom-seat-avatar, rgba(148, 163, 184, 0.25));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 600;
    color: var(--classroom-seat-avatar-text, #1f2937);
}

.classroom-seat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.classroom-seat-initials {
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.classroom-seat-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.classroom-seat-content strong {
    font-size: 1rem;
}

.classroom-seat-remove {
    position: absolute;
    top: 50%;
    left: 1rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background: rgba(254, 242, 242, 0.95);
    color: #b91c1c;
    opacity: 0;
    transform: translateY(-50%) scale(0.75);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(248, 113, 113, 0.22);
    z-index: 2;
}

.classroom-seat-remove .icon {
    font-size: 1.3rem;
}

.classroom-seat:hover .classroom-seat-remove,
.classroom-seat:focus-within .classroom-seat-remove,
.classroom-seat-remove:focus,
.classroom-seat-remove:focus-visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

.classroom-seat:hover .classroom-seat-avatar img,
.classroom-seat:hover .classroom-seat-avatar .classroom-seat-initials,
.classroom-seat:focus-within .classroom-seat-avatar img,
.classroom-seat:focus-within .classroom-seat-avatar .classroom-seat-initials {
    filter: blur(1px);
    opacity: 0.35;
}

.classroom-roster {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.classroom-roster-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--classroom-roster-border, rgba(148, 163, 184, 0.28));
    border-radius: 10px;
    padding: 0.75rem 1rem;
    background: var(--classroom-roster-background, rgba(148, 163, 184, 0.08));
}

.classroom-roster-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.classroom-roster-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
}

.classroom-roster-link:hover strong,
.classroom-roster-link:focus-visible strong {
    text-decoration: underline;
}

.classroom-roster-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.classroom-teacher-status {
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.classroom-teacher-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.classroom-teacher-link {
    color: inherit;
    text-decoration: none;
}

.classroom-teacher-link:hover,
.classroom-teacher-link:focus-visible {
    text-decoration: underline;
}

.classroom-teacher-actions .primary-button,
.classroom-teacher-actions .default-button {
    flex: 0 0 auto;
}

.classroom-request-form .form-group {
    margin-bottom: 0.75rem;
}

.classroom-request-form input[type='text'],
.classroom-request-form select {
    width: 100%;
}

.classroom-request-form.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.classroom-settings-form .form-group {
    margin-bottom: 0.75rem;
}

.classroom-settings-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.classroom-settings-toggle .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.classroom-avatar-upload {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.classroom-avatar-preview-container {
    width: 120px;
    height: 120px;
    border-radius: 0.5rem;
    overflow: hidden;
    background: rgba(42, 127, 98, 0.08);
    border: 2px solid rgba(27, 67, 50, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.classroom-avatar-placeholder {
    font-size: 3rem;
    color: rgba(27, 67, 50, 0.4);
}

.classroom-avatar-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

body.binary-theme--dark .classroom-avatar-preview-container {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(148, 163, 184, 0.24);
}

body.binary-theme--dark .classroom-avatar-placeholder {
    color: rgba(148, 163, 184, 0.5);
}

.classroom-dialog {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1050;
    padding: 1rem;
}

.classroom-dialog.hidden {
    display: none;
}

.classroom-dialog__surface {
    background: var(--surface-background);
    border: 1px solid var(--surface-border);
    box-shadow: var(--surface-shadow);
    border-radius: 0.75rem;
    padding: 1.75rem;
    max-width: 28rem;
    width: min(100%, 28rem);
    color: inherit;
}

.classroom-dialog__surface h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.35rem;
}

.classroom-dialog__surface p {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.classroom-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

body.binary-theme--dark .classroom-dialog {
    background: rgba(15, 23, 42, 0.7);
}


.classroom-nav-button.hidden {
    display: none;
}

body.binary-theme--dark .classroom-seat {
    border-color: rgba(148, 163, 184, 0.38);
    background: rgba(15, 23, 42, 0.6);
}

body.binary-theme--dark .classroom-seat.is-occupied {
    border-color: rgba(96, 165, 250, 0.55);
    background: rgba(37, 99, 235, 0.22);
}

body.binary-theme--dark .classroom-seat-avatar {
    background: rgba(148, 163, 184, 0.4);
    color: rgba(226, 232, 240, 0.95);
}

body.binary-theme--dark .classroom-seat-initials {
    color: rgba(226, 232, 240, 0.95);
}

body.binary-theme--dark .classroom-seat-remove {
    background: rgba(30, 41, 59, 0.88);
    border-color: rgba(248, 113, 113, 0.5);
    color: rgba(254, 226, 226, 0.96);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.5);
}

body.binary-theme--dark .classroom-seat-link:focus-visible {
    outline-color: rgba(147, 197, 253, 0.75);
}

body.binary-theme--dark .classroom-roster-item {
    border-color: rgba(94, 106, 135, 0.5);
    background: rgba(15, 23, 42, 0.55);
}

/* Profile post enhancements */
.profile-post-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-post-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--app-text-strong);
}

body.binary-theme--dark .profile-post-title {
    color: rgba(231, 244, 255, 0.95);
}

.profile-post-visibility-icon {
    font-size: 1.2rem;
    cursor: help;
    display: inline-flex;
    align-items: center;
}

.profile-post-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-post-container {
    display: flex;
    gap: 0.75rem;
}

.profile-post-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-post-avatar-link {
    flex-shrink: 0;
}

.profile-post-main {
    flex: 1;
    min-width: 0;
}

.profile-post-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-direction: column;
}

@media (min-width: 640px) {
    .profile-post-header {
        flex-direction: row;
        align-items: center;
    }
}

.profile-post-author-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.profile-post-author,
.profile-post-author-link {
    font-weight: 600;
    color: var(--app-text-strong);
    text-decoration: none;
}

.profile-post-author-link:hover {
    text-decoration: underline;
}

.profile-post-username,
.profile-post-username-link {
    color: var(--app-text-muted);
    text-decoration: none;
}

.profile-post-username-link:hover {
    text-decoration: underline;
}

.profile-post-actions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--color-primary-base), 0.1);
}

body.binary-theme--dark .profile-post-actions {
    border-top-color: rgba(231, 244, 255, 0.12);
}

.post-action-icon,
.post-stat-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0.4rem;
    font-size: 0.8125rem;
    border: none;
    background: transparent;
    color: var(--app-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.post-stat-icon {
    cursor: default;
}

.post-action-icon .action-icon {
    font-size: 1rem;
    line-height: 1;
}

.post-action-icon:hover {
    background: rgba(var(--color-primary-accent), 0.08);
    color: var(--app-text-body);
}

.post-action-icon.active {
    color: var(--app-accent-primary);
}

.post-action-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-count {
    font-size: 0.75rem;
    font-weight: 500;
}

body.binary-theme--dark .post-action-icon {
    color: rgba(231, 244, 255, 0.65);
}

body.binary-theme--dark .post-action-icon:hover {
    background: rgba(59, 130, 246, 0.12);
    color: rgba(231, 244, 255, 0.9);
}

body.binary-theme--dark .post-action-icon.active {
    color: rgba(129, 161, 255, 0.95);
}

/* Repost Styles */
.profile-post-repost {
    padding: 0;
    background: transparent;
    border: none;
}

.profile-post-repost-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--app-text-muted);
}

.repost-header-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.repost-icon {
    font-size: 1rem;
}

.repost-text {
    color: var(--app-text-body);
}

.profile-post-repost-context {
    padding: 0 1rem 0.75rem 1rem;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--app-text-body);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.profile-post-quoted {
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(8, 28, 45, 0.4);
    border: 1px solid rgba(231, 244, 255, 0.12);
    border-left: 3px solid var(--app-accent-primary);
}

body.binary-theme--light .profile-post-quoted {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(27, 67, 50, 0.12);
    border-left: 3px solid var(--app-accent-primary);
}

body.binary-theme--dark .profile-post-repost-header {
    color: rgba(231, 244, 255, 0.65);
}

body.binary-theme--dark .repost-text {
    color: rgba(231, 244, 255, 0.9);
}

.post-action-button {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid rgba(var(--color-primary-base), 0.2);
    background: transparent;
    color: var(--app-text-body);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.post-action-button:hover,
.post-action-button:focus {
    background: rgba(var(--color-primary-accent), 0.08);
    border-color: rgba(var(--color-primary-accent), 0.3);
}

.post-action-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.post-action-button.liked,
.post-action-button.reposted,
.post-action-button.disliked {
    background: rgba(var(--color-primary-accent), 0.12);
    border-color: var(--app-accent-primary);
    color: var(--app-accent-primary);
}

body.binary-theme--dark .post-action-button {
    border-color: rgba(231, 244, 255, 0.2);
    color: rgba(231, 244, 255, 0.85);
}

body.binary-theme--dark .post-action-button:hover,
body.binary-theme--dark .post-action-button:focus {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
}

body.binary-theme--dark .post-action-button.liked,
body.binary-theme--dark .post-action-button.reposted,
body.binary-theme--dark .post-action-button.disliked {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
    color: rgba(96, 165, 250, 0.95);
}

.post-action-count {
    font-size: 0.875rem;
    color: var(--app-text-subtle);
    margin-left: -0.25rem;
}

.post-like-count {
    cursor: help;
}

.post-stat-item[title] {
    cursor: help;
}

body.binary-theme--dark .post-action-count {
    color: rgba(231, 244, 255, 0.65);
}

.post-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 0.5rem;
}

.post-stat-item {
    font-size: 0.875rem;
    color: var(--app-text-subtle);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

body.binary-theme--dark .post-stat-item {
    color: rgba(231, 244, 255, 0.65);
}

.profile-post-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.post-edit-title,
.post-edit-content,
.reply-content {
    padding: 0.75rem;
    border: 1px solid rgba(var(--color-primary-base), 0.2);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.9375rem;
    background: var(--app-card-background);
    color: var(--app-text-body);
    resize: vertical;
}

.post-edit-title:focus,
.post-edit-content:focus,
.reply-content:focus {
    outline: none;
    border-color: var(--app-accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-accent), 0.1);
}

.mention-helper {
    background: var(--app-card-background, #fff);
    border: 1px solid var(--app-border-divider, rgba(27, 67, 50, 0.12));
    border-radius: 8px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
    min-width: 240px;
    max-width: 360px;
    padding: 0.5rem;
    position: absolute;
    z-index: 40;
}

.mention-helper__results {
    display: grid;
    gap: 0.35rem;
}

.mention-helper__item {
    align-items: center;
    background: transparent;
    border: 1px solid var(--app-border-subtle, rgba(27, 67, 50, 0.1));
    border-radius: 6px;
    color: var(--app-text-body, #1f3d3d);
    cursor: pointer;
    display: grid;
    gap: 0.25rem;
    grid-template-columns: auto 1fr;
    padding: 0.45rem 0.6rem;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mention-helper__item:hover,
.mention-helper__item:focus-visible {
    background: var(--app-contact-hover-bg, rgba(42, 127, 98, 0.12));
    border-color: var(--app-border-strong, rgba(27, 67, 50, 0.2));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    outline: none;
}

.mention-helper__item--active {
    background: var(--app-contact-hover-bg, rgba(42, 127, 98, 0.12));
    border-color: var(--app-border-strong, rgba(27, 67, 50, 0.2));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.mention-helper__avatar {
    border-radius: 999px;
    height: 32px;
    width: 32px;
    object-fit: cover;
}

.mention-helper__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mention-helper__name {
    color: var(--app-text-strong, #1b4332);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-helper__handle {
    color: var(--app-text-muted, rgba(27, 67, 50, 0.65));
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.binary-theme--dark .mention-helper {
    background: var(--app-card-background, rgba(23, 32, 49, 0.85));
    border-color: var(--app-border-divider, rgba(148, 163, 184, 0.18));
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.45);
}

body.binary-theme--dark .mention-helper__item {
    color: var(--app-text-body, #e2e8f0);
    border-color: var(--app-border-divider, rgba(148, 163, 184, 0.18));
}

body.binary-theme--dark .mention-helper__item:hover,
body.binary-theme--dark .mention-helper__item:focus-visible {
    background: rgba(59, 130, 246, 0.18);
    border-color: var(--app-border-strong, rgba(129, 161, 255, 0.32));
}

body.binary-theme--dark .mention-helper__item--active {
    background: rgba(59, 130, 246, 0.18);
    border-color: var(--app-border-strong, rgba(129, 161, 255, 0.32));
}

body.binary-theme--dark .mention-helper__name {
    color: var(--app-text-strong, #f1f5f9);
}

body.binary-theme--dark .mention-helper__handle {
    color: var(--app-text-muted, rgba(226, 232, 240, 0.68));
}

.mention-link {
    color: var(--app-accent-primary, #2a7f62);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

.mention-link:hover,
.mention-link:focus-visible {
    text-decoration: underline;
}

body.binary-theme--dark .mention-link {
    color: var(--app-accent-primary, #34d399);
}

body.binary-theme--dark .post-edit-title,
body.binary-theme--dark .post-edit-content,
body.binary-theme--dark .reply-content {
    border-color: rgba(231, 244, 255, 0.2);
    background: rgba(15, 23, 42, 0.6);
    color: rgba(231, 244, 255, 0.9);
}

body.binary-theme--dark .post-edit-title:focus,
body.binary-theme--dark .post-edit-content:focus,
body.binary-theme--dark .reply-content:focus {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.post-edit-actions,
.reply-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.post-reply-form {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--color-primary-base), 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

body.binary-theme--dark .post-reply-form {
    border-top-color: rgba(231, 244, 255, 0.12);
}

.post-replies {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--color-primary-base), 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

body.binary-theme--dark .post-replies {
    border-top-color: rgba(231, 244, 255, 0.12);
}

.post-reply {
    display: flex;
    gap: 0.75rem;
}

.post-reply-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--app-border-subtle);
    background: var(--app-card-background);
}

body.binary-theme--dark .post-reply-avatar {
    border-color: rgba(231, 244, 255, 0.2);
    background: rgba(15, 23, 42, 0.6);
}

.post-reply-body {
    flex: 1;
}

.post-reply-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--app-text-muted);
}

.post-reply-author,
.post-reply-author-link {
    font-weight: 600;
    color: var(--app-text-strong);
    text-decoration: none;
}

.post-reply-author-link:hover {
    text-decoration: underline;
}

body.binary-theme--dark .post-reply-author,
body.binary-theme--dark .post-reply-author-link {
    color: rgba(231, 244, 255, 0.95);
}

.post-reply-username,
.post-reply-username-link {
    color: var(--app-text-subtle);
    font-size: 0.8rem;
    text-decoration: none;
}

.post-reply-username-link:hover {
    text-decoration: underline;
}

body.binary-theme--dark .post-reply-username,
body.binary-theme--dark .post-reply-username-link {
    color: rgba(226, 232, 240, 0.75);
}

.post-reply-header time {
    font-size: 0.75rem;
    color: var(--app-text-muted);
}

body.binary-theme--dark .post-reply-header time {
    color: rgba(226, 232, 240, 0.6);
}

.post-reply-content {
    margin: 0.25rem 0 0;
    color: var(--app-text-body);
    line-height: 1.4;
}

body.binary-theme--dark .post-reply-content {
    color: rgba(231, 244, 255, 0.85);
}

.post-reply-footer {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.reply-reaction-group,
.reply-management,
.post-visitor-actions,
.post-management,
.post-reply-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem;
    align-items: center;
}

.reply-action-button {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    border: 1px solid rgba(var(--color-primary-base), 0.2);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--app-text-body);
    cursor: pointer;
    transition: all 0.2s ease;
}

.reply-action-button:hover,
.reply-action-button:focus-visible {
    border-color: var(--app-accent-primary);
    color: var(--app-accent-primary);
}

.reply-action-button.liked,
.reply-action-button.disliked {
    border-color: var(--app-accent-primary);
    color: var(--app-accent-primary);
}

/* Reply icon buttons - matching post action icons */
.reply-action-icon {
    background: transparent;
    border: none;
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--app-text-body);
    transition: all 0.2s;
}

.reply-action-icon:hover {
    background: rgba(var(--color-primary-base), 0.05);
    transform: translateY(-1px);
}

.reply-action-icon.active {
    color: var(--app-accent-primary);
}

.reply-stat-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--app-text-muted);
}

.reply-action-count {
    font-size: 0.75rem;
    color: var(--app-text-muted);
}

.reply-edit-form {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.reply-edit-form textarea {
    width: 100%;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(var(--color-primary-base), 0.2);
    font-family: inherit;
    font-size: 0.875rem;
    resize: vertical;
}

.reply-edit-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

body.binary-theme--dark .reply-action-button {
    border-color: rgba(231, 244, 255, 0.2);
    color: rgba(231, 244, 255, 0.85);
}

body.binary-theme--dark .reply-action-button:hover,
body.binary-theme--dark .reply-action-button:focus-visible,
body.binary-theme--dark .reply-action-button.liked,
body.binary-theme--dark .reply-action-button.disliked {
    border-color: rgba(59, 130, 246, 0.5);
    color: rgba(59, 130, 246, 0.9);
}

/* Dark theme for reply icon buttons */
body.binary-theme--dark .reply-action-icon {
    color: rgba(226, 232, 240, 0.9);
}

body.binary-theme--dark .reply-action-icon:hover {
    background: rgba(148, 163, 184, 0.1);
}

body.binary-theme--dark .reply-action-icon.active {
    color: rgba(129, 161, 255, 0.9);
}

body.binary-theme--dark .reply-stat-icon {
    color: rgba(148, 163, 184, 0.7);
}

body.binary-theme--dark .reply-action-count {
    color: rgba(226, 232, 240, 0.7);
}

body.binary-theme--dark .reply-edit-form textarea {
    border-color: rgba(231, 244, 255, 0.2);
    background: rgba(15, 23, 42, 0.6);
    color: rgba(231, 244, 255, 0.9);
}

.nested-replies {
    margin-top: 0.75rem;
    margin-left: 2.5rem;
    border-left: 2px solid var(--app-border-subtle);
    padding-left: 0.75rem;
}

body.binary-theme--dark .nested-replies {
    border-left-color: rgba(148, 163, 184, 0.15);
}

.nested-replies .post-reply {
    margin-bottom: 0.75rem;
}

.nested-replies .post-reply:last-child {
    margin-bottom: 0;
}

.nested-reply-form {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nested-reply-form textarea {
    padding: 0.5rem;
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.875rem;
    background: var(--app-card-background);
    color: var(--app-text-body);
    resize: vertical;
}

body.binary-theme--dark .nested-reply-form textarea {
    border-color: rgba(231, 244, 255, 0.2);
    background: rgba(15, 23, 42, 0.6);
    color: rgba(231, 244, 255, 0.9);
}

.nested-reply-form .reply-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.profile-post-form input[type="text"] {
    padding: 0.75rem;
    border: 1px solid rgba(var(--color-primary-base), 0.2);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.9375rem;
    background: var(--app-card-background);
    color: var(--app-text-body);
    margin-bottom: 0.5rem;
}

.profile-post-form input[type="text"]:focus {
    outline: none;
    border-color: var(--app-accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-accent), 0.1);
}

body.binary-theme--dark .profile-post-form input[type="text"] {
    border-color: rgba(231, 244, 255, 0.2);
    background: rgba(15, 23, 42, 0.6);
    color: rgba(231, 244, 255, 0.9);
}

body.binary-theme--dark .profile-post-form input[type="text"]:focus {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Ensure action buttons are consistent in size */
.profile-action-button {
    min-height: 2.5rem;
    padding: 0.5rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Ensure post form is hidden on readonly profiles */
html[data-profile-mode="readonly"] .profile-post-form {
    display: none !important;
}

/* Repost Modal */
.repost-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}

body.binary-theme--dark .repost-modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

.repost-modal {
    background: var(--app-card-background);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.binary-theme--dark .repost-modal {
    background: rgba(23, 32, 49, 0.95);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.repost-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--app-border-divider);
}

.repost-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--app-text-strong);
}

.repost-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--app-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s;
}

.repost-modal-close:hover {
    color: var(--app-text-strong);
}

.repost-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.repost-context-input {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    border: 1px solid var(--app-border-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--app-text-body);
    background: var(--app-panel-background);
    resize: vertical;
    margin-bottom: 1rem;
}

.repost-context-input:focus {
    outline: none;
    border-color: var(--app-accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-accent), 0.1);
}

body.binary-theme--dark .repost-context-input {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(148, 163, 184, 0.24);
}

body.binary-theme--dark .repost-context-input:focus {
    border-color: rgba(129, 161, 255, 0.5);
}

.repost-quoted-post {
    padding: 1rem;
    border: 1px solid var(--app-border-subtle);
    border-left: 3px solid var(--app-accent-primary);
    border-radius: var(--radius-sm);
    background: rgba(var(--color-primary-base), 0.02);
}

body.binary-theme--dark .repost-quoted-post {
    background: rgba(148, 163, 184, 0.05);
    border-color: rgba(148, 163, 184, 0.24);
}

.repost-quote-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.repost-quote-author {
    font-weight: 600;
    color: var(--app-text-strong);
}

.repost-quote-username {
    color: var(--app-text-muted);
    font-size: 0.875rem;
}

.repost-quote-title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-text-strong);
}

.repost-quote-content {
    margin: 0;
    color: var(--app-text-body);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.repost-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--app-border-divider);
}

.repost-modal-cancel,
.repost-modal-submit {
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.repost-modal-cancel {
    background: transparent;
    border: 1px solid var(--app-border-strong);
    color: var(--app-text-body);
}

.repost-modal-cancel:hover {
    background: rgba(var(--color-primary-base), 0.05);
}

.repost-modal-submit {
    background: var(--app-accent-primary);
    border: 1px solid var(--app-accent-primary);
    color: white;
}

.repost-modal-submit:hover:not(:disabled) {
    background: var(--app-accent-primary-strong);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-accent), 0.3);
}

.repost-modal-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

body.binary-theme--dark .repost-modal-cancel {
    border-color: rgba(148, 163, 184, 0.3);
}

body.binary-theme--dark .repost-modal-cancel:hover {
    background: rgba(148, 163, 184, 0.1);
}

/* Engagement tooltips */
.engagement-tooltip {
    position: fixed;
    background: rgba(27, 67, 50, 0.95);
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    max-width: 250px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.engagement-tooltip::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(27, 67, 50, 0.95);
}

body.binary-theme--dark .engagement-tooltip {
    background: rgba(15, 23, 42, 0.95);
    color: #e2e8f0;
}

body.binary-theme--dark .engagement-tooltip::before {
    border-top-color: rgba(15, 23, 42, 0.95);
}

/* Permalink highlight animation */
@keyframes permalink-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(42, 127, 98, 0.4);
        outline: 2px solid rgba(42, 127, 98, 0.6);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(42, 127, 98, 0);
        outline: 2px solid rgba(42, 127, 98, 1);
    }
}

.permalink-highlight {
    animation: permalink-pulse 1s ease-in-out 3;
    outline-offset: 2px;
    border-radius: 0.5rem;
    scroll-margin-top: 80px;
}

body.binary-theme--dark .permalink-highlight {
    outline-color: rgba(59, 130, 246, 0.6);
}

@keyframes permalink-pulse-dark {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
        outline: 2px solid rgba(59, 130, 246, 0.6);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
        outline: 2px solid rgba(59, 130, 246, 1);
    }
}

body.binary-theme--dark .permalink-highlight {
    animation: permalink-pulse-dark 1s ease-in-out 3;
}

/* ============================================
   Students Page - Combined Table & Budget Controls
   ============================================ */

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

.student-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.student-info__name {
    font-weight: 600;
    color: var(--app-text-strong, #1b4332);
}

.student-info__meta {
    font-size: 0.85rem;
    color: var(--app-text-muted, rgba(27, 67, 50, 0.65));
}

.proficiency-select {
    padding: 0.5rem;
    border: 1px solid var(--app-border-subtle, rgba(27, 67, 50, 0.2));
    border-radius: 6px;
    background: var(--app-card-background, rgba(255, 255, 255, 0.85));
    color: var(--app-text-body, #1f3d3d);
    font-size: 0.9rem;
}

.proficiency-select:focus {
    outline: 2px solid var(--app-accent-primary, #2a7f62);
    outline-offset: 1px;
}

.lesson-budget-display {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.budget-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.65rem;
    background: var(--app-panel-background, rgba(237, 246, 249, 0.6));
    border-radius: 6px;
}

.budget-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--app-text-body, #1f3d3d);
}

.budget-count {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--app-accent-primary, #2a7f62);
    min-width: 2rem;
    text-align: center;
}

.budget-total {
    font-size: 0.8rem;
    color: var(--app-text-muted, rgba(27, 67, 50, 0.65));
    text-align: center;
    padding-top: 0.25rem;
    border-top: 1px solid var(--app-border-subtle, rgba(27, 67, 50, 0.1));
}

.budget-total--warning {
    color: #d97706;
}

.budget-warning {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.9rem;
    cursor: help;
}

.lesson-budget-controls,
.lesson-budget-combined {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.budget-control-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem;
    background: var(--app-panel-background, rgba(237, 246, 249, 0.6));
    border-radius: 8px;
}

.budget-control-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--app-text-body, #1f3d3d);
    min-width: 70px;
    text-align: left;
}

.budget-counter {
    font-size: 1rem;
    font-weight: 700;
    color: var(--app-accent-primary, #2a7f62);
    min-width: 2rem;
    text-align: center;
}

.budget-adjust-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--app-border-subtle, rgba(27, 67, 50, 0.2));
    background: var(--app-card-background, rgba(255, 255, 255, 0.9));
    color: var(--app-text-strong, #1b4332);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.budget-adjust-btn:hover:not(:disabled) {
    background: var(--app-accent-primary, #2a7f62);
    color: white;
    border-color: var(--app-accent-primary, #2a7f62);
    transform: scale(1.05);
}

.budget-adjust-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.budget-adjust-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.budget-adjust-btn--plus {
    order: 2;
}

.budget-adjust-btn--minus {
    order: 0;
}

.budget-adjust-btn:focus-visible {
    outline: 2px solid var(--app-accent-primary, #2a7f62);
    outline-offset: 2px;
}

/* Dark theme overrides for students page */
body.binary-theme--dark .student-info__name {
    color: var(--app-text-strong, #f1f5f9);
}

body.binary-theme--dark .student-info__meta {
    color: var(--app-text-muted, rgba(226, 232, 240, 0.68));
}

body.binary-theme--dark .proficiency-select {
    background: rgba(23, 32, 49, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
    color: var(--app-text-body, #e2e8f0);
}

body.binary-theme--dark .budget-item {
    background: rgba(15, 23, 42, 0.7);
}

body.binary-theme--dark .budget-label {
    color: var(--app-text-body, #e2e8f0);
}

body.binary-theme--dark .budget-count {
    color: #81a1ff;
}

body.binary-theme--dark .budget-total {
    color: var(--app-text-muted, rgba(226, 232, 240, 0.68));
}

body.binary-theme--dark .budget-total--warning {
    color: #fbbf24;
    border-top-color: rgba(148, 163, 184, 0.18);
}

body.binary-theme--dark .budget-control-group {
    background: rgba(15, 23, 42, 0.7);
}

body.binary-theme--dark .budget-control-label {
    color: var(--app-text-body, #e2e8f0);
}

body.binary-theme--dark .budget-counter {
    color: #81a1ff;
}

body.binary-theme--dark .budget-adjust-btn {
    background: rgba(23, 32, 49, 0.9);
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--app-text-strong, #f1f5f9);
}

body.binary-theme--dark .budget-adjust-btn:hover:not(:disabled) {
    background: #5b7fff;
    border-color: #5b7fff;
    color: white;
}

body.binary-theme--dark .student-management-table th {
    background: rgba(15, 23, 42, 0.7);
    color: var(--app-text-strong, #f1f5f9);
    border-bottom-color: rgba(148, 163, 184, 0.25);
}

body.binary-theme--dark .student-management-table td {
    border-bottom-color: rgba(148, 163, 184, 0.15);
}

body.binary-theme--dark .student-management-table tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.3);
}

body.binary-theme--dark .student-management-table tbody tr:hover {
    background: rgba(23, 32, 49, 0.5);
}

.stats-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.stats-activity {
    border: 1px solid var(--app-border-subtle);
    border-radius: 14px;
    padding: 1rem;
    background: var(--app-card-background);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
}

.stats-activity__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.stats-activity__list {
    display: grid;
    gap: 0.75rem;
}

.stats-activity__entry {
    border: 1px solid var(--app-border-subtle);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    background: var(--app-panel-background);
}

.stats-activity__entry time {
    display: block;
    color: var(--app-text-muted);
    font-size: 0.9rem;
}

.stats-activity__entry p {
    margin: 0.25rem 0 0 0;
}

.stats-activity__entry--success {
    border-color: var(--app-border-strong);
}

.stats-activity__entry--failure {
    border-color: var(--app-archive-border);
}

.stats-activity__entry--pending {
    border-style: dashed;
}

body.binary-theme--dark .stats-activity,
body.binary-theme--dark .stats-activity__entry {
    border-color: var(--app-border-divider);
    background: rgba(23, 32, 49, 0.82);
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.45);
}

body.binary-theme--dark .stats-activity__entry {
    background: rgba(15, 23, 42, 0.7);
}

/* Global disabled treatment */
.is-disabled,
[disabled],
[aria-disabled='true'] {
    cursor: not-allowed !important;
    opacity: 0.72;
    filter: saturate(0.82);
    transition: opacity 120ms ease, filter 120ms ease;
}

body.binary-theme--dark .is-disabled,
body.binary-theme--dark [disabled],
body.binary-theme--dark [aria-disabled='true'] {
    opacity: 0.66;
    filter: saturate(0.7) brightness(0.96);
}