/* Board role UI refresh (hybrid C); presentation state is exposed on <body>. */

/* Student light theme ----------------------------------------------------- */

body.board-page[data-board-role="student"][data-board-theme="light"] {
    --board-mock-bg: #f4f7fb;
    --board-mock-panel: #ffffff;
    --board-mock-panel-2: #f8fafc;
    --board-mock-line: #d8e0eb;
    --board-mock-line-2: #c4d0df;
    --board-mock-text: #162238;
    --board-mock-muted: #657188;
    --board-mock-primary: #3867e8;
    --board-mock-primary-2: #2f5ed5;
    --board-mock-cyan: #0f9892;
    --board-mock-green: #087f5b;
    --board-mock-yellow: #a85f00;
    --board-mock-red: #c63c55;
    --board-mock-shadow: 0 16px 42px rgba(44, 62, 92, 0.1);
    --bg: var(--board-mock-bg);
    --card-bg: var(--board-mock-panel);
    --border: var(--board-mock-line);
    --input-bg: #ffffff;
    --primary: var(--board-mock-primary);
    --primary-rgb: 56, 103, 232;
    --primary-soft: #e8eefc;
    --btn-outline-bg: #ffffff;
    --text-main: var(--board-mock-text);
    --text-sub: var(--board-mock-muted);
    --success: var(--board-mock-green);
    --error: var(--board-mock-red);
    --warning: var(--board-mock-yellow);
    background: var(--board-mock-bg);
    color: var(--board-mock-text);
    color-scheme: light;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .glass-nav.board-redesign-board-header {
    background: transparent;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .home-btn,
body.board-page[data-board-role="student"][data-board-theme="light"] .theme-trigger,
body.board-page[data-board-role="student"][data-board-theme="light"] .board-link-trigger,
body.board-page[data-board-role="student"][data-board-theme="light"] .icon-btn {
    border-color: var(--board-mock-line);
    background: #ffffff;
    color: #24324a;
    box-shadow: 0 6px 18px rgba(44, 62, 92, 0.08);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .home-btn:hover,
body.board-page[data-board-role="student"][data-board-theme="light"] .theme-trigger:hover,
body.board-page[data-board-role="student"][data-board-theme="light"] .board-link-trigger:hover,
body.board-page[data-board-role="student"][data-board-theme="light"] .icon-btn:hover {
    border-color: #9eb3e8;
    background: #f5f8ff;
    color: var(--board-mock-primary);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .premium-title {
    background: none;
    color: var(--board-mock-text);
    -webkit-text-fill-color: currentColor;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .subtitle,
body.board-page[data-board-role="student"][data-board-theme="light"] #currentBoardMeta,
body.board-page[data-board-role="student"][data-board-theme="light"] .board-result-meta,
body.board-page[data-board-role="student"][data-board-theme="light"] .board-sort-wrap label {
    color: var(--board-mock-muted);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .board-toolbar.board-redesign-post-toolbar {
    border-color: var(--board-mock-line);
    background: #ffffff;
    box-shadow: var(--board-mock-shadow);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .board-search-wrap,
body.board-page[data-board-role="student"][data-board-theme="light"] .board-sort-wrap,
body.board-page[data-board-role="student"][data-board-theme="light"] .view-toggle {
    border-color: var(--board-mock-line);
    background: #f7f9fc;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .board-search-wrap input,
body.board-page[data-board-role="student"][data-board-theme="light"] .board-sort-wrap select {
    color: var(--board-mock-text);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .view-toggle button {
    color: var(--board-mock-muted);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .view-toggle button.active {
    background: #e8eefc;
    color: #244dbb;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .board-inline-status-inner,
body.board-page[data-board-role="student"][data-board-theme="light"] .board-policy-meta,
body.board-page[data-board-role="student"][data-board-theme="light"] .board-policy-notice,
body.board-page[data-board-role="student"][data-board-theme="light"] .board-policy-card {
    border-color: var(--board-mock-line);
    background: #ffffff;
    color: var(--board-mock-text);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .post-card {
    border-color: var(--board-mock-line);
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(44, 62, 92, 0.08);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .post-card:hover,
body.board-page[data-board-role="student"][data-board-theme="light"] .post-card:focus-within {
    border-color: #9eb3e8;
    box-shadow: 0 16px 34px rgba(44, 62, 92, 0.13);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .author-avatar {
    border-color: #c8d2df;
    background: #e9eef5;
    color: #24324a;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .post-image-wrap {
    border-color: #d8e0eb;
    background: #f5f7fa;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .post-read-zone:hover,
body.board-page[data-board-role="student"][data-board-theme="light"] .post-read-zone:focus-visible {
    border-color: #b7c7ed;
    background: #f5f8ff;
    box-shadow: inset 0 0 0 1px #e0e8fb;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .post-link-card,
body.board-page[data-board-role="student"][data-board-theme="light"] .attachment-link,
body.board-page[data-board-role="student"][data-board-theme="light"] .comments-section,
body.board-page[data-board-role="student"][data-board-theme="light"] .comment,
body.board-page[data-board-role="student"][data-board-theme="light"] .comment-input,
body.board-page[data-board-role="student"][data-board-theme="light"] .comment-reply-input,
body.board-page[data-board-role="student"][data-board-theme="light"] .board-comment-post-preview {
    border-color: var(--board-mock-line);
    background: #f8fafc;
    color: var(--board-mock-text);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .post-link-card.is-canva-link .post-link-card-icon {
    background: #e8eefc;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .post-actions,
body.board-page[data-board-role="student"][data-board-theme="light"] .reaction-row {
    border-color: #e1e6ee;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .action-btn,
body.board-page[data-board-role="student"][data-board-theme="light"] .comment-submit,
body.board-page[data-board-role="student"][data-board-theme="light"] .comment-reply-submit,
body.board-page[data-board-role="student"][data-board-theme="light"] .comment-reply-cancel,
body.board-page[data-board-role="student"][data-board-theme="light"] .view-comments,
body.board-page[data-board-role="student"][data-board-theme="light"] .post-head-action-btn {
    border-color: var(--board-mock-line);
    background: #f7f9fc;
    color: #24324a;
    box-shadow: none;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .action-btn:hover,
body.board-page[data-board-role="student"][data-board-theme="light"] .view-comments:hover,
body.board-page[data-board-role="student"][data-board-theme="light"] .post-head-action-btn:hover {
    border-color: #9eb3e8;
    background: #edf2ff;
    color: #244dbb;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .reaction-total-badge,
body.board-page[data-board-role="student"][data-board-theme="light"] .comment-summary-head strong,
body.board-page[data-board-role="student"][data-board-theme="light"] .author-own-chip {
    border-color: #c8d5f4;
    background: #edf2ff;
    color: #244dbb;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .fab-btn {
    border-color: #315ed4;
    background: #3867e8;
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(56, 103, 232, 0.28);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .board-comment-drawer,
body.board-page[data-board-role="student"][data-board-theme="light"] .board-comment-drawer-compose-shell {
    border-color: var(--board-mock-line);
    background: #ffffff;
    color: var(--board-mock-text);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .modal.glass-modal,
body.board-page[data-board-role="student"][data-board-theme="light"] .policy-settings-modal,
body.board-page[data-board-role="student"][data-board-theme="light"] .board-admin-detail-modal {
    border-color: var(--board-mock-line);
    background: #ffffff;
    color: var(--board-mock-text);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .write-modal-intro,
body.board-page[data-board-role="student"][data-board-theme="light"] .writer-lock-group,
body.board-page[data-board-role="student"][data-board-theme="light"] .write-attachment-panel,
body.board-page[data-board-role="student"][data-board-theme="light"] .rich-editor-shell,
body.board-page[data-board-role="student"][data-board-theme="light"] .record-form-write-panel,
body.board-page[data-board-role="student"][data-board-theme="light"] .policy-settings-section {
    border-color: var(--board-mock-line);
    background: #f8fafc;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .rich-editor-toolbar,
body.board-page[data-board-role="student"][data-board-theme="light"] .write-attachment-header,
body.board-page[data-board-role="student"][data-board-theme="light"] .write-attachment-content {
    border-color: var(--board-mock-line);
    background: #f4f7fb;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .write-modal textarea,
body.board-page[data-board-role="student"][data-board-theme="light"] .write-modal input[type="text"],
body.board-page[data-board-role="student"][data-board-theme="light"] .write-modal input[type="url"],
body.board-page[data-board-role="student"][data-board-theme="light"] .write-modal input[type="file"],
body.board-page[data-board-role="student"][data-board-theme="light"] .write-modal .record-form-field input[type="date"],
body.board-page[data-board-role="student"][data-board-theme="light"] .write-modal .record-form-field input[type="number"] {
    border-color: var(--board-mock-line);
    background: #ffffff;
    color: var(--board-mock-text);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .rich-editor-btn,
body.board-page[data-board-role="student"][data-board-theme="light"] .rich-editor-color {
    border-color: var(--board-mock-line);
    background: #ffffff;
    color: #36445c;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .write-modal .btn-outline,
body.board-page[data-board-role="student"][data-board-theme="light"] .write-modal .btn-secondary,
body.board-page[data-board-role="student"][data-board-theme="light"] .write-modal .modal-footer .btn-secondary {
    border-color: #c8d2df;
    background: #ffffff;
    color: #24324a;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .write-modal .modal-footer .btn-primary {
    border-color: #315ed4;
    background: #3867e8;
    color: #ffffff;
}

/* Student gallery/detail views ------------------------------------------ */

body.board-page[data-board-role="student"][data-board-view="gallery"] #postContainer {
    width: 100%;
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

body.board-page[data-board-role="student"][data-board-view="detail"] #postContainer {
    width: min(1180px, 100%);
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

body.board-page[data-board-role="student"][data-board-view="detail"] #postContainer .post-card {
    height: auto;
}

body.board-page[data-board-role="student"][data-board-view="detail"] #postContainer .post-content-preview {
    -webkit-line-clamp: 8;
    max-height: calc(1.6em * 8);
}

body.board-page[data-board-role="student"][data-board-view="detail"] #postContainer .post-image-wrap {
    height: 220px;
    max-height: 220px;
}

/* Administrator dark review workspace ---------------------------------- */

body.board-page[data-board-role="admin"] {
    --board-mock-bg: #07111f;
    --board-mock-panel: #101c2d;
    --board-mock-panel-2: #142239;
    --board-mock-line: #273955;
    --board-mock-line-2: #365179;
    --board-mock-text: #f4f7fb;
    --board-mock-muted: #93a4bc;
    --bg: var(--board-mock-bg);
    --card-bg: var(--board-mock-panel);
    --border: var(--board-mock-line);
    --input-bg: #101c2d;
    --text-main: var(--board-mock-text);
    --text-sub: var(--board-mock-muted);
    background: var(--board-mock-bg);
    color: var(--board-mock-text);
    color-scheme: dark;
}

body.board-page[data-board-role="admin"] .board-toolbar.board-redesign-post-toolbar,
body.board-page[data-board-role="admin"] .board-admin-panel,
body.board-page[data-board-role="admin"] .moderation-queue-toolbar,
body.board-page[data-board-role="admin"] .post-card,
body.board-page[data-board-role="admin"] .modal.glass-modal,
body.board-page[data-board-role="admin"] .board-ops-drawer,
body.board-page[data-board-role="admin"] .board-comment-drawer {
    background: #101c2d;
}

body.board-page[data-board-role="admin"] .board-comment-drawer-compose-shell {
    background: #0a1424;
}

body.board-page[data-board-role="admin"] .board-record-review-workspace {
    min-height: 680px;
    margin-bottom: 24px;
    padding: 20px;
    border-color: #304868;
    background: #0e1a2c;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
}

body.board-page[data-board-role="admin"][data-board-view="gallery"] .board-record-review-workspace,
body.board-page[data-board-role="admin"][data-board-view="shelf"] .board-record-review-workspace {
    min-height: 0;
    margin-bottom: 16px;
    padding-block: 16px;
}

body.board-page[data-board-role="admin"][data-board-view="gallery"] .board-record-review-head,
body.board-page[data-board-role="admin"][data-board-view="shelf"] .board-record-review-head {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

body.board-page[data-board-role="admin"][data-board-view="gallery"] #postContainer {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
}

body.board-page[data-board-role="admin"] .board-record-review-head {
    padding-bottom: 16px;
    border-bottom: 1px solid #273955;
}

body.board-page[data-board-role="admin"] .board-record-review-view-switch,
body.board-page[data-board-role="admin"] .board-record-review-search,
body.board-page[data-board-role="admin"] .board-record-review-sort {
    border-color: #304868;
    background: #0a1525;
}

body.board-page[data-board-role="admin"] .board-record-review-filters button,
body.board-page[data-board-role="admin"] .board-record-review-view-switch button {
    border-color: #304868;
    background: #142239;
}

body.board-page[data-board-role="admin"] .board-record-review-filters button.active,
body.board-page[data-board-role="admin"] .board-record-review-view-switch button.active {
    border-color: #2dbcb3;
    background: #143d42;
    color: #b9fff8;
}

body.board-page[data-board-role="admin"] .board-record-review-layout {
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    min-height: 580px;
}

body.board-page[data-board-role="admin"] .board-record-review-students,
body.board-page[data-board-role="admin"] .board-record-review-detail {
    border-color: #2b405e;
    background: #0a1525;
}

body.board-page[data-board-role="admin"] .board-record-review-student-row {
    border-color: #2b405e;
    background: #111f34;
}

body.board-page[data-board-role="admin"] .board-record-review-student-row:hover {
    border-color: #466992;
    background: #152842;
}

body.board-page[data-board-role="admin"] .board-record-review-student-row.active {
    border-color: #2dbcb3;
    background: #143d42;
}

body.board-page[data-board-role="admin"] .board-record-review-detail .board-admin-detail-item,
body.board-page[data-board-role="admin"] .board-record-review-detail .board-admin-record-entry,
body.board-page[data-board-role="admin"] .board-record-review-empty {
    border-color: #2b405e;
    background: #111f34;
}

/* Policy settings: right-side drawer ------------------------------------ */

#policySettingsModal {
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    background: rgba(3, 8, 17, 0.68);
    backdrop-filter: none;
}

#policySettingsModal .policy-settings-modal {
    width: min(640px, 100vw);
    max-width: 640px;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 22px 24px 18px;
    border-width: 0 0 0 1px;
    border-color: #304868;
    border-radius: 24px 0 0 24px;
    background: #101c2d;
    box-shadow: -24px 0 64px rgba(0, 0, 0, 0.34);
    animation: none;
}

#policySettingsModal .policy-settings-header {
    flex: 0 0 auto;
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #273955;
}

#policySettingsModal .policy-settings-nav {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
    padding: 5px;
    border: 1px solid #273955;
    border-radius: 14px;
    background: #0a1525;
}

#policySettingsModal .policy-settings-nav-btn {
    width: 100%;
    min-height: 40px;
    border-color: transparent;
    border-radius: 10px;
    background: transparent;
    color: #93a4bc;
}

#policySettingsModal .policy-settings-nav-btn:hover,
#policySettingsModal .policy-settings-nav-btn.active {
    border-color: #365179;
    background: #1a3150;
    color: #ddebff;
}

#policySettingsModal .policy-settings-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 6px 4px 0;
}

#policySettingsModal .policy-settings-section {
    margin: 0;
    padding: 18px;
    border-color: #2b405e;
    border-radius: 16px;
    background: #111f34;
    box-shadow: none;
    transform: none;
}

#policySettingsModal .policy-settings-section + .policy-settings-section {
    margin-top: 12px;
}

#policySettingsModal .policy-settings-section[hidden] {
    display: none !important;
}

#policySettingsModal .policy-settings-footer {
    flex: 0 0 auto;
    margin-top: 14px;
    padding-top: 14px;
    border-top-color: #273955;
}

#policySettingsModal .policy-settings-footer-actions {
    margin-left: auto;
}

#policySettingsModal .policy-management-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#policySettingsModal .policy-management-action {
    min-width: 0;
    min-height: 88px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 14px;
    border: 1px solid #304868;
    border-radius: 14px;
    background: #142239;
    color: #f4f7fb;
    text-align: left;
    cursor: pointer;
}

#policySettingsModal .policy-management-action:hover,
#policySettingsModal .policy-management-action:focus-visible {
    border-color: #5276a3;
    background: #192c48;
}

#policySettingsModal .policy-management-action > i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #365179;
    border-radius: 10px;
    background: #101c2d;
    color: #9dc8ff;
}

#policySettingsModal .policy-management-action > span,
#policySettingsModal .policy-management-action strong,
#policySettingsModal .policy-management-action small {
    min-width: 0;
    display: block;
}

#policySettingsModal .policy-management-action strong {
    color: #f4f7fb;
    font-size: 13px;
}

#policySettingsModal .policy-management-action small {
    margin-top: 5px;
    color: #93a4bc;
    font-size: 11px;
    line-height: 1.45;
}

#policySettingsModal .policy-management-action.danger {
    border-color: #7a3548;
    background: #2b1722;
}

#policySettingsModal .policy-management-action.danger > i,
#policySettingsModal .policy-management-action.danger strong {
    color: #ff9caf;
}

/* Write modal: primary writing area + supporting options ---------------- */

#writeModal .write-modal {
    width: min(1120px, calc(100vw - 48px));
    max-width: 1120px;
    max-height: min(92dvh, 920px);
    background: var(--card-bg, #101c2d);
}

#writeModal .write-modal .modal-body {
    min-height: 0;
}

#writeModal .write-modal .modal-footer .btn-primary {
    border-color: #4d7bec;
    background: #3867e8;
    color: #ffffff;
}

@media (min-width: 901px) {
    #writeModal .write-modal .modal-body {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr);
        grid-template-rows: auto auto auto;
        gap: 16px 20px;
        align-items: start;
        overflow-y: auto;
    }

    #writeModal .write-modal-intro {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    #writeModal .write-form-stack {
        display: contents;
    }

    #writeModal #postTitleGroup {
        grid-column: 1;
        grid-row: 1;
    }

    #writeModal #recordFormWritePanel {
        grid-column: 1;
        grid-row: 2;
    }

    #writeModal #postContentGroup {
        grid-column: 1;
        grid-row: 2;
    }

    #writeModal .modal-body:has(#recordFormWritePanel:not([hidden])) #postContentGroup {
        grid-row: 3;
    }

    #writeModal .writer-lock-group {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
    }

    #writeModal #writeAttachmentPanel {
        grid-column: 2;
        grid-row: 3;
        align-self: start;
    }

    #writeModal.is-assignment-edit .write-modal .modal-body,
    #writeModal .write-modal.is-assignment-edit .modal-body {
        display: block;
    }

    #writeModal.is-assignment-edit .write-form-stack,
    #writeModal .write-modal.is-assignment-edit .write-form-stack {
        display: flex;
    }

    #writeModal.is-assignment-edit .write-modal-intro,
    #writeModal .write-modal.is-assignment-edit .write-modal-intro {
        margin-bottom: 14px;
    }
}

