/* ==========================================================================
   宏璞免死金牌司 — 设计令牌（Design Tokens）
   风格：现代朱印美学 · 现代极简 + 印章元素 + 立体浮雕
   ========================================================================== */

:root {
    /* —— 色板：宣纸 + 墨 + 朱砂 + 金 —— */
    --paper:        #F8F5EE;   /* 宣纸米色 · 主背景 */
    --paper-deep:   #EFEAD9;   /* 深宣纸 · 卡片交替 */
    --paper-line:   #E2DBC6;   /* 宣纸纹路线 · 极淡分隔线 */
    --paper-white:  #FFFFFF;   /* 卡面白 · 浮雕高光用 */

    --ink:          #1A1A1A;   /* 墨黑 · 主文本 */
    --ink-soft:     #4A4A4A;   /* 软墨 · 次级文本 */
    --ink-mute:     #9B978D;   /* 灰墨 · 三级文本/边框 */

    --vermilion:    #C8102E;   /* 朱砂红 · 主强调 / 印章 */
    --vermilion-d:  #8B0A1F;   /* 深朱砂 · hover / 阴影 */
    --vermilion-d2: #5A0513;   /* 极深朱砂 · 印章压印 */
    --vermilion-l:  #F4DCE0;   /* 浅朱砂 · 背景 */

    --gold:         #B8924A;   /* 金箔 · 奖励分 */
    --gold-d:       #8B6B26;   /* 深金 · 印章边 */
    --gold-l:       #F5EAD0;   /* 浅金 · 背景 */

    --slate:        #4A7A8E;   /* 青墨 · 扣分 */
    --slate-d:      #2C4F5E;   /* 深青 · 阴影 */
    --slate-l:      #DEE9EE;   /* 浅青 · 背景 */

    /* —— 字体 —— */
    --font-display: "Noto Serif SC", "Songti SC", "STSong", serif;
    --font-body:    "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

    /* —— 间距 —— */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* —— 圆角 —— */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-lg: 10px;

    /* —— 阴影：扁平 → 立体分层 —— */
    --shadow-1:       0 1px 0 rgba(26, 26, 26, 0.04), 0 1px 2px rgba(26, 26, 26, 0.04);
    --shadow-2:       0 2px 4px rgba(26, 26, 26, 0.04), 0 4px 12px rgba(26, 26, 26, 0.06);

    /* 浮雕阴影：上层高光 + 下层深影 */
    --shadow-card:    0 1px 0 rgba(255, 255, 255, 0.9) inset,
                        0 2px 0 var(--paper-line),
                        0 3px 4px rgba(26, 26, 26, 0.04),
                        0 6px 16px rgba(26, 26, 26, 0.05);

    --shadow-card-h:  0 1px 0 rgba(255, 255, 255, 1) inset,
                        0 2px 0 var(--paper-line),
                        0 6px 10px rgba(26, 26, 26, 0.06),
                        0 14px 28px rgba(26, 26, 26, 0.08);

    /* 朱印按钮：默认态 · 红色浮雕 */
    --shadow-stamp:   0 1px 0 rgba(255, 255, 255, 0.35) inset,
                        0 -1px 0 rgba(0, 0, 0, 0.1) inset,
                        0 2px 0 var(--vermilion-d),
                        0 3px 4px rgba(139, 10, 31, 0.25),
                        0 1px 2px rgba(139, 10, 31, 0.2);

    /* 朱印按钮：悬停态 · 抬升 */
    --shadow-stamp-h: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
                        0 -1px 0 rgba(0, 0, 0, 0.08) inset,
                        0 3px 0 var(--vermilion-d2),
                        0 6px 8px rgba(139, 10, 31, 0.25),
                        0 2px 4px rgba(139, 10, 31, 0.2);

    /* 朱印按钮：按下态 · 压入 */
    --shadow-stamp-a: 0 1px 0 rgba(0, 0, 0, 0.1) inset,
                        0 1px 0 var(--vermilion-d),
                        0 0 0 rgba(0, 0, 0, 0);

    /* 印章浮雕：高光在上、深影在下 */
    --shadow-seal:    0 1px 0 rgba(255, 255, 255, 0.25) inset,
                        0 -1px 0 rgba(0, 0, 0, 0.15) inset,
                        0 2px 3px rgba(0, 0, 0, 0.18),
                        0 5px 10px rgba(139, 10, 31, 0.22);

    /* 金印章压印（金光闪烁） */
    --shadow-gold:    0 1px 0 rgba(255, 245, 220, 0.6) inset,
                        0 -1px 0 rgba(0, 0, 0, 0.2) inset,
                        0 2px 3px rgba(0, 0, 0, 0.2),
                        0 5px 12px rgba(184, 146, 74, 0.35),
                        0 0 16px rgba(184, 146, 74, 0.18);

    /* 输入框凹陷 */
    --shadow-inset:   inset 0 1px 2px rgba(26, 26, 26, 0.06),
                        inset 0 -1px 0 rgba(255, 255, 255, 0.8);

    /* —— 动效时长（一个时钟） —— */
    --motion-fast: 160ms;
    --motion-step: 480ms;
    --motion-hold: 720ms;
    --motion-ease: cubic-bezier(.2, .8, .2, 1);
    --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
    --motion-ease-in: cubic-bezier(.4, 0, 1, 1);

    /* —— 总览条浮雕 —— */
    --shadow-strip:   0 1px 0 rgba(255, 255, 255, 0.7) inset,
                        0 -1px 0 rgba(0, 0, 0, 0.04) inset,
                        0 4px 8px rgba(26, 26, 26, 0.04);
}

