/*
 * GyotongON — Editorial Interface System
 * A complete visual layer inspired by PRODUX's dark editorial direction.
 * Existing HTML, flows and JavaScript behavior remain untouched.
 */

:root {
    --ui-ink: #0c0d0c;
    --ui-ink-2: #151815;
    --ui-ink-3: #252a24;
    --ui-paper: #f4f2e9;
    --ui-paper-2: #fbfaf4;
    --ui-paper-3: #e9e7dd;
    --ui-sage: #b9c99d;
    --ui-sage-soft: #dfe6d2;
    --ui-sage-deep: #48543e;
    --ui-text: #161815;
    --ui-muted: #6d7069;
    --ui-border: rgba(22, 24, 21, .14);
    --ui-border-strong: rgba(22, 24, 21, .28);
    --ui-danger: #9f4742;
    --ui-warning: #98722d;
    --ui-success: #456d56;
    --ui-info: #596a76;
    --ui-radius-xs: 8px;
    --ui-radius-sm: 12px;
    --ui-radius-md: 20px;
    --ui-radius-lg: 28px;
    --ui-shadow-sm: 0 1px 0 rgba(12, 13, 12, .08), 0 8px 24px rgba(12, 13, 12, .045);
    --ui-shadow-md: 0 2px 0 rgba(12, 13, 12, .08), 0 18px 48px rgba(12, 13, 12, .10);
    --ui-shadow-lg: 0 30px 90px rgba(12, 13, 12, .24);
    --ui-ring: 0 0 0 4px rgba(185, 201, 157, .42);
    --ui-ease: cubic-bezier(.16, 1, .3, 1);

    /* Legacy variable bridge */
    --primary-color: var(--ui-ink) !important;
    --accent-color: var(--ui-sage-deep) !important;
    --primary-gradient: linear-gradient(135deg, var(--ui-ink), var(--ui-ink-3)) !important;
    --secondary-color: var(--ui-paper-3) !important;
    --bg-color: var(--ui-paper) !important;
    --text-color: var(--ui-text) !important;
    --secondary-text-color: var(--ui-muted) !important;
    --border-color: var(--ui-border) !important;
    --white-color: var(--ui-paper-2) !important;
    --danger-color: var(--ui-danger) !important;
    --success-color: var(--ui-success) !important;
}

html {
    color-scheme: light;
    scroll-behavior: smooth;
    background: var(--ui-paper);
}

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

body {
    color: var(--ui-text);
    background-color: var(--ui-paper) !important;
    background-image:
        radial-gradient(circle at 12% 8%, rgba(185, 201, 157, .28), transparent 26rem),
        radial-gradient(circle at 95% 45%, rgba(72, 84, 62, .08), transparent 28rem),
        linear-gradient(rgba(12, 13, 12, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12, 13, 12, .025) 1px, transparent 1px) !important;
    background-size: auto, auto, 34px 34px, 34px 34px !important;
    font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    line-height: 1.58;
    letter-spacing: -.014em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

::selection { color: var(--ui-ink); background: var(--ui-sage); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(72, 84, 62, .32);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(72, 84, 62, .55); }

/* Typography ---------------------------------------------------------------- */

:where(h1, h2, h3, h4, h5, h6) {
    color: var(--ui-text);
    margin-top: 0;
    font-weight: 680;
    line-height: 1.18;
    letter-spacing: -.048em;
    text-wrap: balance;
}

:where(p, li, td, th, label, small) { overflow-wrap: anywhere; }

:where(.eyebrow, .kicker, .label, .meta, .badge, .tag, .chip, .status-badge,
    .sidebar-menu h3, thead th, small, .footer) {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    letter-spacing: .035em;
}

a {
    color: inherit;
    text-underline-offset: .2em;
    transition: color .22s ease, background-color .22s ease, border-color .22s ease,
        transform .22s var(--ui-ease), box-shadow .22s ease, opacity .22s ease;
}

hr { border: 0; border-top: 1px solid var(--ui-border); }
img, video, canvas, svg { max-width: 100%; }
code, pre, kbd, samp { font-family: "SFMono-Regular", Consolas, monospace; }
pre { overflow-x: auto; border-radius: var(--ui-radius-sm); }

/* Focus and controls --------------------------------------------------------- */

:where(button, input, textarea, select) { font: inherit; }

:where(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]) {
    min-height: 44px;
    cursor: pointer;
    transition: transform .2s var(--ui-ease), box-shadow .2s ease,
        background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}

:where(button, [role="button"], input[type="button"], input[type="submit"]):not(:disabled):active {
    transform: translateY(1px) scale(.985);
}

:where(button, input, textarea, select, a, [tabindex]):focus-visible {
    outline: 2px solid var(--ui-sage-deep);
    outline-offset: 3px;
    box-shadow: var(--ui-ring);
}

body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea, select, .form-control, .form-input, .input-field) {
    min-height: 48px;
    padding: 12px 15px;
    color: var(--ui-text) !important;
    background: rgba(251, 250, 244, .9) !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea, select, .form-control, .form-input, .input-field):hover {
    border-color: rgba(72, 84, 62, .5) !important;
}

body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea, select, .form-control, .form-input, .input-field):focus {
    outline: none !important;
    background: var(--ui-paper-2) !important;
    border-color: var(--ui-sage-deep) !important;
    box-shadow: var(--ui-ring) !important;
}

:where(input, textarea)::placeholder { color: #96998f !important; opacity: 1; }
textarea { resize: vertical; }
:where(input[type="checkbox"], input[type="radio"]) {
    width: 18px;
    height: 18px;
    accent-color: var(--ui-sage-deep);
}
:where(button:disabled, input:disabled, textarea:disabled, select:disabled) {
    cursor: not-allowed;
    opacity: .5;
}

/* Buttons ------------------------------------------------------------------- */

body :is(.btn, .button, .submit-btn, .save-btn, .search-btn, .action-btn,
    .primary-btn, .btn-primary, .btn-submit, .btn-login, .login-btn, .signup-btn,
    #notice-search-btn, .nav-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 999px !important;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
}

body :is(.btn-primary, .primary-btn, .submit-btn, .save-btn, .btn-submit,
    .btn-login, .login-btn, .signup-btn, #notice-search-btn) {
    color: #f5f4ed !important;
    background: var(--ui-ink) !important;
    border-color: var(--ui-ink) !important;
    box-shadow: 0 8px 20px rgba(12, 13, 12, .14) !important;
}

body :is(.btn-primary, .primary-btn, .submit-btn, .save-btn, .btn-submit,
    .btn-login, .login-btn, .signup-btn, #notice-search-btn):hover:not(:disabled) {
    color: var(--ui-ink) !important;
    background: var(--ui-sage) !important;
    border-color: var(--ui-sage) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(72, 84, 62, .2) !important;
}

body :is(.btn-secondary, .secondary-btn, .cancel-btn, .btn-outline, .outline-btn,
    .btn-google) {
    color: var(--ui-text) !important;
    background: rgba(251, 250, 244, .74) !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

body :is(.btn-secondary, .secondary-btn, .cancel-btn, .btn-outline, .outline-btn,
    .btn-google):hover:not(:disabled) {
    background: var(--ui-sage-soft) !important;
    border-color: var(--ui-sage-deep) !important;
    transform: translateY(-2px);
}

body :is(.btn-danger, .danger-btn, .delete-btn) {
    color: #fff !important;
    background: var(--ui-danger) !important;
    border-color: var(--ui-danger) !important;
}

/* Editorial hero ------------------------------------------------------------ */

body :is(.header-section, .hero-section, .hero, .season-panel, .board-hero) {
    position: relative;
    isolation: isolate;
    color: #f2f2ed !important;
    background-color: var(--ui-ink) !important;
    background-image:
        radial-gradient(circle at 80% 16%, rgba(185, 201, 157, .27), transparent 22rem),
        radial-gradient(circle at 20% 120%, rgba(72, 84, 62, .34), transparent 24rem),
        linear-gradient(118deg, #0c0d0c 0%, #111511 60%, #263023 100%) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 0 0 42px 42px !important;
    box-shadow: 0 24px 70px rgba(12, 13, 12, .18) !important;
    overflow: hidden;
}

body :is(.header-section, .hero-section, .hero, .season-panel, .board-hero)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(244, 242, 233, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 242, 233, .045) 1px, transparent 1px) !important;
    background-size: 38px 38px !important;
    opacity: 1 !important;
    pointer-events: none;
}

body :is(.header-section, .hero-section, .hero, .season-panel, .board-hero)
    :is(h1, h2, h3, p, span, .header-title, .header-desc) {
    color: inherit !important;
}

.header-logo {
    background: var(--ui-paper-2) !important;
    border: 1px solid rgba(255, 255, 255, .5) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .22) !important;
}

.header-title { font-size: clamp(2rem, 5vw, 4.7rem) !important; }

/* App shell / sidebar ------------------------------------------------------- */

#sidebar:not(.theme-audit) {
    color: #f2f2ed !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(185, 201, 157, .12), transparent 16rem),
        var(--ui-ink) !important;
    border-right: 1px solid rgba(255, 255, 255, .1) !important;
    box-shadow: 18px 0 55px rgba(12, 13, 12, .10) !important;
}

