:root {
    --bg: #f5f7fb;
    --surface: rgba(255, 255, 255, .86);
    --surface-solid: #ffffff;
    --surface-soft: #f7f9fe;
    --text: #172033;
    --muted: #667085;
    --line: rgba(30, 41, 59, .10);
    --primary: #6d5dfc;
    --primary-2: #8b5cf6;
    --primary-soft: rgba(109, 93, 252, .12);
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #ef4444;
    --shadow: 0 24px 80px rgba(32, 42, 68, .12);
    --shadow-soft: 0 10px 35px rgba(32, 42, 68, .08);
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --sidebar-width: 280px;
    color-scheme: light;
}

[data-theme="dark"] {
    --bg: #0d1220;
    --surface: rgba(22, 28, 45, .82);
    --surface-solid: #141b2d;
    --surface-soft: #0f172a;
    --text: #eef2ff;
    --muted: #9aa4bd;
    --line: rgba(226, 232, 240, .12);
    --primary: #8b7cff;
    --primary-2: #c084fc;
    --primary-soft: rgba(139, 124, 255, .18);
    --shadow: 0 24px 80px rgba(0, 0, 0, .38);
    --shadow-soft: 0 10px 35px rgba(0, 0, 0, .24);
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
    background:
        radial-gradient(circle at 12% 0%, rgba(109, 93, 252, .18), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(14, 165, 233, .16), transparent 28%),
        var(--bg);
    color: var(--text);
}

button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    gap: 0;
}

.glass-card {
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px 18px;
    border-right: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.56));
    backdrop-filter: blur(22px);
    z-index: 30;
    overflow-y: auto;
}

[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, rgba(15,23,42,.84), rgba(15,23,42,.62));
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 24px;
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    letter-spacing: .02em;
    background: linear-gradient(135deg, var(--primary), #06b6d4);
    box-shadow: 0 12px 30px rgba(109, 93, 252, .32);
}

.sidebar-brand strong { display: block; font-size: 18px; }
.sidebar-brand span { color: var(--muted); font-size: 12px; }

.side-nav { display: grid; gap: 16px; }
.nav-group { display: grid; gap: 6px; }
.nav-title {
    width: 100%;
    padding: 12px 14px 6px;
    text-align: left;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}
.nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px 12px 26px;
    border-radius: 14px;
    background: transparent;
    color: var(--text);
    text-align: left;
    transition: .2s ease;
}
.nav-item:hover { background: var(--primary-soft); color: var(--primary); }
.nav-item.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: white;
    box-shadow: 0 14px 28px rgba(109, 93, 252, .28);
}
.nav-item.disabled {
    opacity: .52;
    cursor: not-allowed;
}
.nav-item em {
    font-size: 11px;
    font-style: normal;
    opacity: .72;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .16);
}

.main-panel {
    min-width: 0;
    padding: 22px;
}

.topbar {
    min-height: 82px;
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    top: 16px;
    z-index: 20;
}

.page-heading { min-width: 180px; }
.page-heading h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.02em; }
.breadcrumb { color: var(--muted); font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb i { font-style: normal; opacity: .6; }

.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.ghost-btn,
.icon-btn,
.primary-btn,
.danger-btn,
.soft-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: .2s ease;
}
.ghost-btn { background: var(--surface-soft); color: var(--text); border: 1px solid var(--line); }
.ghost-btn:hover, .icon-btn:hover { transform: translateY(-1px); border-color: rgba(109,93,252,.35); color: var(--primary); }
.icon-btn { width: 42px; background: var(--surface-soft); color: var(--text); border: 1px solid var(--line); }
.primary-btn { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: white; box-shadow: 0 12px 28px rgba(109, 93, 252, .26); }
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(109, 93, 252, .34); }
.soft-btn { background: var(--primary-soft); color: var(--primary); }
.danger-btn { background: rgba(239,68,68,.12); color: var(--danger); }
.full { width: 100%; }

.theme-switch { display: inline-flex; align-items: center; }
.theme-switch input { display: none; }
.theme-switch span {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 32px;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
}
.theme-switch span::after {
    content: "☀";
    position: absolute;
    width: 24px;
    height: 24px;
    left: 4px;
    top: 3px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.16);
    transition: .2s ease;
}
.theme-switch input:checked + span::after { content: "🌙"; transform: translateX(24px); }

.avatar-menu { position: relative; }
.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(135deg, #06b6d4, var(--primary));
    box-shadow: 0 12px 26px rgba(6,182,212,.24);
}
.dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 176px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--surface-solid);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .18s ease;
}
.avatar-menu:hover .dropdown,
.avatar-menu:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown strong { display: block; padding: 8px 10px; font-size: 13px; color: var(--muted); }
.dropdown a { display: block; padding: 10px; border-radius: 10px; color: var(--danger); }
.dropdown a:hover { background: rgba(239,68,68,.10); }

.content { padding: 22px 0 60px; display: grid; gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.card-head {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line);
}
.card-head h2, .card-head h3 { margin: 0; font-size: 18px; }
.card-head p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.card-body { padding: 18px 20px 20px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid.one { grid-template-columns: 1fr; }
.form-field { display: grid; gap: 7px; }
.form-field label,
.field-label { color: var(--muted); font-size: 13px; font-weight: 700; }
.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 12px 13px;
    outline: none;
    background: var(--surface-solid);
    color: var(--text);
    transition: .18s ease;
}
.form-field textarea { min-height: 112px; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { border-color: rgba(109,93,252,.7); box-shadow: 0 0 0 4px var(--primary-soft); }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 12px; font-weight: 800; background: rgba(148,163,184,.08); }
td { font-size: 14px; }
.table-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    background: var(--primary-soft);
    color: var(--primary);
    white-space: nowrap;
}
.tag.success { background: rgba(22,163,74,.12); color: var(--success); }
.tag.warning { background: rgba(245,158,11,.14); color: var(--warning); }
.tag.danger { background: rgba(239,68,68,.12); color: var(--danger); }
.empty {
    padding: 34px;
    color: var(--muted);
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    background: rgba(148,163,184,.06);
}

