@charset "utf-8";
/* ============================================================================
   MyJobTask UI v2 · "Aurora Light"
   ----------------------------------------------------------------------------
   一套全新的全站视觉语言：柔和极光背景 + 纯白卡片 + 靛蓝主色 + 青色点缀。
   分层：
     1) 设计令牌（配色 / 字体层级 / 间距 / 圆角 / 阴影 / 动效）
     2) 基础层（页面背景、排版、焦点、滚动条、无障碍）
     3) 换肤层（公共头部 / 底部导航 / 按钮 / 表单 / 卡片 / 分页 / 公告）
     4) 组件库（.ui-* 前缀，可叠加到任意页面）
     5) 状态与响应式
   原则：只改变"视觉表现"（颜色、字体、圆角、阴影、间距、状态），
        不改变 DOM 结构与业务逻辑；通用容器不加 !important 背景，避免破坏渐变色块。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. 设计令牌
   --------------------------------------------------------------------------- */
:root {
    /* 主色：品牌蓝 */
    --ui-primary: #2E6BE6;
    --ui-primary-dark: #1F55C4;
    --ui-primary-light: #6D9CF5;
    --ui-primary-soft: #EAF1FE;
    /* 点缀：亮青 */
    --ui-accent: #22D3EE;
    --ui-accent-soft: #E6FBFF;
    /* 语义色 */
    --ui-success: #10B981;
    --ui-success-soft: #E7F9F1;
    --ui-warning: #F59E0B;
    --ui-warning-soft: #FFF6E6;
    --ui-danger: #EF4444;
    --ui-danger-soft: #FEECEC;
    --ui-info: #3B82F6;
    --ui-info-soft: #EAF1FE;

    /* 中性色 */
    --ui-bg: #F4F5FB;
    --ui-bg-alt: #EDEFF7;
    --ui-surface: #FFFFFF;
    --ui-border: #EBEDF5;
    --ui-border-strong: #DDE1EE;
    --ui-text: #1E2433;
    --ui-text-2: #5A6478;
    --ui-text-3: #8C96AB;
    --ui-text-4: #B4BCCB;

    /* 字体 */
    --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
              "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --ui-fs-xs: 11px;
    --ui-fs-sm: 12px;
    --ui-fs-base: 14px;
    --ui-fs-md: 15px;
    --ui-fs-lg: 17px;
    --ui-fs-xl: 20px;
    --ui-fs-2xl: 24px;
    --ui-fs-3xl: 30px;
    --ui-lh-tight: 1.3;
    --ui-lh-base: 1.6;
    --ui-fw-normal: 400;
    --ui-fw-medium: 500;
    --ui-fw-semibold: 600;
    --ui-fw-bold: 700;
    --ui-fw-black: 800;

    /* 间距（4 的倍数） */
    --ui-sp-1: 4px;
    --ui-sp-2: 8px;
    --ui-sp-3: 12px;
    --ui-sp-4: 16px;
    --ui-sp-5: 20px;
    --ui-sp-6: 24px;
    --ui-sp-8: 32px;
    --ui-sp-10: 40px;

    /* 圆角 */
    --ui-radius-sm: 6px;
    --ui-radius: 8px;
    --ui-radius-lg: 8px;
    --ui-radius-xl: 10px;
    --ui-radius-pill: 999px;

    /* 阴影 */
    --ui-shadow-xs: 0 1px 2px rgba(30, 36, 51, .05);
    --ui-shadow-sm: 0 2px 10px rgba(30, 36, 51, .05);
    --ui-shadow: 0 8px 24px rgba(30, 36, 51, .08);
    --ui-shadow-lg: 0 18px 48px rgba(30, 36, 51, .14);
    --ui-shadow-brand: 0 6px 18px rgba(46, 107, 230, .28);
    --ui-shadow-focus: 0 0 0 3px rgba(46, 107, 230, .16);

    /* 渐变 */
    --ui-grad: linear-gradient(135deg, #4C8DF6 0%, #2E6BE6 100%);
    --ui-grad-soft: linear-gradient(135deg, #EAF1FE 0%, #E6FBFF 100%);

    /* 动效 */
    --ui-ease: cubic-bezier(.4, 0, .2, 1);
    --ui-dur: .22s;

    /* 层级 / 布局 */
    --ui-z-nav: 100;
    --ui-z-overlay: 9000;
    --ui-z-toast: 9100;
    --ui-container: 1200px;
    --ui-gutter: 16px;
}

/* ---------------------------------------------------------------------------
   2. 基础层
   --------------------------------------------------------------------------- */
:where(html) {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* 全新页面背景：柔和极光叠层 */
body {
    font-family: var(--ui-font);
    color: var(--ui-text);
    background-color: var(--ui-bg);
    background-image:
        radial-gradient(1100px 560px at 8% -12%, rgba(46, 107, 230, .12), transparent 62%),
        radial-gradient(900px 480px at 102% -4%, rgba(34, 211, 238, .10), transparent 58%),
        radial-gradient(800px 520px at 50% 120%, rgba(109, 156, 245, .10), transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 正文可读性 */
.body_main p {
    font-size: var(--ui-fs-base);
    line-height: var(--ui-lh-base);
    color: var(--ui-text-2);
}
.body_main h1, .body_main h2, .body_main h3, .body_main h4 {
    color: var(--ui-text);
    font-weight: var(--ui-fw-bold);
    letter-spacing: -.2px;
}

/* 交互元素统一过渡 */
:where(a, button, input, select, textarea, summary, [role="button"]) {
    -webkit-tap-highlight-color: transparent;
    transition: color var(--ui-dur) var(--ui-ease),
                background-color var(--ui-dur) var(--ui-ease),
                border-color var(--ui-dur) var(--ui-ease),
                box-shadow var(--ui-dur) var(--ui-ease),
                opacity var(--ui-dur) var(--ui-ease);
}

/* 键盘可见焦点 */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
}

/* 禁用态 */
:where(button, input, select, textarea, [role="button"]):disabled,
:where([aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
}

:where(button, [role="button"], .ui-btn):not(:disabled):active {
    transform: translateY(1px);
}

::selection {
    background: rgba(46, 107, 230, .16);
    color: var(--ui-text);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D5D9E8; border-radius: var(--ui-radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--ui-primary-light); }

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

/* ---------------------------------------------------------------------------
   3. 换肤层 · 公共头部
   --------------------------------------------------------------------------- */
header.top_header,
.top_header {
    background: var(--ui-grad) !important;
    background-color: var(--ui-primary) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 18px rgba(46, 107, 230, .26) !important;
}
header.top_header .title,
.top_header .title {
    font-size: var(--ui-fs-lg);
    font-weight: var(--ui-fw-semibold);
    letter-spacing: .2px;
    color: #fff !important;
}
header.top_header .left a.return,
.top_header .left a.return {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 18px auto !important;
    opacity: .95;
}
header.top_header .right a,
.top_header .right a {
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-semibold);
    color: #fff !important;
    opacity: .92;
}
header.top_header .right a:active,
.top_header .right a:active { opacity: .7; }

/* ---------------------------------------------------------------------------
   4. 换肤层 · 底部导航
   --------------------------------------------------------------------------- */
footer,
.footer {
    background: rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--ui-border) !important;
    box-shadow: 0 -6px 24px rgba(30, 36, 51, .06) !important;
}
.footer li a,
.footer li p,
.footer li span { color: var(--ui-text-3) !important; }
.footer li a { font-size: var(--ui-fs-xs); }
.footer li.active a,
.footer li a:hover,
.footer li.active p,
.footer li.active span { color: var(--ui-primary) !important; }
.footer li.active a { font-weight: var(--ui-fw-semibold); }

/* ---------------------------------------------------------------------------
   5. 换肤层 · 页面容器与分区
   --------------------------------------------------------------------------- */
.body_main {
    max-width: var(--ui-container);
    margin-left: auto;
    margin-right: auto;
}
.gray_bg {
    background: transparent;
}

/* 区块标题（页面里常见的 .tit / .index_title / .section-title） */
.tit,
.index_title,
.section-title {
    font-weight: var(--ui-fw-bold) !important;
    color: var(--ui-text) !important;
    letter-spacing: -.2px;
}

/* ---------------------------------------------------------------------------
   6. 换肤层 · 按钮
   --------------------------------------------------------------------------- */
.btn,
.submit-btn,
.reg_btn,
.blue_btn,
.apply_btn,
.recharge_btn,
.send-code-btn,
.bala-btn,
button[type="submit"] {
    border-radius: var(--ui-radius) !important;
    font-family: var(--ui-font);
    font-weight: var(--ui-fw-semibold) !important;
    letter-spacing: .2px;
    border: 0 !important;
    box-shadow: var(--ui-shadow-brand);
    transition: transform var(--ui-dur) var(--ui-ease),
                box-shadow var(--ui-dur) var(--ui-ease),
                opacity var(--ui-dur) var(--ui-ease) !important;
}

.btn,
.submit-btn,
.reg_btn,
.blue_btn,
.apply_btn,
.recharge_btn,
button[type="submit"] {
    background: var(--ui-grad) !important;
    color: #fff !important;
}

.send-code-btn,
.bala-btn {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
    box-shadow: none;
}

.btn:hover,
.submit-btn:hover,
.reg_btn:hover,
.blue_btn:hover,
.apply_btn:hover,
.recharge_btn:hover,
button[type="submit"]:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(46, 107, 230, .34);
}
.btn:active,
.submit-btn:active,
.reg_btn:active,
.blue_btn:active,
.apply_btn:active { transform: translateY(0) !important; }

.btn:disabled,
.btn.is-disabled,
.submit-btn:disabled,
button[type="submit"]:disabled {
    background: #DDE1EE !important;
    color: #97A1B5 !important;
    box-shadow: none !important;
}

/* 按钮色彩变体 */
.btn-default {
    background: var(--ui-surface) !important;
    color: var(--ui-primary) !important;
    border: 1px solid var(--ui-primary-light) !important;
    box-shadow: var(--ui-shadow-xs);
}
.btn-success { background: linear-gradient(135deg, #34D399, var(--ui-success)) !important; color: #fff !important; }
.btn-info { background: linear-gradient(135deg, #60A5FA, var(--ui-info)) !important; color: #fff !important; }
.btn-warning { background: linear-gradient(135deg, #FBBF24, var(--ui-warning)) !important; color: #fff !important; }
.btn-danger { background: linear-gradient(135deg, #F87171, var(--ui-danger)) !important; color: #fff !important; }

/* 小尺寸按钮保持紧凑 */
.btn-sm, .btn-xs { border-radius: var(--ui-radius-sm) !important; box-shadow: none; }

/* 加载态 */
.ui-btn.is-loading,
button.is-loading,
.btn.is-loading {
    position: relative;
    color: transparent !important;
    text-shadow: none;
    pointer-events: none;
}
.ui-btn.is-loading::after,
button.is-loading::after,
.btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ui-spin .7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   7. 换肤层 · 表单
   --------------------------------------------------------------------------- */
.form-control,
.input-text,
.input-group input,
.input-group select,
input[type="text"]:not(.ui-input):not(.date-picker),
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
select:not(.ui-select),
textarea {
    border-radius: var(--ui-radius) !important;
    border: 1px solid var(--ui-border-strong) !important;
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    font-size: var(--ui-fs-base);
    font-family: var(--ui-font);
    box-shadow: none;
    transition: border-color var(--ui-dur) var(--ui-ease),
                box-shadow var(--ui-dur) var(--ui-ease) !important;
}

/* 常用表单类统一高度，避免逐页尺寸不一致 */
.form-control,
.input-text,
.ui-input,
.ui-select {
    min-height: 44px;
    padding: 10px 14px;
}
select:not(.ui-select) {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238C96AB' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px 7px !important;
    padding-right: 34px !important;
}
.form-control:focus,
.input-text:focus,
.input-group input:focus,
.login-inp input:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="text"]:focus,
select:focus,
textarea:focus {
    border-color: var(--ui-primary) !important;
    box-shadow: var(--ui-shadow-focus) !important;
    outline: none;
}
::placeholder { color: var(--ui-text-4); opacity: 1; }

/* 表单行容器 */
.login-inp {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    box-shadow: var(--ui-shadow-xs);
}
.login-inp label {
    color: var(--ui-text-3) !important;
    font-size: var(--ui-fs-sm) !important;
    font-weight: var(--ui-fw-semibold);
}
/* 行内的裸输入框：透明无边框，避免与外层容器形成"框中框" */
.login-inp input,
.login-inp select,
.login-inp textarea {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ui-text) !important;
    font-size: var(--ui-fs-base);
    text-align: left;
}
.login-inp input:focus,
.login-inp select:focus,
.login-inp textarea:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}
.input-group {
    border-radius: var(--ui-radius) !important;
}
.input-group input {
    box-shadow: var(--ui-shadow-xs);
}

/* ---------------------------------------------------------------------------
   8. 换肤层 · 卡片 / 列表 / 分页 / 公告
   --------------------------------------------------------------------------- */
.task_box,
.form-card,
.total-box,
.code-box,
.none_box,
.upload-item,
.amount-item,
.pay-item {
    border-radius: var(--ui-radius-lg) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-sm);
}
.task_box {
    background: var(--ui-surface) !important;
    padding: 16px !important;
}

.amount-item,
.pay-item {
    border-color: var(--ui-border-strong) !important;
    transition: border-color var(--ui-dur) var(--ui-ease),
                box-shadow var(--ui-dur) var(--ui-ease),
                background-color var(--ui-dur) var(--ui-ease);
}
.amount-item:hover,
.pay-item:hover {
    border-color: var(--ui-primary-light) !important;
    box-shadow: var(--ui-shadow-xs);
}

/* 分页 */
.page_bar a,
.page_bar span {
    min-width: 34px !important;
    height: 34px !important;
    line-height: 32px !important;
    padding: 0 10px !important;
    margin: 0 4px !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    font-size: var(--ui-fs-sm);
    color: var(--ui-text-2) !important;
    background: var(--ui-surface);
    transition: all var(--ui-dur) var(--ui-ease);
}
.page_bar a:hover {
    border-color: var(--ui-primary) !important;
    color: var(--ui-primary) !important;
}
.page_bar span.current {
    background: var(--ui-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--ui-shadow-brand);
}
.page-box a,
.page-box span {
    border-radius: var(--ui-radius-sm) !important;
}

/* 公告弹层 */
.ggnotice {
    border-radius: var(--ui-radius-xl) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    overflow: hidden;
}
.ggnotice-html { color: var(--ui-text-2); }
.ggnotice-html p { font-size: var(--ui-fs-base); line-height: var(--ui-lh-base); }
.page_index_ckxxnr {
    background: var(--ui-grad) !important;
    border-radius: var(--ui-radius-pill) !important;
    box-shadow: var(--ui-shadow-brand) !important;
}
.pop-background { background: rgba(30, 36, 51, .5) !important; }

/* 状态类 */
.is-active,
.active { color: var(--ui-primary); }
.text-primary { color: var(--ui-primary) !important; }
.text-muted { color: var(--ui-text-3) !important; }
.text-danger { color: var(--ui-danger) !important; }
.text-success { color: var(--ui-success) !important; }

/* ---------------------------------------------------------------------------
   9. 组件库（.ui-*）
   --------------------------------------------------------------------------- */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    min-height: 44px;
    font-size: var(--ui-fs-base);
    font-weight: var(--ui-fw-semibold);
    line-height: 1.4;
    color: #fff;
    background: var(--ui-grad);
    border: 1px solid transparent;
    border-radius: var(--ui-radius);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--ui-shadow-brand);
    position: relative;
    overflow: hidden;
    user-select: none;
}
.ui-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(46, 107, 230, .34); }
.ui-btn:active { transform: translateY(0); }
.ui-btn:disabled, .ui-btn.is-disabled {
    background: #DDE1EE;
    color: #97A1B5;
    box-shadow: none;
    transform: none;
}
.ui-btn-block { display: flex; width: 100%; }
.ui-btn-sm { min-height: 34px; padding: 7px 14px; font-size: var(--ui-fs-sm); border-radius: var(--ui-radius-sm); box-shadow: none; }
.ui-btn-lg { min-height: 50px; padding: 13px 26px; font-size: var(--ui-fs-md); border-radius: var(--ui-radius-lg); }
.ui-btn-secondary {
    background: var(--ui-surface);
    color: var(--ui-primary);
    border-color: var(--ui-primary-light);
    box-shadow: var(--ui-shadow-xs);
}
.ui-btn-secondary:hover { background: var(--ui-primary-soft); box-shadow: var(--ui-shadow-sm); }
.ui-btn-ghost {
    background: transparent;
    color: var(--ui-text-2);
    border-color: var(--ui-border-strong);
    box-shadow: none;
}
.ui-btn-ghost:hover { background: var(--ui-bg-alt); color: var(--ui-primary); border-color: var(--ui-primary-light); }
.ui-btn-danger { background: linear-gradient(135deg, #F87171, var(--ui-danger)); box-shadow: 0 6px 18px rgba(239, 68, 68, .26); }

.ui-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-sp-4);
    box-shadow: var(--ui-shadow-sm);
    transition: box-shadow var(--ui-dur) var(--ui-ease), transform var(--ui-dur) var(--ui-ease);
}
.ui-card-hover:hover { box-shadow: var(--ui-shadow); transform: translateY(-2px); }
.ui-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-sp-3); margin-bottom: var(--ui-sp-3); }
.ui-card-title { font-size: var(--ui-fs-md); font-weight: var(--ui-fw-bold); color: var(--ui-text); }
.ui-divider { height: 1px; background: var(--ui-border); border: 0; margin: var(--ui-sp-3) 0; }

.ui-section-title {
    display: flex;
    align-items: center;
    gap: var(--ui-sp-2);
    font-size: var(--ui-fs-lg);
    font-weight: var(--ui-fw-bold);
    color: var(--ui-text);
    letter-spacing: -.2px;
    padding: var(--ui-sp-4) 0 var(--ui-sp-2);
}
.ui-section-title::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(var(--ui-primary), var(--ui-accent));
}