#sidebar:not(.theme-audit) .sidebar-header,
#sidebar:not(.theme-audit) .sidebar-footer {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .1) !important;
}

#sidebar:not(.theme-audit) .sidebar-header .logo,
#sidebar:not(.theme-audit) .sidebar-menu h3 { color: #a9aea4 !important; }

#sidebar:not(.theme-audit) .sidebar-menu h3 {
    font-size: .67rem !important;
    font-weight: 500 !important;
    text-transform: uppercase;
}

#sidebar:not(.theme-audit) .sidebar-menu a {
    position: relative;
    min-height: 46px;
    color: #c8cbc4 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
}

#sidebar:not(.theme-audit) .sidebar-menu a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .1) !important;
    transform: translateX(4px);
}

#sidebar:not(.theme-audit) .sidebar-menu a.active {
    color: var(--ui-ink) !important;
    background: var(--ui-sage) !important;
    border-color: var(--ui-sage) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .2) !important;
}

#sidebar:not(.theme-audit) .sidebar-menu a.active::after {
    content: "→";
    margin-left: auto;
    font-family: monospace;
    font-size: 1rem;
}

#sidebar:not(.theme-audit) #userInfo {
    color: #bdc1b9 !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: var(--ui-radius-sm) !important;
}

#sidebar:not(.theme-audit) :is(#logoutLink, #loginLink) {
    color: var(--ui-ink) !important;
    background: var(--ui-paper-2) !important;
    border: 1px solid var(--ui-paper-2) !important;
    border-radius: 999px !important;
}

#sidebar-toggle {
    width: 48px !important;
    height: 48px !important;
    color: #f2f2ed !important;
    background: rgba(12, 13, 12, .94) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 50% !important;
    box-shadow: 0 14px 35px rgba(12, 13, 12, .24) !important;
    backdrop-filter: blur(16px);
}

/* Cards / surfaces ---------------------------------------------------------- */

body :is(.card, .content-card, .panel, .section-card, .dashboard-card, .stat-card,
    .form-card, .login-card, .signup-card, .admin-card, .board-card,
    .table-container, .table-wrapper, .content-section, .notice-section,
    .calendar-section, .weather-section, .service-card, .shortcut-prompt,
    .result-box, .form-section) {
    position: relative;
    background-color: rgba(251, 250, 244, .94) !important;
    background-image:
        radial-gradient(circle at 100% 0%, rgba(185, 201, 157, .18), transparent 15rem),
        linear-gradient(145deg, rgba(255, 255, 255, .62), rgba(244, 242, 233, .36)) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    backdrop-filter: blur(10px);
    transition: transform .32s var(--ui-ease), box-shadow .32s ease,
        border-color .32s ease, background-color .32s ease;
}

body [class$="-card"]:not(.weather-glass-card):not(.header-card) {
    background-color: rgba(251, 250, 244, .94) !important;
    background-image:
        radial-gradient(circle at 100% 0%, rgba(185, 201, 157, .16), transparent 13rem),
        linear-gradient(145deg, rgba(255, 255, 255, .65), rgba(244, 242, 233, .28)) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

body :is(.card, .content-card, .dashboard-card, .stat-card, .admin-card,
    .board-card, .service-card):hover {
    border-color: rgba(72, 84, 62, .36) !important;
    box-shadow: var(--ui-shadow-md) !important;
    transform: translateY(-5px);
}

body :is(.content-card, .dashboard-card, .admin-card, .board-card) > :first-child {
    position: relative;
}

body :is(.section-header, .card-header, .modal-header, .notice-header,
    .calendar-header, .weather-header) {
    padding-bottom: 15px;
    border-color: var(--ui-border) !important;
}

body :is(.section-title, .card-title, .notice-header h2, .calendar-header h2,
    .weather-header h2) {
    display: flex;
    align-items: center;
    gap: 10px;
}

body :is(.section-title, .card-title, .notice-header h2, .calendar-header h2,
    .weather-header h2)::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    background: var(--ui-sage-deep);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(185, 201, 157, .28);
}

body :is(.plus-btn, .icon-btn, .close-btn, .site-notice-close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-height: 42px;
    color: var(--ui-text) !important;
    background: rgba(251, 250, 244, .76) !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 18px rgba(12, 13, 12, .07) !important;
}

body :is(.plus-btn, .icon-btn, .close-btn, .site-notice-close):hover {
    color: var(--ui-ink) !important;
    background: var(--ui-sage) !important;
    border-color: var(--ui-sage) !important;
    transform: rotate(6deg) scale(1.05);
}

/* Tabs, filters, chips ------------------------------------------------------ */

body :is(.tabs, .tab-list, .filter-tabs, .notice-tabs, .campus-tabs) {
    display: flex;
    gap: 8px;
    padding: 5px;
    background: rgba(12, 13, 12, .055) !important;
    border: 1px solid rgba(12, 13, 12, .06);
    border-radius: 999px !important;
}

body :is(.tab-btn, .tab-button, .notice-tab, .campus-tab, .filter-btn, .cat-btn, .chip) {
    min-height: 38px;
    padding: 8px 15px;
    color: var(--ui-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-weight: 680;
}

body :is(.tab-btn, .tab-button, .notice-tab, .campus-tab, .filter-btn, .cat-btn).active {
    color: #f4f2e9 !important;
    background: var(--ui-ink) !important;
    border-color: var(--ui-ink) !important;
    box-shadow: 0 8px 20px rgba(12, 13, 12, .15) !important;
}

body :is(.badge, .status-badge, .tag, .chip) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px !important;
}

/* Data tables --------------------------------------------------------------- */

.table-responsive,
body :is(.table-container, .table-wrapper) { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: var(--ui-text);
}

body :is(th, td) {
    padding: 14px 15px !important;
    border-color: var(--ui-border) !important;
    vertical-align: middle;
}

body thead th {
    color: #d9dbd5 !important;
    background: var(--ui-ink-2) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    font-size: .78rem;
    font-weight: 600;
    text-align: left;
}

body thead th:first-child { border-radius: 13px 0 0 13px; }
body thead th:last-child { border-radius: 0 13px 13px 0; }
body tbody tr { transition: background-color .2s ease, transform .2s ease; }
body tbody tr:hover { background: rgba(185, 201, 157, .22) !important; }

/* Pagination */
:where(.pagination, .page-list) { gap: 6px; }
body :is(.pagination a, .pagination button, .page-link, .page-item a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    color: var(--ui-text) !important;
    background: rgba(251, 250, 244, .86) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 50% !important;
    text-decoration: none;
}
body :is(.pagination .active, .page-item.active a) {
    color: #fff !important;
    background: var(--ui-ink) !important;
}

/* Dialogs and overlays ------------------------------------------------------ */

body :is(.modal-overlay, .overlay, .popup-overlay, .shortcut-overlay,
    .service-overlay, .site-notice-overlay, .cookie-consent-overlay) {
    background-color: rgba(12, 13, 12, .68) !important;
    backdrop-filter: blur(12px) saturate(.8);
}

body :is(.modal, .popup, .dialog, .alert-dialog, .confirm-dialog, .modal-content,
    .popup-content, .shortcut-popup, .site-notice-popup, .cookie-consent-popup) {
    color: var(--ui-text);
    background:
        radial-gradient(circle at 100% 0%, rgba(185, 201, 157, .2), transparent 18rem),
        var(--ui-paper-2) !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

/* Feedback and empty states ------------------------------------------------ */

body :is(.alert, .notice-banner, .message-box, .status-message, .error-message,
    .success-message, .info-message, .usage-desc, .help-box, .guide-box, .info-box) {
    padding: 14px 16px;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
}

body :is(.alert-success, .success, .status-success, .success-message) {
    color: #294936 !important;
    background: #e1e9df !important;
    border-color: #a9bca7 !important;
}
body :is(.alert-danger, .error, .status-error, .error-message) {
    color: #762f2f !important;
    background: #eee0dd !important;
    border-color: #c7a09b !important;
}
body :is(.alert-warning, .warning, .status-warning) {
    color: #684d1b !important;
    background: #eee7d5 !important;
    border-color: #c7b784 !important;
}
body :is(.alert-info, .info, .status-info, .info-message, .usage-desc, .help-box,
    .guide-box, .info-box) {
    color: #465041 !important;
    background: #e5eadf !important;
    border-color: #b9c5ad !important;
}

:where(.empty-state, .loading-state, .no-data) {
    padding: 38px 22px;
    color: var(--ui-muted);
    text-align: center;
}

#loadingOverlay,
:where(.loading-overlay, .loader-overlay) {
    background-color: rgba(244, 242, 233, .82) !important;
    backdrop-filter: blur(12px);
}

/* Login and weather --------------------------------------------------------- */

.season-panel .weather-glass-card,
.season-panel .app-download-box {
    color: #f2f2ed !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(185, 201, 157, .16), transparent 15rem),
        rgba(12, 13, 12, .66) !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .24) !important;
    backdrop-filter: blur(22px) !important;
}