.option-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.option-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(109,93,252,.18), transparent 34%),
        linear-gradient(145deg, rgba(109,93,252,.10), rgba(6,182,212,.06));
}
.option-card::before {
    content: "";
    position: absolute;
    inset: auto -30px -44px auto;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    pointer-events: none;
}
.option-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.option-index {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: var(--primary);
    background: var(--primary-soft);
}
.option-card h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.01em; }
.option-card p { margin: 0 0 14px; color: var(--muted); }
.option-link {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
    background: rgba(148,163,184,.08);
    border: 1px solid var(--line);
}
.option-link span { color: var(--muted); font-size: 12px; font-weight: 800; }
.option-link strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

.preview-code {
    margin: 0;
    padding: 16px;
    max-height: 68vh;
    overflow: auto;
    border-radius: 16px;
    background: #0b1020;
    color: #dbeafe;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.6;
}

.message-root, .notification-root { position: fixed; z-index: 1300; pointer-events: none; }
.message-root { top: 20px; left: 50%; transform: translateX(-50%); display: grid; gap: 10px; }
.notification-root { right: 20px; top: 86px; display: grid; gap: 12px; }
.message, .notification {
    pointer-events: auto;
    border: 1px solid var(--line);
    background: var(--surface-solid);
    color: var(--text);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    animation: slideIn .24s ease both;
}
.message { padding: 11px 14px; min-width: 220px; text-align: center; }
.notification { width: min(360px, calc(100vw - 32px)); padding: 16px; }
.notification strong { display: block; margin-bottom: 6px; }
.notification p { margin: 0; color: var(--muted); }
.message.success, .notification.success { border-color: rgba(22,163,74,.35); }
.message.error, .notification.error { border-color: rgba(239,68,68,.35); }
.message.warning, .notification.warning { border-color: rgba(245,158,11,.35); }
@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.modal-backdrop, .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.modal-backdrop { z-index: 1100; }
.drawer-backdrop { z-index: 900; }
.modal {
    width: min(680px, 100%);
    max-height: calc(100vh - 36px);
    overflow: hidden;
    border-radius: 24px;
    background: var(--surface-solid);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}
.modal-head, .modal-foot, .drawer-head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.modal-head h3, .drawer-head h3 { margin: 0; }
.modal-body { padding: 20px; overflow: auto; }
.modal-foot { border-top: 1px solid var(--line); border-bottom: 0; justify-content: flex-end; }
.alert-box { display: flex; gap: 14px; align-items: flex-start; }
.alert-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(245,158,11,.16); color: var(--warning); font-size: 22px; flex: 0 0 auto; }
.alert-box p { margin: 3px 0 0; color: var(--muted); }

.drawer-backdrop { justify-content: flex-end; padding: 0; }
.drawer {
    width: min(920px, 100vw);
    height: 100vh;
    background: var(--surface-solid);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    animation: drawerIn .22s ease both;
}
.drawer-body { padding: 20px; overflow: auto; display: grid; gap: 18px; }
@keyframes drawerIn { from { transform: translateX(32px); opacity: .75; } to { transform: translateX(0); opacity: 1; } }

.skeleton-card {
    min-height: 280px;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, rgba(148,163,184,.10), rgba(148,163,184,.22), rgba(148,163,184,.10));
    background-size: 200% 100%;
    animation: shimmer 1.2s ease infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 22px;
}
.login-shell { width: min(430px, 100%); }
.login-card { border-radius: 30px; padding: 34px; }
.login-card .brand-mark { margin-bottom: 16px; }
.login-card h1 { margin: 0 0 8px; font-size: 30px; }
.login-card p { margin: 0 0 20px; color: var(--muted); }
.login-form { display: grid; gap: 14px; }
.login-form label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
.login-form input { border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; outline: 0; background: var(--surface-solid); color: var(--text); }
.login-tips { margin-top: 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.inline-alert { margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(239,68,68,.10); color: var(--danger); }

.mobile-menu, .mobile-mask { display: none; }

@media (max-width: 1180px) {
    .topbar { align-items: flex-start; }
    .top-actions { max-width: 520px; }
    .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 960px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(86vw, 310px);
        transform: translateX(-105%);
        transition: .22s ease;
        box-shadow: var(--shadow);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .mobile-mask {
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,.42);
        z-index: 25;
    }
    body.sidebar-open .mobile-mask { display: block; }
    .mobile-menu { display: inline-flex; }
    .topbar { top: 10px; flex-wrap: wrap; }
    .main-panel { padding: 12px; }
    .content { padding-top: 12px; }
    .grid-2, .grid-3, .form-grid, .option-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .topbar { border-radius: 20px; }
    .top-actions { width: 100%; justify-content: flex-start; }
    .page-heading h1 { font-size: 21px; }
    .ghost-btn { padding: 0 11px; font-size: 13px; }
    .card-head { flex-direction: column; align-items: flex-start; }
    .card-head .primary-btn, .card-head .ghost-btn { width: 100%; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions button { width: 100%; }
    .notification-root { right: 12px; top: 104px; }
    .modal-backdrop { padding: 10px; }
    .modal { border-radius: 20px; }
    .login-card { padding: 26px; }
}

/* fix2: 强化按钮/导航样式，防止服务器缓存或浏览器默认样式覆盖 */
button,
input,
textarea,
select,
label.ghost-btn {
    -webkit-appearance: none;
    appearance: none;
}
button,
.ghost-btn,
.icon-btn,
.primary-btn,
.danger-btn,
.soft-btn,
.nav-title,
.nav-item,
.avatar {
    font-family: inherit !important;
    line-height: 1 !important;
    text-decoration: none !important;
    outline: none;
}
.ghost-btn,
.icon-btn,
.primary-btn,
.danger-btn,
.soft-btn {
    min-height: 40px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}
.ghost-btn {
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
}
.icon-btn {
    width: 42px !important;
    padding: 0 !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
}
.primary-btn {
    border: 0 !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(109, 93, 252, .26) !important;
}
.soft-btn {
    border: 0 !important;
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
}
.danger-btn {
    border: 0 !important;
    background: rgba(239,68,68,.12) !important;
    color: var(--danger) !important;
}
.nav-title {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--muted) !important;
    text-align: left !important;
    cursor: default !important;
}
.nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 44px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: var(--text) !important;
    text-align: left !important;
    cursor: pointer !important;
}
.nav-item.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.nav-item.disabled {
    cursor: not-allowed !important;
}
.avatar {
    border: 0 !important;
    display: grid !important;
    place-items: center !important;
}
.login-form .primary-btn,
.full {
    width: 100% !important;
}
.topbar {
    display: flex !important;
}
.content:empty::before {
    content: "正在加载配置，请稍候…";
    display: block;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--muted);
}


