/* ============================================================
   学务通 · 纸张编辑风（edu-paper.css）
   ------------------------------------------------------------
   与「课程风采」展示页共用一套视觉语言：
     暖纸底 + 墨色 + 赭石强调 + 发丝线 + 等宽数字 + 大字号标题
   本文件只做视觉层，不改任何业务结构与交互逻辑；
   加载顺序在所有主题样式之后，覆盖默认的蓝/金/圆角语言。
   ============================================================ */

/* ============================================================
   1. 主题令牌：把默认（minimal）主题拉到纸张编辑风
   ============================================================ */
:root,
[data-theme="minimal"] {
    --paper-0: #F6F2EA;
    --paper-1: #FBF8F2;
    --paper-2: #F1EBDF;
    --paper-3: #E8E0D1;
    --ink-0: #17130F;
    --ink-1: #3A332B;
    --ink-2: #786D5F;
    --ink-3: #A29786;
    --line-0: #DED5C5;
    --line-1: #E9E2D4;
    --brick: #BC4A2B;
    --brick-2: #9C3A20;
    --brick-soft: #F2DFD5;

    --color-bg: var(--paper-0);
    --color-bg-deep: #EFE8DB;
    --color-surface: var(--paper-1);
    --color-surface-2: var(--paper-2);
    --color-ink: var(--ink-0);
    --color-ink-soft: var(--ink-1);
    --color-text: var(--ink-0);
    --color-text-secondary: var(--ink-1);
    --color-text-muted: var(--ink-2);
    --color-border: var(--line-0);
    --color-border-light: var(--line-1);

    --color-primary: var(--ink-0);
    --color-primary-light: var(--ink-1);
    --color-primary-dark: #000000;
    --color-accent: var(--brick);
    --color-accent-soft: var(--brick-soft);
    --color-gold: #A9862F;
    --color-gold-soft: #F3EBD8;

    --color-success: #4C6B45;
    --color-success-light: #6D8A65;
    --color-success-soft: #E8EFE3;
    --color-warning: #9A7A2E;
    --color-warning-light: #B99A4F;
    --color-warning-soft: #F4ECD8;
    --color-danger: #A8482B;
    --color-danger-light: #C06B50;
    --color-danger-soft: #F6E4DD;
    --color-info: #3F5A6B;
    --color-info-light: #5F7C8E;
    --color-info-soft: #E7EDF1;

    --navbar-bg: rgba(246, 242, 234, .94);
    --navbar-border: var(--line-0);
    --navbar-text: var(--ink-0);
    --navbar-text-soft: rgba(23, 19, 15, .64);
    --navbar-hover: rgba(23, 19, 15, .05);
    --navbar-active: rgba(188, 74, 43, .10);

    --shadow-sm: 0 1px 1px rgba(23, 19, 15, .04);
    --shadow-md: 0 1px 2px rgba(23, 19, 15, .05), 0 18px 40px -32px rgba(23, 19, 15, .45);
    --shadow-lg: 0 2px 4px rgba(23, 19, 15, .06), 0 34px 70px -44px rgba(23, 19, 15, .55);

    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;

    --btn-primary-shadow: none;
    --login-bg: linear-gradient(160deg, #EFE8DB 0%, #F6F2EA 48%, #E9DFCE 100%);
    --login-accent: var(--brick);
}

/* 另外两套主题也归一到纸张编辑风（保留切换能力，视觉语言一致） */
[data-theme="soft"],
[data-theme="vibrant"] {
    --color-bg: var(--paper-0);
    --color-bg-deep: #EFE8DB;
    --color-surface: var(--paper-1);
    --color-surface-2: var(--paper-2);
    --color-ink: var(--ink-0);
    --color-ink-soft: var(--ink-1);
    --color-text: var(--ink-0);
    --color-text-secondary: var(--ink-1);
    --color-text-muted: var(--ink-2);
    --color-border: var(--line-0);
    --color-border-light: var(--line-1);
    --color-primary: var(--ink-0);
    --color-primary-light: var(--ink-1);
    --color-primary-dark: #000000;
    --color-accent: var(--brick);
    --color-accent-soft: var(--brick-soft);
    --color-gold: #A9862F;
    --color-gold-soft: #F3EBD8;
    --color-success: #4C6B45;
    --color-success-light: #6D8A65;
    --color-success-soft: #E8EFE3;
    --color-warning: #9A7A2E;
    --color-warning-light: #B99A4F;
    --color-warning-soft: #F4ECD8;
    --color-danger: #A8482B;
    --color-danger-light: #C06B50;
    --color-danger-soft: #F6E4DD;
    --color-info: #3F5A6B;
    --color-info-light: #5F7C8E;
    --color-info-soft: #E7EDF1;
    --navbar-bg: rgba(246, 242, 234, .94);
    --navbar-border: var(--line-0);
    --navbar-text: var(--ink-0);
    --navbar-text-soft: rgba(23, 19, 15, .64);
    --navbar-hover: rgba(23, 19, 15, .05);
    --navbar-active: rgba(188, 74, 43, .10);
    --shadow-sm: 0 1px 1px rgba(23, 19, 15, .04);
    --shadow-md: 0 1px 2px rgba(23, 19, 15, .05), 0 18px 40px -32px rgba(23, 19, 15, .45);
    --shadow-lg: 0 2px 4px rgba(23, 19, 15, .06), 0 34px 70px -44px rgba(23, 19, 15, .55);
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --btn-primary-shadow: none;
    --login-bg: linear-gradient(160deg, #EFE8DB 0%, #F6F2EA 48%, #E9DFCE 100%);
    --login-accent: var(--brick);
}

/* 暗色：暖黑，不用冷灰 */
[data-mode="dark"] {
    --paper-0: #14110E;
    --paper-1: #1C1814;
    --paper-2: #241F19;
    --paper-3: #2E2820;
    --ink-0: #F3EEE5;
    --ink-1: #CFC6B9;
    --ink-2: #9A9083;
    --ink-3: #6E655A;
    --line-0: #352E25;
    --line-1: #2A241D;
    --brick: #E07A55;
    --brick-2: #C9613C;
    --brick-soft: #33211A;

    --color-bg: var(--paper-0);
    --color-bg-deep: #0F0D0A;
    --color-surface: var(--paper-1);
    --color-surface-2: var(--paper-2);
    --color-ink: var(--ink-0);
    --color-ink-soft: var(--ink-1);
    --color-text: var(--ink-0);
    --color-text-secondary: var(--ink-1);
    --color-text-muted: var(--ink-2);
    --color-border: var(--line-0);
    --color-border-light: var(--line-1);
    --color-primary: var(--ink-0);
    --color-primary-light: var(--ink-1);
    --color-primary-dark: #FFFFFF;
    --color-accent: var(--brick);
    --color-accent-soft: var(--brick-soft);
    --color-gold: #C8A254;
    --color-gold-soft: #332B1B;
    --navbar-bg: rgba(20, 17, 14, .94);
    --navbar-border: var(--line-0);
    --navbar-text: var(--ink-0);
    --navbar-text-soft: rgba(243, 238, 229, .64);
    --navbar-hover: rgba(243, 238, 229, .06);
    --navbar-active: rgba(224, 122, 85, .14);
}

/* ============================================================
   2. 画布：纸张颗粒 + 暖光
   ============================================================ */
body {
    background-color: var(--color-bg);
}

#app {
    position: relative;
    z-index: 1;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .55;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 38% at 88% -6%, rgba(188, 74, 43, .07), transparent 62%),
        radial-gradient(46% 36% at 0% 102%, rgba(169, 134, 47, .05), transparent 60%);
}