.season-panel .weather-glass-card { animation: uiFloat 7s ease-in-out infinite !important; }

.season-panel :is(.weather-advice, .store-btn, .campus-btn.active) {
    color: var(--ui-ink) !important;
    background: var(--ui-paper-2) !important;
    border-radius: 999px !important;
}

.login-panel {
    background:
        radial-gradient(circle at 100% 0%, rgba(185, 201, 157, .22), transparent 19rem),
        var(--ui-paper-2) !important;
    box-shadow: -12px 0 45px rgba(12, 13, 12, .08) !important;
}

.brand-logo span,
body :is(.section-title i, .notice-item i, .calendar-date, .current-weather-icon) {
    color: var(--ui-sage-deep) !important;
}

.stats-banner {
    background: rgba(185, 201, 157, .16) !important;
    border-color: rgba(72, 84, 62, .2) !important;
    border-radius: 999px !important;
}

/* Normalize vivid utility colors used by Tailwind-based legacy screens. */
body :is(.bg-indigo-600, .bg-blue-600, .bg-violet-600, .bg-cyan-600) {
    background-color: var(--ui-ink) !important;
}
body :is(.hover\:bg-indigo-500:hover, .hover\:bg-cyan-600:hover,
    .hover\:bg-violet-500:hover) {
    color: var(--ui-ink) !important;
    background-color: var(--ui-sage) !important;
}
body :is(.text-indigo-400, .text-indigo-300, .text-cyan-300, .text-cyan-400,
    .text-violet-400, .text-blue-600) {
    color: var(--ui-sage-deep) !important;
}
body :is(.bg-slate-900, .bg-slate-800, .bg-slate-700) {
    background-color: var(--ui-ink-2) !important;
}
body :is(.android-btn, .ios-btn, .windows-btn, .mac-btn) {
    color: #f2f2ed !important;
    background: var(--ui-ink) !important;
    border: 1px solid var(--ui-ink) !important;
}

/* Dense ERP screens use the same editorial system in a dark workspace mode. */
body:has(#app-view) {
    color: #ecece5 !important;
    background: var(--ui-ink) !important;
}
body:has(#app-view) #login-view {
    background:
        radial-gradient(circle at 50% 35%, rgba(185, 201, 157, .2), transparent 26rem),
        linear-gradient(rgba(244, 242, 233, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 242, 233, .035) 1px, transparent 1px),
        var(--ui-ink) !important;
    background-size: auto, 38px 38px, 38px 38px, auto !important;
}
body:has(#app-view) :is(.sidebar, .content-area) {
    background: var(--ui-ink) !important;
    border-color: rgba(255, 255, 255, .1) !important;
}
body:has(#app-view) :is(.card, .modal-content, .cal-day-cell) {
    color: #ecece5 !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(185, 201, 157, .1), transparent 16rem),
        var(--ui-ink-2) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}
body:has(#app-view) :is(.card, .cal-day-cell):hover {
    background: var(--ui-ink-3) !important;
    border-color: rgba(185, 201, 157, .55) !important;
}
body:has(#app-view) :is(input, textarea, select, .input-field, .form-control) {
    color: #f2f2ed !important;
    background: #101210 !important;
    border-color: rgba(255, 255, 255, .16) !important;
}
body:has(#app-view) :is(.nav-btn.active, .toggle-btn.active) {
    color: var(--ui-ink) !important;
    background: var(--ui-sage) !important;
}

/* Third-party banners */
.kakao_ad_area {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}
.kakao_ad_area > * {
    max-width: 100% !important;
    overflow: hidden !important;
}

.sun-effect {
    width: min(600px, 100vw) !important;
    max-width: 100vw !important;
}

/* Audit pages keep their premium identity, translated from gold to sage. */
body:has(#sidebar.theme-audit) {
    --primary-color: var(--ui-sage) !important;
    --accent-color: var(--ui-sage) !important;
}
#sidebar.theme-audit .sidebar-header .logo,
#sidebar.theme-audit + .main-content :is(h1, h2, h3, h4, i),
body:has(#sidebar.theme-audit) .main-content :is(h1, h2, h3, h4, i) {
    color: var(--ui-sage) !important;
}
#sidebar.theme-audit .sidebar-menu a:hover,
#sidebar.theme-audit .sidebar-menu a.active,
#sidebar.theme-audit #logoutLink {
    color: var(--ui-ink) !important;
    background: var(--ui-sage) !important;
}

/* Motion -------------------------------------------------------------------- */

@keyframes uiFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

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

body :is(.content-card, .dashboard-card, .stat-card, .admin-card, .board-card,
    .service-card) { animation: uiReveal .55s var(--ui-ease) both; }

/* Responsive ---------------------------------------------------------------- */

@media (max-width: 900px) {
    :root {
        --ui-radius-md: 17px;
        --ui-radius-lg: 22px;
    }

    body :is(.header-section, .hero-section, .hero, .season-panel, .board-hero) {
        border-radius: 0 0 30px 30px !important;
    }

    :where(.main-content, main) { min-width: 0; }

    :where(.page-header, .section-header, .toolbar, .actions, .button-group,
        .filters, .search-area, .form-actions) { flex-wrap: wrap; }

    body :is(.modal-content, .popup-content, .dialog, .shortcut-popup,
        .site-notice-popup, .cookie-consent-popup) {
        width: min(92vw, 560px) !important;
        max-height: 88vh;
        overflow-y: auto;
    }
}

@media (max-width: 640px) {
    body { font-size: 15px; }
    :where(.main-content) { padding-left: 16px; padding-right: 16px; }
    :where(.container, .content-container, .page-container) {
        width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }
    :where(.form-row, .input-row, .filters, .search-area) {
        flex-direction: column;
        align-items: stretch;
    }
    :where(.form-actions, .button-group):not(.keep-inline) > :where(button, .btn, a[role="button"]) {
        flex: 1 1 auto;
    }
    body :is(th, td) { padding: 11px 10px !important; }
    body :is(.tabs, .tab-list, .filter-tabs, .notice-tabs, .campus-tabs) {
        max-width: 100%;
        overflow-x: auto;
    }
}

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

@media print {
    #sidebar, #sidebar-toggle, .no-print { display: none !important; }
    body { color: #000; background: #fff !important; }
    body :is(.card, .content-card, .panel) { box-shadow: none !important; }
}

/* ========================================================================== */
/* Community UI 2026 — structural redesign                                   */
/* ========================================================================== */

:root {
    --community-bg: #f3f5f7;
    --community-card: #ffffff;
    --community-text: #171a1f;
    --community-muted: #747b87;
    --community-line: #e5e8ec;
    --community-dark: #181c22;
    --community-green: #5ce1a2;
    --community-green-deep: #147d5d;
    --community-purple: #8d7cf6;
    --community-orange: #ffad66;
    --community-blue: #62a7ff;
    --community-radius: 24px;
    --community-shadow: 0 18px 55px rgba(22, 28, 36, .08);
}

body:has(.community-home) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--community-bg) !important;
    color: var(--community-text) !important;
}

html:has(.community-home) {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
}

body:has(.community-home) :is(#sidebar, #sidebar-toggle) { display: none !important; }

.community-home.main-content {
    width: 100%;
    min-height: 100vh;
    padding: 0 !important;
    overflow: visible !important;
    background: var(--community-bg) !important;
}

.community-globalbar {
    position: sticky;
    top: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
    align-items: center;
    width: 100%;
    min-height: 74px;
    padding: 12px clamp(20px, 4vw, 64px);
    background: rgba(255, 255, 255, .86);
    border-bottom: 1px solid rgba(23, 26, 31, .08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(22px) saturate(1.2);
}

.community-global-brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 10px;
    color: var(--community-text) !important;
    font-size: 1.15rem;
    font-weight: 850;
    text-decoration: none;
    letter-spacing: -.045em;
}

.community-global-brand img {
    width: 38px;
    height: 38px;
    padding: 5px;
    object-fit: contain;
    background: var(--community-dark);
    border-radius: 12px;
}

.community-global-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px;
    background: #eef0f2;
    border-radius: 999px;
}

.community-global-links a {
    min-width: 72px;
    padding: 9px 16px;
    color: var(--community-muted) !important;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 720;
    text-align: center;
    text-decoration: none;
}

.community-global-links a:hover { color: var(--community-text) !important; }
.community-global-links a.active {
    color: #fff !important;
    background: var(--community-dark);
    box-shadow: 0 7px 18px rgba(24, 28, 34, .16);
}

.community-global-actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
}

.community-global-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    color: var(--community-text) !important;
    background: #eef0f2;
    border: 1px solid transparent;
    border-radius: 50%;
    text-decoration: none;
}

.community-global-actions a:hover {
    background: #e3e6e9;
    transform: translateY(-2px);
}

.community-global-actions .community-global-write {
    gap: 8px;
    padding: 0 17px;
    color: #fff !important;
    background: var(--community-dark);
    border-radius: 999px;
    font-weight: 750;
}

.community-global-actions .community-global-profile {
    color: var(--community-dark) !important;
    background: var(--community-green);
}

.community-layout {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 26px clamp(20px, 4vw, 64px) 56px;
}

