@charset "UTF-8";
/* ==========================================================================
   999wk.cn · 款式（主题）层
   --------------------------------------------------------------------------
   用法：<body class="stitch t-neon">  三选一：t-neon / t-aurora / t-bold
   机制：stitch.css 的组件只引用语义变量，本文件只覆盖变量 + 极少数「口味」规则。
        新增款式 = 复制一个块改十几行，不用动任何组件声明。

   三点依据（来自 ui-ux-pro-max 数据集）：
     · dark-mode-oled  「Deep Black #000000 / Dark Grey #121212 / Midnight Blue #0A0E27，
                        高对比文字、克制的霓虹光晕、避免纯白大面积」
     · glassmorphism  「backdrop blur 10-20px、半透明 15-30%、1px 浅色描边、多层景深」
     · bento-box-grid 「模块化卡片、16-24px 大圆角、克制阴影」

   可访问性约束（数据集 §1/§6 强制项）：
     · 正文对比度 ≥ 4.5:1，大字/非文本 ≥ 3:1 —— 深色主题下不用纯黑字/纯灰字
     · 焦点环必须可见（focus-visible 已全局定义，主题只换颜色）
   ========================================================================== */

/* ==========================================================================
   款式 1 · 暗夜霓虹（Neon Night）
   主推款。深蓝黑底 + 靛紫→青 渐变主色，工具感强、夜用友好。
   ========================================================================== */
body.t-neon {
    --page-bg: #080B14;

    /* 极光层：极淡的双色光晕，避免纯平 */
    --aurora:
        radial-gradient(1100px 520px at 12% -8%, rgba(99, 102, 241, .22), transparent 62%),
        radial-gradient(900px 460px at 96% 4%, rgba(34, 211, 238, .14), transparent 60%);

    /* 表面层级 */
    --surface: #141B2B;
    --surface-2: #1B2436;
    --m3-surface: #141B2B;
    --m3-surface-container-lowest: #141B2B;
    --m3-surface-container-low: #1B2436;
    --m3-surface-container: #212C42;
    --m3-surface-container-high: #26324A;
    --m3-surface-container-highest: #2C3A55;
    --m3-surface-bright: #1B2436;

    /* 文字 */
    --fg: #E9EEF8;
    --fg-2: #97A5C0;
    --fg-3: #6B7A96;
    --ink: #E9EEF8;
    --ink-2: #97A5C0;
    --ink-3: #6B7A96;
    --m3-on-surface: #E9EEF8;
    --m3-on-surface-variant: #97A5C0;
    --m3-outline: #8494B0;
    --m3-outline-variant: #5A6880;

    /* 描边 */
    --line: #26324A;
    --divider: #1E2739;
    --grip: #3A4761;

    /* 品牌与状态 */
    --primary: #6366F1;
    --primary-press: #4F46E5;
    --primary-soft: rgba(99, 102, 241, .16);
    --brand: #6366F1;
    --brand-press: #4F46E5;
    --brand-soft: rgba(99, 102, 241, .16);
    --brand-soft-fg: #A5B4FC;
    --brand-glow: rgba(99, 102, 241, .32);
    --on-brand: #FFFFFF;

    --success: #34D399;
    --warning: #FBBF24;
    --danger: #F87171;
    --danger-fg: #FCA5A5;
    --m3-error: #F87171;
    --m3-error-container: rgba(248, 113, 113, .14);
    --m3-on-error-container: #FCA5A5;
    --m3-tertiary: #34D399;
    --warning-soft: rgba(251, 191, 36, .1);
    --warning-fg: #FCD34D;

    --m3-secondary-fixed: rgba(99, 102, 241, .2);
    --m3-on-secondary-fixed-variant: #A5B4FC;

    /* 深色下卡片描边很淡，控件边界必须单独提亮，否则复选框看不见 */
    --ctl-line: #3A4761;
    --track: #2C3A55;
    --accent: #2DD4BF;
}