/* ==========================================================================
   重置 + 基础
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* 宣纸纹理 · 多层径向渐变 + 噪点 · 营造叠层感 */
body {
    background:
        radial-gradient(ellipse 60% 50% at 18% 22%, rgba(184, 146, 74, 0.06), transparent 60%),
        radial-gradient(ellipse 50% 40% at 82% 78%, rgba(200, 16, 46, 0.04), transparent 60%),
        radial-gradient(ellipse 70% 60% at 50% 100%, rgba(74, 122, 142, 0.025), transparent 60%),
        var(--paper);
    background-attachment: fixed;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(184, 146, 74, 0.04), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(200, 16, 46, 0.025), transparent 40%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.36 0 0 0 0 0.3 0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: auto, auto, 180px 180px;
    z-index: -1;
    opacity: 0.7;
}
/* 纸张边缘投影 · 模拟卷起的纸 */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                inset 0 -1px 0 rgba(0, 0, 0, 0.03);
    z-index: -1;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   顶栏 · 立体分层
   ========================================================================== */
.appbar {
    background: rgba(248, 245, 238, 0.92);
    border-bottom: 1px solid var(--paper-line);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 2px 4px rgba(26, 26, 26, 0.03),
        0 8px 24px rgba(26, 26, 26, 0.04);
}

.appbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