[data-mode="dark"] body::before { opacity: .35; mix-blend-mode: screen; }
[data-mode="dark"] body::after {
    background:
        radial-gradient(58% 38% at 88% -6%, rgba(224, 122, 85, .10), transparent 62%),
        radial-gradient(46% 36% at 0% 102%, rgba(200, 162, 84, .05), transparent 60%);
}

::selection { background: var(--brick); color: #fff; }
::-webkit-scrollbar-thumb { background: var(--line-0); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-2); }

/* ============================================================
   3. 左侧导航 / 顶栏
   ============================================================ */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.brand-mark {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink);
}

.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-mark .bm-accent { fill: var(--brick); }
.brand-mark .bm-line { stroke: currentColor; }

.brand-lockup {
    display: flex;
    flex-direction: column;
    line-height: 1.16;
    min-width: 0;
}

.brand-lockup h1 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    letter-spacing: .01em;
    line-height: 1.18;
    color: var(--navbar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-lockup .nav-subtitle,
.brand-lockup i {
    display: block;
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--navbar-text-soft);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.nav-side .navbar {
    background: rgba(246, 242, 234, .96);
    border-right: 1px solid var(--line-0);
    box-shadow: none;
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    padding-bottom: 14px;
}

[data-mode="dark"] body.nav-side .navbar {
    background: rgba(20, 17, 14, .96);
}

body.nav-side .nav-brand {
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--line-1);
    margin-bottom: 8px;
    gap: 11px;
}

body.nav-side .nav-brand h1 {
    font-size: 16px;
    margin: 0;
}