.community-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
    gap: clamp(30px, 6vw, 86px);
    min-height: 430px;
    padding: clamp(42px, 6vw, 82px);
    color: #fff;
    background:
        radial-gradient(circle at 78% 12%, rgba(92, 225, 162, .24), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(98, 167, 255, .14), transparent 32%),
        var(--community-dark);
    border-radius: 34px;
    box-shadow: 0 28px 80px rgba(24, 28, 34, .18);
    overflow: hidden;
}

.community-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(90deg, #000, transparent 70%);
    pointer-events: none;
}

.community-hero-copy,
.community-now-card { position: relative; z-index: 1; }

.community-eyebrow {
    display: inline-block;
    color: var(--community-green-deep);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .09em;
}

.community-hero .community-eyebrow { color: var(--community-green); }

.community-hero-copy h1 {
    max-width: 720px;
    margin: 17px 0 18px;
    color: #fff !important;
    font-size: clamp(2.7rem, 5vw, 5.4rem);
    line-height: .99;
    letter-spacing: -.068em;
}

.community-hero-copy > p {
    max-width: 610px;
    margin: 0;
    color: #aeb5bf;
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    line-height: 1.72;
}

.community-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 31px;
}

.community-hero-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 780;
    text-decoration: none;
}

.community-primary-action {
    color: var(--community-dark) !important;
    background: var(--community-green);
}

.community-secondary-action {
    color: #fff !important;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
}

.community-hero-actions a:hover { transform: translateY(-3px); }

body .community-hero .community-now-card:not(.weather-glass-card):not(.header-card) {
    align-self: center;
    padding: 22px;
    color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
    background-image: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 26px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(16px);
}

.community-now-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #98a0aa;
    font-family: monospace;
    font-size: .7rem;
    letter-spacing: .08em;
}

.community-now-top span { display: inline-flex; align-items: center; gap: 7px; }
.community-now-top span i {
    width: 7px;
    height: 7px;
    background: var(--community-green);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(92, 225, 162, .1);
}

.community-hero-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #fff !important;
    background: rgba(255, 255, 255, .08);
    border-radius: 50%;
}

.community-hero-bell .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    min-height: 19px;
    padding: 3px;
    color: #fff;
    background: #ff6474;
    font-size: .62rem;
    text-align: center;
}

.community-now-card > img {
    display: block;
    width: 68px;
    height: 68px;
    margin: 28px auto 18px;
    padding: 9px;
    object-fit: contain;
    background: #fff;
    border-radius: 20px;
}

.community-now-copy { text-align: center; }
.community-now-copy #seasonTitle {
    display: block;
    margin: 0 0 4px;
    color: #fff !important;
    font-size: 1.55rem;
    font-weight: 820;
}
.community-now-copy #seasonDesc { color: #aeb5bf !important; font-size: .88rem; }

.community-now-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 24px;
}

.community-now-links a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px;
    color: #fff !important;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    text-decoration: none;
}

.community-now-links a:hover { background: rgba(255, 255, 255, .12); }
.community-now-links strong { font-size: .88rem; }
.community-now-links span { color: #929aa5; font-size: .7rem; }
.community-now-links i { margin-left: 3px; }

.community-hero #admin-controls-container {
    position: absolute;
    right: 24px;
    bottom: 18px;
    z-index: 2;
}

.community-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
    margin: 18px 0 28px;
}

.community-quick-actions > a {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 15px;
    color: var(--community-text) !important;
    background: #fff;
    border: 1px solid var(--community-line);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(22, 28, 36, .045);
    text-decoration: none;
}

.community-quick-actions > a:hover {
    border-color: #d4d9df;
    box-shadow: 0 14px 36px rgba(22, 28, 36, .09);
    transform: translateY(-4px);
}

.quick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 16px;
}
.quick-icon.mint { background: #d9f9eb; color: #16805f; }
.quick-icon.purple { background: #ebe8ff; color: #6651d9; }
.quick-icon.orange { background: #fff0df; color: #d87521; }
.quick-icon.blue { background: #e4f0ff; color: #347cd6; }
.community-quick-actions > a > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.community-quick-actions strong { font-size: .92rem; }
.community-quick-actions small { color: var(--community-muted); font-size: .73rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.community-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 22px;
}

.community-feed-column,
.community-side-column { display: flex; min-width: 0; flex-direction: column; gap: 18px; }
.community-side-column { position: sticky; top: 92px; }

.community-composer {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: var(--community-card);
    border: 1px solid var(--community-line);
    border-radius: var(--community-radius);
    box-shadow: 0 10px 35px rgba(22, 28, 36, .05);
}

.composer-avatar,
.composer-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--community-dark) !important;
    background: var(--community-green);
    border-radius: 50%;
    text-decoration: none;
}
.composer-input {
    padding: 13px 17px;
    color: #9399a3 !important;
    background: #f3f5f7;
    border: 1px solid #eceff2;
    border-radius: 999px;
    text-decoration: none;
}
.composer-submit {
    width: 42px;
    height: 42px;
    color: #fff !important;
    background: var(--community-dark);
}

.community-feed,
.community-discover,
.community-side-card,
.community-app-card {
    padding: clamp(20px, 3vw, 30px) !important;
    color: var(--community-text) !important;
    background: var(--community-card) !important;
    background-image: none !important;
    border: 1px solid var(--community-line) !important;
    border-radius: var(--community-radius) !important;
    box-shadow: 0 10px 38px rgba(22, 28, 36, .055) !important;
    backdrop-filter: none !important;
}

.community-section-heading,
.community-side-heading,
.community-side-heading > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.community-section-heading { margin-bottom: 21px; }
.community-section-heading h2 { margin: 5px 0 0; font-size: 1.55rem; letter-spacing: -.05em; }
.community-text-link {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    min-height: auto !important;
    padding: 8px 0 !important;
    color: var(--community-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: .82rem;
    font-weight: 700;
}

.community-feed .notice-controls { margin: 0 0 16px; }
.community-feed .notice-search {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: none;
    padding: 5px 5px 5px 15px;
    background: #f4f6f8;
    border: 1px solid #eaedf0;
    border-radius: 16px;
}
.community-feed .search-leading-icon { color: #a1a7b0; }
.community-feed #notice-search-input {
    min-height: 42px !important;
    padding: 5px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.community-feed #notice-search-btn {
    width: 40px;
    min-height: 40px;
    padding: 0 !important;
    color: #fff !important;
    background: var(--community-dark) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.community-feed .notice-tabs {
    display: flex;
    gap: 5px;
    margin: 0 0 8px;
    padding: 4px;
    overflow-x: auto;
    background: #f4f6f8 !important;
    border: 0;
    border-radius: 14px !important;
}
.community-feed .notice-tab {
    flex: 1 0 auto;
    min-height: 38px;
    padding: 8px 13px;
    color: var(--community-muted) !important;
    border-radius: 11px !important;
}
.community-feed .notice-tab.active {
    color: var(--community-text) !important;
    background: #fff !important;
    border-color: #fff !important;
    box-shadow: 0 5px 15px rgba(22, 28, 36, .08) !important;
}

.community-feed-list {
    max-height: none !important;
    overflow: visible !important;
}
.community-feed-list .notice-item,
.community-feed-list > li {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 76px;
    padding: 13px 4px !important;
    border-bottom: 1px solid var(--community-line) !important;
}
.community-feed-list .notice-item::before,
.community-feed-list > li::before {
    content: "ON";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: #147d5d;
    background: #d9f9eb;
    border-radius: 15px;
    font-size: .68rem;
    font-weight: 850;
}
.community-feed-list .notice-item a {
    color: var(--community-text) !important;
    font-weight: 700;
    text-decoration: none;
}
.community-feed-list .notice-item a::after {
    content: "학교 커뮤니티 · 새 소식";
    display: block;
    margin-top: 5px;
    color: var(--community-muted);
    font-size: .7rem;
    font-weight: 500;
}
.community-feed-list .notice-date { color: #9ca2ab; font-size: .72rem; }

.community-side-card { padding: 22px !important; }
.community-side-heading { margin-bottom: 18px; }
.community-side-heading h3 { margin: 0; font-size: 1.04rem; letter-spacing: -.035em; }
.community-side-heading > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--community-text) !important;
    background: #f1f3f5;
    border-radius: 50%;
}
.side-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    color: #147d5d;
    background: #d9f9eb;
    border-radius: 12px;
}

.community-side-card .library-list,
.community-side-card .calendar-list { max-height: 250px; overflow-y: auto; }
.community-side-card .library-list li,
.community-side-card .calendar-list li {
    padding: 11px 4px !important;
    border-color: var(--community-line) !important;
}

.community-side-card .campus-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    background: #f1f3f5 !important;
    border: 0;
    border-radius: 13px !important;
}
.community-side-card .campus-tab {
    min-height: 36px;
    padding: 7px;
    color: var(--community-muted) !important;
    border-radius: 10px !important;
}
.community-side-card .campus-tab.active {
    color: var(--community-text) !important;
    background: #fff !important;
    border-color: #fff !important;
    box-shadow: 0 4px 13px rgba(22, 28, 36, .08) !important;
}
.community-side-card .current-weather { margin: 6px 0 12px; }
.community-side-card .current-weather-icon { color: #f1a240 !important; }
.community-side-card .current-temp { font-size: 2.5rem; }
.community-side-card .hourly-forecast { padding: 11px 0; }

.community-app-card {
    color: #fff !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(92, 225, 162, .25), transparent 45%),
        var(--community-dark) !important;
    border-color: var(--community-dark) !important;
}
.community-app-card .community-eyebrow { color: var(--community-green); }
.community-app-card h2 { margin: 8px 0; color: #fff !important; font-size: 1.3rem; }
.community-app-card > p { margin: 0 0 17px; color: #aeb5bf; font-size: .85rem; }
.community-app-card .shortcut-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.community-app-card .shortcut-btn {
    min-height: 40px;
    padding: 8px;
    color: #fff !important;
    background: rgba(255, 255, 255, .09) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 12px !important;
    font-size: .76rem;
}
.community-notify-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    margin-top: 12px;
    color: var(--community-dark) !important;
    background: var(--community-green) !important;
    border: 0 !important;
    border-radius: 14px !important;
    font-weight: 800;
}

.community-discover { margin-top: 0; }
.community-discover .service-section { margin: 0 0 18px; }
.community-discover .community-extra-services { padding-top: 18px; border-top: 1px solid var(--community-line); }
.community-discover .card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.community-discover .service-card {
    min-width: 0;
    color: var(--community-text) !important;
    background: #f6f7f8 !important;
    border: 1px solid #eceef1 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    overflow: hidden;
}
.community-discover .service-card:hover {
    background: #fff !important;
    border-color: #d9dde2 !important;
    box-shadow: 0 15px 35px rgba(22, 28, 36, .1) !important;
    transform: translateY(-5px);
}
.community-discover .card-thumbnail { height: 118px; border: 0; object-fit: cover; }
.community-discover .card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px 14px;
    font-size: .87rem;
}
.community-discover .card-title::after { content: "↗"; color: var(--community-muted); }

.community-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 38px;
    padding: 28px 3px 0;
    color: var(--community-muted);
    border-top: 1px solid #dde1e5;
    font-size: .78rem;
}
.community-footer > div { display: flex; flex-direction: column; }
.community-footer strong { color: var(--community-text); font-size: 1rem; }
.community-footer p { margin: 0; }

/* All inner pages receive the same community navigation shell. */
.community-page-shell > .community-globalbar {
    position: sticky;
    top: 0;
    margin: -2rem -2rem 28px;
    width: calc(100% + 4rem);
    padding-left: clamp(20px, 3vw, 44px);
    padding-right: clamp(20px, 3vw, 44px);
}

/* Every application page uses the same shell as the community home. */
body.community-shell-active {
    --ui-paper: var(--community-bg);
    --ui-paper-2: var(--community-card);
    --ui-paper-3: #eef0f2;
    --ui-sage: var(--community-green);
    --ui-sage-soft: #d9f9eb;
    --ui-sage-deep: var(--community-green-deep);
    --gold: var(--community-green);
    --black: var(--community-bg);
    --card: var(--community-card);
    --border: var(--community-line);
    display: block !important;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
    background: var(--community-bg) !important;
}

body.community-shell-active #sidebar-container {
    position: relative;
    z-index: 1200;
}