/* Spotlight: bounded 65/35 two-pane reader ------------------------------ */

.board-page .spotlight-overlay {
    padding: 24px;
    background: rgba(3, 8, 17, 0.86);
    backdrop-filter: none;
}

.board-page .spotlight-content {
    width: min(1320px, calc(100vw - 96px));
    max-width: 1320px;
    height: min(88dvh, 840px);
    max-height: 840px;
    display: grid;
    grid-template-columns: minmax(0, 65fr) minmax(320px, 35fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid #2b405e;
    border-radius: 24px;
    background: #081220;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.44);
}

.board-page .spotlight-media-shell {
    min-width: 0;
    min-height: 0;
    padding: 22px;
    overflow: hidden;
    background: #060d18;
}

.board-page .spotlight-media {
    flex: 1 1 auto;
    min-height: 0;
    align-items: center;
    overflow: hidden;
}

.board-page .spotlight-media img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: none;
}

.board-page .spotlight-gallery {
    flex: 0 0 auto;
    min-height: 0;
}

.board-page .spotlight-gallery-thumb {
    border-color: #304868;
    background: #101c2d;
}

.board-page .spotlight-nav {
    width: 44px;
    height: 44px;
    border: 1px solid #3b5271;
    background: #16253b;
}

.board-page .spotlight-nav:hover {
    background: #254b82;
}