/* option ui: 状态、打开方式等选项使用分段按钮 */
.choice-field { gap: 9px; }
.choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.choice-pill {
    position: relative;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-solid);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
    user-select: none;
}
.choice-pill input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.choice-dot {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(148,163,184,.12);
    color: var(--muted);
    font-size: 12px;
    transition: .18s ease;
}
.choice-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(109,93,252,.38);
    box-shadow: 0 10px 20px rgba(32, 42, 68, .08);
}
.choice-pill:has(input:checked) {
    border-color: rgba(109,93,252,.45);
    color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 4px rgba(109,93,252,.06);
}
.choice-pill.success:has(input:checked) {
    border-color: rgba(22,163,74,.38);
    color: var(--success);
    background: rgba(22,163,74,.12);
}
.choice-pill.warning:has(input:checked) {
    border-color: rgba(245,158,11,.42);
    color: var(--warning);
    background: rgba(245,158,11,.14);
}
.choice-pill:has(input:checked) .choice-dot {
    background: currentColor;
    color: #fff;
}
@supports not selector(:has(*)) {
    .choice-pill input:checked + .choice-dot {
        background: var(--primary);
        color: #fff;
    }
}

/* header dropdown fix: 标题/面包屑靠左，顶部工具统一放入头像菜单 */
.topbar {
    justify-content: flex-start !important;
}
.page-heading {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    margin-right: auto !important;
}
.breadcrumb {
    justify-content: flex-start !important;
}
.top-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
}
.avatar-menu {
    margin-left: auto;
}
.avatar-menu .dropdown {
    min-width: 292px;
    padding: 10px;
    z-index: 1200;
}
.dropdown-profile {
    padding: 10px 10px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.dropdown-profile strong,
.dropdown-theme strong {
    display: block;
    padding: 0 !important;
    color: var(--text) !important;
    font-size: 14px;
    line-height: 1.25;
}
.dropdown-profile span,
.dropdown-theme span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
}
.dropdown-section {
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}
.dropdown-section + .dropdown-section {
    padding-top: 8px;
}
.dropdown-section-title {
    padding: 4px 10px 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}
.dropdown .dropdown-item b {
    display: block;
    color: inherit;
    font-size: 14px;
    line-height: 1.2;
}
.dropdown .dropdown-item em {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25;
}
.dropdown .dropdown-item.has-desc {
    align-items: flex-start;
    min-height: 56px;
}
.dropdown .dropdown-item.has-desc i {
    margin-top: 1px;
}
.dropdown .dropdown-item {
    width: 100%;
    min-height: 42px;
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 12px;
    background: transparent !important;
    color: var(--text) !important;
    font-weight: 700;
    line-height: 1.2 !important;
    text-align: left;
    cursor: pointer;
}
.dropdown .dropdown-item i {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-style: normal;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    flex: 0 0 auto;
}
.dropdown .dropdown-item:hover {
    background: var(--surface-soft) !important;
    transform: none;
}
.dropdown .dropdown-item.danger {
    color: var(--danger) !important;
}
.dropdown .dropdown-item.danger i {
    background: rgba(239,68,68,.12);
    color: var(--danger);
}
.dropdown-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 10px;
    margin: 6px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.dropdown-theme .theme-switch {
    flex: 0 0 auto;
}

/* option selected icon fix: 选中后图标保持可见 */
.choice-pill > span {
    position: relative;
    z-index: 1;
}
.choice-pill:has(input:checked) .choice-dot {
    background: var(--primary) !important;
    color: #fff !important;
}
.choice-pill.success:has(input:checked) .choice-dot {
    background: var(--success) !important;
    color: #fff !important;
}
.choice-pill.warning:has(input:checked) .choice-dot {
    background: var(--warning) !important;
    color: #fff !important;
}
@supports not selector(:has(*)) {
    .choice-pill input:checked + .choice-dot {
        background: var(--primary) !important;
        color: #fff !important;
    }
}

@media (max-width: 640px) {
    .top-actions {
        width: auto !important;
        justify-content: flex-end !important;
    }
    .avatar-menu .dropdown {
        right: 0;
        min-width: min(86vw, 280px);
    }
}