body.nav-side .nav-menu {
    padding: 4px 10px 10px;
    gap: 1px;
}

body.nav-side .nav-menu > .nav-link,
body.nav-side .nav-dropdown .nav-link {
    position: relative;
    padding: 9px 12px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 450;
    letter-spacing: .01em;
    color: var(--ink-1);
    transition: background .18s ease, color .18s ease, padding .18s ease;
}

body.nav-side .nav-menu > .nav-link:hover,
body.nav-side .nav-dropdown .nav-link:hover {
    background: var(--paper-2);
    color: var(--ink-0);
}

body.nav-side .nav-menu > .nav-link.active,
body.nav-side .nav-dropdown .nav-link.active {
    background: transparent;
    color: var(--brick);
    font-weight: 600;
    padding-left: 18px;
}

body.nav-side .nav-menu > .nav-link.active::before,
body.nav-side .nav-dropdown .nav-link.active::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 9px;
    bottom: 9px;
    width: 2px;
    background: var(--brick);
}

body.nav-side .nav-group-label {
    padding: 8px 12px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--ink-2);
    text-transform: uppercase;
}

body.nav-side .nav-group-label:hover,
body.nav-side .nav-group.open .nav-group-label {
    background: transparent;
    color: var(--ink-0);
}

body.nav-side .nav-group-label::after {
    border-color: var(--ink-3);
}

body.nav-side .nav-dropdown {
    padding: 0 0 4px 8px;
    margin-left: 4px;
    border-left: 1px solid var(--line-1);
}

body.nav-side .nav-dropdown .nav-link {
    font-size: 12.8px;
    color: var(--ink-2);
}

body.nav-side #nav-home-btn {
    background: transparent;
    border: 1px solid var(--line-0);
    color: var(--ink-1);
    border-radius: 3px;
}

body.nav-side #nav-home-btn:hover {
    background: var(--ink-0);
    border-color: var(--ink-0);
    color: var(--paper-1);
}

body.nav-side .nav-hamburger span {
    background: var(--ink-2);
}

body.nav-side .nav-app-dl {
    margin: 0 14px 10px;
    justify-content: center;
    border: 1px solid var(--line-0);
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 11.5px;
    letter-spacing: .04em;
    color: var(--ink-2);
    background: transparent;
}

body.nav-side .nav-app-dl:hover {
    background: var(--ink-0);
    border-color: var(--ink-0);
    color: var(--paper-1);
}

body.nav-side .drawer-user {
    border-top: 1px solid var(--line-1);
    margin-top: 12px;
    padding: 12px 12px 10px;
}

body.nav-side .drawer-user-avatar {
    background: var(--ink-0);
    color: var(--paper-1);
    border-radius: 2px;
    font-weight: 600;
}

body.nav-side .drawer-user-name { color: var(--ink-0); font-weight: 600; }
body.nav-side .drawer-user-role { color: var(--ink-2); letter-spacing: .04em; }

body.nav-side .drawer-user-actions a,
body.nav-side .drawer-user-actions button {
    background: transparent;
    border: 1px solid var(--line-0);
    border-radius: 999px;
    color: var(--ink-1);
    padding: 6px 8px;
}

body.nav-side .drawer-user-actions a:hover,
body.nav-side .drawer-user-actions button:hover {
    background: var(--ink-0);
    border-color: var(--ink-0);
    color: var(--paper-1);
}

body.nav-side #page-container {
    padding: 26px 34px 60px;
    max-width: 1450px;
}

/* 顶部导航（移动端 / 非侧栏模式） */
.navbar {
    border-bottom: 1px solid var(--navbar-border);
    box-shadow: none;
}

.nav-link {
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: .01em;
}

.nav-link.active {
    background: var(--navbar-active);
    color: var(--ink-0);
}

.nav-dropdown {
    border-radius: 4px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line-0);
}

/* 课程风采入口：细线胶囊 + 外链箭头 */
a.nav-link[href="/show"],
a.nav-link[href="#/showcase"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

a.nav-link[href="/show"]::after {
    content: "↗";
    font-size: 11px;
    opacity: .6;
}

/* ============================================================
   4. 页面标题与内容层级
   ============================================================ */
.page-header {
    margin: 2px 0 22px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--line-1);
    align-items: flex-end;
}

.page-header h2 {
    font-size: 29px;
    font-weight: 650;
    letter-spacing: -.028em;
    line-height: 1.16;
    gap: 13px;
}

.page-header h2::before {
    width: 3px;
    height: 24px;
    border-radius: 0;
    background: var(--brick);
}

.page-header p {
    font-size: 12.5px;
    letter-spacing: .02em;
    color: var(--ink-2);
    margin-top: 7px;
}