/* —— 印章 logo · 浮雕立体 —— */
.seal {
    display: inline-flex;
    filter: drop-shadow(0 2px 2px rgba(139, 10, 31, 0.25))
            drop-shadow(0 4px 8px rgba(139, 10, 31, 0.18));
    transform-origin: 50% 50%;
    animation: seal-stamp 1.1s var(--motion-ease-out) both;
    will-change: transform;
}
@keyframes seal-stamp {
    0%   { transform: scale(2.4) rotate(-22deg); opacity: 0; }
    38%  { transform: scale(0.86) rotate(4deg); opacity: 1; }
    56%  { transform: scale(1.06) rotate(-2deg); }
    72%  { transform: scale(0.97) rotate(1deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.brand:hover .seal {
    transform: rotate(-5deg) scale(1.04);
    transition: transform 0.3s var(--motion-ease-out);
}

/* logo 内部高光：让红印有立体反光 */
.seal svg circle {
    /* SVG 内无法用 box-shadow；用 stroke 配合 filter 形成高光环 */
}

/* logo 上叠一层径向高光 */
.seal::after {
    content: "";
    position: absolute;
    width: 44px; height: 44px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 45%);
}
.seal { position: relative; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--ink);
    letter-spacing: 0.04em;
}
.brand-sub {
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.2em;
    text-transform: none;
    margin-top: 2px;
}

.topnav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.topnav::-webkit-scrollbar { display: none; }

.topnav-link {
    color: var(--ink-soft);
    text-decoration: none;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius);
    transition: color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
    white-space: nowrap;
    letter-spacing: 0.04em;
    position: relative;
}
.topnav-link::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 2px;
    width: 0; height: 2px;
    background: var(--vermilion);
    border-radius: 1px;
    transition: width var(--motion-fast) var(--motion-ease-out), left var(--motion-fast) var(--motion-ease-out);
}
.topnav-link:hover {
    color: var(--vermilion);
    background: var(--vermilion-l);
}
.topnav-link:hover::after {
    width: calc(100% - 28px);
    left: 14px;
}
.topnav-link:active { transform: scale(0.97); }
.topnav-home {
    color: var(--vermilion);
    font-weight: 600;
    padding-right: 14px;
    margin-right: 4px;
    border-right: 1px dashed var(--paper-line);
}
.topnav-home:hover {
    color: var(--vermilion-d);
    background: var(--vermilion-l);
}
.topnav-home::after { background: var(--vermilion); }
.topnav-logout {
    margin-left: auto;
    padding-left: 14px;
    padding-right: 14px;
    border-left: 1px dashed var(--paper-line);
    color: var(--ink-mute);
}
.topnav-logout:hover {
    color: var(--vermilion);
    background: var(--vermilion-l);
}
.topnav-logout::after { display: none; }

/* ==========================================================================
   总览条 · 多层纸张浮雕
   ========================================================================== */
.overview {
    border-bottom: 1px solid var(--paper-line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.02) 100%),
        var(--paper-deep);
    box-shadow: var(--shadow-strip);
    position: relative;
}
.overview::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(0, 0, 0, 0.04);
    border-radius: 0;
}
.overview-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 10px;
    border-radius: var(--radius);
    transition: background var(--motion-fast);
}
.stat:hover { background: rgba(255, 255, 255, 0.45); }
.stat-num {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    animation: settle var(--motion-hold) var(--motion-ease-out) both;
    animation-delay: calc(var(--motion-step) * 0.5);
}
@keyframes settle {
    0%   { transform: translateY(6px); opacity: 0; }
    60%  { transform: translateY(-2px); opacity: 1; }
    100% { transform: none; opacity: 1; }
}
.stat-label {
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.18em;
}
.stat-hero .stat-num { color: var(--ink); }
.stat-hero.is-pos .stat-num {
    color: var(--vermilion);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(200, 16, 46, 0.12);
}
.stat-hero.is-neg .stat-num {
    color: var(--slate);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(74, 122, 142, 0.12);
}

/* ==========================================================================
   横幅消息
   ========================================================================== */
.banner {
    max-width: 1180px;
    margin: 16px auto -8px;
    padding: 10px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    border-left: 3px solid var(--vermilion);
    background: var(--vermilion-l);
    color: var(--vermilion-d);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
                0 2px 4px rgba(200, 16, 46, 0.06);
    animation: settle 600ms var(--motion-ease-out) both;
}

/* ==========================================================================
   主容器
   ========================================================================== */
.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 20px 80px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* 让某些卡片跨两列 */
.card-add { grid-column: 1 / -1; }

/* ==========================================================================
   卡片 · 浮雕立体
   ========================================================================== */
.card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 253, 248, 1) 100%);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: var(--shadow-card);
    transition: transform var(--motion-fast) var(--motion-ease-out),
                box-shadow var(--motion-fast) var(--motion-ease-out);
    position: relative;
    /* 入场：淡升入场 */
    animation: fade-up 700ms var(--motion-ease-out) both;
    animation-delay: calc(var(--motion-step) + var(--i, 0) * 90ms);
}
@keyframes fade-up {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: none; }
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-h);
}