/* app management: 分类/置顶/应用管理、筛选表单和自动时间 */
.filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(160px, .9fr) minmax(140px, .8fr) minmax(140px, .8fr) auto;
    gap: 14px;
    align-items: end;
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(148,163,184,.06);
}
.filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(148,163,184,.07);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.check-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}
.readonly-field input[readonly] {
    opacity: .76;
    cursor: not-allowed;
    background: rgba(148,163,184,.10);
}
.inline-alert.info {
    margin: 0;
    border: 1px solid rgba(109,93,252,.20);
    background: var(--primary-soft);
    color: var(--primary);
}
@media (max-width: 1180px) {
    .filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
    .filter-form { grid-template-columns: 1fr; }
    .filter-actions button { width: 100%; }
}

.export-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.export-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 12px;
}

/* import + prettier select ui */
.select-wrap {
    position: relative;
    width: 100%;
}
.select-wrap::before {
    content: "";
    position: absolute;
    inset: 6px 6px 6px auto;
    width: 36px;
    border-radius: 11px;
    background: var(--primary-soft);
    pointer-events: none;
}
.select-arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-54%);
    color: var(--primary);
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
}
.form-field select.pretty-select,
.pretty-select {
    min-height: 46px;
    padding: 0 52px 0 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(135deg, rgba(109,93,252,.06), rgba(6,182,212,.04)),
        var(--surface-solid) !important;
    color: var(--text) !important;
    font-weight: 800;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.form-field select.pretty-select:hover,
.pretty-select:hover {
    border-color: rgba(109,93,252,.38) !important;
    box-shadow: 0 10px 24px rgba(32,42,68,.08);
}
.form-field select.pretty-select:focus,
.pretty-select:focus {
    border-color: rgba(109,93,252,.7) !important;
    box-shadow: 0 0 0 4px var(--primary-soft) !important;
}
.import-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.import-box {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(109,93,252,.12), transparent 36%),
        rgba(148,163,184,.06);
}
.import-box h4 { margin: 0; font-size: 16px; }
.import-box p { margin: -4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.paste-import-field textarea {
    min-height: 260px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    line-height: 1.55;
}
.file-control,
.url-control {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 11px 13px;
    outline: none;
    background: var(--surface-solid);
    color: var(--text);
}
.file-control:focus,
.url-control:focus {
    border-color: rgba(109,93,252,.7);
    box-shadow: 0 0 0 4px var(--primary-soft);
}
.file-control {
    padding: 9px 11px;
    cursor: pointer;
}
.file-control::file-selector-button {
    min-height: 30px;
    margin-right: 10px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 800;
    cursor: pointer;
}
@media (max-width: 760px) {
    .import-panel { grid-template-columns: 1fr; }
}
.check-row input,
.file-control {
    -webkit-appearance: auto !important;
    appearance: auto !important;
}
.pretty-select {
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* fix: 图片 / 截图 / 图标 / 链接字段强制使用普通文本输入；自定义选择器不再调用系统下拉 UI */
.muted-text { color: var(--muted); }
.table-thumb-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 92px;
}
.table-thumb {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--line);
    background: rgba(148,163,184,.10);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
    flex: 0 0 auto;
}
.table-thumb-fallback {
    display: none;
    color: var(--muted);
    font-size: 12px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.custom-select {
    position: relative;
    width: 100%;
}
.custom-select-trigger {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0 8px 0 14px;
    background:
        linear-gradient(135deg, rgba(109,93,252,.06), rgba(6,182,212,.04)),
        var(--surface-solid);
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
}
.custom-select-trigger:hover,
.custom-select.open .custom-select-trigger {
    border-color: rgba(109,93,252,.55);
    box-shadow: 0 0 0 4px var(--primary-soft);
}
.custom-select-trigger i {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--primary);
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    transition: .18s ease;
}
.custom-select.open .custom-select-trigger i {
    transform: rotate(180deg);
}
.custom-select-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 1250;
    display: none;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-solid);
    box-shadow: var(--shadow);
    max-height: 260px;
    overflow: auto;
}
.custom-select.open .custom-select-menu {
    display: grid;
    gap: 6px;
}
.custom-select-option {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    text-align: left;
    font-weight: 800;
    cursor: pointer;
}
.custom-select-option:hover {
    background: var(--surface-soft);
}
.custom-select-option.active {
    background: var(--primary-soft);
    color: var(--primary);
}
.custom-select-option i {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--primary);
    color: #fff;
    font-style: normal;
    font-size: 12px;
    opacity: 0;
}
.custom-select-option.active i {
    opacity: 1;
}
.modal .custom-select-menu {
    z-index: 1260;
}
.drawer .custom-select-menu {
    z-index: 1260;
}


/* 蓝奏云导入分类弹窗：分类下拉较长时自适应视口并在弹窗内滚动 */
.lanzou-category-modal {
    width: min(760px, calc(100vw - 32px)) !important;
    max-height: calc(var(--app-height, 100dvh) - 28px);
}
.lanzou-category-modal .modal-body {
    display: grid;
    gap: 16px;
    overflow: auto;
}
.lanzou-category-modal .form-grid,
.lanzou-category-modal .form-field,
.lanzou-category-modal .custom-select {
    min-width: 0;
}
.lanzou-category-modal .custom-select-menu {
    position: static;
    margin-top: 8px;
    max-height: min(46vh, 420px);
    overflow: auto;
    box-shadow: none;
}
.lanzou-category-modal .custom-select.open .custom-select-menu {
    display: grid;
}
.lanzou-category-modal .lanzou-import-preview {
    max-height: 128px;
    overflow: auto;
    padding-right: 4px;
}