body.community-shell-active #sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 1200 !important;
    width: min(310px, 88vw) !important;
    height: 100dvh !important;
    transform: translateX(-105%) !important;
    box-shadow: 24px 0 70px rgba(10, 14, 18, .28) !important;
}

body.community-shell-active #sidebar.open {
    transform: translateX(0) !important;
}

body.community-shell-active #sidebar-toggle {
    display: inline-flex !important;
    top: 14px !important;
    right: 164px !important;
    left: auto !important;
    z-index: 1250 !important;
    width: 44px !important;
    height: 44px !important;
    color: var(--community-dark) !important;
    background: #eef0f2 !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.community-shell-active .main-content,
body.community-shell-active main.community-page-shell {
    width: 100% !important;
    max-width: 1440px;
    min-height: 100vh;
    margin: 0 auto !important;
    padding: 2rem !important;
}

body.community-shell-active .community-page-shell > .community-globalbar {
    margin-top: -2rem;
}

body.community-shell-active :is(.card, .content-card, .panel, .section-card,
    .dashboard-card, .stat-card, .form-card, .login-card, .signup-card,
    .admin-card, .board-card, .table-container, .table-wrapper, .content-section,
    .result-box, .form-section),
body.community-standalone-shell :is(.card, .content-card, .panel, .section-card,
    .dashboard-card, .stat-card, .form-card, .login-card, .signup-card,
    .admin-card, .board-card, .table-container, .table-wrapper, .content-section,
    .result-box, .form-section) {
    color: var(--community-text) !important;
    background-color: var(--community-card) !important;
    background-image: radial-gradient(circle at 100% 0%, rgba(92, 225, 162, .1), transparent 17rem) !important;
    border: 1px solid var(--community-line) !important;
    border-radius: var(--community-radius) !important;
    box-shadow: var(--community-shadow) !important;
}

body :is(table, .data-table, .admin-table) {
    color: var(--community-text) !important;
    background: #fff !important;
    border-color: var(--community-line) !important;
    border-radius: 18px;
    overflow: hidden;
}

body :is(th, thead td, .list-header) {
    color: var(--community-muted) !important;
    background: #f6f7f8 !important;
    border-color: var(--community-line) !important;
}

body :is(td, th, tr, .list-item) { border-color: var(--community-line) !important; }
body tbody tr:hover { background: #f2fbf7 !important; }

body :is(.btn-primary, .primary-btn, .submit-btn, .save-btn, .btn-submit,
    .btn-login, .login-btn, .signup-btn, .btn-write, #notice-search-btn) {
    color: #fff !important;
    background: var(--community-dark) !important;
    border-color: var(--community-dark) !important;
}

body :is(.btn-primary, .primary-btn, .submit-btn, .save-btn, .btn-submit,
    .btn-login, .login-btn, .signup-btn, .btn-write, #notice-search-btn):hover:not(:disabled) {
    color: var(--community-dark) !important;
    background: var(--community-green) !important;
    border-color: var(--community-green) !important;
}

/* Standalone authentication, policy and utility pages. */
body.community-standalone-shell {
    --ui-paper: var(--community-bg);
    --ui-paper-2: var(--community-card);
    --ui-paper-3: #eef0f2;
    --ui-sage: var(--community-green);
    --ui-sage-soft: #d9f9eb;
    --ui-sage-deep: var(--community-green-deep);
    --gold: var(--community-green);
    --black: var(--community-bg);
    --card: var(--community-card);
    --border: var(--community-line);
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh;
    overflow: auto !important;
    color: var(--community-text) !important;
    background: var(--community-bg) !important;
}

body.community-standalone-shell > .community-globalbar {
    position: sticky;
    top: 0;
}

.community-standalone-stage {
    width: min(1280px, calc(100% - 32px));
    min-height: calc(100vh - 106px);
    margin: 16px auto 32px;
}

.community-auth-stage {
    display: grid;
    grid-template-columns: minmax(340px, .86fr) minmax(460px, 1.14fr);
    align-items: stretch;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--community-line);
    border-radius: 32px;
    box-shadow: var(--community-shadow);
}

.community-auth-stage :is(.season-panel, .header-section) {
    position: relative !important;
    inset: auto !important;
    grid-column: 1;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 620px;
    border: 0 !important;
    border-radius: 0 !important;
}

.community-auth-stage :is(.login-panel, .signup-panel, .find-panel, .policy-panel) {
    position: relative !important;
    inset: auto !important;
    grid-column: 2;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 620px;
    padding: clamp(28px, 5vw, 72px) !important;
    color: var(--community-text) !important;
    background: #fff !important;
}

.community-auth-stage :is(.login-wrapper, .signup-wrapper, .find-wrapper, .policy-wrapper) {
    width: min(100%, 640px) !important;
    margin: auto !important;
}

.community-auth-stage :is(#loadingOverlay, #sun-effect, .sun-effect) {
    position: fixed !important;
}

@media (max-width: 1050px) {
    .community-content-grid { grid-template-columns: minmax(0, 1fr) 320px; }
    .community-quick-actions { grid-template-columns: 1fr 1fr; }
    .community-hero { grid-template-columns: 1fr 300px; padding: 48px; }
}