.ui-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--ui-sp-3); }
.ui-label { font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-semibold); color: var(--ui-text-2); }
.ui-label.is-required::after { content: " *"; color: var(--ui-danger); }
.ui-input, .ui-select, .ui-textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: var(--ui-fs-base);
    font-family: inherit;
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.ui-input:focus, .ui-select:focus, .ui-textarea:focus {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-shadow-focus);
}
.ui-select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238C96AB' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 7px;
    padding-right: 34px;
}
.ui-hint { font-size: var(--ui-fs-xs); color: var(--ui-text-3); line-height: var(--ui-lh-base); }
.ui-field.is-error .ui-input,
.ui-field.is-error .ui-select,
.ui-field.is-error .ui-textarea { border-color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-error-text { display: none; font-size: var(--ui-fs-xs); color: var(--ui-danger); line-height: var(--ui-lh-base); }
.ui-field.is-error .ui-error-text { display: block; }

.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    font-size: var(--ui-fs-xs);
    font-weight: var(--ui-fw-semibold);
    line-height: 1.8;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
    white-space: nowrap;
}
.ui-badge-success { background: var(--ui-success-soft); color: #047857; }
.ui-badge-warning { background: var(--ui-warning-soft); color: #B45309; }
.ui-badge-danger { background: var(--ui-danger-soft); color: #C0392B; }
.ui-badge-info { background: var(--ui-info-soft); color: #1D4ED8; }
.ui-badge-muted { background: var(--ui-bg-alt); color: var(--ui-text-3); }
.ui-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; vertical-align: middle; }

.ui-list { display: flex; flex-direction: column; gap: var(--ui-sp-2); margin: 0; padding: 0; list-style: none; }
.ui-list-item {
    padding: 14px var(--ui-sp-4);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    transition: border-color var(--ui-dur) var(--ui-ease),
                box-shadow var(--ui-dur) var(--ui-ease),
                transform var(--ui-dur) var(--ui-ease);
}
.ui-list-item:hover { border-color: var(--ui-primary-light); box-shadow: var(--ui-shadow-sm); transform: translateX(2px); }

.ui-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--ui-fs-base);
    background: var(--ui-surface);
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: var(--ui-shadow-xs);
}
.ui-table th, .ui-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--ui-border); vertical-align: middle; }
.ui-table th { font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-semibold); color: var(--ui-text-3); background: var(--ui-bg-alt); white-space: nowrap; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover td { background: #FAFBFF; }

/* 空状态 / 骨架屏 / 加载 */
.ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ui-sp-2);
    padding: var(--ui-sp-10) var(--ui-sp-4);
    text-align: center;
    color: var(--ui-text-3);
    animation: ui-fade-in .3s var(--ui-ease);
}
.ui-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
}
.ui-empty-title { font-size: var(--ui-fs-base); font-weight: var(--ui-fw-semibold); color: var(--ui-text-2); }
.ui-empty-desc { font-size: var(--ui-fs-sm); color: var(--ui-text-4); }
@keyframes ui-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ui-skeleton { position: relative; overflow: hidden; background: var(--ui-bg-alt); border-radius: var(--ui-radius-sm); min-height: 14px; }
.ui-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
    animation: ui-shimmer 1.4s infinite;
}
@keyframes ui-shimmer { 100% { transform: translateX(100%); } }