/* mobile-scroll-fix: 手机端宽度溢出、弹窗/抽屉滚动、表格横向滑动优化 */
:root {
    --app-height: 100dvh;
}
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    touch-action: manipulation;
}
.app-shell,
.main-panel,
.topbar,
.page-heading,
.content,
.content > *,
.card,
.card-head,
.card-body,
.form-grid,
.form-field,
.filter-form,
.import-panel,
.option-list,
.option-card,
.option-link,
.custom-select,
.choice-group {
    min-width: 0;
    max-width: 100%;
}
img,
video,
canvas,
svg {
    max-width: 100%;
}
.form-field input,
.form-field textarea,
.form-field select,
.file-control,
.url-control,
.custom-select-trigger {
    min-width: 0;
    max-width: 100%;
}
.card {
    overflow: visible;
}
.table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.table-wrap table {
    width: max-content;
    min-width: 720px;
}
th,
td {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.table-actions {
    min-width: 120px;
}
.preview-code {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-overflow-scrolling: touch;
}
.modal-backdrop,
.drawer-backdrop {
    min-width: 0;
    max-width: 100vw;
    overflow: hidden;
}
.modal {
    max-width: min(680px, calc(100vw - 36px));
    max-height: calc(var(--app-height, 100dvh) - 36px);
    min-height: 0;
}
.modal-body,
.drawer-body {
    min-height: 0;
    max-width: 100%;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.modal-foot {
    min-width: 0;
    flex-wrap: wrap;
}
.drawer {
    width: min(920px, 100vw);
    max-width: 100vw;
    height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    min-height: 0;
}
.drawer-head > div,
.modal-head > div {
    min-width: 0;
}
.avatar-menu .dropdown {
    max-height: calc(var(--app-height, 100dvh) - 96px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 960px) {
    html,
    body,
    .app-shell {
        min-height: var(--app-height, 100dvh);
    }
    .sidebar {
        height: var(--app-height, 100dvh);
        max-height: var(--app-height, 100dvh);
        padding-bottom: calc(22px + env(safe-area-inset-bottom));
        -webkit-overflow-scrolling: touch;
    }
    .main-panel {
        width: 100%;
        overflow-x: hidden;
    }
    body.sidebar-open {
        overflow: hidden;
    }
}

@media (max-width: 640px) {
    .main-panel {
        padding: 10px max(10px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
    }
    .topbar {
        width: 100%;
        min-height: 64px;
        top: 8px;
        padding: 12px;
        gap: 10px;
        flex-wrap: nowrap !important;
        align-items: center !important;
        border-radius: 18px;
    }
    .mobile-menu {
        flex: 0 0 42px;
    }
    .page-heading h1 {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 20px;
    }
    .breadcrumb {
        max-width: 100%;
        gap: 5px;
        line-height: 1.35;
        font-size: 12px;
    }
    .top-actions {
        flex: 0 0 auto !important;
    }
    .avatar-menu .dropdown {
        position: fixed;
        right: max(10px, env(safe-area-inset-right));
        top: 74px;
        min-width: min(88vw, 300px);
        max-width: calc(100vw - 20px);
        max-height: calc(var(--app-height, 100dvh) - 90px);
    }
    .content {
        padding: 12px 0 calc(72px + env(safe-area-inset-bottom));
        gap: 14px;
    }
    .card-head,
    .card-body {
        padding: 14px;
    }
    .card-head h2,
    .card-head h3 {
        font-size: 17px;
        line-height: 1.35;
    }
    .form-grid,
    .filter-form,
    .import-panel,
    .option-list {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .choice-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .choice-pill {
        width: 100%;
        min-width: 0;
        padding: 0 10px !important;
    }
    .choice-pill span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .option-link {
        grid-template-columns: 44px minmax(0, 1fr);
    }
    .table-wrap {
        margin-left: -2px;
        margin-right: -2px;
        padding-bottom: 2px;
    }
    .table-wrap table {
        min-width: 680px;
    }
    th,
    td {
        padding: 12px 10px;
        font-size: 13px;
    }
    .table-thumb {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
    .modal-backdrop {
        align-items: stretch;
        justify-content: center;
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }
    .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(var(--app-height, 100dvh) - 16px);
        border-radius: 18px;
    }
    .modal-head,
    .drawer-head {
        padding: 14px;
        align-items: flex-start;
    }
    .modal-head h3,
    .drawer-head h3 {
        min-width: 0;
        font-size: 16px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    .modal-body {
        padding: 14px;
    }
    .modal-foot {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
        gap: 10px;
        padding: 14px;
        justify-content: stretch;
    }
    .modal-foot button {
        width: 100%;
    }
    .drawer-backdrop {
        align-items: stretch;
    }
    .drawer {
        width: 100vw;
        max-width: 100vw;
        height: var(--app-height, 100dvh);
        max-height: var(--app-height, 100dvh);
    }
    .drawer-body {
        padding: 12px;
        gap: 14px;
    }
    .filter-form {
        padding: 12px;
    }
    .custom-select-menu {
        max-height: min(260px, calc(var(--app-height, 100dvh) - 160px));
    }
    .notification-root {
        left: 12px;
        right: 12px;
        top: 86px;
    }
    .notification {
        width: 100%;
    }
    .message-root {
        width: calc(100vw - 24px);
    }
    .message {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 390px) {
    .choice-group {
        grid-template-columns: 1fr;
    }
    .dropdown .dropdown-item,
    .custom-select-trigger,
    .file-control,
    .url-control,
    .form-field input,
    .form-field textarea {
        font-size: 13px;
    }
    .table-wrap table {
        min-width: 640px;
    }
}


/* dashboard page */
.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 22px;
    align-items: center;
    background:
        radial-gradient(circle at 100% 0%, rgba(109,93,252,.18), transparent 36%),
        radial-gradient(circle at 0% 100%, rgba(6,182,212,.12), transparent 36%),
        var(--surface);
}
.dash-hero-content h2 {
    margin: 8px 0 8px;
    font-size: clamp(24px, 4vw, 38px);
    letter-spacing: -.04em;
}
.dash-hero-content p {
    margin: 0;
    max-width: 720px;
    color: var(--muted);
    line-height: 1.7;
}
.dash-kicker {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
}
.dash-hero-meta {
    min-width: 220px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.42);
}
[data-theme="dark"] .dash-hero-meta { background: rgba(15,23,42,.38); }
.dash-hero-meta span,
.dash-hero-meta small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}
.dash-hero-meta strong {
    display: block;
    margin: 7px 0;
    font-size: 16px;
    overflow-wrap: anywhere;
}
.dash-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.dash-stat {
    min-width: 0;
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    position: relative;
}
.dash-stat::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -42px;
    bottom: -54px;
    border-radius: 999px;
    background: var(--primary-soft);
    pointer-events: none;
}
.dash-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 24px;
    background: var(--primary-soft);
}
.dash-stat span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}
.dash-stat strong {
    display: block;
    margin-top: 4px;
    font-size: 32px;
    letter-spacing: -.03em;
}
.dash-stat p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
}
.dash-stat.success .dash-icon { background: rgba(22,163,74,.12); }
.dash-stat.warning .dash-icon { background: rgba(245,158,11,.14); }
.dash-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.dash-mini {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(148,163,184,.07);
}
.dash-mini span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}
.dash-mini strong {
    font-size: 22px;
    letter-spacing: -.02em;
}
.dash-mini .tag {
    grid-column: 1 / -1;
    justify-self: start;
}
@media (max-width: 960px) {
    .dashboard-hero,
    .dash-stat-grid,
    .dash-mini-grid {
        grid-template-columns: 1fr;
    }
    .dash-hero-meta {
        min-width: 0;
        width: 100%;
    }
}
@media (max-width: 640px) {
    .dashboard-hero {
        padding: 16px;
    }
    .dash-stat {
        padding: 16px;
    }
    .dash-stat strong {
        font-size: 28px;
    }
}