.page-title {
    font-size: 27px;
    font-weight: 650;
    letter-spacing: -.026em;
    padding-left: 13px;
    border-left: 3px solid var(--brick);
}

.page-subtitle {
    color: var(--ink-2);
    font-size: 12.5px;
}

.page-content { padding: 0 0 34px; }

/* ============================================================
   5. 卡片 / 区块
   ============================================================ */
.card {
    background: var(--color-surface);
    border: 1px solid var(--line-0);
    border-radius: 4px;
    box-shadow: none;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.card:hover {
    transform: none;
    border-color: rgba(23, 19, 15, .26);
    box-shadow: 0 18px 40px -38px rgba(23, 19, 15, .5);
}

[data-mode="dark"] .card:hover {
    border-color: rgba(243, 238, 229, .26);
}

.card-header {
    border-bottom: 1px solid var(--line-1);
    background: transparent;
}

.card-title {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--ink-0);
}

.card-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 8px;
    vertical-align: 2px;
    background: var(--brick);
}

.section-head {
    border-bottom: 1px solid var(--line-1);
    padding-bottom: 10px;
}

.section-head h3 {
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    border-left: 0 !important;
    padding-left: 0 !important;
    color: var(--ink-1);
}

.toolbar-card {
    border-radius: 4px;
    border: 1px solid var(--line-0);
    background: var(--color-surface);
    box-shadow: none;
}

/* ============================================================
   6. 统计卡
   ============================================================ */
.stat-card {
    border-radius: 4px;
    background: var(--color-surface);
    border: 1px solid var(--line-0);
    box-shadow: none;
    min-height: 108px;
}

.stat-card::before {
    background: var(--ink-0) !important;
    height: 2px !important;
    opacity: .85 !important;
    border-radius: 0 !important;
}

.stat-card::after { display: none !important; }

.stat-card:hover {
    transform: none;
    border-color: rgba(23, 19, 15, .24);
    box-shadow: 0 18px 40px -38px rgba(23, 19, 15, .5);
}

.stat-card .stat-icon {
    border-radius: 2px !important;
    background: var(--ink-0) !important;
    color: var(--paper-1) !important;
}

.stat-card .stat-icon svg { stroke: var(--paper-1) !important; }

.stat-card .stat-value,
.stat-value {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 500;
    letter-spacing: -.02em;
}

.stat-card .stat-label,
.stat-label {
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-2) !important;
}

/* 统计卡只留数字与标签，去掉彩色图标，层级更干净 */
.stat-card .stat-icon { display: none !important; }

/* 统计卡内部的小色块（t-blue/t-green…）统一降噪 */
.stat-card .t-blue,
.stat-card .t-green,
.stat-card .t-amber,
.stat-card .t-rose,
.stat-card .t-accent {
    background: var(--paper-2) !important;
    color: var(--ink-1) !important;
}

/* ============================================================
   7. 按钮
   ============================================================ */
.btn {
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: .01em;
    box-shadow: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--ink-0);
    color: var(--paper-1);
    border-color: var(--ink-0);
    box-shadow: none;
}

.btn-primary:hover {
    background: #2B241D;
    border-color: #2B241D;
    color: #fff;
}

[data-mode="dark"] .btn-primary {
    background: var(--ink-0);
    color: #14110E;
}

[data-mode="dark"] .btn-primary:hover { background: #FFFFFF; color: #14110E; }

.btn-outline {
    border-color: var(--line-0);
    color: var(--ink-1);
    background: transparent;
}

.btn-outline:hover {
    border-color: var(--ink-0);
    background: var(--ink-0);
    color: var(--paper-1);
}

.btn-accent {
    background: var(--brick);
    border-color: var(--brick);
    color: #fff;
}

.btn-accent:hover { background: var(--brick-2); border-color: var(--brick-2); }

.btn-danger {
    background: var(--color-danger-soft);
    border-color: rgba(168, 72, 43, .25);
    color: var(--color-danger);
}

.btn-danger:hover { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }

.btn-sm { border-radius: 999px; font-size: 11.5px; }

.btn-link {
    border-radius: 0;
    border-bottom: 1px solid transparent;
    padding: 0;
}

.btn-link:hover { border-bottom-color: currentColor; }

/* ============================================================
   8. 表单
   ============================================================ */
.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
    border-radius: 3px;
    border: 1px solid var(--line-0);
    background: #FCFAF5;
    color: var(--ink-0);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

[data-mode="dark"] .form-input,
[data-mode="dark"] .form-select,
[data-mode="dark"] .form-textarea,
[data-mode="dark"] input[type="text"],
[data-mode="dark"] input[type="password"],
[data-mode="dark"] input[type="email"],
[data-mode="dark"] input[type="tel"],
[data-mode="dark"] input[type="number"],
[data-mode="dark"] input[type="date"],
[data-mode="dark"] select,
[data-mode="dark"] textarea {
    background: #211C16;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--ink-0);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(188, 74, 43, .12);
}

[data-mode="dark"] .form-input:focus,
[data-mode="dark"] .form-select:focus,
[data-mode="dark"] .form-textarea:focus,
[data-mode="dark"] input:focus,
[data-mode="dark"] select:focus,
[data-mode="dark"] textarea:focus {
    background: #1C1814;
    box-shadow: 0 0 0 3px rgba(224, 122, 85, .18);
}

.form-label {
    font-size: 11.5px;
    letter-spacing: .08em;
    color: var(--ink-2);
}

/* ============================================================
   9. 表格
   ============================================================ */
.data-table table,
table {
    border-collapse: collapse;
}

.data-table th,
table th {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line-0);
    background: transparent;
}