.board-page .spotlight-nav.prev {
    left: 16px;
}

.board-page .spotlight-nav.next {
    right: 16px;
}

.board-page .spotlight-info {
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-left: 1px solid #2b405e;
    border-radius: 0;
    background: #111f34;
    color: #f4f7fb;
}

.board-page .spotlight-text-scroll {
    max-height: none;
    overflow: visible;
    border-color: #304868;
    background: #0a1525;
}

.board-page .spotlight-comments-section {
    overflow: visible;
    border-color: #304868;
    background: #0a1525;
}

.board-page .spotlight-comments-list {
    max-height: none;
    overflow: visible;
}

.board-page .spotlight-comment-composer-host {
    border-top-color: #304868;
    background: #0d1a2c;
}

.board-page .spotlight-return-btn {
    background: #16253b;
}

.board-page .spotlight-post-title {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 18px;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-overlay {
    background: rgba(15, 23, 42, 0.36);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-content {
    border-color: var(--board-mock-line);
    background: #ffffff;
    box-shadow: 0 28px 72px rgba(44, 62, 92, 0.22);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-media-shell {
    background: #eef2f7;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-gallery-thumb {
    border-color: #c8d2df;
    background: #ffffff;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-gallery-thumb:hover {
    border-color: #9eb3e8;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-nav,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-close {
    border-color: #c8d2df;
    background: rgba(255, 255, 255, 0.96);
    color: #24324a;
    box-shadow: 0 10px 26px rgba(44, 62, 92, 0.18);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-nav:hover,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-close:hover {
    border-color: #9eb3e8;
    background: #e8eefc;
    color: #244dbb;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-info {
    border-left-color: var(--board-mock-line);
    background: #ffffff;
    color: var(--board-mock-text);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-info .author-name,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-post-title,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-text-content,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-comment-body,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-comments-head h3 {
    color: var(--board-mock-text);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-text-content a,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-text-content .inline-safe-link,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-comment-author {
    color: #244dbb;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-text-scroll,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-comments-section {
    border-color: var(--board-mock-line);
    background: #f8fafc;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-reaction-actions,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-comments-head,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-comment-composer-host {
    border-color: var(--board-mock-line);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-comments-count,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-reaction-actions .reaction-total-badge {
    border-color: #c8d5f4;
    background: #edf2ff;
    color: #244dbb;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-comments-list .comment,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-comment {
    border-color: var(--board-mock-line);
    background: #ffffff;
    color: var(--board-mock-text);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-comments-list .comment.is-reply,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-comment.is-reply {
    background: #f1f5f9;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-comment-composer-host {
    background: #ffffff;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-comment-reply-target,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-comment-empty,
body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-info .comment-inline-guide {
    color: var(--board-mock-muted);
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-info .board-comment-compose-open-btn {
    border-color: #b7c7ed;
    background: #edf2ff;
    color: #244dbb;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-return-btn {
    border-color: #c8d2df;
    background: #ffffff;
    color: #24324a;
}

body.board-page[data-board-role="student"][data-board-theme="light"] .spotlight-return-btn:hover {
    border-color: #9eb3e8;
    background: #edf2ff;
    color: #244dbb;
}

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

@media (min-width: 901px) and (max-width: 1200px) {
    body.board-page[data-board-role="student"][data-board-view="gallery"] #postContainer {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 761px) and (max-width: 900px) {
    body.board-page[data-board-role="student"][data-board-view="gallery"] #postContainer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    body.board-page[data-board-role="admin"] .board-record-review-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    #policySettingsModal .policy-settings-modal {
        width: min(100vw, 640px);
        padding: 18px 16px 14px;
        border-radius: 20px 0 0 20px;
    }

    #writeModal .write-modal {
        width: min(96vw, 760px);
        max-height: 92dvh;
    }

    #writeModal .write-modal .modal-body {
        display: block;
    }

    #writeModal .write-modal-intro {
        margin-bottom: 14px;
    }

    #writeModal .write-form-stack {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    #writeModal #postTitleGroup,
    #writeModal #recordFormWritePanel,
    #writeModal #postContentGroup,
    #writeModal .writer-lock-group,
    #writeModal #writeAttachmentPanel {
        grid-column: auto;
        grid-row: auto;
    }

    .board-page .spotlight-overlay {
        align-items: flex-end;
        padding: 12px 12px 0;
    }

    .board-page .spotlight-content {
        width: 100%;
        height: 96dvh;
        max-height: 96dvh;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(260px, 42dvh) minmax(0, 1fr);
        border-radius: 22px 22px 0 0;
    }

    .board-page .spotlight-media-shell {
        padding: 14px;
    }

    .board-page .spotlight-info {
        height: auto;
        padding: 18px;
        border-top: 1px solid #2b405e;
        border-left: 0;
    }

    .board-page .spotlight-close {
        top: 22px;
        right: 22px;
    }
}

@media (max-width: 760px) {
    body.board-page[data-board-role="admin"][data-board-view="gallery"] #postContainer,
    body.board-page[data-board-role="student"][data-board-view="gallery"] #postContainer,
    body.board-page[data-board-role="student"][data-board-view="detail"] #postContainer {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #policySettingsModal .policy-settings-modal {
        width: 100vw;
        max-width: none;
        border-left: 0;
        border-radius: 0;
    }

    #policySettingsModal .policy-settings-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #policySettingsModal .policy-settings-nav-btn {
        padding: 8px 6px;
        font-size: 11px;
    }

    #policySettingsModal .policy-management-actions {
        grid-template-columns: 1fr;
    }

    .board-page .spotlight-overlay {
        padding-right: 0;
        padding-left: 0;
    }

    .board-page .spotlight-content {
        border-right: 0;
        border-left: 0;
        border-radius: 20px 20px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #policySettingsModal .policy-settings-modal,
    #writeModal .write-modal,
    .board-page .spotlight-content,
    .board-page .post-card {
        animation: none;
        transition: none;
    }
}