@media (max-width: 820px) {
    .community-globalbar { grid-template-columns: 1fr auto; min-height: 66px; padding: 10px 16px; }
    .community-global-links { position: fixed; left: 50%; bottom: 12px; z-index: 950; width: min(94vw, 440px); transform: translateX(-50%); box-shadow: 0 16px 42px rgba(22, 28, 36, .22); }
    .community-global-links a { min-width: 0; flex: 1; padding: 10px 8px; font-size: .77rem; }
    .community-global-actions .community-global-search { display: none; }
    .community-layout { padding: 14px 14px 92px; }
    .community-hero { grid-template-columns: 1fr; min-height: 0; padding: 38px 26px 26px; border-radius: 27px; }
    .community-hero-copy h1 { font-size: clamp(2.6rem, 12vw, 4.7rem); }
    .community-now-card { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 13px; padding: 16px; }
    .community-now-card .community-now-top { grid-column: 1 / -1; }
    .community-now-card > img { width: 58px; height: 58px; margin: 0; border-radius: 16px; }
    .community-now-copy { text-align: left; }
    .community-now-links { grid-column: 1 / -1; margin-top: 4px; }
    .community-content-grid { grid-template-columns: 1fr; }
    .community-side-column { position: static; display: grid; grid-template-columns: 1fr 1fr; }
    .community-app-card { grid-column: 1 / -1; }
    .community-page-shell > .community-globalbar { margin: -1rem -1rem 20px; width: calc(100% + 2rem); }
    body.community-shell-active .main-content,
    body.community-shell-active main.community-page-shell { padding: 1rem 1rem 92px !important; }
    body.community-shell-active #sidebar-toggle { right: 116px !important; }
    .community-standalone-stage { width: calc(100% - 20px); margin-top: 10px; padding-bottom: 84px; }
    .community-auth-stage { display: block; border-radius: 26px; }
    .community-auth-stage :is(.season-panel, .header-section) {
        min-height: 330px;
        border-radius: 0 0 26px 26px !important;
    }
    .community-auth-stage :is(.login-panel, .signup-panel, .find-panel, .policy-panel) {
        min-height: 0;
        padding: 34px 22px 46px !important;
    }
}

@media (max-width: 560px) {
    .community-global-brand span { display: none; }
    .community-global-actions .community-global-write span { display: none; }
    .community-global-actions .community-global-write { width: 42px; padding: 0; }
    .community-hero-actions { align-items: stretch; flex-direction: column; }
    .community-hero-actions a { width: 100%; }
    .community-quick-actions { grid-template-columns: 1fr 1fr; gap: 9px; }
    .community-quick-actions > a { align-items: flex-start; flex-direction: column; padding: 13px; }
    .quick-icon { width: 42px; height: 42px; flex-basis: 42px; }
    .community-quick-actions small { white-space: normal; }
    .community-side-column { display: flex; }
    .community-discover .card-grid { grid-template-columns: 1fr 1fr; }
    .community-feed-list .notice-item,
    .community-feed-list > li { grid-template-columns: 42px minmax(0, 1fr); }
    .community-feed-list .notice-date { display: none; }
    .community-feed-list .notice-item::before,
    .community-feed-list > li::before { width: 40px; height: 40px; border-radius: 13px; }
    .community-footer { align-items: flex-start; flex-direction: column; }
    body.community-shell-active #sidebar-toggle { right: 68px !important; }
}

/* Navigation usability refresh ------------------------------------------------ */
.community-global-links a > i {
    display: none;
    font-size: 1rem;
}

.community-global-actions > #sidebar-toggle.community-nav-menu {
    position: static !important;
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    color: var(--community-text) !important;
    background: #eef0f2 !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

.community-sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    background: rgba(16,20,26,.52);
    border: 0;
    backdrop-filter: blur(3px);
    transition: opacity .2s ease, visibility .2s ease;
}
.community-sidebar-scrim.visible { visibility: visible; opacity: 1; }