.data-table td,
table td {
    font-size: 12.8px;
    border-bottom: 1px solid var(--line-1);
    color: var(--ink-1);
}

.data-table tbody tr:hover td,
table tbody tr:hover td {
    background: var(--paper-2);
}

.data-table tbody tr:nth-child(even) td,
table tbody tr:nth-child(even) td {
    background: transparent;
}

/* ============================================================
   10. 徽章 / 标签 / 页签
   ============================================================ */
.badge {
    border-radius: 999px;
    font-size: 10.5px;
    letter-spacing: .04em;
    border: 1px solid transparent;
}

.badge-success { border-color: rgba(76, 107, 69, .22); }
.badge-warning { border-color: rgba(154, 122, 46, .24); }
.badge-danger { border-color: rgba(168, 72, 43, .22); }
.badge-info { border-color: rgba(63, 90, 107, .22); }

.meta-chip,
.filter-chip,
.chip {
    border-radius: 999px;
    border: 1px solid var(--line-0);
    background: transparent;
    color: var(--ink-1);
}

.filter-chip.active,
.chip.active {
    background: var(--ink-0);
    border-color: var(--ink-0);
    color: var(--paper-1);
}

.tab-bar {
    border-bottom: 1px solid var(--line-0);
    gap: 22px;
}

.tab,
.tab-item {
    font-size: 13px;
    color: var(--ink-2);
    border-radius: 0;
}

.tab.active,
.tab-item.active {
    color: var(--ink-0);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--ink-0);
}

/* ============================================================
   11. 弹窗 / 抽屉
   ============================================================ */
.modal-overlay {
    background: rgba(14, 11, 8, .48);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal {
    border-radius: 4px;
    border: 1px solid var(--line-0);
    box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .55);
    background: var(--paper-1);
}

.modal-header {
    border-bottom: 1px solid var(--line-1);
}

.modal-title {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.01em;
}

.modal-footer {
    border-top: 1px solid var(--line-1);
}

/* ============================================================
   12. 空状态 / 加载
   ============================================================ */
.empty-state {
    border: 1px dashed var(--line-0);
    border-radius: 4px;
    color: var(--ink-2);
    background: rgba(255, 255, 255, .22);
}

[data-mode="dark"] .empty-state { background: rgba(255, 255, 255, .02); }

.loading-spinner {
    border-color: var(--line-0);
    border-top-color: var(--brick);
}

/* ============================================================
   13. 首页落地页（沿用现有结构，只统一气质）
   ============================================================ */