.ui-loading-mask {
    position: fixed;
    inset: 0;
    z-index: var(--ui-z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 36, 51, .34);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ui-dur) var(--ui-ease), visibility var(--ui-dur);
}
.ui-loading-mask.is-visible { opacity: 1; visibility: visible; }
.ui-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-sp-3);
    padding: 22px 26px;
    min-width: 116px;
    background: rgba(255, 255, 255, .97);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
    font-size: var(--ui-fs-sm);
    color: var(--ui-text-2);
}
.ui-spinner {
    width: 26px;
    height: 26px;
    border: 2.5px solid rgba(46, 107, 230, .18);
    border-top-color: var(--ui-primary);
    border-radius: 50%;
    animation: ui-spin .8s linear infinite;
}

.ui-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: var(--ui-z-toast);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s var(--ui-ease);
}
.ui-progress.is-active { opacity: 1; }
.ui-progress-bar {
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--ui-primary), var(--ui-accent));
    transition: transform .25s var(--ui-ease);
}

/* 提示条 / Toast / 弹层 */
.ui-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-sp-2);
    padding: 12px 14px;
    font-size: var(--ui-fs-sm);
    line-height: var(--ui-lh-base);
    border-radius: var(--ui-radius);
    border: 1px solid transparent;
}
.ui-alert-info { background: var(--ui-info-soft); border-color: #CFE0FF; color: #2C62B8; }
.ui-alert-success { background: var(--ui-success-soft); border-color: #C6F0E4; color: #047857; }
.ui-alert-warning { background: var(--ui-warning-soft); border-color: #FFE3B0; color: #B45309; }
.ui-alert-danger { background: var(--ui-danger-soft); border-color: #FFD1D1; color: #C0392B; }

.ui-toast-wrap {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    z-index: var(--ui-z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-sp-2);
    pointer-events: none;
    width: max-content;
    max-width: 86vw;
}
.ui-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: var(--ui-fs-base);
    line-height: var(--ui-lh-base);
    color: #fff;
    background: rgba(30, 36, 51, .92);
    border-radius: var(--ui-radius-pill);
    box-shadow: var(--ui-shadow-lg);
    animation: ui-toast-in .24s var(--ui-ease);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.ui-toast-success { background: rgba(16, 185, 129, .96); }
.ui-toast-error { background: rgba(239, 68, 68, .96); }
.ui-toast-warning { background: rgba(245, 158, 11, .96); }
.ui-toast.is-leaving { animation: ui-toast-out .2s var(--ui-ease) forwards; }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ui-toast-out { to { opacity: 0; transform: translateY(-6px); } }

.ui-modal-mask {
    position: fixed;
    inset: 0;
    z-index: var(--ui-z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ui-sp-4);
    background: rgba(30, 36, 51, .5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.ui-modal {
    width: 100%;
    max-width: 420px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: var(--ui-surface);
    border-radius: var(--ui-radius-xl);
    box-shadow: var(--ui-shadow-lg);
    overflow: hidden;
    animation: ui-modal-in .28s cubic-bezier(.34, 1.36, .64, 1);
}
@keyframes ui-modal-in { from { opacity: 0; transform: scale(.94) translateY(12px); } to { opacity: 1; transform: none; } }
.ui-modal-header { padding: var(--ui-sp-4) var(--ui-sp-5) var(--ui-sp-2); font-size: var(--ui-fs-lg); font-weight: var(--ui-fw-bold); color: var(--ui-text); }
.ui-modal-body { padding: 0 var(--ui-sp-5) var(--ui-sp-4); overflow-y: auto; font-size: var(--ui-fs-base); line-height: var(--ui-lh-base); color: var(--ui-text-2); }
.ui-modal-footer { display: flex; gap: var(--ui-sp-3); padding: var(--ui-sp-3) var(--ui-sp-5) var(--ui-sp-5); }
.ui-modal-footer .ui-btn { flex: 1; }

.ui-stat { text-align: center; }
.ui-stat-value { font-size: var(--ui-fs-2xl); font-weight: var(--ui-fw-black); line-height: 1.2; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.ui-stat-label { margin-top: 4px; font-size: var(--ui-fs-sm); color: var(--ui-text-3); }
.ui-trend-up { color: var(--ui-success); }
.ui-trend-down { color: var(--ui-danger); }

/* 排版工具 */
.ui-h1, .ui-h2, .ui-h3, .ui-h4 { color: var(--ui-text); font-weight: var(--ui-fw-bold); line-height: var(--ui-lh-tight); margin: 0; letter-spacing: -.2px; }
.ui-h1 { font-size: var(--ui-fs-2xl); }
.ui-h2 { font-size: var(--ui-fs-xl); }
.ui-h3 { font-size: var(--ui-fs-lg); }
.ui-h4 { font-size: var(--ui-fs-md); }
.ui-text { font-size: var(--ui-fs-base); color: var(--ui-text-2); line-height: var(--ui-lh-base); }
.ui-text-sm { font-size: var(--ui-fs-sm); }
.ui-text-xs { font-size: var(--ui-fs-xs); }
.ui-muted { color: var(--ui-text-3); }
.ui-strong { font-weight: var(--ui-fw-semibold); color: var(--ui-text); }
.ui-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.ui-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ui-mt-2 { margin-top: var(--ui-sp-2); }
.ui-mt-3 { margin-top: var(--ui-sp-3); }
.ui-mt-4 { margin-top: var(--ui-sp-4); }
.ui-mt-6 { margin-top: var(--ui-sp-6); }
.ui-mb-2 { margin-bottom: var(--ui-sp-2); }
.ui-mb-3 { margin-bottom: var(--ui-sp-3); }
.ui-mb-4 { margin-bottom: var(--ui-sp-4); }
.ui-mb-6 { margin-bottom: var(--ui-sp-6); }

.ui-row { display: flex; align-items: center; gap: var(--ui-sp-3); }
.ui-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-sp-3); }
.ui-stack { display: flex; flex-direction: column; gap: var(--ui-sp-3); }
.ui-wrap { flex-wrap: wrap; }
.ui-flex-1 { flex: 1; min-width: 0; }

.ui-grid { display: grid; gap: var(--ui-sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .ui-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-sp-4); } }
@media (min-width: 1024px) { .ui-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ui-container { width: 100%; max-width: var(--ui-container); margin: 0 auto; padding: 0 var(--ui-gutter); }
@media (min-width: 768px) { .ui-container { padding: 0 var(--ui-sp-6); } }

/* ---------------------------------------------------------------------------
   10. 无障碍辅助
   --------------------------------------------------------------------------- */
.ui-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.ui-skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: calc(var(--ui-z-overlay) + 10);
    padding: 10px 20px;
    background: var(--ui-primary);
    color: #fff;
    font-size: var(--ui-fs-base);
    font-weight: var(--ui-fw-semibold);
    border-radius: 0 0 var(--ui-radius) var(--ui-radius);
    transition: transform var(--ui-dur) var(--ui-ease);
}
.ui-skip-link:focus { transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------------
   11. 响应式
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root { --ui-gutter: 14px; }
    .ui-card { padding: var(--ui-sp-3); }
    .ui-toast-wrap { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 380px) {
    :root { --ui-fs-2xl: 22px; --ui-fs-xl: 19px; }
    .ui-btn { padding: 9px 16px; }
    .btn, .submit-btn { font-size: var(--ui-fs-base) !important; }
}

@media (min-width: 1024px) {
    /* 桌面端：卡片内边距更舒展 */
    .task_box { padding: 22px !important; }
}

@media (max-height: 520px) {
    .ui-modal { max-height: 92vh; }
}

.ui-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

@media print {
    .ui-btn, .ui-toast-wrap, .ui-loading-mask, .ui-progress { display: none !important; }
    .ui-card, .ui-table { box-shadow: none !important; border: 1px solid #ddd !important; }
    body { background: #fff !important; }
}