/* sort-bulk-fullwidth-scrollbar: 排序、多选批量删除、表格铺满与自定义滚动条 */
html,
body {
    height: 100%;
    overflow: hidden;
}
.app-shell {
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
    overflow: hidden;
}
.sidebar,
.main-panel {
    height: var(--app-height, 100dvh);
    overflow-y: auto;
    overflow-x: hidden;
}
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(109, 93, 252, .52) rgba(148, 163, 184, .12);
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, .10);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
    border: 2px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--primary), var(--primary-2));
}
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary-2), var(--primary));
}
[data-theme="dark"] *::-webkit-scrollbar-thumb {
    border-color: rgba(15, 23, 42, .72);
}
.table-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 12px;
    flex-wrap: wrap;
}
.table-check-all-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}
.table-check-all,
.table-row-check,
.lanzou-check-all,
.lanzou-row-check {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.table-toolbar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.table-bulk-delete:disabled,
.table-bulk-status:disabled {
    opacity: .48;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.select-col {
    width: 68px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.sort-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.sort-field input {
    font-variant-numeric: tabular-nums;
}
.table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.table-wrap table {
    width: 100% !important;
    min-width: 920px;
    table-layout: auto;
}
.card-body > .table-wrap:first-child {
    margin-top: 0;
}
@media (max-width: 760px) {
    .table-wrap table {
        min-width: 760px;
    }
    .table-toolbar {
        align-items: stretch;
    }
    .table-toolbar-actions {
        width: 100%;
        justify-content: stretch;
    }
    .table-toolbar-actions > button {
        flex: 1 1 100%;
        width: 100%;
    }
    .select-col {
        width: 56px;
    }
}

/* fix3: 自定义排序加减、多选状态和滚动条按钮去系统化 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
input[type="number"] {
    -moz-appearance: textfield !important;
}
.sort-stepper {
    width: 100%;
    min-height: 48px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface-solid);
    transition: .18s ease;
}
.sort-stepper:focus-within {
    border-color: rgba(109,93,252,.7);
    box-shadow: 0 0 0 4px var(--primary-soft);
}
.sort-stepper input[data-sort-input] {
    height: 46px;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 12px !important;
    text-align: center;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.sort-step-btn {
    height: 46px;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: linear-gradient(135deg, rgba(109,93,252,.14), rgba(6,182,212,.08)) !important;
    color: var(--primary) !important;
    font-size: 20px;
    font-weight: 900;
    line-height: 1 !important;
    box-shadow: none !important;
    user-select: none;
}
.sort-step-btn:hover {
    background: linear-gradient(135deg, rgba(109,93,252,.24), rgba(6,182,212,.14)) !important;
    transform: none !important;
}
.sort-step-btn:first-child {
    border-right: 1px solid var(--line) !important;
}
.sort-step-btn:last-child {
    border-left: 1px solid var(--line) !important;
}
.sort-hint {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.table-check-all,
.table-row-check,
.lanzou-check-all,
.lanzou-row-check {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border: 1px solid rgba(109,93,252,.38) !important;
    border-radius: 7px !important;
    background: var(--surface-solid) !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
    cursor: pointer;
    transition: .16s ease;
    vertical-align: middle;
}
.table-check-all:hover,
.table-row-check:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-soft);
}
.table-check-all:checked,
.table-row-check:checked {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
}
.table-check-all:checked::after,
.table-row-check:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.table-check-all:indeterminate {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
}
.table-check-all:indeterminate::after {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    top: 9px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
}
tbody tr.is-selected {
    background: linear-gradient(90deg, rgba(109,93,252,.12), rgba(6,182,212,.05));
}
.table-toolbar {
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
}
.table-bulk-delete:not(:disabled) {
    background: rgba(239,68,68,.18) !important;
    box-shadow: 0 8px 18px rgba(239,68,68,.08) !important;
}
.table-bulk-status:not(:disabled) {
    border-color: rgba(34,197,94,.25) !important;
    background: rgba(34,197,94,.12) !important;
}
.table-bulk-status-off:not(:disabled) {
    border-color: rgba(245,158,11,.25) !important;
    background: rgba(245,158,11,.12) !important;
}

*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:start,
*::-webkit-scrollbar-button:end,
*::-webkit-scrollbar-button:decrement,
*::-webkit-scrollbar-button:increment {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}
*::-webkit-scrollbar-track-piece {
    background: transparent !important;
}
*::-webkit-scrollbar-corner,
*::-webkit-resizer {
    background: transparent !important;
    display: none !important;
}
*::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
*::-webkit-scrollbar-track {
    background: transparent !important;
    border-radius: 999px !important;
}
*::-webkit-scrollbar-thumb {
    min-height: 48px;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, var(--primary), var(--primary-2)) !important;
}
.table-wrap::-webkit-scrollbar {
    height: 8px !important;
}
.sidebar,
.main-panel,
.table-wrap,
.modal-body,
.drawer-body,
.custom-select-menu,
.preview-code,
.avatar-menu .dropdown {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

/* 下载线路列表编辑与表格显示 */
.download-lines-field {
    grid-column: 1 / -1;
}
.download-lines-editor {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(148, 163, 184, .08);
}
.download-line-head,
.download-line-row {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(100px, 140px) minmax(240px, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.download-line-head {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    padding: 0 4px;
}
.download-line-list {
    display: grid;
    gap: 8px;
}
.download-line-name,
.download-line-url {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    color: var(--text);
    padding: 0 12px;
    outline: none;
}
.download-line-url {
    font-size: 13px;
}
.download-line-row .custom-select-trigger {
    min-height: 42px;
    border-radius: 12px;
}
.download-line-count-tag {
    white-space: nowrap;
}
.download-line-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 180px;
}
.download-line-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(109, 93, 252, .10);
    border: 1px solid rgba(109, 93, 252, .16);
    color: var(--text);
    font-size: 12px;
}
.download-line-tag b {
    white-space: nowrap;
}
.download-line-tag em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-style: normal;
}
@media (max-width: 640px) {
    .download-line-head {
        display: none;
    }
    .download-line-row {
        grid-template-columns: 1fr;
    }
}

/* v3: 表格元素垂直居中 + 自定义选择器图标化 */
.table-wrap th,
.table-wrap td {
    vertical-align: middle !important;
}
.table-actions,
.table-thumb-cell {
    align-items: center;
}
.table-actions {
    min-height: 34px;
}
.custom-select-trigger i,
.custom-select-option i {
    font-size: 0;
}
.select-svg {
    width: 18px;
    height: 18px;
    display: block;
}
.custom-select-option i .select-svg {
    width: 14px;
    height: 14px;
}


/* v4: 强制表格单元格内容垂直居中；选择器全部使用 SVG 图标，不再放文字箭头 */
.table-wrap thead th,
.table-wrap tbody td {
    vertical-align: middle !important;
}
.table-wrap thead th {
    height: 44px;
}
.table-wrap tbody td {
    height: 62px;
}
.table-cell-inner {
    min-height: 38px;
    display: flex;
    align-items: center;
    line-height: 1.35;
}
.table-cell-head {
    min-height: 20px;
    font-weight: inherit;
}
.table-cell-center {
    justify-content: center;
}
.table-cell-actions {
    min-height: 40px;
}
.table-cell-actions .table-actions {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center !important;
}
.table-thumb-cell,
.download-line-count-tag,
.tag,
.sort-badge {
    align-self: center;
}
.select-col .table-cell-inner {
    justify-content: center;
}
.custom-select-trigger .custom-select-icon,
.custom-select-option .custom-select-check {
    flex: 0 0 auto;
    font-size: 0 !important;
    line-height: 0 !important;
    font-style: normal;
    display: grid;
    place-items: center;
    color: var(--primary);
}
.custom-select-trigger .custom-select-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--primary-soft);
    transition: .18s ease;
}
.custom-select.open .custom-select-trigger .custom-select-icon {
    transform: rotate(180deg);
}
.custom-select-option .custom-select-check {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    opacity: 0;
}
.custom-select-option.active .custom-select-check {
    opacity: 1;
}
.custom-select-trigger .custom-select-icon svg,
.custom-select-option .custom-select-check svg,
.select-svg {
    display: block;
    width: 18px;
    height: 18px;
}
.custom-select-option .custom-select-check svg {
    width: 14px;
    height: 14px;
}