@media (max-width: 820px) {
    .community-globalbar {
        position: sticky;
        top: 0;
        grid-template-columns: minmax(48px, 1fr) auto;
        min-height: 64px;
        padding: 9px 12px;
    }
    .community-global-links {
        position: fixed;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        left: 10px;
        z-index: 950;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: auto;
        max-width: 520px;
        min-height: 62px;
        margin: 0 auto;
        padding: 5px;
        transform: none;
        background: rgba(24, 28, 34, .94);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 20px;
        box-shadow: 0 18px 44px rgba(16, 20, 26, .28);
        backdrop-filter: blur(20px) saturate(1.3);
    }
    .community-global-links a {
        display: flex;
        min-width: 0;
        min-height: 52px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 3px;
        padding: 6px 4px;
        color: #aeb5bf !important;
        border-radius: 15px;
        font-size: .67rem;
        line-height: 1;
    }
    .community-global-links a > i { display: block; }
    .community-global-links a.active {
        color: var(--community-dark) !important;
        background: var(--community-green);
    }
    .community-global-actions { gap: 5px; }
    .community-global-actions > #sidebar-toggle.community-nav-menu { order: -1; }
    body.community-shell-active,
    body.community-standalone-shell { padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
}

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

/* Shared navigation, full-width pages and legibility ----------------------- */
.community-global-actions .community-global-auth {
    width: auto;
    gap: 7px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.community-global-actions > :is(#community-menu-toggle, #sidebar-toggle).community-nav-menu {
    position: static !important;
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    align-items: center;
    justify-content: center;
    color: var(--community-text) !important;
    background: #eef0f2 !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    cursor: pointer;
}

#community-fallback-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1200;
    width: min(330px, 90vw);
    padding: 20px;
    color: #f7f9fb;
    background: #181c22;
    box-shadow: 24px 0 70px rgba(10, 14, 18, .3);
    transform: translateX(-105%);
    transition: transform .22s ease;
}
#community-fallback-sidebar.open { transform: translateX(0); }
.community-fallback-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.community-fallback-head a { display: flex; align-items: center; gap: 10px; color: #fff !important; text-decoration: none; }
.community-fallback-head img { width: 42px; height: 42px; padding: 6px; object-fit: contain; background: #fff; border-radius: 13px; }
.community-fallback-head button { width: 42px; height: 42px; color: #fff; background: rgba(255,255,255,.08); border: 0; border-radius: 50%; cursor: pointer; }
#community-fallback-sidebar nav { display: grid; gap: 7px; }
#community-fallback-sidebar nav a { display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 10px 13px; color: #dce2e8 !important; border-radius: 13px; font-size: .92rem; font-weight: 720; text-decoration: none; }
#community-fallback-sidebar nav a:hover { color: #181c22 !important; background: var(--community-green); }
#community-fallback-sidebar nav i { width: 20px; text-align: center; }
/* The service drawer is fixed and already has its own scroll area. Locking the
   document here made main.html impossible to scroll while the drawer was open. */
body.community-menu-open { overflow-x: hidden !important; }

body:has(.community-home) #sidebar-container { position: relative; z-index: 1200; }
body:has(.community-home) #sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 1200 !important;
    display: block !important;
    width: min(310px, 88vw) !important;
    height: 100dvh !important;
    transform: translateX(-105%) !important;
    box-shadow: 24px 0 70px rgba(10, 14, 18, .28) !important;
}
body:has(.community-home) #sidebar.open { transform: translateX(0) !important; }
body:has(.community-home) #sidebar-toggle.community-nav-menu { display: inline-flex !important; }

.community-layout,
body.community-shell-active .main-content,
body.community-shell-active main.community-page-shell {
    width: 100% !important;
    max-width: none !important;
}
body.community-shell-active :is(.centered-container, .content-container, .page-container, .dashboard-container, .content-wrapper) {
    width: 100% !important;
    max-width: none !important;
}

body:is(.community-shell-active, .community-standalone-shell) :is(input, select, textarea) {
    color: #171a1f !important;
    background-color: #fff !important;
    border-color: #cbd1d8 !important;
}
body:is(.community-shell-active, .community-standalone-shell) :is(input, textarea)::placeholder { color: #727c87 !important; opacity: 1; }
body:is(.community-shell-active, .community-standalone-shell) :is(.text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500) { color: #59636f !important; }
body:is(.community-shell-active, .community-standalone-shell) :is(.card, .panel, .admin-card, .content-card, .table-container, .form-card) :is(p, label, small, td) { line-height: 1.55; }

@media (max-width: 820px) {
    .community-global-actions .community-global-auth { width: 42px; padding: 0; }
    .community-global-actions .community-global-auth span { display: none; }
    .community-global-actions .community-global-write,
    .community-global-actions .community-global-profile,
    .community-global-actions .community-global-search { display: none !important; }
}

/* BELAB ERP: enterprise workspace using the shared charcoal/mint system. */
body.belab-erp-ui {
    --belab-bg: #121712;
    --belab-surface: #121712;
    --belab-ink: #ffffff;
    --belab-muted: #c4cbc4;
    --belab-line: #394239;
    --belab-dark: #181c22;
    --belab-mint: #5ce1a2;
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    color: var(--belab-ink) !important;
    background: var(--belab-bg) !important;
    overflow: hidden !important;
}

.belab-erp-ui #app-view { height: 100dvh !important; background: var(--belab-bg) !important; }
.belab-erp-ui .content-area { color: var(--belab-ink) !important; background: var(--belab-bg) !important; }
.belab-erp-ui .content-area > header { background: rgba(243,245,247,.9); backdrop-filter: blur(18px); }

.belab-erp-ui #mainSidebar {
    color: #e9edf1 !important;
    background: var(--belab-dark) !important;
    border-color: rgba(255,255,255,.1) !important;
    box-shadow: 18px 0 48px rgba(16,20,26,.16);
    transition: transform .28s cubic-bezier(.4,0,.2,1), width .28s ease !important;
}

@media (min-width: 768px) {
    .belab-erp-ui.erp-sidebar-collapsed #mainSidebar {
        position: absolute !important;
        transform: translateX(-105%) !important;
    }
}
.belab-erp-ui #mainSidebar .nav-btn { min-height: 44px; color: #abb3bd !important; border: 1px solid transparent; }
.belab-erp-ui #mainSidebar .nav-btn:hover { color: #fff !important; background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.08); }
.belab-erp-ui #mainSidebar .nav-btn.active { color: var(--belab-dark) !important; background: var(--belab-mint) !important; box-shadow: 0 10px 26px rgba(92,225,162,.18); }
.belab-erp-ui #mainSidebar .nav-btn.active i { color: var(--belab-dark) !important; }

.belab-erp-ui #tabTitle { color: var(--belab-ink) !important; letter-spacing: -.045em; }
.belab-erp-ui #tabDesc { color: var(--belab-muted) !important; }
.belab-erp-ui #tabBadge { color: #116548 !important; background: #d9f9eb !important; border-color: #aee9cf !important; }
.belab-erp-ui #kpiBar > div {
    background: var(--belab-surface) !important;
    border: 1px solid var(--belab-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 26px rgba(22,28,36,.055);
}
.belab-erp-ui #kpiBar > div > :first-child { color: var(--belab-muted) !important; }
.belab-erp-ui #kpiPendingCount { color: #bd6d1e !important; }
.belab-erp-ui #kpiMonthlySpent { color: #147d5d !important; }
.belab-erp-ui #kpiAssetCount { color: #3179b9 !important; }
.belab-erp-ui #kpiEquipRate { color: #6756cc !important; }

.belab-erp-ui #main-list-container .card {
    color: var(--belab-ink) !important;
    background: var(--belab-surface) !important;
    border-color: var(--belab-line) !important;
    box-shadow: 0 10px 32px rgba(22,28,36,.06) !important;
}
.belab-erp-ui #main-list-container .card:hover { border-color: #b7c0ca !important; box-shadow: 0 16px 40px rgba(22,28,36,.1) !important; }
.belab-erp-ui #main-list-container .card :is(.text-white, .text-slate-100, .text-slate-200) { color: var(--belab-ink) !important; }
.belab-erp-ui #main-list-container .card :is(.text-slate-300, .text-slate-400, .text-slate-500) { color: var(--belab-muted) !important; }
.belab-erp-ui #main-list-container .card :is(button, a)[class*="bg-indigo"],
.belab-erp-ui #main-list-container .card :is(button, a)[class*="bg-emerald"],
.belab-erp-ui #main-list-container .card :is(button, a)[class*="bg-cyan"],
.belab-erp-ui #main-list-container .card :is(button, a)[class*="bg-rose"] { color: #fff !important; }

.belab-erp-ui :is(#searchInputPC, #searchInputMobile, .input-field) {
    color: var(--belab-ink) !important;
    background: #fff !important;
    border-color: #ccd3da !important;
    box-shadow: none !important;
}
.belab-erp-ui :is(#searchInputPC, #searchInputMobile, .input-field):focus { border-color: #147d5d !important; box-shadow: 0 0 0 4px rgba(92,225,162,.2) !important; }

.belab-erp-ui .modal { background: rgba(16,20,26,.7) !important; }
.belab-erp-ui .modal-content { color: var(--belab-ink) !important; background: #fff !important; border-color: var(--belab-line) !important; box-shadow: 0 28px 80px rgba(16,20,26,.3) !important; }
.belab-erp-ui .modal-content :is(h1,h2,h3,h4,.text-white,.text-slate-100,.text-slate-200) { color: var(--belab-ink) !important; }
.belab-erp-ui .modal-content :is(.text-slate-300,.text-slate-400,.text-slate-500) { color: var(--belab-muted) !important; }
.belab-erp-ui .modal-content :is(button,a)[class*="bg-indigo"],
.belab-erp-ui .modal-content :is(button,a)[class*="bg-emerald"],
.belab-erp-ui .modal-content :is(button,a)[class*="bg-rose"],
.belab-erp-ui .modal-content :is(button,a)[class*="bg-red"] { color: #fff !important; }

.belab-erp-ui #login-view {
    background: radial-gradient(circle at 75% 15%, rgba(92,225,162,.18), transparent 28rem), var(--belab-dark) !important;
}
.belab-erp-ui #login-view > div { box-sizing: border-box; width: min(448px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; margin-inline: auto !important; background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.13) !important; backdrop-filter: blur(18px); }
.belab-erp-ui #login-view :is(h2,.text-white) { color: #fff !important; }
.belab-erp-ui #login-view .input-field { color: #fff !important; background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.16) !important; }

.belab-erp-ui #mobileHeader { background: rgba(24,28,34,.96) !important; border-color: rgba(255,255,255,.1) !important; }
.erp-mobile-icon-btn {
    display: inline-flex;
    width: 40px;
    height: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    color: #d9dee4 !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 13px !important;
    text-decoration: none;
}

/* Solid page canvas and flush top navigation ------------------------------- */
body.community-shell-active .main-content,
body.community-shell-active main.community-page-shell {
    padding-top: 0 !important;
}

.community-page-shell > .community-globalbar,
body.community-shell-active .community-page-shell > .community-globalbar {
    top: 0 !important;
    margin-top: 0 !important;
}

body:has(.community-home),
body.community-shell-active,
body.community-standalone-shell,
.community-home.main-content,
body.community-shell-active .main-content,
body.community-shell-active main.community-page-shell,
.community-standalone-stage,
.community-globalbar,
.community-layout,
.community-hero,
.community-now-card,
.community-quick-actions > a,
.community-composer,
.community-feed,
.community-side-card,
.community-app-card,
.community-discover,
body.community-shell-active :is(.card, .content-card, .panel, .section-card, .dashboard-card, .stat-card, .form-card, .login-card, .signup-card, .admin-card, .board-card, .table-container, .table-wrapper, .content-section, .result-box, .form-section),
body.community-standalone-shell :is(.card, .content-card, .panel, .section-card, .dashboard-card, .stat-card, .form-card, .login-card, .signup-card, .admin-card, .board-card, .table-container, .table-wrapper, .content-section, .result-box, .form-section) {
    background-color: var(--community-bg) !important;
    background-image: none !important;
}

.community-globalbar { background: var(--community-bg) !important; }
.community-hero { color: var(--community-text) !important; border: 1px solid var(--community-line); box-shadow: none; }
.community-hero-copy h1,
.community-hero-copy p,
.community-now-card :is(h1,h2,h3,p,strong,span) { color: var(--community-text) !important; }
.community-hero .community-eyebrow { color: var(--community-green-deep) !important; }
.community-now-card { border-color: var(--community-line) !important; }
.community-now-links a { border-color: var(--community-line) !important; }

@media (max-width: 820px) {
    body.community-shell-active .main-content,
    body.community-shell-active main.community-page-shell { padding-top: 0 !important; }
    .community-page-shell > .community-globalbar { margin-top: 0 !important; }
}

/* BELAB uses one solid canvas; hierarchy comes from borders and typography. */
body.belab-erp-ui { --belab-surface: var(--belab-bg); }
.belab-erp-ui :is(#app-view, .content-area, .content-area > header, #mainSidebar, #mobileHeader, #mobileSearchBar, #erpMobileDock, #login-view, #login-view > div, #kpiBar > div, #main-list-container .card, .modal-content) {
    background-color: var(--belab-bg) !important;
    background-image: none !important;
}
.belab-erp-ui #mainSidebar { color: var(--belab-ink) !important; border-right: 1px solid var(--belab-line) !important; box-shadow: none; }
.belab-erp-ui #mainSidebar :is(h1,h2,h3,h4,p,span,strong) { color: inherit; }
.belab-erp-ui #mainSidebar .nav-btn { color: #4f5965 !important; }
.belab-erp-ui #mainSidebar .nav-btn:hover { color: var(--belab-ink) !important; background: transparent !important; border-color: #bac2ca !important; }
.belab-erp-ui #mainSidebar .nav-btn.active { color: var(--belab-ink) !important; background: transparent !important; border-color: var(--belab-ink) !important; box-shadow: none !important; }
.belab-erp-ui #login-view :is(h2,.text-white),
.belab-erp-ui #login-view .input-field { color: var(--belab-ink) !important; }
.belab-erp-ui #login-view .input-field { background: transparent !important; border-color: #aeb7c0 !important; }
.belab-erp-ui #mobileHeader { color: var(--belab-ink) !important; border-color: var(--belab-line) !important; }
.belab-erp-ui .erp-mobile-icon-btn { color: var(--belab-ink) !important; background: transparent !important; border-color: #aeb7c0 !important; }

/* Meeting and messenger: independent heights prevent composer/STT overlap. */
.belab-erp-ui .meeting-workspace { background: var(--belab-bg) !important; }
.belab-erp-ui :is(.meeting-room-panel, .meeting-side-panel, .meeting-participants, .meeting-chat-panel, .meeting-transcript-panel, #chatMessages, #transcriptBox) {
    color: var(--belab-ink) !important;
    background: transparent !important;
    border-color: #cbd2d9 !important;
    box-shadow: none !important;
}
.belab-erp-ui :is(.meeting-room-panel, .meeting-side-panel) { border-radius: 18px !important; }
.belab-erp-ui :is(.meeting-room-panel, .meeting-side-panel) :is(h1,h2,h3,.text-white,.text-slate-100,.text-slate-200) { color: var(--belab-ink) !important; }
.belab-erp-ui :is(.meeting-room-panel, .meeting-side-panel) :is(.text-slate-300,.text-slate-400,.text-slate-500) { color: var(--belab-muted) !important; }
.belab-erp-ui #chatMessages { border: 1px solid #cbd2d9; }
.lab-chat-row { display: flex; width: 100%; min-width: 0; }
.lab-chat-row.is-mine { justify-content: flex-end; }
.lab-chat-row.is-theirs { justify-content: flex-start; }
.lab-chat-bubble { width: fit-content; max-width: min(88%, 34rem); padding: 11px 12px; color: var(--belab-ink); background: transparent; border: 1px solid #b9c2cb; border-radius: 16px; overflow: hidden; }
.lab-chat-row.is-mine .lab-chat-bubble { border-color: #238969; border-bottom-right-radius: 5px; }
.lab-chat-row.is-theirs .lab-chat-bubble { border-bottom-left-radius: 5px; }
.lab-chat-meta { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; color: #4c5966; font-size: 10px; font-weight: 800; }
.lab-chat-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-chat-meta time { flex: 0 0 auto; color: #707b86; font-family: "SFMono-Regular", Consolas, monospace; font-weight: 600; }
.lab-chat-message { color: var(--belab-ink); font-size: .84rem; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.meeting-chat-compose textarea { min-width: 0; }
.meeting-chat-send { min-width: 58px; }

@media (max-width: 1279px) {
    .belab-erp-ui .meeting-room-panel { min-height: 560px !important; }
    .belab-erp-ui #chatMessages { height: 300px !important; }
}

@media (max-width: 560px) {
    .belab-erp-ui .meeting-workspace { padding-inline: 12px !important; }
    .belab-erp-ui :is(.meeting-room-panel, .meeting-side-panel) { padding: 15px !important; }
    .meeting-chat-compose { flex-direction: column; }
    .meeting-chat-send { width: 100%; min-height: 42px; }
    .lab-chat-bubble { max-width: 94%; }
}

#erpMobileDock { display: none; }

@media (max-width: 767px) {
    .belab-erp-ui #login-view { padding: 12px; overflow-y: auto; }
    .belab-erp-ui #login-view > div { padding: 24px 18px !important; }
    .belab-erp-ui #app-view { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .belab-erp-ui #mobileHeader { min-height: 64px; padding: 10px 12px !important; }
    .belab-erp-ui #mobileSearchBar { background: var(--belab-bg) !important; border-color: var(--belab-line) !important; }
    .belab-erp-ui .content-area > header { padding: 16px 14px 0 !important; gap: 12px !important; }
    .belab-erp-ui .content-area > header > div:first-child { gap: 10px !important; }
    .belab-erp-ui #tabTitle { font-size: 1.45rem !important; }
    .belab-erp-ui #tabDesc { max-width: 34rem; line-height: 1.5; }
    .belab-erp-ui #mainHeaderActions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .belab-erp-ui #mainHeaderActions button { width: 100%; min-height: 44px; }
    .belab-erp-ui #collapseControls { align-self: flex-end; }
    .belab-erp-ui #kpiBar {
        display: flex !important;
        gap: 9px !important;
        margin: 0 -14px;
        padding: 2px 14px 10px !important;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }
    .belab-erp-ui #kpiBar > div { min-width: 155px; scroll-snap-align: start; }
    .belab-erp-ui #main-list-container { padding: 10px 14px 24px !important; }
    .belab-erp-ui #mainSidebar { width: min(88vw, 330px) !important; padding: 20px 16px !important; }
    .belab-erp-ui .modal-content { width: calc(100% - 16px) !important; max-height: calc(100dvh - 24px); margin: 12px auto !important; padding: 22px 16px !important; overflow-y: auto; border-radius: 22px !important; }
    .belab-erp-ui #toast { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); left: 12px; min-width: 0; }
    #erpMobileDock {
        position: fixed;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        left: 8px;
        z-index: 3200;
        display: grid;
        grid-template-columns: repeat(5, minmax(0,1fr));
        min-height: 62px;
        padding: 5px;
        background: rgba(24,28,34,.96);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 20px;
        box-shadow: 0 18px 44px rgba(16,20,26,.3);
        backdrop-filter: blur(20px);
    }
    #erpMobileDock button {
        display: flex;
        min-width: 0;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 3px;
        color: #aeb5bf;
        background: transparent;
        border: 0;
        border-radius: 15px;
        font-size: .65rem;
        font-weight: 700;
    }
    #erpMobileDock button i { font-size: .95rem; }
    #erpMobileDock button.active { color: var(--belab-dark); background: var(--belab-mint); }
}

/* Final solid-canvas overrides stay last so mobile utilities cannot repaint it. */
.belab-erp-ui #erpMobileDock {
    color: var(--belab-ink) !important;
    background: var(--belab-bg) !important;
    border-color: var(--belab-line) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.belab-erp-ui #erpMobileDock button { color: #4f5965; }
.belab-erp-ui .meeting-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.belab-erp-ui .meeting-room-panel { min-width: 0; min-height: 660px; }
.belab-erp-ui .meeting-side-panel { min-width: 0; }
.belab-erp-ui #chatMessages { height: 320px; min-height: 260px; }
.belab-erp-ui #transcriptBox { height: 150px; min-height: 120px; }

@media (min-width: 1280px) {
    .belab-erp-ui .meeting-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .belab-erp-ui .meeting-room-panel { grid-column: span 8 / span 8; }
    .belab-erp-ui .meeting-side-panel { grid-column: span 4 / span 4; }
}

html:has(body.belab-erp-ui),
html body.belab-erp-ui {
    color: #ffffff !important;
    background-color: #121712 !important;
    background-image: none !important;
}

/* Intranet: cards and canvas share one charcoal color; text stays white. */
.belab-erp-ui :is(#app-view, .content-area, .content-area > header, #mainSidebar, #mobileHeader, #mobileSearchBar, #erpMobileDock, #login-view, #login-view > div, #kpiBar > div, #main-list-container, #main-list-container .card, .modal-content, .meeting-workspace, .meeting-room-panel, .meeting-side-panel, .meeting-participants, .meeting-chat-panel, .meeting-transcript-panel, #chatMessages, #transcriptBox, table, thead, tbody, tr, th, td) {
    color: #ffffff !important;
    background-color: #121712 !important;
    background-image: none !important;
}
.belab-erp-ui :is(#tabTitle, #tabDesc, #mainSidebar, #mainSidebar .nav-btn, #main-list-container h1, #main-list-container h2, #main-list-container h3, #main-list-container h4, #main-list-container p, #main-list-container label, #main-list-container td, #main-list-container th, .lab-chat-message, .lab-chat-meta, .modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4) {
    color: #ffffff !important;
}
.belab-erp-ui :is(.text-slate-300, .text-slate-400, .text-slate-500, .text-gray-400, .text-gray-500) { color: #c4cbc4 !important; }
.belab-erp-ui :is(#searchInputPC, #searchInputMobile, .input-field, input, select, textarea) {
    color: #ffffff !important;
    background-color: #121712 !important;
    border-color: #566156 !important;
}
.belab-erp-ui :is(input, textarea)::placeholder { color: #aeb7ae !important; opacity: 1; }
.belab-erp-ui #mainSidebar .nav-btn:hover,
.belab-erp-ui #mainSidebar .nav-btn.active {
    color: #ffffff !important;
    background-color: #121712 !important;
    border-color: #8d998d !important;
}
.belab-erp-ui #mainSidebar .nav-btn.active i { color: #ffffff !important; }
.belab-erp-ui #kpiBar > div,
.belab-erp-ui #main-list-container .card,
.belab-erp-ui :is(.meeting-room-panel, .meeting-side-panel, #chatMessages, #transcriptBox) {
    border-color: #394239 !important;
    box-shadow: none !important;
}

html body.belab-erp-ui #app-view #main-list-container .card,
html body.belab-erp-ui #app-view #kpiBar > div,
html body.belab-erp-ui #app-view :is(.meeting-room-panel, .meeting-side-panel, #chatMessages, #transcriptBox) {
    background: #121712 !important;
}
html body.belab-erp-ui #app-view #main-list-container .card *,
html body.belab-erp-ui #app-view #kpiBar > div *,
html body.belab-erp-ui #app-view :is(.meeting-room-panel, .meeting-side-panel, #chatMessages, #transcriptBox) :is(h1,h2,h3,h4,p,span,label,td,th,time,.lab-chat-message,.lab-chat-meta) {
    color: #ffffff !important;
}

html:has(body.community-shell-active),
html:has(body.community-standalone-shell),
html:has(.community-home) {
    background-color: var(--community-bg) !important;
    background-image: none !important;
}