/* 主按钮：靛→青 渐变 + 光晕 */
body.t-neon .btn-primary:not(.is-ghosted),
body.t-neon .pf-btn:not(.is-disabled),
body.t-neon .search-btn,
body.t-neon .empty-btn {
    background-color: transparent;
    background-image: linear-gradient(135deg, #6366F1 0%, #22D3EE 130%);
    box-shadow: 0 6px 20px rgba(99, 102, 241, .35);
}
body.t-neon .btn-primary:not(.is-ghosted):hover,
body.t-neon .pf-btn:not(.is-disabled):hover {
    background-image: linear-gradient(135deg, #4F46E5 0%, #06B6D4 130%);
}
body.t-neon .btn-primary.is-busy {
    background-color: transparent;
    background-image: linear-gradient(135deg, rgba(99,102,241,.55) 0%, rgba(34,211,238,.55) 130%);
}

/* 抽屉面板：顶部一道细渐变高光 */
body.t-neon .sheet-panel {
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .55);
    border-top: 1px solid rgba(99, 102, 241, .25);
}
body.t-neon .sheet-dock {
    background: rgba(20, 27, 43, .92);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .4);
}

/* 卡片描边统一走暗色微光 */
body.t-neon .pf-card,
body.t-neon .search-box,
body.t-neon .field-input {
    border-color: rgba(255, 255, 255, .07);
}
body.t-neon .pf-card { background-image: linear-gradient(180deg, rgba(255,255,255,.03), transparent); }