.lp-hero {
    background:
        radial-gradient(70% 50% at 82% -8%, rgba(188, 74, 43, .09), transparent 62%),
        linear-gradient(104deg, #F7F3EC 0%, #F1EADF 52%, #F8F4EC 100%);
}

[data-mode="dark"] .lp-hero {
    background:
        radial-gradient(70% 50% at 82% -8%, rgba(224, 122, 85, .10), transparent 62%),
        linear-gradient(104deg, #16120E 0%, #1B1611 52%, #14110E 100%);
}

.lp-grad {
    background: linear-gradient(92deg, var(--brick) 0%, #D98B62 58%, var(--color-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lp-hero-cta { border-radius: 999px; }

.lp-hero-cta-ghost {
    border-radius: 999px;
    border: 1px solid var(--line-0);
}

.lp-feature-card,
.lp-about-item,
.lp-role-card {
    border-radius: 3px;
    border: 1px solid var(--line-0);
    background: var(--paper-1);
}

.lp-feature-card:hover {
    border-color: rgba(23, 19, 15, .26);
    transform: translateY(-2px);
}

.lp-tag {
    border: 1px solid var(--line-0);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-hero-metrics { border-top: 1px solid var(--line-0); }

/* ============================================================
   14. 移动端
   ============================================================ */
@media (max-width: 768px) {
    body::before { opacity: .4; }

    body.nav-side #page-container {
        padding: 16px 14px 84px;
    }

    .page-header {
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    .page-header h2 { font-size: 23px; }
    .page-header h2::before { height: 20px; }

    .card { border-radius: 3px; }
    .stat-card { min-height: 92px; }

    .mobile-tabbar {
        background: rgba(246, 242, 234, .96);
        border-top: 1px solid var(--line-0);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    [data-mode="dark"] .mobile-tabbar { background: rgba(20, 17, 14, .96); }

    body.nav-side .navbar {
        background: var(--paper-0);
    }

    body.nav-side .nav-brand {
        padding: 14px 14px 10px;
    }

    .brand-mark { width: 32px; height: 32px; }
    .brand-lockup h1 { font-size: 15px; }
}

/* 动效收敛：尊重系统减弱动态 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   15. 课程风采管理（SPA 内嵌）
   ============================================================ */
.showcase-admin-frame {
    width: 100%;
    height: calc(100vh - 210px);
    min-height: 620px;
    border: 1px solid var(--line-0);
    border-radius: 4px;
    overflow: hidden;
    background: var(--paper-0);
}

.showcase-admin-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 768px) {
    .showcase-admin-frame {
        height: calc(100vh - 190px);
        min-height: 520px;
    }
}


/* ============================================================
   16. 教案文件夹 / 登录页 logo / 移动端品牌
   ============================================================ */
.lp-bubble {
    border-radius: 3px;
    box-shadow: none;
}

.lp-bubble-folder {
    background: var(--color-surface);
    border-color: var(--line-0);
}

.lp-bubble-folder::before {
    width: 28px;
    height: 8px;
    border-radius: 0 0 2px 2px;
    background: var(--brick);
    box-shadow: none;
}

.lp-bubble-folder:hover {
    background: var(--color-surface-2);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -36px rgba(23, 19, 15, .5);
    border-color: rgba(23, 19, 15, .26);
}

.lp-bubble-plan {
    background: var(--color-surface);
    border-color: var(--line-0);
}

.lp-bubble-plan::after {
    background: linear-gradient(225deg, transparent 50%, var(--line-1) 51%);
}

.lp-bubble-plan:hover {
    background: var(--color-surface-2);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -36px rgba(23, 19, 15, .5);
}

.lp-bubble-icon-plan { color: var(--ink-1); }

.lb-mark {
    border-radius: 3px;
    background: var(--ink-0);
}

.lb-mark svg {
    width: 26px;
    height: 26px;
    display: block;
}

@media (max-width: 768px) {
    .nav-app-dl { display: none !important; }

    .nav-brand {
        flex: 0 1 auto;
        min-width: 0;
        gap: 7px;
    }

    .nav-brand .brand-lockup .nav-subtitle { display: none; }

    .nav-brand .brand-lockup h1,
    body.nav-side .nav-brand .brand-lockup h1 {
        font-size: 0 !important;
        line-height: 1;
    }

    .nav-brand .brand-lockup h1::after {
        content: "学务通";
        font-size: 15px !important;
        letter-spacing: .02em;
    }

    .brand-mark { width: 28px; height: 28px; }
}


/* ============================================================
   17. 首页 hero 与快捷入口（家长 / 管理员工作台）
   ============================================================ */
.hero-panel {
    border-radius: 4px;
    border: 1px solid var(--line-0);
    background: var(--color-surface);
    box-shadow: none;
}

.hero-panel::before,
.hero-panel::after { display: none; }

.hero-avatar {
    border-radius: 2px;
    background: var(--ink-0);
    box-shadow: none;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.hero-greet {
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -.025em;
}

.hero-role-badge {
    border-radius: 999px;
    background: var(--paper-2);
    color: var(--ink-1);
    border: 1px solid var(--line-0);
}

.hero-cta .btn-primary {
    background: var(--ink-0) !important;
    color: var(--paper-1) !important;
    border-radius: 999px !important;
}

.quick-item {
    border-radius: 3px;
    background: var(--color-surface);
    border: 1px solid var(--line-0);
}

.quick-item:hover {
    transform: none;
    border-color: rgba(23, 19, 15, .26);
    box-shadow: 0 16px 34px -32px rgba(23, 19, 15, .45);
}

.quick-item .qi-icon {
    border-radius: 2px;
    background: var(--paper-2);
    color: var(--ink-1);
}

.quick-item:hover .qi-icon {
    background: var(--brick-soft);
    color: var(--brick);
}

/* ============================================================
   18. 家长端 soft 主题：去掉蜡笔手绘装饰，回归纸张编辑风
   ============================================================ */
[data-theme="soft"] body {
    background-image: none;
}

[data-theme="soft"] .card,
[data-theme="soft"] .stat-card,
[data-theme="soft"] .entity-card,
[data-theme="soft"] .child-card,
[data-theme="soft"] .media-card,
[data-theme="soft"] .task-card,
[data-theme="soft"] .activity-card,
[data-theme="soft"] .competition-card {
    border-radius: 4px;
    border: 1px solid var(--line-0);
    box-shadow: none;
}

[data-theme="soft"] .card::after,
[data-theme="soft"] .stat-card::after,
[data-theme="soft"] .entity-card::before,
[data-theme="soft"] .child-card::before {
    display: none !important;
}

[data-theme="soft"] .section-head h3::before {
    width: 4px;
    height: 4px;
    border-radius: 0;
    background: var(--brick);
}

[data-theme="soft"] .section-head h3::after { display: none; }

[data-theme="soft"] .hero-panel {
    border-radius: 4px;
    background: var(--color-surface);
    border: 1px solid var(--line-0);
    box-shadow: none;
}

[data-theme="soft"] .hero-avatar {
    border-radius: 2px;
    background: var(--ink-0);
    box-shadow: none;
    transform: none;
}

[data-theme="soft"] .hero-greet { font-weight: 650; letter-spacing: -.025em; }

[data-theme="soft"] .hero-role-badge {
    border-radius: 999px;
    transform: none;
}

[data-theme="soft"] .quick-item .qi-icon {
    border-radius: 2px;
    background: var(--paper-2);
    color: var(--ink-1);
}

[data-theme="soft"] .quick-item:hover .qi-icon {
    transform: none;
    box-shadow: none;
    background: var(--brick-soft);
    color: var(--brick);
}

[data-theme="soft"] .child-avatar {
    border-radius: 2px;
    background: var(--ink-0);
    transform: none;
    box-shadow: none;
}

[data-theme="soft"] .badge {
    border-radius: 999px;
    transform: none;
    box-shadow: none;
}

[data-theme="soft"] .btn-primary {
    background: var(--ink-0);
    color: var(--paper-1);
    box-shadow: none;
}

[data-theme="soft"] .btn-primary:hover {
    background: #2B241D;
    box-shadow: none;
    transform: none;
}

[data-theme="soft"] .feed-item {
    border-bottom-color: var(--line-1);
}

/* ============================================================
   18. 家长端 soft 主题：去掉蜡笔手绘装饰，回归纸张编辑风
   ============================================================ */
[data-theme="soft"] body {
    background-image: none;
}

[data-theme="soft"] .card,
[data-theme="soft"] .stat-card,
[data-theme="soft"] .entity-card,
[data-theme="soft"] .child-card,
[data-theme="soft"] .media-card,
[data-theme="soft"] .task-card,
[data-theme="soft"] .activity-card,
[data-theme="soft"] .competition-card {
    border-radius: 4px;
    border: 1px solid var(--line-0);
    box-shadow: none;
}

[data-theme="soft"] .card::after,
[data-theme="soft"] .stat-card::after,
[data-theme="soft"] .entity-card::before,
[data-theme="soft"] .child-card::before {
    display: none !important;
}

[data-theme="soft"] .section-head h3::before {
    width: 4px;
    height: 4px;
    border-radius: 0;
    background: var(--brick);
}

[data-theme="soft"] .section-head h3::after { display: none; }

[data-theme="soft"] .hero-panel {
    border-radius: 4px;
    background: var(--color-surface);
    border: 1px solid var(--line-0);
    box-shadow: none;
}

[data-theme="soft"] .hero-avatar {
    border-radius: 2px;
    background: var(--ink-0);
    box-shadow: none;
    transform: none;
}

[data-theme="soft"] .hero-greet { font-weight: 650; letter-spacing: -.025em; }

[data-theme="soft"] .hero-role-badge {
    border-radius: 999px;
    transform: none;
}

[data-theme="soft"] .quick-item .qi-icon {
    border-radius: 2px;
    background: var(--paper-2);
    color: var(--ink-1);
}

[data-theme="soft"] .quick-item:hover .qi-icon {
    transform: none;
    box-shadow: none;
    background: var(--brick-soft);
    color: var(--brick);
}

[data-theme="soft"] .child-avatar {
    border-radius: 2px;
    background: var(--ink-0);
    transform: none;
    box-shadow: none;
}

[data-theme="soft"] .badge {
    border-radius: 999px;
    transform: none;
    box-shadow: none;
}

[data-theme="soft"] .btn-primary {
    background: var(--ink-0);
    color: var(--paper-1);
    box-shadow: none;
}

[data-theme="soft"] .btn-primary:hover {
    background: #2B241D;
    box-shadow: none;
    transform: none;
}

[data-theme="soft"] .feed-item {
    border-bottom-color: var(--line-1);
}


/* 教案文件夹里的彩色图标统一降噪 */
.lp-bubble-icon {
    border-radius: 2px !important;
    background: var(--paper-2) !important;
    color: var(--ink-1) !important;
    box-shadow: none !important;
}

/* 手机端：使用指南按钮收成小按钮，不占整行 */
@media (max-width: 768px) {
    .page-header .page-guide-btn {
        flex: 0 0 auto;
        align-self: flex-end;
        width: auto !important;
        height: 28px;
        padding: 0 11px;
        font-size: 11px;
        margin-left: auto;
    }

    #page-container.page-showcase .page-header {
        padding-bottom: 10px;
        margin-bottom: 12px;
    }

    #page-container.page-showcase .page-header p,
    #page-container.page-showcase .header-actions,
    #page-container.page-showcase .page-guide-btn {
        display: none;
    }

    #page-container.page-showcase .showcase-admin-frame {
        height: calc(100vh - 138px);
        min-height: 420px;
    }
}


/* ============================================================
   19. 品牌标志交互：房子回首页 / 三点开合侧栏
   ============================================================ */
.brand-mark svg { overflow: visible; }

.brand-mark [data-brand-action] {
    cursor: pointer;
    outline: none;
}

.brand-mark .bm-house,
.brand-mark .bm-dots {
    transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}

.brand-mark .bm-dots circle {
    transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}

/* 悬停：屋顶向左分离，三点在右侧排成一行 */
.brand-mark:hover .bm-house,
#nav-brand-float:hover .bm-house { transform: translate(-6px, 0); }
.brand-mark:hover .bm-dots,
#nav-brand-float:hover .bm-dots { transform: translate(12px, -7.5px); }
.brand-mark:hover .bm-dots circle:nth-of-type(1),
#nav-brand-float:hover .bm-dots circle:nth-of-type(1) { transform: translate(3.9px, -2.7px); }
.brand-mark:hover .bm-dots circle:nth-of-type(2),
#nav-brand-float:hover .bm-dots circle:nth-of-type(2) { transform: translate(3px, 1px); }
.brand-mark:hover .bm-dots circle:nth-of-type(3),
#nav-brand-float:hover .bm-dots circle:nth-of-type(3) { transform: translate(2.1px, 4.7px); }

.brand-mark [data-brand-action="home"]:hover { opacity: .82; }
.brand-mark [data-brand-action="sidebar"]:hover { opacity: .82; }

/* 侧边栏顶部不再需要单独的「房子」按钮 */
body.nav-side #nav-home-btn { display: none !important; }

/* 收起态：用「标志 + 学务通」替代原来的悬浮展开按钮 */
#nav-brand-float {
    display: none;
    position: fixed;
    left: 14px;
    top: 14px;
    z-index: 1300;
    align-items: center;
    gap: 9px;
    padding: 7px 12px 7px 9px;
    background: rgba(246, 242, 234, .94);
    border: 1px solid var(--line-0);
    border-radius: 999px;
    box-shadow: 0 2px 12px -4px rgba(23, 19, 15, .22);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--ink-0);
    cursor: pointer;
    user-select: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#nav-brand-float:hover {
    border-color: rgba(23, 19, 15, .28);
    box-shadow: 0 6px 18px -6px rgba(23, 19, 15, .28);
}

#nav-brand-float .brand-mark { width: 30px; height: 30px; }
#nav-brand-float b {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
}

body.nav-side.nav-collapsed #nav-brand-float { display: inline-flex; }
body.nav-side.nav-collapsed #nav-float-open { display: none !important; }

[data-mode="dark"] #nav-brand-float {
    background: rgba(20, 17, 14, .94);
    border-color: var(--line-0);
    color: var(--ink-0);
}

@media (max-width: 768px) {
    #nav-brand-float { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-mark:hover .bm-house,
    .brand-mark:hover .bm-dots,
    .brand-mark:hover .bm-dots circle { transform: none; }
}


/* 收起侧栏时给悬浮品牌留出空间，避免压住页面标题 */
@media (min-width: 769px) {
    body.nav-side.nav-collapsed #page-container { padding-top: 76px; }
}