/* 卡片顶层高光线：像纸面反光 */
.card::before {
    content: "";
    position: absolute;
    top: 1px; left: 1px; right: 1px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.95) 20%,
        rgba(255, 255, 255, 0.95) 80%,
        transparent 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    pointer-events: none;
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--paper-line);
    position: relative;
}
.card-head-toggle { cursor: pointer; user-select: none; }

.card-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* 标题旁的朱砂小印章装饰 */
.card-title::before {
    content: "■";
    color: var(--vermilion);
    font-size: 11px;
    margin-right: 8px;
    vertical-align: 1px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.card-eyebrow {
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.card-eyebrow.eyebrow-danger {
    color: var(--vermilion);
    font-weight: 600;
}

/* 卡片类型变体 · 顶部彩条浮雕 */
.card-class { border-top: 3px solid var(--gold); }
.card-rank  { border-top: 3px solid var(--vermilion); }
.card-add   {
    border-top: 3px solid var(--vermilion);
    background: linear-gradient(180deg, #FFFEFB 0%, #FDFBF4 100%);
}
.card-collapse { padding: 0; }
.card-collapse > .card-head { padding: 20px 22px 16px; margin-bottom: 0; border-bottom: 1px solid var(--paper-line); }
.card-collapse > *:not(.card-head) { padding: 16px 22px; }
.card-collapse > *:last-child { padding-bottom: 22px; border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }

.card-danger { border-top-color: var(--vermilion); }

/* ==========================================================================
   班级总分
   ========================================================================== */
.class-list { list-style: none; margin: 0; padding: 0; }
.class-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px dashed var(--paper-line);
    transition: padding-left var(--motion-fast) var(--motion-ease-out);
}
.class-row:hover { padding-left: 6px; }
.class-row:last-child { border-bottom: 0; }
.class-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
}
.class-score {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.class-score .unit {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--ink-mute);
    margin-left: 4px;
    font-weight: 400;
}
.class-score.is-pos { color: var(--vermilion); }
.class-score.is-neg { color: var(--slate); }

/* ==========================================================================
   排行榜
   ========================================================================== */
.rank-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.rank-row {
    display: grid;
    grid-template-columns: 36px 1fr auto auto auto 1fr;
    align-items: center;
    gap: 6px 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--paper-line);
    transition: padding-left var(--motion-fast) var(--motion-ease-out),
                background var(--motion-fast) var(--motion-ease-out);
    border-radius: var(--radius-sm);
}
.rank-row:hover {
    padding-left: 6px;
    background: rgba(255, 255, 255, 0.4);
}
.rank-row:last-child { border-bottom: 0; }