/* 图标底座：统一暗色玻璃，靠图标自身颜色区分 */
body.t-neon .pf-ico {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: none;
}
body.t-neon .pf-ico.tone-violet  { color: #A5B4FC; }
body.t-neon .pf-ico.tone-indigo  { color: #93C5FD; }
body.t-neon .pf-ico.tone-emerald { color: #5EEAD4; }
body.t-neon .pf-ico.tone-sky     { color: #7DD3FC; }
body.t-neon .pf-ico.tone-purple  { color: #C4B5FD; }
body.t-neon .pf-ico.tone-amber   { color: #FCD34D; }
body.t-neon .pf-ico.tone-rose    { color: #FDA4AF; }
body.t-neon .pf-ico.tone-slate   { color: #94A3B8; }

/* 角标：统一暗色胶囊，主色款保留品牌色 */
body.t-neon .pf-badge { background: rgba(255, 255, 255, .08); color: var(--fg-2); }
body.t-neon .pf-badge.t-primary { background: rgba(99, 102, 241, .2); color: #A5B4FC; }
body.t-neon .pf-badge.t-tertiary { background: rgba(52, 211, 153, .16); color: #6EE7B7; }
body.t-neon .pf-badge.t-amber { background: rgba(251, 191, 36, .16); color: #FCD34D; }

/* 底部导航 */
body.t-neon .tabbar-in {
    background: rgba(20, 27, 43, .74);
    border-color: rgba(255, 255, 255, .09);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .06),
                0 12px 36px -6px rgba(0, 0, 0, .6);
}
body.t-neon .tb-item.on {
    color: #A5B4FC;
    background: radial-gradient(circle, rgba(99, 102, 241, .28) 0%, rgba(99, 102, 241, .1) 100%);
}

/* 顶栏 */
body.t-neon .shell-head { background: rgba(8, 11, 20, .82); }

/* 加密说明条 */
body.t-neon .sec-banner { background: rgba(99, 102, 241, .14); }

/* 焦点环：暗色下用品牌浅色，保证 3:1 */
body.t-neon .field-input:focus {
    box-shadow: inset 0 0 0 1.5px #818CF8, 0 0 0 3px rgba(99, 102, 241, .28);
}

/* ==========================================================================
   款式 2 · 极光玻璃（Aurora Glass）
   深底 + 多彩极光 + 毛玻璃卡片。更梦幻、更亮，适合想「显高级」的诉求。
   ========================================================================== */
body.t-aurora {
    --page-bg: #0B0A1F;
    /* 第一层是暗色压制层：纯亮极光上白字对比度只有 4.34:1（低于 WCAG 4.5:1），
       压一层 62%~82% 的底色后实测约 11:1，同时保留色彩观感。 */
    --aurora:
        linear-gradient(180deg, rgba(11, 10, 31, .62) 0%, rgba(11, 10, 31, .82) 100%),
        radial-gradient(900px 720px at 6% -6%,   rgba(167, 139, 250, .70), transparent 58%),
        radial-gradient(820px 640px at 102% 6%,  rgba(244, 114, 182, .52), transparent 58%),
        radial-gradient(900px 720px at 48% 106%, rgba(34, 211, 238, .46), transparent 60%);

    --surface: rgba(255, 255, 255, .05);
    --surface-2: rgba(255, 255, 255, .1);
    --m3-surface: rgba(255, 255, 255, .05);
    --m3-surface-container-lowest: rgba(255, 255, 255, .05);
    --m3-surface-container-low: rgba(255, 255, 255, .09);
    --m3-surface-container: rgba(255, 255, 255, .14);
    --m3-surface-container-high: rgba(255, 255, 255, .17);
    --m3-surface-container-highest: rgba(255, 255, 255, .2);
    --m3-surface-bright: rgba(255, 255, 255, .13);

    --fg: #F2F0FF;
    --fg-2: #B9B4DA;
    --fg-3: #8A85AE;
    --ink: #F2F0FF;
    --ink-2: #B9B4DA;
    --ink-3: #8A85AE;
    --m3-on-surface: #F2F0FF;
    --m3-on-surface-variant: #B9B4DA;
    --m3-outline: #9B96BF;
    --m3-outline-variant: #6E6A93;

    --line: rgba(255, 255, 255, .14);
    --divider: rgba(255, 255, 255, .09);
    --grip: rgba(255, 255, 255, .3);

    --primary: #A78BFA;
    --primary-press: #8B5CF6;
    --primary-soft: rgba(167, 139, 250, .18);
    --brand: #A78BFA;
    --brand-press: #8B5CF6;
    --brand-soft: rgba(167, 139, 250, .18);
    --brand-soft-fg: #DDD6FE;
    --brand-glow: rgba(167, 139, 250, .38);
    --on-brand: #1B1035;

    --success: #6EE7B7;
    --warning: #FCD34D;
    --danger: #FDA4AF;
    --danger-fg: #FDA4AF;
    --m3-error: #FDA4AF;
    --m3-error-container: rgba(253, 164, 175, .16);
    --m3-on-error-container: #FDA4AF;
    --m3-tertiary: #6EE7B7;
    --warning-soft: rgba(252, 211, 77, .12);
    --warning-fg: #FDE68A;

    --m3-secondary-fixed: rgba(167, 139, 250, .22);
    --m3-on-secondary-fixed-variant: #DDD6FE;

    --ctl-line: rgba(255, 255, 255, .30);
    --track: rgba(255, 255, 255, .18);
    --accent: #67E8F9;
}

/* 毛玻璃：所有卡片与面板 */
body.t-aurora .sheet-panel,
body.t-aurora .pf-card,
body.t-aurora .search-box,
body.t-aurora .field-input,
body.t-aurora .tabbar-in,
body.t-aurora .sheet-dock {
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .14);
}
body.t-aurora .sheet-panel {
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, .5);
}
body.t-aurora .sheet-dock { background: rgba(20, 16, 45, .82); }

body.t-aurora .btn-primary:not(.is-ghosted),
body.t-aurora .pf-btn:not(.is-disabled),
body.t-aurora .search-btn,
body.t-aurora .empty-btn {
    background-color: transparent;
    background-image: linear-gradient(135deg, #C4B5FD 0%, #67E8F9 120%);
    color: #1B1035;
    box-shadow: 0 8px 24px rgba(167, 139, 250, .4);
}
body.t-aurora .btn-primary:not(.is-ghosted) i,
body.t-aurora .pf-btn:not(.is-disabled) i { color: #1B1035; }

body.t-aurora .pf-ico {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: none;
}
body.t-aurora .pf-badge { background: rgba(255, 255, 255, .12); color: var(--fg-2); }
body.t-aurora .sec-banner { background: rgba(167, 139, 250, .16); }
body.t-aurora .shell-head { background: rgba(11, 10, 31, .7); }

body.t-aurora .field-input:focus {
    box-shadow: inset 0 0 0 1.5px #C4B5FD, 0 0 0 3px rgba(167, 139, 250, .3);
}

/* ==========================================================================
   款式 3 · 硬朗亮色（Bold Light）
   白底 + 粗描边 + 硬阴影（无模糊）+ 电光靛蓝。信息感强、不寡淡。
   ========================================================================== */
body.t-bold {
    --page-bg: #F4F5F8;
    --aurora: none;

    --surface: #FFFFFF;
    --surface-2: #F1F2F6;
    --m3-surface: #FFFFFF;
    --m3-surface-container-lowest: #FFFFFF;
    --m3-surface-container-low: #F1F2F6;
    --m3-surface-container: #E7E9EF;
    --m3-surface-container-high: #DDE0E8;
    --m3-surface-container-highest: #D2D6E0;
    --m3-surface-bright: #FFFFFF;

    --fg: #0B0F19;
    --fg-2: #4B5565;
    --fg-3: #7A8496;
    --ink: #0B0F19;
    --ink-2: #4B5565;
    --ink-3: #7A8496;
    --m3-on-surface: #0B0F19;
    --m3-on-surface-variant: #4B5565;
    --m3-outline: #6B7280;
    --m3-outline-variant: #9AA1AE;

    --line: #0B0F19;
    --divider: #DDE0E8;
    --grip: #0B0F19;

    --primary: #4338FF;
    --primary-press: #2E24D8;
    --primary-soft: #E8E7FF;
    --brand: #4338FF;
    --brand-press: #2E24D8;
    --brand-soft: #E8E7FF;
    --brand-soft-fg: #2E24D8;
    --brand-glow: rgba(67, 56, 255, .22);
    --on-brand: #FFFFFF;

    --success: #059669;
    --warning: #D97706;
    --danger: #DC2626;
    --danger-fg: #B91C1C;
    --m3-error: #DC2626;
    --m3-error-container: #FEE2E2;
    --m3-on-error-container: #991B1B;
    --m3-tertiary: #059669;
    --warning-soft: #FFF7E6;
    --warning-fg: #92400E;

    --m3-secondary-fixed: #E8E7FF;
    --m3-on-secondary-fixed-variant: #2E24D8;

    --ctl-line: #0B0F19;
    --track: #D2D6E0;
    --accent: #059669;
}

/* 硬朗：2px 实线描边 + 无模糊硬阴影 */
body.t-bold .sheet-panel {
    border-top: 2px solid #0B0F19;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 0 rgba(11, 15, 25, .12);
}
body.t-bold .field-input {
    box-shadow: inset 0 0 0 2px #0B0F19;
    border-radius: 10px;
}
body.t-bold .field-input:focus {
    box-shadow: inset 0 0 0 2px var(--primary), 0 0 0 3px rgba(67, 56, 255, .18);
}
body.t-bold .field-input::placeholder { color: #9AA1AE; }
body.t-bold .field-ro {
    box-shadow: inset 0 0 0 2px #D2D6E0;
    border-radius: 10px;
}
body.t-bold .pf-card {
    border: 2px solid #0B0F19;
    box-shadow: 3px 3px 0 #0B0F19;
    border-radius: 14px;
}
body.t-bold .pf-card:hover { box-shadow: 5px 5px 0 #0B0F19; }
body.t-bold .pf-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0B0F19; }
body.t-bold .btn-primary:not(.is-ghosted) {
    border: 2px solid #0B0F19;
    box-shadow: 3px 3px 0 #0B0F19;
    border-radius: 12px;
}
body.t-bold .btn-primary:not(.is-ghosted):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0B0F19; }
body.t-bold .search-box { border: 2px solid #0B0F19; border-radius: 12px; }
body.t-bold .search-btn { border: 2px solid #0B0F19; }
body.t-bold .sec-banner {
    background: #E8E7FF;
    border: 2px solid #0B0F19;
    border-radius: 12px;
}
body.t-bold .sheet-dock { border-top: 2px solid #0B0F19; }
body.t-bold .tabbar-in {
    background: #FFFFFF;
    border: 2px solid #0B0F19;
    box-shadow: 4px 4px 0 rgba(11, 15, 25, .18);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.t-bold .tb-item.on { color: var(--primary); background: #E8E7FF; }
body.t-bold .pf-ico {
    border: 2px solid #0B0F19;
    box-shadow: none;
    border-radius: 12px;
}
body.t-bold .pf-badge { border: 1.5px solid #0B0F19; }
body.t-bold .shell-head {
    background: rgba(255, 255, 255, .92);
    border-bottom: 2px solid #0B0F19;
}
body.t-bold .sheet-close { border: 2px solid #0B0F19; background: #FFFFFF; }
body.t-bold .sync { border: 2px solid #D2D6E0; }
body.t-bold .sheet-alert { border: 2px solid #D97706; background: #FFF7E6; }

/* ==========================================================================
   款式 4 · 极光白昼（Aurora Light）
   来源：Stitch 项目「查课与选课 · Aurora Light」定稿（2026-09-23 已确认采用）
   特点：明亮冷白底 + 顶部极光光晕 + 靛紫主色 + 薄荷进度色；
        大圆角（卡片 20px）、胶囊按钮、柔和紫调投影。
   适用：手机端 H5，单列整页。
   ========================================================================== */
body.t-aurora-light {
    --page-bg: #F7F8FC;
    /* 顶部极光：靛紫 + 淡紫双光晕，向下自然淡出 */
    --aurora:
        radial-gradient(680px 420px at 50% -12%, rgba(124, 92, 255, .22), transparent 68%),
        radial-gradient(520px 380px at 94% 1%, rgba(192, 132, 252, .16), transparent 66%);

    --surface: #FFFFFF;
    --surface-2: #F0F3FF;
    --m3-surface: #FFFFFF;
    --m3-surface-container-lowest: #FFFFFF;
    --m3-surface-container-low: #F0F3FF;
    --m3-surface-container: #E7EEFE;
    --m3-surface-container-high: #E2E8F8;
    --m3-surface-container-highest: #DCE2F3;
    --m3-surface-bright: #FFFFFF;

    --fg: #1E1B4B;
    --fg-2: #6B7280;
    --fg-3: #9CA3AF;
    --ink: #1E1B4B;
    --ink-2: #6B7280;
    --ink-3: #9CA3AF;
    --m3-on-surface: #151C27;
    --m3-on-surface-variant: #474555;
    --m3-outline: #787586;
    --m3-outline-variant: #C8C4D8;

    --line: #EBEEF5;
    --divider: #F1F3F9;
    --grip: #D1D5DB;

    --primary: #6D5EF8;
    --primary-press: #5B4CE0;
    --primary-soft: #EDE9FE;
    --brand: #6D5EF8;
    --brand-press: #5B4CE0;
    --brand-soft: #EDE9FE;
    --brand-soft-fg: #5B4CE0;
    --brand-glow: rgba(109, 94, 248, .18);
    --on-brand: #FFFFFF;

    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --danger-fg: #DC2626;
    --m3-error: #DC2626;
    --m3-error-container: #FEF2F2;
    --m3-on-error-container: #B91C1C;
    --m3-tertiary: #10B981;
    --warning-soft: #FFFBEB;
    --warning-fg: #92400E;

    --m3-secondary-fixed: #F3E8FF;
    --m3-on-secondary-fixed-variant: #7E22CE;

    /* 控件：浅色下描边要够清楚，进度轨道用淡紫 */
    --ctl-line: #D1D5DB;
    --track: #EDE9FE;
    --accent: #10B981;

    /* 更柔的紫调投影 */
    --e1: 0 4px 20px -2px rgba(109, 94, 248, .06), 0 2px 6px -1px rgba(0, 0, 0, .02);
    --e2: 0 12px 30px -4px rgba(109, 94, 248, .12), 0 4px 10px -2px rgba(0, 0, 0, .04);
}

/* 卡片：20px 大圆角 + 极淡描边 */
body.t-aurora-light .card { border-radius: 20px; border-color: rgba(235, 238, 245, .9); }
body.t-aurora-light .course { border-radius: 16px; }
body.t-aurora-light .state-view { border-radius: 20px; }

/* 主按钮：胶囊形 + 135° 紫渐变 + 柔光 */
body.t-aurora-light .btn-primary:not(.is-ghosted),
body.t-aurora-light .search-btn,
body.t-aurora-light .empty-btn {
    background-color: transparent;
    background-image: linear-gradient(135deg, #7C5CFF 0%, #A78BFA 100%);
    border-radius: var(--r-full);
    box-shadow: 0 6px 18px rgba(124, 92, 255, .35);
}
body.t-aurora-light .btn-primary:not(.is-ghosted):hover {
    background-image: linear-gradient(135deg, #6D4EE8 0%, #997BF5 100%);
}
body.t-aurora-light .btn-primary.is-busy {
    background-color: transparent;
    background-image: linear-gradient(135deg, rgba(124, 92, 255, .5) 0%, rgba(167, 139, 250, .5) 100%);
}

/* 输入框：48px 高、14px 圆角、聚焦紫描边 + 柔光 */
body.t-aurora-light .field-input {
    height: 48px;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1.5px #E5E7EB;
}
body.t-aurora-light .field-input:focus {
    box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 3px rgba(109, 94, 248, .15);
}
body.t-aurora-light .pick-filter input { height: 44px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }

/* 进度条：8px 高 + 薄荷渐变填充 */
body.t-aurora-light .prog-track { height: 6px; }
body.t-aurora-light .prog-fill {
    background-image: linear-gradient(90deg, #10B981 0%, #34D399 100%);
    background-color: transparent;
}

/* 复选框：圆角 7px，选中走紫渐变 */
body.t-aurora-light .cbox { width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--ctl-line); }
body.t-aurora-light .course.on .cbox {
    background-color: transparent;
    background-image: linear-gradient(135deg, #7C5CFF 0%, #A78BFA 100%);
    box-shadow: none;
}

/* 吸底结算栏：上圆角 20px + 紫调上投影 */
body.t-aurora-light .checkout { border-radius: 20px 20px 0 0; box-shadow: 0 -4px 24px rgba(124, 92, 255, .08); }
body.t-aurora-light .checkout-btn {
    height: 48px;
    border-radius: 14px;
    background-color: transparent;
    background-image: linear-gradient(135deg, #7C5CFF 0%, #A78BFA 100%);
    box-shadow: 0 6px 18px rgba(124, 92, 255, .3);
}
body.t-aurora-light .checkout-btn:hover { background-image: linear-gradient(135deg, #6D4EE8 0%, #997BF5 100%); }
body.t-aurora-light .checkout-btn[disabled] { background-image: none; background-color: var(--surface-2); color: var(--fg-3); box-shadow: none; }

/* 服务摘要图标 / 胶囊 */
body.t-aurora-light .svc-ico { background: var(--brand-soft); color: var(--brand); }
body.t-aurora-light .tag { background: var(--surface-2); color: var(--fg-2); }
body.t-aurora-light .acct-ico { background: var(--brand-soft); color: var(--brand); }
body.t-aurora-light .state-ico { background: var(--brand-soft); color: var(--brand); }
body.t-aurora-light .btn-ghost { background: var(--brand-soft); color: var(--brand); border-radius: var(--r-full); }

/* 顶栏：跟随极光，不要实心底 */
body.t-aurora-light .page-head {
    background: rgba(247, 248, 252, .82);
    border-bottom-color: var(--line);
}