/* v5: 通用表格分页 */
.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
    margin-top: 4px;
    flex-wrap: wrap;
}
.table-pagination-single {
    justify-content: flex-end;
}
.table-page-info {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}
.table-page-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}
.table-page-btn,
.table-page-num {
    min-width: 38px;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 13px;
}
.table-page-num.is-active {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
    box-shadow: 0 10px 20px rgba(109,93,252,.18) !important;
}
.table-page-btn:disabled,
.table-page-num:disabled {
    opacity: .58;
    cursor: not-allowed;
    transform: none;
}
.table-page-ellipsis {
    min-width: 22px;
    text-align: center;
    color: var(--muted);
    font-weight: 900;
}
@media (max-width: 760px) {
    .table-pagination {
        align-items: stretch;
    }
    .table-page-info,
    .table-page-actions {
        width: 100%;
    }
    .table-page-actions {
        justify-content: flex-start;
    }
    .table-page-btn {
        flex: 1 1 auto;
    }
}

/* lanzou import */
.lanzou-import-card .inline-alert {
    margin-top: 14px;
}
.lanzou-empty {
    margin-top: 16px;
}
.table-summary {
    margin: 0 0 4px;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
}
.muted-block {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.lanzou-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 18px 0 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(109,93,252,.08), rgba(6,182,212,.06));
    flex-wrap: wrap;
}
.lanzou-grid-actions {
    margin-left: auto;
}
.lanzou-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
    gap: 14px;
}
.lanzou-grid-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 176px;
    padding: 18px 12px 14px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .07);
    cursor: pointer;
    user-select: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    overflow: hidden;
}
.lanzou-grid-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(109,93,252,.14), transparent 58%);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
.lanzou-grid-card:hover {
    transform: translateY(-2px);
    border-color: rgba(109,93,252,.36);
    box-shadow: 0 20px 42px rgba(15, 23, 42, .12);
}
.lanzou-grid-card:hover::before,
.lanzou-grid-card.is-selected::before {
    opacity: 1;
}
.lanzou-grid-card.is-selected {
    border-color: rgba(109,93,252,.62);
    background: linear-gradient(180deg, rgba(109,93,252,.10), rgba(6,182,212,.05)), var(--surface);
    box-shadow: 0 20px 44px rgba(109,93,252,.16);
}
.lanzou-grid-card .lanzou-row-check {
    position: absolute;
    left: 12px;
    top: 12px;
    opacity: 0;
    pointer-events: none;
}
.lanzou-card-checkmark {
    position: absolute;
    right: 12px;
    top: 12px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 1000;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    opacity: 0;
    transform: scale(.7);
    transition: opacity .18s ease, transform .18s ease;
    box-shadow: 0 8px 18px rgba(109,93,252,.28);
}
.lanzou-grid-card.is-selected .lanzou-card-checkmark {
    opacity: 1;
    transform: scale(1);
}
.lanzou-card-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 6px 0 14px;
    border-radius: 20px;
    background: rgba(148,163,184,.10);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 12px 24px rgba(15,23,42,.08);
    overflow: hidden;
}
.lanzou-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lanzou-icon-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--muted);
    font-size: 13px;
    font-weight: 1000;
    letter-spacing: .04em;
}
.lanzou-card-icon img + .lanzou-icon-fallback {
    display: none;
}
.lanzou-card-name {
    position: relative;
    z-index: 1;
    width: 100%;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 38px;
}
.lanzou-card-size {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    background: rgba(148,163,184,.12);
    border: 1px solid var(--line);
}
.ghost-btn.danger-text {
    color: var(--danger);
}
.lanzou-import-toolbar {
    margin-top: 10px;
}
.lanzou-import-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.lanzou-import-preview .tag {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 680px) {
    .lanzou-result-head {
        align-items: stretch;
    }
    .lanzou-grid-actions {
        width: 100%;
        justify-content: stretch;
    }
    .lanzou-grid-actions .soft-btn,
    .lanzou-grid-actions .primary-btn {
        flex: 1 1 auto;
    }
    .lanzou-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .lanzou-grid-card {
        min-height: 160px;
        border-radius: 18px;
    }
    .lanzou-card-icon {
        width: 62px;
        height: 62px;
        border-radius: 18px;
    }
}