.rank-num { display: flex; }
.rank-num-plain {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink-mute);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rank-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank-class {
    font-size: 12px;
    color: var(--ink-mute);
    white-space: nowrap;
}
.rank-score {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.rank-score.is-pos { color: var(--vermilion); }
.rank-score.is-neg { color: var(--slate); }
.rank-meta {
    font-size: 11px;
    color: var(--ink-mute);
    white-space: nowrap;
}
.rank-last {
    font-size: 12px;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 2 / -1;
    margin-top: -2px;
}

/* —— 印章徽章（前三名）· 立体浮雕 —— */
.seal-mini {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: #FFFFFF;
    box-shadow: var(--shadow-seal);
    letter-spacing: 0;
    position: relative;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    animation: seal-pop 900ms var(--motion-ease-out) both;
    animation-delay: calc(var(--motion-step) * 1.2 + var(--i, 0) * 120ms);
    will-change: transform;
}
@keyframes seal-pop {
    0%   { transform: scale(0.4) rotate(-30deg); opacity: 0; }
    45%  { transform: scale(1.18) rotate(6deg); opacity: 1; }
    70%  { transform: scale(0.95) rotate(-2deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.seal-1 {
    background:
        radial-gradient(circle at 32% 28%, #F2D58A 0%, var(--gold) 45%, var(--gold-d) 100%);
    border: 2px solid var(--gold-d);
    box-shadow: var(--shadow-gold);
    color: #2A1A06;
    text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
}
.seal-2 {
    background:
        radial-gradient(circle at 32% 28%, #F26B83 0%, var(--vermilion) 45%, var(--vermilion-d) 100%);
    border: 2px solid var(--vermilion-d);
    color: #FFFFFF;
}
.seal-3 {
    background:
        radial-gradient(circle at 32% 28%, #B5B5B5 0%, #8B8B8B 45%, #5C5C5C 100%);
    border: 2px solid #5C5C5C;
    color: #FFFFFF;
}
/* 印章小高光 */
.seal-mini::after {
    content: "";
    position: absolute;
    top: 3px; left: 5px;
    width: 8px; height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    filter: blur(1px);
}

/* ==========================================================================
   表单（朱印风格）
   ========================================================================== */
.form-stamp {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field-num { max-width: 100px; }
.field-grow { flex: 1; }

.field-label {
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
}

.field input,
.field select,
.bulk-form textarea,
.filter select {
    font-family: var(--font-body);
    font-size: 15px;
    padding: 10px 14px;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    transition: border-color var(--motion-fast),
                background var(--motion-fast),
                box-shadow var(--motion-fast),
                transform var(--motion-fast);
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    box-shadow: var(--shadow-inset);
}
.field select, .filter select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.field input:focus,
.field select:focus,
.bulk-form textarea:focus,
.filter select:focus {
    outline: none;
    border-color: var(--vermilion);
    background: #FFFFFF;
    box-shadow: var(--shadow-inset),
                0 0 0 3px rgba(200, 16, 46, 0.10),
                0 0 0 4px rgba(200, 16, 46, 0.04);
}

.field input::placeholder,
.bulk-form textarea::placeholder {
    color: var(--ink-mute);
    opacity: 0.6;
}

/* —— 按钮 · 朱印浮雕 + 按压感 —— */
.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.form-actions-right {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    padding: 11px 22px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--motion-fast) var(--motion-ease-out),
                box-shadow var(--motion-fast) var(--motion-ease-out),
                background var(--motion-fast),
                color var(--motion-fast),
                border-color var(--motion-fast);
    letter-spacing: 0.04em;
    line-height: 1;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}

/* 朱印主按钮 · 立体浮雕 */
.btn-primary {
    background:
        linear-gradient(180deg, #E23852 0%, var(--vermilion) 50%, var(--vermilion-d) 100%);
    color: #FFFFFF;
    border-color: var(--vermilion-d);
    box-shadow: var(--shadow-stamp);
    position: relative;
    overflow: hidden;
}
/* 按钮顶层光泽（按下时消失） */
.btn-primary::before {
    content: "";
    position: absolute;
    top: 1px; left: 4px; right: 4px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    border-radius: 1px;
}
.btn-primary:hover {
    background:
        linear-gradient(180deg, #DD2B45 0%, #C8102E 50%, #7A0919 100%);
    border-color: var(--vermilion-d2);
    transform: translateY(-2px);
    box-shadow: var(--shadow-stamp-h);
}
.btn-primary:active {
    background:
        linear-gradient(180deg, var(--vermilion-d) 0%, var(--vermilion) 100%);
    transform: translateY(2px);
    box-shadow: var(--shadow-stamp-a);
    transition-duration: 60ms;
}
/* 朱印落印墨花 · 点击瞬间扩散 */
.btn-primary::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255, 220, 200, 0.7);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}
.btn-primary:active::after {
    animation: ink-press 380ms var(--motion-ease-out) both;
}
@keyframes ink-press {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    20%  { transform: translate(-50%, -50%) scale(2); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(20); opacity: 0; }
}

.btn-danger {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FDFBF4 100%);
    color: var(--vermilion);
    border-color: var(--vermilion);
    box-shadow: var(--shadow-stamp);
}
.btn-danger:hover {
    background:
        linear-gradient(180deg, var(--vermilion) 0%, var(--vermilion-d) 100%);
    color: #FFFFFF;
    border-color: var(--vermilion-d);
    transform: translateY(-2px);
    box-shadow: var(--shadow-stamp-h);
}
.btn-danger:active {
    transform: translateY(2px);
    box-shadow: var(--shadow-stamp-a);
    transition-duration: 60ms;
}

.btn-ghost {
    background: var(--paper);
    color: var(--ink-soft);
    border-color: var(--paper-line);
    box-shadow: var(--shadow-1);
}
.btn-ghost:hover {
    background: var(--paper-deep);
    color: var(--ink);
    border-color: var(--ink-mute);
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
}
.btn-ghost:active { transform: translateY(0); }

.btn-lg {
    padding: 14px 28px;
    font-size: 15px;
    width: 100%;
}
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ==========================================================================
   记录列表
   ========================================================================== */
.record-list, .student-list, .rule-list { list-style: none; margin: 0; padding: 0; }

.record-row {
    display: grid;
    grid-template-columns: 80px 80px 70px 1fr 56px 28px;
    align-items: center;
    gap: 4px 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--paper-line);
    transition: padding-left var(--motion-fast) var(--motion-ease-out);
}
.record-row:hover { padding-left: 4px; }
.record-row:last-child { border-bottom: 0; }

.rec-time { font-size: 12px; color: var(--ink-mute); }
.rec-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rec-class { font-size: 12px; color: var(--ink-mute); }
.rec-title {
    font-size: 14px;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rec-cat {
    font-size: 11px;
    color: var(--ink-mute);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--paper-deep);
    display: inline-block;
    letter-spacing: 0.04em;
    width: fit-content;
    justify-self: start;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.rec-points {
    font-size: 15px;
    font-weight: 600;
    text-align: right;
    color: var(--ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.rec-points.is-pos { color: var(--vermilion); }
.rec-points.is-neg { color: var(--slate); }

/* 图标按钮 */
.btn-icon {
    background: var(--paper);
    color: var(--ink-mute);
    border: 1px solid var(--paper-line);
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all var(--motion-fast) var(--motion-ease-out);
    padding: 0;
    box-shadow: var(--shadow-1);
}
.btn-icon:hover {
    color: var(--vermilion);
    background: var(--vermilion-l);
    border-color: var(--vermilion-l);
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
}
.btn-icon:active { transform: translateY(0); }

/* ==========================================================================
   学生 / 规则列表
   ========================================================================== */
.student-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--paper-line);
    transition: padding-left var(--motion-fast) var(--motion-ease-out);
}
.student-row:hover { padding-left: 4px; }
.student-row:last-child { border-bottom: 0; }
.stu-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stu-class { color: var(--ink-mute); font-size: 12px; font-weight: 400; }
.stu-score {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    min-width: 56px;
    text-align: right;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.stu-score.is-pos { color: var(--vermilion); }
.stu-score.is-neg { color: var(--slate); }

/* 规则 */
.rule-row {
    padding: 10px 0;
    border-bottom: 1px dashed var(--paper-line);
    transition: padding-left var(--motion-fast) var(--motion-ease-out);
}
.rule-row:hover { padding-left: 4px; }
.rule-row:last-child { border-bottom: 0; }

.rule-display, .rule-edit {
    display: grid;
    grid-template-columns: 1fr 60px 80px 32px 32px;
    align-items: center;
    gap: 6px 10px;
}

.rule-title {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rule-points {
    font-size: 15px;
    font-weight: 600;
    text-align: right;
    color: var(--ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.rule-points.is-pos { color: var(--vermilion); }
.rule-points.is-neg { color: var(--slate); }
.rule-cat {
    font-size: 12px;
    color: var(--ink-mute);
}

.rule-edit { display: none; }
.rule-edit.is-editing { display: grid; }
.rule-edit input,
.rule-edit select {
    font-size: 14px;
    padding: 6px 10px;
}

/* ==========================================================================
   折叠（details/summary）
   ========================================================================== */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }

/* ==========================================================================
   批量导入
   ========================================================================== */
.bulk-form {
    background: linear-gradient(180deg, var(--paper-deep) 0%, #F4EFE0 100%);
    border-radius: var(--radius);
    padding: 14px 16px;
    border-left: 3px solid var(--vermilion);
    box-shadow: var(--shadow-inset);
}
.bulk-tip {
    font-size: 12px;
    color: var(--ink-soft);
    margin: 0 0 8px;
    letter-spacing: 0.02em;
}
.bulk-form textarea {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    min-height: 96px;
    resize: vertical;
    box-sizing: border-box;
    background: var(--paper-white);
}

.sub-collapse {
    margin-top: 14px;
    background: var(--paper-deep);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.sub-collapse > summary {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
    letter-spacing: 0.04em;
}
.sub-collapse > summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform var(--motion-fast) var(--motion-ease-out);
}
.sub-collapse[open] > summary::before { content: "▾ "; transform: rotate(0); }
.sub-collapse[open] > summary { margin-bottom: 12px; }

/* ==========================================================================
   危险区
   ========================================================================== */
.danger-tip {
    background: var(--vermilion-l);
    color: var(--vermilion-d);
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    margin: 16px 22px;
    line-height: 1.6;
    border-left: 3px solid var(--vermilion);
    box-shadow: var(--shadow-inset);
}
.danger-tip strong { color: #4A0510; }

/* ==========================================================================
   底部
   ========================================================================== */
.footer {
    grid-column: 1 / -1;
    margin-top: 16px;
    text-align: center;
}
.footer-hint {
    margin-top: 12px;
    color: var(--ink-mute);
    font-size: 12px;
    letter-spacing: 0.06em;
}

/* ==========================================================================
   空态 / 通用
   ========================================================================== */
.empty {
    text-align: center;
    color: var(--ink-mute);
    padding: 28px 16px;
    font-size: 14px;
    margin: 0;
}
.inline { display: inline; }

/* 筛选条 */
.filter {
    display: flex;
    gap: 8px;
}
.filter select {
    padding: 6px 28px 6px 12px;
    font-size: 13px;
    border-radius: var(--radius);
    background-color: var(--paper);
    background-size: 10px;
}

/* ==========================================================================
   响应式：移动优先
   ========================================================================== */
@media (max-width: 860px) {
    .appbar-inner { padding: 12px 16px; }
    .topnav { gap: 0; }
    .topnav-link { padding: 6px 10px; font-size: 13px; }
    .brand-name { font-size: 15px; }
    .brand-sub { font-size: 10px; }
    .overview-inner { grid-template-columns: repeat(3, 1fr); padding: 16px; gap: 12px; }
    .stat-num { font-size: 24px; }
    .container { grid-template-columns: 1fr; padding: 16px 16px 60px; gap: 12px; }
    .card { padding: 16px 18px; }
    .card-title { font-size: 16px; }
    .class-name { font-size: 15px; }
    .class-score { font-size: 16px; }
    .rank-row {
        grid-template-columns: 30px 1fr auto auto;
        grid-template-areas: "num name score meta" "last last last last";
        gap: 6px 10px;
    }
    .rank-num { grid-area: num; }
    .rank-name { grid-area: name; }
    .rank-class { display: none; }
    .rank-score { grid-area: score; }
    .rank-meta { grid-area: meta; }
    .rank-last { grid-area: last; margin-top: 2px; }
    .record-row {
        grid-template-columns: 1fr auto auto;
        grid-template-areas: "time title points" "name name cat";
        gap: 4px 8px;
    }
    .rec-time { grid-area: time; }
    .rec-name { grid-area: name; }
    .rec-title { grid-area: title; }
    .rec-cat { grid-area: cat; justify-self: end; }
    .rec-points { grid-area: points; }
    .record-row .btn-icon { grid-area: unset; justify-self: end; }
}

@media (max-width: 480px) {
    .topnav-link { padding: 6px 8px; }
    .overview-inner { padding: 12px; }
    .stat-num { font-size: 22px; }
    .stat-label { font-size: 10px; }
    .seal { width: 38px; height: 38px; }
    .seal svg { width: 38px; height: 38px; }
}

/* ==========================================================================
   减弱动效（a11y）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .card,
    .seal,
    .stat-num,
    .seal-mini,
    .banner { transform: none !important; opacity: 1 !important; }
    .btn-primary::after { display: none !important; }
}

/* 焦点可见 */
:focus-visible {
    outline: 2px solid var(--vermilion);
    outline-offset: 2px;
    border-radius: 4px;
}