/* request loading / anti double-submit */
.global-loading {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}
.global-loading.show { opacity: 1; }
.global-loading-bar {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: 3px;
    overflow: hidden;
    background: rgba(109,93,252,.10);
}
.global-loading-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    box-shadow: 0 0 20px rgba(109,93,252,.55);
    transition: width .24s ease;
}
.global-loading-card {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: min(360px, calc(100vw - 32px));
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 42px rgba(15,23,42,.18);
    backdrop-filter: blur(18px);
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
}
[data-theme="dark"] .global-loading-card {
    background: rgba(15,23,42,.92);
}
.global-loading.show .global-loading-card {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.global-loading-spinner,
.btn-spinner {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid rgba(109,93,252,.22);
    border-top-color: var(--primary);
    animation: fvSpin .72s linear infinite;
    flex: 0 0 auto;
}
.btn-spinner {
    width: 15px;
    height: 15px;
    border-color: rgba(255,255,255,.35);
    border-top-color: #fff;
}
.global-loading-card strong,
.global-loading-card em {
    display: block;
}
.global-loading-card strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 1000;
}
.global-loading-card em {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}
@keyframes fvSpin { to { transform: rotate(360deg); } }

body.is-request-busy .primary-btn:not([data-close]),
body.is-request-busy .soft-btn:not([data-close]),
body.is-request-busy .ghost-btn:not([data-close]),
body.is-request-busy .danger-btn:not([data-close]),
body.is-request-busy .dropdown-item,
body.is-request-busy .table-page-btn,
body.is-request-busy .lanzou-grid-card,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed !important;
}
body.is-request-busy .primary-btn:not([data-close]),
body.is-request-busy .soft-btn:not([data-close]),
body.is-request-busy .ghost-btn:not([data-close]),
body.is-request-busy .danger-btn:not([data-close]),
body.is-request-busy .dropdown-item,
body.is-request-busy .table-page-btn,
body.is-request-busy .lanzou-grid-card {
    opacity: .68;
}
.primary-btn.is-loading {
    pointer-events: none;
}
.request-progress-card {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(109,93,252,.22);
    background: linear-gradient(135deg, rgba(109,93,252,.09), rgba(6,182,212,.07));
}
.request-progress-card strong,
.request-progress-card em {
    display: block;
}
.request-progress-card strong {
    margin-top: 10px;
    color: var(--text);
    font-size: 14px;
    font-weight: 1000;
}
.request-progress-card em {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}
.request-progress-line {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(109,93,252,.12);
}
.request-progress-line span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    animation: fvProgressMove 1.1s ease-in-out infinite alternate;
}
@keyframes fvProgressMove {
    from { transform: translateX(-35%); }
    to { transform: translateX(170%); }
}
.lanzou-grid-card.is-disabled {
    opacity: .58;
    pointer-events: none;
}
@media (max-width: 680px) {
    .global-loading-card {
        top: 12px;
        padding: 10px 12px;
        border-radius: 16px;
    }
}