:root {
    --wb-bg: #f6f7fb;
    --wb-surface: #ffffff;
    --wb-surface-muted: #f8faff;
    --wb-text: #172033;
    --wb-text-muted: #667085;
    --wb-line: #e7eaf2;
    --wb-primary: #5b5ce2;
    --wb-primary-dark: #4849c8;
    --wb-primary-soft: #eeeeff;
    --wb-success: #128a65;
    --wb-shadow: 0 18px 55px rgba(31, 42, 84, .10);
    --wb-radius: 18px;
}

* { box-sizing: border-box; }

/* 登录页 */
.auth-page {
    min-height: 100vh;
    margin: 0;
    color: var(--wb-text);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #f5f6ff;
}

.auth-layout {
    display: grid;
    grid-template-columns: minmax(360px, .95fr) minmax(460px, 1.05fr);
    min-height: 100vh;
}

.auth-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 48px clamp(40px, 7vw, 110px);
    color: #fff;
    background: linear-gradient(145deg, #3738a9 0%, #5b5ce2 54%, #818cf8 100%);
}

.auth-intro::before,
.auth-intro::after {
    position: absolute;
    border-radius: 999px;
    content: "";
    opacity: .22;
    background: #fff;
}

.auth-intro::before { width: 420px; height: 420px; top: -210px; right: -100px; }
.auth-intro::after { width: 300px; height: 300px; bottom: -145px; left: -115px; }

.auth-brand,
.auth-promise,
.auth-copyright { position: relative; z-index: 1; }

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
}

.brand-mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 11px;
    background: rgba(255,255,255,.16);
    font-size: 18px;
}

.auth-promise { max-width: 480px; margin: auto 0; }
.auth-promise h1 { margin: 0 0 18px; font-size: clamp(36px, 4vw, 56px); line-height: 1.16; letter-spacing: -.04em; }
.auth-promise p { max-width: 390px; margin: 0; color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.9; }
.auth-copyright { color: rgba(255,255,255,.64); font-size: 13px; }
.auth-copyright a { color: inherit; text-decoration: none; }

.auth-panel {
    display: grid;
    min-width: 0;
    place-items: center;
    padding: 40px 24px;
    background: #fff;
}

.auth-card { width: min(100%, 410px); }
.auth-eyebrow { margin: 0 0 10px; color: var(--wb-primary); font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.auth-card h2 { margin: 0; font-size: 30px; line-height: 1.3; letter-spacing: -.03em; }
.auth-subtitle { margin: 10px 0 32px; color: var(--wb-text-muted); font-size: 14px; }

.auth-field { margin-bottom: 18px; }
.auth-field label { display: block; margin-bottom: 8px; color: #344054; font-size: 14px; font-weight: 650; }
.auth-input-wrap { position: relative; }
.auth-input {
    width: 100%;
    height: 50px;
    padding: 0 48px 0 14px;
    border: 1px solid #dfe3ed;
    border-radius: 12px;
    outline: none;
    color: var(--wb-text);
    background: #fff;
    font: inherit;
    transition: border-color .18s, box-shadow .18s;
}
.auth-input::placeholder { color: #a5adbd; }
.auth-input:focus { border-color: var(--wb-primary); box-shadow: 0 0 0 4px rgba(91,92,226,.12); }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 9px;
    min-width: 38px;
    height: 34px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    color: #667085;
    background: transparent;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.password-toggle:hover { color: var(--wb-primary); background: var(--wb-primary-soft); }

.auth-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 24px; font-size: 14px; }
.remember-label { display: inline-flex; align-items: center; gap: 8px; color: var(--wb-text-muted); cursor: pointer; }
.remember-label input { width: 16px; height: 16px; accent-color: var(--wb-primary); }
.auth-link { color: var(--wb-primary); text-decoration: none; font-weight: 600; }
.auth-link:hover { color: var(--wb-primary-dark); text-decoration: underline; }
.auth-submit {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: var(--wb-primary);
    box-shadow: 0 10px 18px rgba(91,92,226,.25);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s, background .18s, box-shadow .18s;
}
.auth-submit:hover { background: var(--wb-primary-dark); box-shadow: 0 13px 24px rgba(91,92,226,.30); transform: translateY(-1px); }
.auth-submit:disabled { cursor: wait; opacity: .7; transform: none; }
.auth-message { min-height: 22px; margin: 14px 0 0; color: #c8354e; font-size: 14px; text-align: center; }
.auth-secondary { margin: 24px 0 0; color: var(--wb-text-muted); font-size: 14px; text-align: center; }
.auth-code-row { display: flex; gap: 9px; }
.auth-code-row .auth-input { min-width: 0; flex: 1; }
.auth-inline-action {
    flex: 0 0 auto;
    min-width: 118px;
    height: 50px;
    padding: 0 12px;
    border: 1px solid #dfe3ed;
    border-radius: 12px;
    color: var(--wb-primary);
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .18s ease;
}
.auth-inline-action:hover:not(:disabled) { border-color: var(--wb-primary); background: var(--wb-primary-soft); }
.auth-inline-action:disabled { cursor: not-allowed; color: #98a2b3; background: #f8fafc; }
.auth-back { display: inline-block; margin-top: 18px; color: var(--wb-text-muted); font-size: 14px; text-decoration: none; }
.auth-back:hover { color: var(--wb-primary); }
.auth-note { margin: -18px 0 25px; color: var(--wb-text-muted); font-size: 13px; line-height: 1.7; }

/* 登录后的工作台 */
.workspace-page {
    min-height: 100vh;
    margin: 0;
    color: var(--wb-text);
    background: var(--wb-bg);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.workspace-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.workspace-mobile-nav { display: none; }
.workspace-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 24px 14px;
    border-right: 1px solid var(--wb-line);
    background: var(--wb-surface);
}
.workspace-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 30px; color: var(--wb-text); font-size: 16px; font-weight: 800; text-decoration: none; }
.workspace-brand .brand-mark { color: #fff; border: 0; background: var(--wb-primary); }
.workspace-nav { display: grid; gap: 5px; }
.workspace-nav-label { padding: 0 11px 8px; color: #98a2b3; font-size: 11px; font-weight: 750; letter-spacing: .08em; }
.workspace-nav a,
.workspace-nav button { display: flex; align-items: center; width: 100%; gap: 11px; min-height: 42px; padding: 0 11px; border: 0; border-radius: 10px; color: #667085; background: transparent; font: inherit; font-size: 14px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: .16s ease; }
.workspace-nav a:hover,
.workspace-nav button:hover { color: var(--wb-primary); background: var(--wb-primary-soft); }
.workspace-nav a.is-active,
.workspace-nav button.is-active { color: var(--wb-primary); background: var(--wb-primary-soft); }
.workspace-nav-icon { display: grid; width: 20px; place-items: center; font-size: 17px; }
.workspace-sidebar-footer { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--wb-line); }
.workspace-sidebar-footer a { color: #98a2b3; font-size: 13px; text-decoration: none; }
.workspace-sidebar-footer a:hover { color: var(--wb-primary); }

.workspace-main { min-width: 0; padding: 24px clamp(20px, 4vw, 56px) 40px; }
.workspace-topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; }
.workspace-greeting p { margin: 0 0 4px; color: var(--wb-text-muted); font-size: 13px; }
.workspace-greeting h1 { margin: 0; font-size: 25px; letter-spacing: -.035em; }
.workspace-date { display: inline-flex; align-items: center; gap: 8px; color: var(--wb-text-muted); font-size: 14px; }
.workspace-content { width: min(100%, 1180px); margin: 34px auto 0; }

.workspace-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: clamp(24px, 4vw, 38px); border-radius: 24px; color: #fff; background: linear-gradient(120deg, #4647bb, #6869eb 57%, #8b8cf4); box-shadow: 0 16px 36px rgba(91,92,226,.18); }
.workspace-hero h2 { margin: 0 0 9px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; }
.workspace-hero p { max-width: 540px; margin: 0; color: rgba(255,255,255,.80); font-size: 14px; line-height: 1.75; }
.workspace-hero-shortcut { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; color: rgba(255,255,255,.90); font-size: 13px; white-space: nowrap; }
.workspace-hero-shortcut kbd { padding: 2px 5px; border-radius: 4px; color: #fff; background: rgba(0,0,0,.16); font-family: inherit; }
.workspace-hero-action { padding: 10px 15px; border: 1px solid rgba(255,255,255,.38); border-radius: 10px; color: #fff; background: rgba(255,255,255,.12); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.workspace-hero-action:hover { background: rgba(255,255,255,.22); }

.workspace-search { display: flex; gap: 10px; margin-top: 20px; padding: 8px; border: 1px solid var(--wb-line); border-radius: 16px; background: var(--wb-surface); box-shadow: 0 7px 18px rgba(31,42,84,.04); }
.workspace-search:focus-within { border-color: rgba(91,92,226,.65); box-shadow: 0 0 0 4px rgba(91,92,226,.10); }
.workspace-search-icon { display: grid; width: 38px; place-items: center; color: #98a2b3; font-size: 19px; }
.workspace-search input { min-width: 0; flex: 1; height: 42px; border: 0; outline: 0; color: var(--wb-text); background: transparent; font: inherit; }
.workspace-search input::placeholder { color: #98a2b3; }
.workspace-search button { min-width: 80px; padding: 0 16px; border: 0; border-radius: 10px; color: #fff; background: var(--wb-primary); font: inherit; font-weight: 650; cursor: pointer; }
.workspace-search button:hover { background: var(--wb-primary-dark); }
.workspace-search-history { margin: 10px 2px 0; padding: 10px 12px; border: 1px solid #eceef5; border-radius: 11px; background: rgba(255,255,255,.72); }
.workspace-search-history[hidden] { display: none; }
.workspace-search-history-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #667085; font-size: 12px; font-weight: 700; }
.workspace-search-history-head button { padding: 0; border: 0; color: #98a2b3; background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.workspace-search-history-head button:hover { color: var(--wb-primary); }
.workspace-search-history-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.workspace-search-history-chip { max-width: 240px; overflow: hidden; padding: 5px 10px; border: 1px solid #dfe2ec; border-radius: 999px; color: #475467; background: #fff; font: inherit; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.workspace-search-history-chip:hover { border-color: rgba(91,92,226,.42); color: var(--wb-primary); background: var(--wb-primary-soft); }

.workspace-section { margin-top: 34px; }
.workspace-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.workspace-section-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.workspace-section-heading span { color: var(--wb-text-muted); font-size: 13px; }
.workspace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 18px; }
.workspace-card { display: flex; min-height: 118px; padding: 16px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid var(--wb-line); border-radius: 15px; color: var(--wb-text); background: var(--wb-surface); box-shadow: 0 8px 18px rgba(31,42,84,.045); text-align: center; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.workspace-card:hover { border-color: rgba(91,92,226,.30); box-shadow: 0 15px 26px rgba(31,42,84,.10); transform: translateY(-4px); }
.workspace-card-icon { display: grid; width: 42px; height: 42px; place-items: center; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: 31px; line-height: 1; }
.workspace-card-line-icon { display: none; }
.workspace-card-title { margin-top: 10px; color: #3f4654; font-size: 14px; font-weight: 650; }
.workspace-card-meta { display: none; }
.workspace-empty { padding: 36px 18px; border: 1px dashed #d8dce8; border-radius: 15px; color: var(--wb-text-muted); background: var(--wb-surface-muted); font-size: 14px; text-align: center; }
.workspace-library { margin-top: 18px; padding: 20px; border: 1px solid var(--wb-line); border-radius: var(--wb-radius); background: var(--wb-surface-muted); }
.workspace-library[hidden] { display: none; }
.workspace-library-toggle { margin-top: 16px; padding: 8px 12px; border: 0; border-radius: 9px; color: var(--wb-primary); background: var(--wb-primary-soft); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.workspace-library-toggle:hover { background: #e4e4ff; }

.workspace-results { display: none; margin-top: 34px; }
.workspace-results.is-visible { display: block; }
.workspace-result-heading { display: none; }
.workspace-result-list { overflow: hidden; border: 1px solid var(--wb-line); border-radius: 13px; background: var(--wb-surface); box-shadow: 0 7px 20px rgba(31,42,84,.04); }
.workspace-result-table { width: 100%; border-collapse: collapse; text-align: left; }
.workspace-result-table th { padding: 14px 18px; border-bottom: 1px solid #e4e7ef; color: #475467; background: #f7f8fc; font-size: 13px; font-weight: 750; }
.workspace-result-table td { padding: 14px 18px; border-top: 1px solid #eef0f5; vertical-align: top; }
.workspace-result-table tbody tr:first-child td { border-top: 0; }
.workspace-result-table tbody tr:hover { background: #fbfbff; }
.workspace-result-title { color: #344054; font-size: 14px; font-weight: 500; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.workspace-result-highlight { padding: 0 2px; border-radius: 3px; color: #4338ca; background: #e9e8ff; font: inherit; font-weight: 800; }
.workspace-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; color: var(--wb-success); background: #ecfdf5; font-size: 12px; font-weight: 700; }
.workspace-footer { margin-top: 42px; color: #98a2b3; font-size: 12px; text-align: center; }
.workspace-footer a { color: inherit; text-decoration: none; }

@media (max-width: 760px) {
    .auth-layout { display: block; }
    .auth-intro { min-height: 230px; padding: 28px 24px; }
    .auth-promise { margin-top: 40px; }
    .auth-promise h1 { font-size: 31px; }
    .auth-promise p, .auth-copyright { display: none; }
    .auth-panel { min-height: calc(100vh - 230px); padding: 34px 24px; }
    .auth-code-row { display: block; }
    .auth-inline-action { width: 100%; margin-top: 9px; }
    .workspace-shell { display: block; }
    .workspace-sidebar { display: none; }
    .workspace-mobile-nav { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--wb-line); background: #fff; }
    .workspace-mobile-nav > a, .workspace-mobile-nav > button, .workspace-mobile-more > summary { display: flex; min-height: 46px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 0; border: 0; color: #8791a3; background: transparent; font: inherit; font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer; }
    .workspace-mobile-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .workspace-mobile-nav > .is-active, .workspace-mobile-more[open] > summary { color: var(--wb-primary); }
    .workspace-mobile-more > summary { list-style: none; }
    .workspace-mobile-more > summary::-webkit-details-marker { display: none; }
    .workspace-mobile-menu { position: absolute; right: 16px; bottom: calc(100% + 10px); width: min(280px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--wb-line); border-radius: 16px; background: #fff; box-shadow: 0 12px 40px rgba(31,42,84,.14); }
    .workspace-mobile-menu-heading { display: block; padding: 10px 12px 6px; color: #98a2b3; font-size: 11px; }
    .workspace-mobile-menu a { display: flex; min-height: 46px; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 9px; color: #344054; font-size: 14px; text-decoration: none; }
    .workspace-mobile-menu a:hover { background: var(--wb-primary-soft); }
    .workspace-mobile-menu a > span { color: #98a2b3; }
    .workspace-mobile-menu .workspace-mobile-logout { margin-top: 4px; border-top: 1px solid var(--wb-line); border-radius: 0 0 9px 9px; color: #c34f59; }
    .workspace-main { padding: 22px 20px calc(90px + env(safe-area-inset-bottom, 0px)); }
    .workspace-topbar { align-items: flex-start; }
    .workspace-greeting p { font-size: 11px; }
    .workspace-greeting h1 { font-size: 23px; }
    .workspace-date { padding-top: 8px; font-size: 12px; text-align: right; }
    .workspace-content { margin-top: 18px; }
    .workspace-hero { display: none; }
    .workspace-hero-shortcut, .workspace-hero-action { display: none; }
    .workspace-search { gap: 6px; margin-top: 0; padding: 6px; border-radius: 13px; box-shadow: none; }
    .workspace-search-icon { width: 27px; flex-shrink: 0; }
    .workspace-search input { height: 40px; font-size: 16px; }
    .workspace-search button { min-width: 58px; padding: 0 12px; font-size: 13px; }
    .workspace-search-history { margin: 12px 0 0; padding: 0; border: 0; background: transparent; }
    .workspace-search-history-head { font-size: 11px; }
    .workspace-search-history-list { gap: 6px; }
    .workspace-search-history-chip { max-width: 100%; padding: 5px 9px; font-size: 11px; }
    .workspace-section { margin-top: 28px; }
    .workspace-section-heading h2 { font-size: 17px; }
    .workspace-section-heading span { font-size: 11px; }
    .workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .workspace-card { min-height: 96px; padding: 15px; align-items: flex-start; justify-content: flex-start; border-radius: 13px; box-shadow: none; text-align: left; }
    .workspace-card-icon { width: 32px; height: 32px; border-radius: 9px; color: #686bd2; background: #f0f0fc; }
    .workspace-card-emoji { display: none; }
    .workspace-card-line-icon { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .workspace-card-title { margin-top: 9px; font-size: 13px; }
    .workspace-library { padding: 14px; }
    .workspace-footer { margin-top: 28px; font-size: 10px; line-height: 1.8; }
}

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

/* 菜单管理 */
.manage-page { min-height: 100vh; margin: 0; color: var(--wb-text); background: var(--wb-bg); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
.manage-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 70px; padding: 0 clamp(20px, 5vw, 72px); border-bottom: 1px solid var(--wb-line); background: rgba(255,255,255,.88); backdrop-filter: blur(14px); }
.manage-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--wb-text); font-size: 15px; font-weight: 800; text-decoration: none; }
.manage-brand .brand-mark { color: #fff; border: 0; background: var(--wb-primary); }
.manage-header-title { margin-left: 12px; padding-left: 14px; border-left: 1px solid var(--wb-line); color: var(--wb-text-muted); font-size: 14px; font-weight: 650; }
.manage-actions { display: flex; align-items: center; gap: 9px; }
.manage-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 13px; border: 1px solid var(--wb-line); border-radius: 9px; color: #475467; background: #fff; font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; transition: .18s ease; }
.manage-button:hover { border-color: rgba(91,92,226,.38); color: var(--wb-primary); background: var(--wb-primary-soft); }
.manage-button-primary { border-color: var(--wb-primary); color: #fff; background: var(--wb-primary); }
.manage-button-primary:hover { border-color: var(--wb-primary-dark); color: #fff; background: var(--wb-primary-dark); }
.manage-shell { width: min(100% - 40px, 1120px); margin: 0 auto; padding: 38px 0 56px; }
.manage-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.manage-heading h1 { margin: 0; font-size: 27px; letter-spacing: -.04em; }
.manage-heading p { margin: 8px 0 0; color: var(--wb-text-muted); font-size: 14px; }
.manage-count { color: var(--wb-text-muted); font-size: 13px; white-space: nowrap; }
.manage-panel { overflow: hidden; border: 1px solid var(--wb-line); border-radius: var(--wb-radius); background: var(--wb-surface); box-shadow: 0 8px 20px rgba(31,42,84,.035); }
.manage-table-wrap { overflow-x: auto; }
.manage-table { width: 100%; border-collapse: collapse; text-align: left; }
.manage-table th { padding: 13px 18px; color: #667085; background: #fafbfe; font-size: 12px; font-weight: 750; letter-spacing: .02em; }
.manage-table td { padding: 16px 18px; border-top: 1px solid var(--wb-line); vertical-align: middle; }
.manage-table tbody tr:hover { background: #fbfbff; }
.manage-index { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; color: var(--wb-primary); background: var(--wb-primary-soft); font-size: 13px; font-weight: 750; }
.manage-page-name { color: var(--wb-text); font-size: 14px; font-weight: 750; }
  .manage-page-path { max-width: 430px; margin-top: 5px; overflow: hidden; color: var(--wb-text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .manage-directory-counts { display: flex; min-width: 190px; max-width: 370px; flex-wrap: wrap; gap: 6px; }
  .manage-directory-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 8px; border-radius: 8px; color: #4e4fb8; background: #f0f0ff; font-size: 12px; font-weight: 700; white-space: nowrap; }
  .manage-directory-empty { color: var(--wb-text-muted); font-size: 12px; }
.manage-permission { display: inline-flex; max-width: 230px; overflow: hidden; padding: 4px 8px; border-radius: 999px; color: #55607a; background: #f2f4f7; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.manage-empty { padding: 48px 18px; color: var(--wb-text-muted); font-size: 14px; text-align: center; }
.manage-form-card { width: min(100%, 610px); padding: clamp(22px, 5vw, 36px); border: 1px solid var(--wb-line); border-radius: var(--wb-radius); background: var(--wb-surface); box-shadow: var(--wb-shadow); }
.manage-form-card h1 { margin: 0; font-size: 26px; letter-spacing: -.04em; }
.manage-form-card > p { margin: 9px 0 30px; color: var(--wb-text-muted); font-size: 14px; }
.manage-field { margin-bottom: 19px; }
.manage-field label { display: block; margin-bottom: 8px; color: #344054; font-size: 14px; font-weight: 700; }
.manage-input { width: 100%; height: 48px; padding: 0 13px; border: 1px solid #dfe3ed; border-radius: 11px; outline: 0; color: var(--wb-text); background: #fff; font: inherit; transition: .18s ease; }
.manage-input:focus { border-color: var(--wb-primary); box-shadow: 0 0 0 4px rgba(91,92,226,.12); }
.manage-input[readonly] { color: #667085; background: #f8fafc; }
.manage-form-footer { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.manage-status { min-height: 21px; margin: 15px 0 0; color: var(--wb-text-muted); font-size: 13px; }
.manage-list-notice { margin: -8px 0 16px; color: var(--wb-success); font-weight: 600; }
.permission-form-card { width: min(100%, 760px); }
.permission-kicker { margin: 0 0 8px !important; color: var(--wb-primary) !important; font-size: 12px !important; font-weight: 800; letter-spacing: .1em; }
.permission-menu-summary { display: flex; align-items: center; gap: 14px; margin: 25px 0; padding: 16px; border: 1px solid #e4e4f6; border-radius: 14px; background: linear-gradient(120deg, #f6f5ff, #fcfcff); }
.permission-menu-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #6869ea, #514bcf); font-size: 22px; font-weight: 700; box-shadow: 0 7px 16px rgba(91, 92, 226, .2); }
.permission-menu-summary > div { min-width: 0; }
.permission-menu-summary span:not(.permission-menu-icon) { display: block; margin-bottom: 3px; color: #707796; font-size: 12px; font-weight: 700; }
.permission-menu-summary strong { display: block; overflow: hidden; color: #202858; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.permission-menu-summary code { display: block; margin-top: 5px; overflow: hidden; color: #747a98; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.permission-section { margin-top: 2px; padding-top: 22px; border-top: 1px solid var(--wb-line); }
.permission-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.permission-section-label { display: block; color: #344054; font-size: 14px; font-weight: 800; }
.permission-section-head p { margin: 5px 0 0; color: var(--wb-text-muted); font-size: 12px; }
.permission-tools { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.permission-selected-count { padding: 5px 8px; border-radius: 999px; color: #4e4fb8; background: var(--wb-primary-soft); font-size: 12px; font-weight: 750; white-space: nowrap; }
.permission-text-button { padding: 4px 2px; border: 0; color: #5758c9; background: transparent; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.permission-text-button:hover { color: #3334aa; text-decoration: underline; }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 10px; margin-top: 16px; }
.permission-option { position: relative; display: flex; align-items: center; gap: 10px; min-height: 74px; padding: 12px 42px 12px 12px; border: 1px solid #e3e6ef; border-radius: 13px; color: #475467; background: #fff; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.permission-option:hover { border-color: #c5c7ff; box-shadow: 0 6px 16px rgba(46, 49, 117, .07); transform: translateY(-1px); }
.permission-option:has(input:checked) { border-color: rgba(91, 92, 226, .58); background: linear-gradient(135deg, #f0efff, #fafaff); box-shadow: 0 6px 17px rgba(91, 92, 226, .1); }
.permission-checkbox { position: absolute; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.permission-checkmark { position: absolute; top: 12px; right: 12px; display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #ccd1df; border-radius: 7px; color: transparent; background: #fff; font-size: 13px; font-weight: 900; transition: .18s ease; }
.permission-checkbox:checked + .permission-checkmark { border-color: var(--wb-primary); color: #fff; background: var(--wb-primary); }
.permission-avatar { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: #5557c8; background: #eeeeff; font-size: 14px; font-weight: 800; text-transform: uppercase; }
.permission-checkbox:checked ~ .permission-avatar { color: #fff; background: #5b5ce2; }
.permission-user-info { min-width: 0; }
.permission-user-info strong, .permission-user-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.permission-user-info strong { color: #26304f; font-size: 14px; }
.permission-user-info small { margin-top: 4px; color: #7c849a; font-size: 11px; }
@media (max-width: 640px) { .permission-section-head { display: block; } .permission-tools { justify-content: flex-start; margin-top: 12px; } .permission-grid { grid-template-columns: 1fr; } }
.manage-dialog { width: min(calc(100% - 32px), 560px); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--wb-line); border-radius: 18px; color: var(--wb-text); background: var(--wb-surface); box-shadow: var(--wb-shadow); }
.manage-dialog::backdrop { background: rgba(20, 27, 48, .42); backdrop-filter: blur(3px); }
.manage-dialog-inner { padding: 26px; }
.manage-dialog-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.manage-dialog-title h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.manage-close { display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 0; border-radius: 8px; color: var(--wb-text-muted); background: #f4f5f8; font-size: 20px; cursor: pointer; }
.manage-close:hover { color: var(--wb-primary); background: var(--wb-primary-soft); }
.manage-danger { margin-left: auto; border-color: #f3c5cd; color: #c8354e; background: #fff; }
.manage-danger:hover { border-color: #c8354e; color: #fff; background: #c8354e; }
.manage-search { display: flex; gap: 9px; margin-bottom: 20px; }
.manage-search .manage-input { max-width: 400px; }
.work-solution { max-width: 330px; overflow: hidden; color: var(--wb-text-muted); font-size: 13px; line-height: 1.55; text-overflow: ellipsis; white-space: nowrap; }
.work-solution mark { padding: 1px 3px; border-radius: 4px; color: #4938a8; background: #fff0a8; font: inherit; font-weight: 750; }
.public-memo-table { table-layout: fixed; }
.public-memo-panel, .public-memo-panel .manage-table-wrap { overflow: visible; }
.public-memo-table th:first-child, .public-memo-table td:first-child { width: 56px; }
.public-memo-table th:nth-child(3), .public-memo-table td:nth-child(3) { width: 205px; }
.public-memo-table th:nth-child(4), .public-memo-table td:nth-child(4) { width: 105px; }
.public-memo-content { position: relative; color: var(--wb-text-muted); font-size: 13px; line-height: 1.65; }
.public-memo-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.public-memo-content mark { padding: 1px 3px; border-radius: 4px; color: #4938a8; background: #fff0a8; font: inherit; font-weight: 750; }
.public-memo-popover { position: absolute; z-index: 6; top: calc(100% - 9px); left: 8px; display: none; width: min(560px, calc(100vw - 48px)); max-height: min(390px, 60vh); overflow: auto; padding: 14px; border: 1px solid rgba(91,92,226,.28); border-radius: 12px; color: #344054; background: #fff; box-shadow: 0 14px 34px rgba(31,42,84,.18); }
.public-memo-content:hover, .public-memo-content:focus-within { z-index: 7; }
.public-memo-content:hover .public-memo-popover, .public-memo-content:focus-within .public-memo-popover { display: block; }
.public-memo-popover-label { margin-bottom: 8px; color: #667085; font-size: 12px; font-weight: 750; }
.public-memo-popover-content { white-space: pre-wrap; word-break: break-word; }
.public-memo-time { color: #667085; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.55; white-space: nowrap; }
.public-memo-time span { display: block; }
.public-memo-user { overflow: hidden; color: #475467; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.public-memo-edit-card { width: min(100%, 860px); }
.public-memo-time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.public-memo-time-fields .manage-field { margin-bottom: 19px; }
.public-memo-editor { height: auto; min-height: 460px; padding: 13px; line-height: 1.7; resize: vertical; }
@media (max-width: 640px) { .public-memo-time-fields { grid-template-columns: 1fr; gap: 0; } .public-memo-editor { min-height: 380px; } }
.recycle-actions { margin: -4px 0 16px; }
.recycle-check { width: 42px; }
.recycle-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--wb-primary); vertical-align: middle; }
.recycle-meta { display: grid; gap: 5px; min-width: 185px; color: var(--wb-text-muted); font-size: 12px; line-height: 1.4; }
.recycle-type { color: #475467; font-size: 13px; font-weight: 700; white-space: nowrap; }
.log-id { min-width: 128px; color: var(--wb-primary); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 700; white-space: nowrap; }
.log-argument { max-width: 360px; overflow: hidden; color: #475467; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.log-key { color: var(--wb-text-muted); font-size: 13px; }
.vip-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.vip-status-safe { color: #087a58; background: #e8f7ef; }
.vip-status-warning { color: #a05b00; background: #fff4d8; }
.vip-status-danger { color: #bd334c; background: #ffeaee; }
.vip-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 16px; }
.vip-member-card { display: flex; overflow: hidden; min-height: 245px; flex-direction: column; border: 1px solid var(--wb-line); border-radius: 16px; background: var(--wb-surface); box-shadow: 0 10px 24px rgba(31,42,84,.06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.vip-member-card:hover { transform: translateY(-4px); border-color: rgba(91,92,226,.35); box-shadow: 0 18px 34px rgba(31,42,84,.12); }
.vip-member-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px 20px; color: #fff; }
.vip-card-safe { background: linear-gradient(125deg, #148863, #35b486); }
.vip-card-warning { background: linear-gradient(125deg, #c77a10, #e7ad39); }
.vip-card-danger { background: linear-gradient(125deg, #bf3e57, #e36a7e); }
.vip-member-eyebrow { display: block; margin-bottom: 5px; color: rgba(255,255,255,.78); font-size: 12px; font-weight: 700; }
.vip-member-head h2 { margin: 0; color: #fff; font-size: 21px; letter-spacing: -.03em; word-break: break-word; }
.vip-card-state { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; color: #243b31; background: #fff; box-shadow: 0 3px 10px rgba(17,24,39,.16); font-size: 15px; font-weight: 800; letter-spacing: .01em; line-height: 1.1; white-space: nowrap; }
.vip-card-warning .vip-card-state { color: #7a4200; background: #fff8e8; }
.vip-card-danger .vip-card-state { color: #9f2841; background: #fff0f3; }
.vip-card-safe .vip-card-state { color: #087454; background: #effff8; }
.vip-member-details { display: grid; gap: 13px; margin: 20px 20px 16px; }
.vip-member-details div { display: grid; gap: 3px; }
.vip-member-details span { color: var(--wb-text-muted); font-size: 12px; }
.vip-member-details strong { overflow: hidden; color: #344054; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.vip-member-footer { display: flex; justify-content: flex-end; margin: auto 20px 0; padding: 14px 0 17px; border-top: 1px solid var(--wb-line); }
.net-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.net-card-grid > .manage-panel { grid-column: 1 / -1; }
.net-collection-card { display: flex; min-height: 245px; padding: 20px; flex-direction: column; border: 1px solid var(--wb-line); border-radius: 16px; background: var(--wb-surface); box-shadow: 0 10px 24px rgba(31,42,84,.05); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.net-collection-card:hover { transform: translateY(-3px); border-color: rgba(91,92,226,.34); box-shadow: 0 17px 32px rgba(31,42,84,.10); }
.net-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.net-type-chip { display: inline-flex; max-width: 150px; overflow: hidden; padding: 5px 9px; border-radius: 999px; color: var(--wb-primary); background: var(--wb-primary-soft); font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.net-card-edit { padding: 3px 0; border: 0; color: var(--wb-text-muted); background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.net-card-edit:hover { color: var(--wb-primary); }
.net-collection-card h2 { overflow: hidden; margin: 22px 0 8px; color: var(--wb-text); font-size: 20px; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.net-card-address { overflow: hidden; color: var(--wb-text-muted); font-size: 13px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.net-card-address[href]:hover { color: var(--wb-primary); text-decoration: underline; }
.net-card-details { display: grid; gap: 12px; margin: 22px 0 17px; }
.net-card-details div { display: grid; gap: 3px; }
.net-card-details span, .net-card-footer { color: var(--wb-text-muted); font-size: 12px; }
.net-card-details strong { overflow: hidden; color: #475467; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.net-card-footer { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--wb-line); }
.net-textarea { height: auto; min-height: 96px; padding: 12px 13px; resize: vertical; }
.net-type-options { height: 40px; margin-top: 9px; color: var(--wb-text-muted); font-size: 13px; }
.manage-time-choice { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--wb-text-muted); font-size: 13px; }
.manage-time-choice input { min-height: 36px; padding: 0 9px; border: 1px solid var(--wb-line); border-radius: 9px; color: #475467; background: #fff; font: inherit; }
.work-detail-title { margin: 0; font-size: 23px; line-height: 1.45; letter-spacing: -.03em; }
.work-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 26px; color: var(--wb-text-muted); font-size: 13px; }
.work-detail-solution { margin: 0; padding: 18px; border-radius: 12px; color: #344054; background: var(--wb-surface-muted); font-size: 14px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.memo-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; color: var(--wb-text-muted); font-size: 13px; }
.memo-pagination-actions { display: flex; align-items: center; gap: 6px; }
.memo-pagination button { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--wb-line); border-radius: 8px; color: #475467; background: #fff; font: inherit; cursor: pointer; }
.memo-pagination button:hover:not(:disabled), .memo-pagination button.is-current { border-color: var(--wb-primary); color: var(--wb-primary); background: var(--wb-primary-soft); }
.memo-pagination button:disabled { cursor: not-allowed; opacity: .45; }

@media (max-width: 640px) {
    .manage-header { min-height: 62px; padding: 0 16px; }
    .manage-header-title { display: none; }
    .manage-shell { width: min(100% - 28px, 1120px); padding-top: 28px; }
    .manage-heading { display: block; }
    .manage-count { display: block; margin-top: 8px; }
    .manage-table th:nth-child(3), .manage-table td:nth-child(3) { display: none; }
    .manage-table th, .manage-table td { padding: 14px 12px; }
    .public-memo-panel .manage-table-wrap { overflow-x: auto; }
    .public-memo-table { min-width: 620px; }
    .manage-page-path { max-width: 160px; }
    .manage-form-footer { flex-wrap: wrap; }
}

/* 银行消费 */
.bank-shell { width: min(100% - 40px, 1280px); }
.bank-heading { margin-bottom: 20px; }
.bank-heading h1 { font-size: 30px; }
.bank-kicker { margin: 0 0 8px !important; color: var(--wb-primary) !important; font-size: 12px !important; font-weight: 750; letter-spacing: .08em; }
.bank-summary-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 22px; }
.bank-summary-card { display: grid; grid-template-columns: minmax(185px, 235px) minmax(0, 1fr); align-items: start; gap: 18px; min-height: 0; padding: 16px 18px; border: 1px solid var(--wb-line); border-radius: 15px; background: var(--wb-surface); box-shadow: 0 8px 20px rgba(31,42,84,.04); }
.bank-summary-card > span { display: block; color: #667085; font-size: 13px; font-weight: 750; }
.bank-summary-card p { margin: 0; color: #475467; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.65; word-break: break-word; }
.bank-summary-primary { display: block; min-height: auto; color: #fff; border: 0; background: linear-gradient(120deg, #4947c6, #8181ec); box-shadow: 0 14px 28px rgba(80,79,205,.19); }
.bank-summary-primary > span { margin-bottom: 7px; color: rgba(255,255,255,.76); }
.bank-summary-primary strong { display: block; color: #fff; font-size: 16px; line-height: 1.55; }
.bank-summary-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; padding: 13px 16px; border: 1px solid #d7daf0; border-radius: 11px; color: #344054; background: #fff; box-shadow: 0 7px 16px rgba(31,42,84,.045); }
.bank-summary-banner span { flex: 0 0 auto; padding-right: 14px; border-right: 1px solid var(--wb-line); color: #667085; font-size: 12px; font-weight: 750; }
.bank-summary-banner strong { color: #344054; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 650; }
.repayment-overview { margin-bottom: 22px; overflow: hidden; border: 1px solid var(--wb-line); border-radius: 18px; background: var(--wb-surface); box-shadow: 0 10px 24px rgba(31,42,84,.045); }
.repayment-overview-head { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px 22px; border-bottom: 1px solid var(--wb-line); background: linear-gradient(115deg, #fafaff, #f6f6ff); }
.repayment-overview-head h2 { margin: 0; color: #222a56; font-size: 19px; letter-spacing: -.025em; }
.repayment-overview-head > div > span { display: block; margin-top: 6px; color: var(--wb-text-muted); font-size: 12px; }
.repayment-total { min-width: 194px; padding: 12px 15px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #5b5ce2, #7a7cec); box-shadow: 0 10px 18px rgba(91,92,226,.2); }
.repayment-total > span { color: rgba(255,255,255,.8) !important; font-size: 12px !important; font-weight: 700; }
.repayment-total strong { display: block; margin-top: 3px; color: #fff; font-size: 25px; letter-spacing: -.045em; line-height: 1.1; }
.repayment-total b, .repayment-amount b { font: inherit; }
.repayment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.repayment-card { min-height: 192px; padding: 16px; border: 1px solid #e4e6ef; border-radius: 15px; background: #fff; transition: transform .18s ease, box-shadow .18s ease; }
.repayment-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(31,42,84,.08); }
.repayment-card-pending { border-color: #ffcfbc; background: linear-gradient(145deg, #fffdfc, #fff6f1); }
.repayment-card-clear { background: linear-gradient(145deg, #fff, #f7fbf9); }
.repayment-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.repayment-name { display: block; overflow: hidden; color: #273052; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.repayment-card-top small { display: block; margin-top: 4px; color: #7b839b; font-size: 12px; }
.repayment-state { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; color: #758096; background: #edf5f0; font-size: 11px; font-weight: 800; }
.repayment-card-pending .repayment-state { color: #bf4c22; background: #fff0e8; }
.repayment-amount { margin-top: 19px; }
.repayment-amount > span { display: block; color: #778098; font-size: 12px; font-weight: 700; }
.repayment-amount strong { display: block; margin-top: 3px; color: #374151; font-size: 31px; letter-spacing: -.055em; line-height: 1; }
.repayment-card-pending .repayment-amount strong { color: #d55528; }
.repayment-meta { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 17px; padding-top: 11px; border-top: 1px dashed #e2e5ed; color: #707991; font-size: 11px; }
.repayment-meta span:last-child { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.repayment-meta b { color: #48526e; font-weight: 800; }
.repayment-consumption { margin-top: 8px; color: #7a8399; font-size: 11px; }
.repayment-consumption b { color: #58627c; font-weight: 800; }
.bank-record-panel { overflow: hidden; }
.bank-record-panel .manage-table-wrap { overflow-x: hidden; }
.bank-record-panel .bank-table { table-layout: fixed; }
.bank-record-panel .bank-table th, .bank-record-panel .bank-table td { box-sizing: border-box; padding-right: 10px; padding-left: 10px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.bank-record-panel .bank-table th:nth-child(1) { width: 38px; }
.bank-record-panel .bank-table th:nth-child(2) { width: 9%; }
.bank-record-panel .bank-table th:nth-child(3) { width: 14%; }
.bank-record-panel .bank-table th:nth-child(4) { width: 12%; }
.bank-record-panel .bank-table th:nth-child(6) { width: 15%; }
.bank-record-panel .bank-table th:nth-child(7) { width: 78px; }
.bank-record-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 20px; border-bottom: 1px solid var(--wb-line); }
.bank-record-toolbar h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.bank-record-toolbar p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 13px; }
.bank-table th, .bank-table td { white-space: nowrap; }
.bank-check { width: 38px; padding-right: 5px !important; }
.bank-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--wb-primary); vertical-align: middle; }
.bank-tail { display: inline-grid; gap: 3px; color: var(--wb-primary); text-decoration: none; }
.bank-tail:hover strong { text-decoration: underline; }
.bank-tail span { color: var(--wb-text-muted); font-size: 11px; font-weight: 650; }
.bank-tail strong { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; }
.bank-name { max-width: 180px; overflow: hidden; color: #344054; font-weight: 700; text-overflow: ellipsis; }
.bank-amount { color: #087a58; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; font-weight: 750; }
.bank-use { color: #475467; line-height: 1.55; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; }
.bank-record-panel .bank-use { min-width: 0; }
.bank-meta { display: grid; gap: 7px; min-width: 152px; }
.bank-record-panel .bank-meta { min-width: 0; }
.bank-meta time { color: var(--wb-text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.bank-status { display: inline-flex; width: max-content; padding: 3px 7px; border-radius: 999px; font-size: 11px; font-weight: 750; }
.bank-status-spent { color: #087a58; background: #e8f7ef; }
.bank-status-return { color: #a05b00; background: #fff4d8; }
.bank-row-actions { display: flex; gap: 7px; }
.bank-row-actions .manage-button { min-height: 33px; padding: 0 10px; }
.bank-record-panel .bank-row-actions { display: grid; gap: 6px; }
.bank-record-panel .bank-row-actions .manage-button { width: 100%; min-height: 30px; padding: 0 5px; }
.bank-record-panel .bank-row-actions .manage-danger { margin-left: 0; }
.bank-detail-shell { width: min(100% - 40px, 980px); }
.bank-detail-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
.bank-detail-aside { overflow: hidden; border: 1px solid var(--wb-line); border-radius: 16px; background: var(--wb-surface); box-shadow: 0 8px 20px rgba(31,42,84,.04); }
.bank-detail-identity { padding: 22px; color: #fff; background: linear-gradient(130deg, #4947c6, #8181ec); }
.bank-detail-identity span { display: block; color: rgba(255,255,255,.77); font-size: 12px; font-weight: 700; }
.bank-detail-identity strong { display: block; margin: 7px 0 5px; color: #fff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 28px; letter-spacing: .04em; }
.bank-detail-identity p { margin: 0; color: rgba(255,255,255,.88); font-size: 13px; }
.bank-readonly-list { display: grid; gap: 15px; margin: 0; padding: 20px 22px; }
.bank-readonly-list div { display: grid; gap: 5px; }
.bank-readonly-list dt { color: var(--wb-text-muted); font-size: 12px; font-weight: 650; }
.bank-readonly-list dd { margin: 0; overflow: hidden; color: #344054; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.bank-detail-form { width: auto; min-height: 430px; box-sizing: border-box; }
.bank-detail-form h2 { margin: 0; font-size: 22px; letter-spacing: -.035em; }
.bank-detail-form > p { margin: 8px 0 28px; color: var(--wb-text-muted); font-size: 13px; }
.bank-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bank-detail-form small { display: block; margin-top: 7px; color: var(--wb-text-muted); font-size: 12px; }
.history-shell { padding-bottom: 70px; }
.history-heading { margin-bottom: 14px; }
.history-explanation { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #dfe3ed; border-radius: 11px; color: #667085; background: #fbfcff; font-size: 13px; line-height: 1.6; }
.history-explanation strong { color: #344054; }
.history-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.history-stat-card { display: grid; gap: 8px; min-height: 120px; padding: 18px; border: 1px solid var(--wb-line); border-radius: 15px; background: var(--wb-surface); box-shadow: 0 8px 20px rgba(31,42,84,.04); }
.history-stat-card > span { color: var(--wb-text-muted); font-size: 12px; font-weight: 750; }
.history-stat-card strong { overflow: hidden; color: #344054; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 18px; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.history-stat-card small { color: #98a2b3; font-size: 12px; }
.history-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr); gap: 18px; margin-bottom: 18px; }
.history-chart-card, .history-purpose-card { min-height: 305px; padding: 20px; box-sizing: border-box; }
.history-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; }
.history-card-head h2 { margin: 0; color: #344054; font-size: 17px; letter-spacing: -.02em; }
.history-card-head p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 12px; line-height: 1.5; }
.history-chart-key { display: inline-flex; align-items: center; gap: 6px; color: var(--wb-text-muted); font-size: 11px; white-space: nowrap; }
.history-chart-key i { display: block; width: 17px; height: 3px; border-radius: 2px; background: var(--wb-primary); }
.history-canvas-wrap { position: relative; height: 235px; margin-top: 16px; }
.history-canvas-wrap canvas { width: 100%; height: 235px; }
.history-trend-tooltip { position: absolute; z-index: 2; max-width: min(280px, calc(100% - 20px)); padding: 8px 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; color: #fff; background: rgba(31,42,84,.94); box-shadow: 0 8px 20px rgba(31,42,84,.22); font-size: 12px; font-weight: 650; line-height: 1.45; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; }
.history-chart-empty { display: grid; height: 100%; margin: 0; place-items: center; color: var(--wb-text-muted); font-size: 13px; text-align: center; }
.history-chart-empty[hidden] { display: none !important; }
.history-purpose-bars { display: grid; gap: 16px; margin-top: 26px; }
.history-purpose-row { display: grid; grid-template-columns: minmax(78px, 1fr) minmax(80px, 2fr) 36px; align-items: center; gap: 9px; }
.history-purpose-row > span { overflow: hidden; color: #475467; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.history-purpose-row > strong { color: var(--wb-text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; font-weight: 600; text-align: right; }
.history-purpose-track { overflow: hidden; height: 8px; border-radius: 999px; background: #eef0ff; }
.history-purpose-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5b5ce2, #8c8df0); }
.history-table-panel { overflow: hidden; }
.history-table .bank-tail { pointer-events: none; }
.history-report-panel { min-height: 190px; margin-bottom: 18px; padding: 20px; box-sizing: border-box; }
.history-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.history-report-head h2 { margin: 0; color: #344054; font-size: 17px; letter-spacing: -.02em; }
.history-report-head p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 12px; line-height: 1.55; }
.history-report-controls { display: flex; align-items: center; gap: 8px; }
.history-report-mode { display: flex; padding: 3px; border-radius: 9px; background: #f1f2ff; }
.history-report-mode button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 7px; color: #667085; background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.history-report-mode button.is-current { color: #fff; background: var(--wb-primary); box-shadow: 0 2px 6px rgba(91,92,226,.22); }
.history-report-controls select { height: 34px; max-width: 180px; padding: 0 26px 0 9px; border: 1px solid var(--wb-line); border-radius: 9px; outline: 0; color: #475467; background: #fff; font: inherit; font-size: 12px; }
.history-report-title { display: grid; gap: 8px; margin-top: 24px; }
.history-report-title > span { color: var(--wb-primary); font-size: 13px; font-weight: 750; }
.history-report-title > strong { color: #344054; font-size: 15px; line-height: 1.65; }
.history-report-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.history-report-metrics div { min-width: 0; padding: 11px 12px; border-radius: 10px; background: var(--wb-surface-muted); }
.history-report-metrics span { display: block; margin-bottom: 5px; color: var(--wb-text-muted); font-size: 11px; font-weight: 650; }
.history-report-metrics strong { display: block; overflow: hidden; color: #344054; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.history-report-metrics .history-change-up { color: #087a58; }
.history-report-metrics .history-change-down { color: #c8354e; }
.recycle-report-chart { margin-top: 18px; padding: 14px 15px 12px; border: 1px solid var(--wb-line); border-radius: 12px; background: #fcfcff; }
.recycle-report-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.recycle-report-chart-head span { color: #344054; font-size: 13px; font-weight: 750; }.recycle-report-chart-head small { color: var(--wb-text-muted); font-size: 11px; }.recycle-chart-wrap { position: relative; height: 245px; margin-top: 9px; }.recycle-chart-wrap canvas { display: block; width: 100%; height: 245px; }.recycle-chart-wrap canvas[hidden] { display: none !important; }.recycle-chart-wrap .history-chart-empty { position: absolute; inset: 0; }
.recycle-bank-shell { padding-bottom: 64px; }
.recycle-bank-notice { margin: -6px 0 18px; padding: 11px 14px; border: 1px solid #f3d7a6; border-radius: 11px; color: #8a5705; background: #fffaf0; font-size: 13px; line-height: 1.55; }
.recycle-bank-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.recycle-bank-stats article { display: grid; gap: 8px; min-height: 112px; padding: 17px 18px; border: 1px solid var(--wb-line); border-radius: 15px; background: var(--wb-surface); box-shadow: 0 8px 20px rgba(31,42,84,.04); }
.recycle-bank-stats span { color: var(--wb-text-muted); font-size: 12px; font-weight: 750; }
.recycle-bank-stats strong { color: #344054; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 20px; letter-spacing: -.04em; }
.recycle-bank-stats small { color: #98a2b3; font-size: 12px; }
.recycle-report-panel { margin-bottom: 18px; }
.recycle-page-size { display: inline-flex; align-items: center; gap: 8px; color: var(--wb-text-muted); font-size: 13px; font-weight: 650; white-space: nowrap; }
.recycle-page-size select { height: 34px; padding: 0 24px 0 9px; border: 1px solid var(--wb-line); border-radius: 9px; outline: 0; color: #475467; background: #fff; font: inherit; font-size: 13px; }
.recycle-bank-pagination { margin: 0; padding: 14px 18px; border-top: 1px solid var(--wb-line); }
.recycle-bank-amount { color: #c8354e; }
.mo-shell { width: min(100% - 40px, 1120px); }
.mo-search { flex-wrap: wrap; }
.mo-search .manage-input { max-width: 410px; }
.mo-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 16px; }
.mo-card-grid > .manage-panel { grid-column: 1 / -1; }
.mo-card { display: flex; min-height: 248px; padding: 19px; flex-direction: column; border: 1px solid var(--wb-line); border-radius: 16px; background: var(--wb-surface); box-shadow: 0 9px 21px rgba(31,42,84,.05); transition: .18s ease; }
.mo-card:hover { border-color: rgba(91,92,226,.35); box-shadow: 0 17px 31px rgba(31,42,84,.10); transform: translateY(-3px); }
.mo-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--wb-text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.mo-select { display: inline-flex; align-items: center; gap: 6px; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 12px; font-weight: 650; cursor: pointer; }
.mo-select input { width: 15px; height: 15px; margin: 0; accent-color: var(--wb-primary); }
.mo-card-link { min-width: 0; color: inherit; text-decoration: none; }
.mo-card-link h2 { overflow: hidden; margin: 23px 0 9px; color: #344054; font-size: 19px; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.mo-card-link p { display: -webkit-box; margin: 0; overflow: hidden; color: #667085; font-size: 13px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.mo-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--wb-line); color: var(--wb-text-muted); font-size: 12px; }
.mo-card-footer .manage-button { min-height: 33px; padding: 0 10px; }
.mo-list-panel { overflow: hidden; }
.mo-list-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 20px; border-bottom: 1px solid var(--wb-line); }
.mo-list-head h2 { margin: 0; color: #344054; font-size: 17px; letter-spacing: -.02em; }
.mo-list-head p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 12px; }
.mo-page-size { display: inline-flex; align-items: center; gap: 7px; color: var(--wb-text-muted); font-size: 12px; font-weight: 650; white-space: nowrap; }
.mo-page-size select { height: 34px; padding: 0 25px 0 9px; border: 1px solid var(--wb-line); border-radius: 9px; outline: 0; color: #475467; background: #fff; font: inherit; font-size: 12px; }
.mo-list-table td { vertical-align: top; }
.mo-check-cell { width: 48px; text-align: center; }
.mo-check-cell input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--wb-primary); }
.mo-content-cell { min-width: 330px; }
.mo-row-title { display: block; max-width: 430px; overflow: hidden; color: #344054; font-size: 14px; font-weight: 750; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.mo-row-title:hover { color: var(--wb-primary); text-decoration: underline; }
.mo-content-cell p { display: -webkit-box; max-width: 510px; margin: 6px 0 0; overflow: hidden; color: var(--wb-text-muted); font-size: 12px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mo-time-cell { display: grid; min-width: 170px; gap: 6px; color: var(--wb-text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.4; white-space: nowrap; }
.mo-user-cell { min-width: 88px; color: #475467; font-size: 13px; font-weight: 650; }
.mo-action-cell { width: 132px; white-space: nowrap; }
.mo-action-cell .manage-button { min-height: 33px; margin-right: 6px; padding: 0 10px; }
.mo-pagination { margin: 0; padding: 14px 18px; border-top: 1px solid var(--wb-line); }
.mo-editor-dialog { width: min(calc(100% - 32px), 880px); }
.mo-editor-dialog .manage-dialog-inner { max-height: calc(100vh - 32px); overflow-y: auto; }
.mo-editor-dialog .net-textarea { min-height: clamp(280px, 50vh, 540px); }
.mo-detail-shell { width: min(100% - 40px, 780px); }
.mo-detail-card { width: auto; box-sizing: border-box; }
.mo-detail-card h1 { margin: 0; color: #344054; font-size: 27px; letter-spacing: -.04em; }
.mo-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 17px; margin: 15px 0 25px; color: var(--wb-text-muted); font-size: 12px; }
.mo-detail-content { position: relative; max-height: 13em; overflow: hidden; padding: 18px; border-radius: 12px; color: #344054; background: var(--wb-surface-muted); font-size: 14px; line-height: 1.85; white-space: pre-wrap; word-break: break-word; }
.mo-detail-content:not(.is-expanded)::after { position: absolute; right: 0; bottom: 0; left: 0; height: 4em; content: ""; background: linear-gradient(transparent, var(--wb-surface-muted)); pointer-events: none; }
.mo-detail-content.is-expanded { max-height: none; }
.mo-content-toggle { margin-top: 11px; padding: 0; border: 0; color: var(--wb-primary); background: transparent; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.mo-content-toggle:hover { text-decoration: underline; }
.mo-detail-id { margin-top: 18px; color: #98a2b3; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.access-log-shell { width: min(100% - 40px, 1180px); }
.access-log-search { margin: -4px 0 20px; }
.access-log-search .manage-input { max-width: 410px; }
.access-log-note { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 19px; border-bottom: 1px solid var(--wb-line); }
.access-log-note span { color: #344054; font-size: 15px; font-weight: 750; }
.access-log-note small { color: var(--wb-text-muted); font-size: 12px; }
.access-log-type { min-width: 170px; color: #344054; font-weight: 650; }
.access-log-ip, .access-log-time { color: #475467; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.access-log-ip { min-width: 120px; }
.access-log-time { min-width: 160px; }
.access-log-user { color: #475467; font-size: 13px; font-weight: 650; }
.access-log-address { max-width: 220px; overflow: hidden; color: var(--wb-text-muted); font-size: 13px; text-overflow: ellipsis; }
.access-log-details { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 20px; }
.access-log-details div { min-width: 0; padding: 11px 12px; border-radius: 10px; background: var(--wb-surface-muted); }
.access-log-details span { display: block; margin-bottom: 4px; color: var(--wb-text-muted); font-size: 11px; font-weight: 650; }
.access-log-details strong { display: block; overflow: hidden; color: #344054; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.manage-dialog-title p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 13px; }
.system-log-shell { width: min(100% - 40px, 1320px); }
.system-log-search { flex-wrap: wrap; margin: -4px 0 20px; }
.system-log-search .manage-input { width: min(100%, 300px); max-width: none; }
.system-log-search .system-log-date { width: 154px; }
.system-log-panel { overflow: hidden; }
.system-log-table td { vertical-align: top; }
.system-log-table .log-argument { max-width: 420px; line-height: 1.5; }
.system-log-time { min-width: 158px; color: #667085; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; white-space: nowrap; }
.system-log-pagination { margin: 0; padding: 14px 18px; border-top: 1px solid var(--wb-line); }
.system-log-page-numbers { display: inline-flex; align-items: center; gap: 6px; }
.system-log-page-gap { min-width: 18px; color: var(--wb-text-muted); font-size: 13px; text-align: center; }
.system-log-dialog { width: min(calc(100% - 32px), 900px); }
.system-log-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.system-log-details div { min-width: 0; padding: 11px 12px; border-radius: 10px; background: var(--wb-surface-muted); }
.system-log-details span { display: block; margin-bottom: 4px; color: var(--wb-text-muted); font-size: 11px; font-weight: 650; }
.system-log-details strong { display: block; overflow: hidden; color: #344054; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.system-log-content { max-height: min(55vh, 560px); margin: 0; overflow: auto; padding: 16px; border-radius: 11px; color: #344054; background: var(--wb-surface-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }

@media (max-width: 800px) {
    .bank-shell { width: min(100% - 28px, 1280px); }
    .bank-summary-card { display: block; }
    .bank-summary-card > span { margin-bottom: 8px; }
    .repayment-overview-head { display: block; }
    .repayment-total { margin-top: 14px; }
    .repayment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bank-record-toolbar { display: block; }
    .bank-record-toolbar .manage-danger { margin: 14px 0 0; }
    .bank-detail-shell { width: min(100% - 28px, 980px); }
    .bank-detail-layout { grid-template-columns: 1fr; }
    .history-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .history-analysis-grid { grid-template-columns: 1fr; }
    .history-report-head { display: block; }
    .history-report-controls { margin-top: 14px; }
    .history-report-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .recycle-bank-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mo-shell, .mo-detail-shell { width: min(100% - 28px, 1120px); }
    .mo-list-head { align-items: flex-start; flex-direction: column; }
    .access-log-shell { width: min(100% - 28px, 1180px); }
    .system-log-shell { width: min(100% - 28px, 1320px); }
}
@media (max-width: 540px) { .repayment-grid { grid-template-columns: 1fr; padding: 12px; } .repayment-overview-head { padding: 17px; } }

@media (max-width: 520px) {
    .bank-form-row { grid-template-columns: 1fr; gap: 0; }
    .history-stat-grid { grid-template-columns: 1fr; }
    .history-report-controls { align-items: stretch; flex-direction: column; }
    .history-report-controls select { max-width: none; }
    .history-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .recycle-bank-stats { grid-template-columns: 1fr; }
    .mo-search .manage-input { width: 100%; max-width: none; }
    .access-log-search { flex-wrap: wrap; }
    .access-log-search .manage-input { width: 100%; max-width: none; }
    .access-log-details { grid-template-columns: 1fr; }
    .system-log-search .manage-input { width: 100%; max-width: none; }
    .system-log-search .system-log-date { width: calc(50% - 5px); }
    .system-log-details { grid-template-columns: 1fr; }
}

/* 在线信息 */
.loufen-page { min-height: 100vh; margin: 0; color: var(--wb-text); background: var(--wb-bg); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
.loufen-header { display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding: 0 clamp(20px, 5vw, 72px); border-bottom: 1px solid var(--wb-line); background: rgba(255,255,255,.9); backdrop-filter: blur(14px); }
.loufen-shell { width: min(100% - 40px, 1040px); margin: 0 auto; padding: 42px 0 64px; }
.loufen-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.loufen-heading h1 { margin: 0; color: #172033; font-size: clamp(27px, 3vw, 34px); letter-spacing: -.045em; }
.loufen-heading p:not(.bank-kicker) { margin: 9px 0 0; color: var(--wb-text-muted); font-size: 14px; }
.loufen-search-panel { margin-bottom: 18px; padding: 18px 20px; border: 1px solid var(--wb-line); border-radius: 15px; background: var(--wb-surface); box-shadow: 0 8px 20px rgba(31,42,84,.04); }
.loufen-search-label { display: block; margin-bottom: 9px; color: #475467; font-size: 13px; font-weight: 750; }
.loufen-search-row { display: flex; gap: 9px; }
.loufen-search-row .manage-input { max-width: 520px; }
.loufen-search-hint { min-height: 18px; margin: 10px 0 0; color: var(--wb-text-muted); font-size: 12px; }
.loufen-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.loufen-list > .manage-panel { grid-column: 1 / -1; }
.loufen-card { position: relative; display: grid; min-height: 124px; padding: 20px 82px 20px 20px; grid-template-columns: minmax(150px, 205px) minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; gap: 20px; border: 1px solid var(--wb-line); border-radius: 16px; background: var(--wb-surface); box-shadow: 0 9px 21px rgba(31,42,84,.05); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.loufen-card:hover { border-color: rgba(91,92,226,.35); box-shadow: 0 17px 31px rgba(31,42,84,.10); transform: translateY(-3px); }
.loufen-card-top { position: absolute; top: 17px; right: 20px; }
.loufen-card-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: var(--wb-primary); background: var(--wb-primary-soft); font-size: 11px; font-weight: 750; }
.loufen-card h2 { overflow: hidden; margin: 0; color: #344054; font-size: 20px; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.loufen-card-details { display: contents; }
.loufen-card-details div { display: grid; gap: 4px; }
.loufen-card-details div:first-child { grid-column: 2; }
.loufen-card-details div:last-child { grid-column: 3; }
.loufen-card-details span { color: var(--wb-text-muted); font-size: 11px; font-weight: 750; }
.loufen-card-details p { display: -webkit-box; margin: 0; overflow: hidden; color: #475467; font-size: 13px; line-height: 1.65; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.loufen-card-details mark { padding: 1px 2px; border-radius: 3px; color: #4938a8; background: #fff0a8; font: inherit; font-weight: 750; }
@media (max-width: 640px) { .loufen-header { min-height: 62px; padding: 0 16px; } .loufen-shell { width: min(100% - 28px, 1040px); padding-top: 29px; } .loufen-heading { display: block; } .loufen-heading .manage-count { display: block; margin-top: 8px; } .loufen-search-row { align-items: stretch; flex-direction: column; } .loufen-search-row .manage-input { max-width: none; } .loufen-card { display: block; min-height: 0; padding-right: 20px; } .loufen-card-top { position: static; margin-bottom: 8px; } .loufen-card h2 { margin-bottom: 16px; } .loufen-card-details { display: grid; gap: 13px; } }

/* 会员动态看板 */
.vip-dynamic-shell { width: min(100% - 40px, 1180px); }
.vip-dynamic-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.vip-dynamic-stats article { display: grid; gap: 8px; min-height: 118px; padding: 18px; border: 1px solid var(--wb-line); border-radius: 15px; background: var(--wb-surface); box-shadow: 0 8px 20px rgba(31,42,84,.04); }
.vip-dynamic-stats span { color: var(--wb-text-muted); font-size: 12px; font-weight: 750; }
.vip-dynamic-stats strong { color: #344054; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 25px; letter-spacing: -.05em; }
.vip-dynamic-stats small { color: #98a2b3; font-size: 12px; }
.vip-reminder-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 18px 20px; }
.vip-reminder-panel h2, .vip-dynamic-table-head h2 { margin: 0; color: #344054; font-size: 17px; letter-spacing: -.02em; }
.vip-reminder-panel p, .vip-dynamic-table-head p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 13px; }
.vip-dynamic-table-panel { overflow: hidden; }
.vip-dynamic-table-head { display: flex; align-items: center; justify-content: space-between; padding: 19px 20px; border-bottom: 1px solid var(--wb-line); }
.vip-dynamic-table th, .vip-dynamic-table td { white-space: nowrap; }
.vip-dynamic-name { min-width: 145px; color: #344054; font-weight: 750; }
.vip-dynamic-id, .vip-dynamic-time { color: #475467; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.vip-dynamic-time { min-width: 155px; }
.vip-dynamic-table .manage-button { min-height: 33px; padding: 0 10px; }
@media (max-width: 800px) { .vip-dynamic-shell { width: min(100% - 28px, 1180px); } .vip-dynamic-stats { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .vip-reminder-panel { align-items: flex-start; flex-direction: column; } .vip-dynamic-table th:nth-child(2), .vip-dynamic-table td:nth-child(2), .vip-dynamic-table th:nth-child(5), .vip-dynamic-table td:nth-child(5) { display: none; } }

/* 费用分摊计算器：保留原有表单、明细和趋势图结构，仅统一视觉 */
.calbill-page { min-height: 100vh; color: var(--wb-text); background: var(--wb-bg); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
.calbill-page > .container { width: min(100% - 40px, 1060px); max-width: none; margin: 0 auto; padding: 42px 0 64px; }
.calbill-page .calbill-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.calbill-page h2 { margin: 0; color: #172033; font-size: 28px; letter-spacing: -.04em; }
.calbill-page #billForm { padding: 23px; border: 1px solid var(--wb-line); border-radius: 16px; background: var(--wb-surface); box-shadow: 0 9px 21px rgba(31,42,84,.045); }
.calbill-page #billForm .form-group { margin-bottom: 17px; }
.calbill-page #billForm label { display: block; margin-bottom: 8px; color: #344054; font-size: 14px; font-weight: 700; }
.calbill-page #billForm .form-control { height: 47px; border: 1px solid #dfe3ed; border-radius: 11px; color: var(--wb-text); box-shadow: none; font: inherit; }
.calbill-page #billForm .form-control:focus { border-color: var(--wb-primary); box-shadow: 0 0 0 4px rgba(91,92,226,.12); }
.calbill-page #calculateBtn { min-height: 40px; padding: 0 16px; border: 1px solid var(--wb-primary); border-radius: 9px; background: var(--wb-primary); font: inherit; font-size: 13px; font-weight: 700; }
.calbill-page #calculateBtn:hover { border-color: var(--wb-primary-dark); background: var(--wb-primary-dark); }
.calbill-page #result:not(:empty) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 17px 0 0 !important; padding: 16px; border: 1px solid #d8dcf4; border-radius: 14px; background: #fbfcff; }
.calbill-page .bill-result-card { display: grid; gap: 7px; min-height: 106px; padding: 17px 18px; border: 1px solid #dfe3ed; border-radius: 12px; background: #fff; box-shadow: 0 5px 12px rgba(56,65,155,.05); }
.calbill-page .bill-result-card span { color: #667085; font-size: 14px; font-weight: 700; }
.calbill-page .bill-result-card strong { color: var(--wb-primary); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 30px; font-weight: 800; letter-spacing: -.05em; line-height: 1.1; }
.calbill-page .bill-result-card em { margin-left: 5px; color: #667085; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; font-style: normal; font-weight: 700; letter-spacing: 0; }
.calbill-page > .container > .table { overflow: hidden; width: 100%; margin: 18px 0 0; border: 1px solid var(--wb-line); border-collapse: separate; border-radius: 16px; border-spacing: 0; background: var(--wb-surface); box-shadow: 0 8px 20px rgba(31,42,84,.04); }
.calbill-page > .container > .table th { padding: 13px 17px; border-top: 0; color: #667085; background: #fafbfe; font-size: 12px; font-weight: 750; }
.calbill-page > .container > .table td { padding: 15px 17px; border-top: 1px solid var(--wb-line); color: #475467; font-size: 13px; }
.calbill-page > .container > .table tbody tr:hover { background: #fbfbff; }
.calbill-page > .container > .container { width: 100%; max-width: none; margin: 20px 0 0 !important; padding: 22px 23px 17px; border: 1px solid var(--wb-line); border-radius: 16px; background: var(--wb-surface); box-shadow: 0 8px 20px rgba(31,42,84,.04); }
.calbill-page > .container > .container h2 { margin-bottom: 17px; font-size: 21px; }
.calbill-page #billChart { max-height: 410px; }
@media (max-width: 640px) { .calbill-page > .container { width: min(100% - 28px, 1060px); padding-top: 29px; } .calbill-page .calbill-heading { align-items: flex-start; flex-direction: column; } .calbill-page #billForm { padding: 18px; } .calbill-page #result:not(:empty) { grid-template-columns: 1fr; } .calbill-page > .container > .table th, .calbill-page > .container > .table td { padding: 12px 10px; } .calbill-page > .container > .container { padding: 18px; } }

/* IP 地址库 */
.ip-library-shell { width: min(100% - 40px, 1140px); }
.ip-library-panel { overflow: hidden; }
.ip-library-head { display: flex; align-items: center; justify-content: space-between; padding: 19px 20px; border-bottom: 1px solid var(--wb-line); }
.ip-library-head h2 { margin: 0; color: #344054; font-size: 17px; letter-spacing: -.02em; }
.ip-library-head p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 12px; }
.ip-library-table th, .ip-library-table td { white-space: nowrap; }
.ip-library-ip { min-width: 155px; color: var(--wb-primary); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; font-weight: 700; }
.ip-library-content { min-width: 270px; max-width: 420px; overflow: hidden; color: #475467; font-size: 13px; text-overflow: ellipsis; }
.ip-library-time { min-width: 165px; color: var(--wb-text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.ip-library-table .manage-button { min-height: 33px; padding: 0 10px; }
@media (max-width: 800px) { .ip-library-shell { width: min(100% - 28px, 1140px); } }
@media (max-width: 520px) { .ip-library-table th:nth-child(3), .ip-library-table td:nth-child(3) { display: none; } }

/* 生日记录 */
.birth-shell { width: min(100% - 40px, 980px); }
.birth-panel { overflow: hidden; }
.birth-panel-head { padding: 19px 20px; border-bottom: 1px solid var(--wb-line); }
.birth-panel-head h2 { margin: 0; color: #344054; font-size: 17px; letter-spacing: -.02em; }
.birth-panel-head p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 12px; }
.birth-table th, .birth-table td { white-space: nowrap; }
.birth-name { min-width: 150px; color: #344054; font-size: 14px; font-weight: 750; }
.birth-date { min-width: 150px; color: var(--wb-primary); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; font-weight: 650; }
.birth-contact { min-width: 210px; color: #475467; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.birth-table .manage-button { min-height: 33px; padding: 0 10px; }
@media (max-width: 640px) { .birth-shell { width: min(100% - 28px, 980px); } }
@media (max-width: 520px) { .birth-table th:nth-child(4), .birth-table td:nth-child(4) { display: none; } }

/* 网站回收站 */
.recycle-net-shell { width: min(100% - 40px, 1180px); }
.recycle-net-search { margin-bottom: 18px; }
.recycle-net-search .manage-input { max-width: 400px; }
.recycle-net-panel { overflow: hidden; }
.recycle-net-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 19px 20px; border-bottom: 1px solid var(--wb-line); }
.recycle-net-head h2 { margin: 0; color: #344054; font-size: 17px; letter-spacing: -.02em; }
.recycle-net-head p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 12px; }
.recycle-page-size { display: inline-flex; align-items: center; gap: 7px; color: var(--wb-text-muted); font-size: 12px; font-weight: 650; white-space: nowrap; }
.recycle-page-size select { height: 34px; padding: 0 25px 0 9px; border: 1px solid var(--wb-line); border-radius: 9px; outline: 0; color: #475467; background: #fff; font: inherit; font-size: 12px; }
.recycle-net-table td { vertical-align: top; }
.recycle-net-site { display: grid; min-width: 290px; gap: 5px; }
.recycle-net-site strong { overflow: hidden; color: #344054; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.recycle-net-site a { overflow: hidden; color: var(--wb-primary); font-size: 12px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.recycle-net-site a:hover { text-decoration: underline; }
.recycle-net-site span { color: var(--wb-text-muted); font-size: 12px; }
.recycle-net-meta { display: grid; min-width: 175px; gap: 5px; color: var(--wb-text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.recycle-net-source { display: inline-flex; padding: 5px 8px; border-radius: 999px; color: var(--wb-primary); background: var(--wb-primary-soft); font-size: 11px; font-weight: 750; white-space: nowrap; }
.recycle-net-pagination { margin: 0; padding: 14px 18px; border-top: 1px solid var(--wb-line); }
.recycle-net-details { display: grid; gap: 11px; }
.recycle-net-details div { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--wb-surface-muted); }
.recycle-net-details span { color: var(--wb-text-muted); font-size: 11px; font-weight: 650; }
.recycle-net-details strong { overflow: hidden; color: #344054; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 800px) { .recycle-net-shell { width: min(100% - 28px, 1180px); } }
@media (max-width: 520px) { .recycle-net-head { align-items: flex-start; flex-direction: column; } .recycle-net-search { flex-wrap: wrap; } .recycle-net-search .manage-input { width: 100%; max-width: none; } .recycle-net-table th:nth-child(3), .recycle-net-table td:nth-child(3) { display: none; } }

/* 港口链接器 */
.port-linker-shell { width: min(100% - 40px, 1040px); padding-bottom: 46px; }
.port-linker-heading { align-items: flex-end; }
.port-linker-config, .port-linker-records { overflow: hidden; }
.port-linker-config-head, .port-linker-records-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid var(--wb-line); }
.port-linker-config-head h2, .port-linker-records-head h2 { margin: 0; color: #344054; font-size: 17px; letter-spacing: -.02em; }
.port-linker-config-head p, .port-linker-records-head p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 12px; }
.port-linker-form { padding: 20px 22px 22px; }
.port-linker-form > label { display: block; margin-bottom: 8px; color: #475467; font-size: 13px; font-weight: 750; }
.port-linker-controls { display: flex; align-items: center; gap: 9px; }
.port-linker-controls .manage-input { width: min(100%, 415px); }
.port-linker-controls .manage-button { flex: 0 0 auto; }
.port-linker-tip { margin: 10px 0 0; color: var(--wb-text-muted); font-size: 12px; }
.port-linker-records { margin-top: 18px; }
.port-linker-local { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: var(--wb-primary); background: var(--wb-primary-soft); font-size: 11px; font-weight: 750; white-space: nowrap; }
.port-linker-list { display: grid; gap: 12px; padding: 17px 20px 20px; }
.port-linker-empty { display: grid; justify-items: center; gap: 6px; padding: 38px 16px; border: 1px dashed #d7dcef; border-radius: 12px; color: var(--wb-text-muted); background: #fbfcff; text-align: center; }
.port-linker-empty strong { color: #475467; font-size: 14px; }
.port-linker-empty span { font-size: 12px; }
.port-linker-record { overflow: hidden; border: 1px solid var(--wb-line); border-radius: 13px; background: #fff; }
.port-linker-record-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; background: #fbfcff; }
.port-linker-record-head > div { display: grid; gap: 4px; }
.port-linker-record-head strong { color: #344054; font-size: 14px; }
.port-linker-record-head span { color: var(--wb-text-muted); font-size: 11px; }
.port-linker-remove { padding: 0; border: 0; color: #d92d20; background: transparent; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.port-linker-remove:hover { text-decoration: underline; }
.port-linker-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 11px; }
.port-linker-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 11px; border: 1px solid #e7e9f1; border-radius: 9px; color: #475467; background: #fff; text-decoration: none; transition: border-color .18s ease, background .18s ease; }
.port-linker-link:hover { border-color: #bfc4ff; background: var(--wb-primary-soft); }
.port-linker-link span { overflow: hidden; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.port-linker-link b { flex: 0 0 auto; color: var(--wb-primary); font-size: 11px; }
.port-linker-footer { padding: 17px 20px; border-top: 1px solid var(--wb-line); color: var(--wb-text-muted); background: #fff; text-align: center; font-size: 12px; }
.port-linker-footer a { color: inherit; text-decoration: none; }
.port-linker-footer a:hover { color: var(--wb-primary); }
@media (max-width: 720px) { .port-linker-shell { width: min(100% - 28px, 1040px); } .port-linker-heading { align-items: flex-start; } .port-linker-controls { flex-wrap: wrap; } .port-linker-controls .manage-input { width: 100%; } .port-linker-links { grid-template-columns: 1fr; } }
@media (max-width: 440px) { .port-linker-config-head, .port-linker-records-head { align-items: flex-start; flex-direction: column; } .port-linker-controls .manage-button { flex: 1 1 auto; } }

/* 网站类型与网站明细 */
.nettype-shell { width: min(100% - 40px, 1080px); padding-bottom: 56px; }
.nettype-panel { overflow: hidden; }
.nettype-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--wb-line); }
.nettype-panel-head h2 { margin: 0; color: #344054; font-size: 17px; letter-spacing: -.02em; }
.nettype-panel-head p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 12px; }
.nettype-count { display: inline-flex; padding: 6px 10px; border-radius: 999px; color: var(--wb-primary); background: var(--wb-primary-soft); font-size: 12px; font-weight: 750; white-space: nowrap; }
.nettype-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px; }
.nettype-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 96px; padding: 15px; border: 1px solid var(--wb-line); border-radius: 13px; color: inherit; background: #fff; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.nettype-card:hover { border-color: #c3c7ff; box-shadow: 0 10px 20px rgba(56,65,155,.09); transform: translateY(-2px); }
.nettype-card-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: var(--wb-primary); background: var(--wb-primary-soft); font-size: 20px; font-weight: 750; }
.nettype-card-content { display: grid; min-width: 0; gap: 5px; }
.nettype-card-content strong { overflow: hidden; color: #344054; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.nettype-card-content small { overflow: hidden; color: var(--wb-text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.nettype-card-total { display: grid; justify-items: center; min-width: 27px; color: #344054; font-size: 15px; font-weight: 800; line-height: 1.1; }
.nettype-card-total i { margin-top: 2px; color: var(--wb-text-muted); font-size: 10px; font-style: normal; font-weight: 650; }
.nettype-card > b { grid-column: 2 / 4; color: var(--wb-primary); font-size: 11px; }
.nettype-empty { display: grid; grid-column: 1 / -1; justify-items: center; gap: 6px; padding: 43px 16px; border: 1px dashed #d7dcef; border-radius: 12px; color: var(--wb-text-muted); background: #fbfcff; text-align: center; }
.nettype-empty strong { color: #475467; font-size: 14px; }
.nettype-empty span { font-size: 12px; }
.nettype-error strong { color: #d92d20; }
.nettype-search-panel { padding: 19px 21px; }
.nettype-search-panel > label { display: block; margin-bottom: 8px; color: #475467; font-size: 13px; font-weight: 750; }
.nettype-search-controls { display: flex; align-items: center; gap: 9px; }
.nettype-search-controls .manage-input { max-width: 540px; }
.nettype-search-panel p { margin: 10px 0 0; color: var(--wb-text-muted); font-size: 12px; }
.nettype-record-list { display: grid; gap: 12px; margin-top: 18px; }
.nettype-record { padding: 18px 20px; border: 1px solid var(--wb-line); border-radius: 15px; background: #fff; box-shadow: 0 8px 20px rgba(31,42,84,.035); }
.nettype-record-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.nettype-record-label { color: var(--wb-text-muted); font-size: 11px; font-weight: 700; }
.nettype-record h2 { margin: 5px 0 0; color: #344054; font-size: 17px; letter-spacing: -.02em; }
.nettype-record-type { display: inline-flex; flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; color: var(--wb-primary); background: var(--wb-primary-soft); font-size: 11px; font-weight: 750; }
.nettype-address { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding: 10px 12px; border-radius: 9px; color: #475467; background: #f8f9fd; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; text-decoration: none; }
.nettype-address:hover { color: var(--wb-primary); background: var(--wb-primary-soft); }
.nettype-address b { flex: 0 0 auto; font-family: Inter, "PingFang SC", sans-serif; font-size: 11px; }
.nettype-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 13px; }
.nettype-meta span { display: grid; gap: 4px; color: #667085; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.nettype-meta b { color: var(--wb-text-muted); font-family: Inter, "PingFang SC", sans-serif; font-size: 10px; }
@media (max-width: 860px) { .nettype-shell { width: min(100% - 28px, 1080px); } .nettype-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nettype-grid { grid-template-columns: 1fr; padding: 14px; } .nettype-panel-head { align-items: flex-start; flex-direction: column; } .nettype-search-controls { flex-wrap: wrap; } .nettype-search-controls .manage-input { width: 100%; max-width: none; } .nettype-record { padding: 16px; } .nettype-record-main { align-items: flex-start; flex-direction: column; gap: 10px; } .nettype-address { align-items: flex-start; flex-direction: column; overflow-wrap: anywhere; } .nettype-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } }

/* 网站类型列表：数据量较大时使用紧凑表格与分页 */
.nettype-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--wb-line); background: #fbfcff; }
.nettype-filter { display: grid; gap: 7px; width: min(100%, 430px); }
.nettype-filter span, .nettype-page-size span { color: #667085; font-size: 11px; font-weight: 750; }
.nettype-filter .manage-input { height: 38px; }
.nettype-page-size { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.nettype-page-size select { height: 38px; padding: 0 25px 0 9px; border: 1px solid var(--wb-line); border-radius: 9px; outline: 0; color: #475467; background: #fff; font: inherit; font-size: 12px; }
.nettype-table-wrap { overflow-x: auto; }
.nettype-table { min-width: 650px; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.nettype-table th { padding: 13px 20px; }
.nettype-table td { padding: 13px 20px; vertical-align: middle; }
.nettype-index { width: 78px; color: var(--wb-text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.nettype-name { color: #344054; font-size: 14px; font-weight: 750; text-decoration: none; }
.nettype-name:hover { color: var(--wb-primary); }
.nettype-total { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: var(--wb-primary); background: var(--wb-primary-soft); font-size: 11px; font-weight: 750; white-space: nowrap; }
.nettype-open { min-height: 32px; padding: 0 10px; font-size: 12px; }
.nettype-table-empty { padding: 42px 20px !important; color: var(--wb-text-muted); text-align: center; }
.nettype-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 14px 20px; border-top: 1px solid var(--wb-line); }
.nettype-pagination button { min-width: 33px; height: 32px; padding: 0 9px; border: 1px solid var(--wb-line); border-radius: 8px; color: #475467; background: #fff; cursor: pointer; font: inherit; font-size: 12px; }
.nettype-pagination button:hover:not(:disabled) { border-color: #babfff; color: var(--wb-primary); }
.nettype-pagination button.is-current { border-color: var(--wb-primary); color: #fff; background: var(--wb-primary); }
.nettype-pagination button:disabled { opacity: .45; cursor: not-allowed; }
.nettype-pagination span { margin-left: 4px; color: var(--wb-text-muted); font-size: 12px; }
@media (max-width: 560px) { .nettype-toolbar { align-items: stretch; flex-direction: column; } .nettype-filter { width: 100%; } .nettype-page-size { justify-content: space-between; } .nettype-pagination { padding: 13px 14px; } }

/* 类型本身是目录，不使用明细表格；以高密度可点击标签呈现 */
.nettype-directory { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; padding: 18px 20px 20px; }
.nettype-tag { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; height: 40px; padding: 0 10px 0 12px; border: 1px solid #e2e5f0; border-radius: 9px; color: #475467; background: #fff; text-decoration: none; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.nettype-tag:hover { border-color: #bec4ff; color: var(--wb-primary); background: var(--wb-primary-soft); transform: translateY(-1px); }
.nettype-tag span { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.nettype-tag b { display: grid; place-items: center; flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; color: var(--wb-primary); background: #f0f0ff; font-size: 10px; font-weight: 800; }
@media (max-width: 1040px) { .nettype-directory { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 820px) { .nettype-directory { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nettype-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px; } }
@media (max-width: 440px) { .nettype-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 延续原页面的标签换行目录展示，只调整为统一的视觉规范 */
.nettype-directory-flow { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 10px; min-height: 130px; padding: 20px; }
.nettype-badge { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 32px; padding: 0 8px 0 11px; border: 1px solid transparent; border-radius: 999px; color: #fff; text-decoration: none; transition: box-shadow .16s ease, transform .16s ease; }
.nettype-badge:hover { color: #fff; box-shadow: 0 5px 12px rgba(52,64,84,.2); transform: translateY(-1px); }
.nettype-badge span { overflow: hidden; max-width: 190px; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.nettype-badge b { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; color: inherit; background: rgba(255,255,255,.22); font-size: 10px; font-weight: 800; }
.nettype-badge-indigo { background: #5b5ce2; }.nettype-badge-blue { background: #3478d4; }.nettype-badge-green { background: #12926b; }.nettype-badge-orange { background: #d97706; }.nettype-badge-pink { background: #d84f82; }.nettype-badge-cyan { background: #078a9c; }.nettype-badge-purple { background: #8a4cc7; }.nettype-badge-slate { background: #52627b; }
@media (max-width: 560px) { .nettype-directory-flow { gap: 8px; padding: 14px; } .nettype-badge span { max-width: 130px; } }

/* 网站明细使用更醒目的信息卡，保留一条记录一张卡的阅读节奏 */
.nettype-record { position: relative; overflow: hidden; border: 1px solid #cdd3ff; border-left: 5px solid #5b5ce2; background: linear-gradient(118deg, #fff 0%, #fafaff 57%, #f0f4ff 100%); box-shadow: 0 12px 28px rgba(63,72,177,.13); }
.nettype-record::after { position: absolute; top: -58px; right: -45px; width: 185px; height: 185px; border-radius: 50%; background: radial-gradient(circle, rgba(107,119,255,.17), rgba(107,119,255,0) 68%); content: ''; pointer-events: none; }
.nettype-record:hover { border-color: #9fa8ff; border-left-color: #4143c7; box-shadow: 0 16px 34px rgba(63,72,177,.19); transform: translateY(-2px); }
.nettype-record-main, .nettype-address, .nettype-meta { position: relative; z-index: 1; }
.nettype-record-label { color: #6d72bd; letter-spacing: .04em; }
.nettype-record h2 { color: #e14e66; font-size: 19px; }
.nettype-record-type { color: #fff; background: linear-gradient(135deg, #5b5ce2, #7779f1); box-shadow: 0 4px 10px rgba(91,92,226,.22); }
.nettype-address { border: 1px solid #bee2ff; color: #1682d0; background: linear-gradient(90deg, #eff9ff, #f7fbff); font-weight: 650; }
.nettype-address:hover { border-color: #6bbcff; color: #0877c5; background: #e8f6ff; }
.nettype-meta { gap: 12px; }
.nettype-meta span { min-width: 150px; padding: 8px 10px; border: 1px solid #e6e8f5; border-radius: 9px; background: rgba(255,255,255,.75); color: #667085; }
.nettype-meta span:nth-child(1) { color: #a758c2; }.nettype-meta span:nth-child(2) { color: #df8a22; }.nettype-meta span:nth-child(3) { color: #249d68; }
.nettype-meta b { color: #667085; }

/* 参数配置 */
.paramter-shell { width: min(100% - 40px, 1240px); padding-bottom: 54px; }
.paramter-overview { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 17px 20px; border: 1px solid #dfe1ff; border-radius: 15px; background: linear-gradient(105deg, #f1f1ff, #fafaff 60%, #f4f8ff); }
.paramter-overview > div { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 8px; }
.paramter-overview span, .paramter-overview small { color: var(--wb-text-muted); font-size: 12px; font-weight: 650; }
.paramter-overview strong { color: var(--wb-primary); font-size: 27px; letter-spacing: -.04em; }
.paramter-overview small { grid-column: 1 / -1; }
.paramter-overview p { margin: 0; color: #667085; font-size: 13px; }
.paramter-panel { overflow: hidden; }
.paramter-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 20px; border-bottom: 1px solid var(--wb-line); }
.paramter-panel-head h2 { margin: 0; color: #344054; font-size: 17px; letter-spacing: -.02em; }
.paramter-panel-head p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 12px; }
.paramter-table-wrap { overflow-x: auto; }
.paramter-table { min-width: 980px; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.paramter-table th { padding: 13px 15px; white-space: nowrap; }
.paramter-table td { padding: 14px 15px; vertical-align: middle; }
.paramter-row { cursor: pointer; transition: background .15s ease; }
.paramter-row:hover, .paramter-row.is-selected { background: #f5f5ff; }
.paramter-row.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--wb-primary); }
.paramter-select-col { width: 62px; }
.paramter-choice { width: 15px; height: 15px; accent-color: var(--wb-primary); cursor: pointer; }
.paramter-type { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: var(--wb-primary); background: var(--wb-primary-soft); font-size: 11px; font-weight: 750; }
.paramter-code { min-width: 155px; color: #344054; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 650; }
.paramter-name { min-width: 180px; max-width: 280px; overflow: hidden; color: #475467; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.paramter-time { min-width: 150px; color: var(--wb-text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; white-space: nowrap; }
.paramter-user { color: #344054; font-size: 12px; font-weight: 700; white-space: nowrap; }
.paramter-empty { padding: 42px !important; color: var(--wb-text-muted); text-align: center; }
.paramter-dialog { width: min(760px, calc(100% - 28px)); }
.paramter-textarea { min-height: 270px; resize: vertical; line-height: 1.65; }
.paramter-dialog-status { min-height: 18px; margin: 12px 0 0; color: #d92d20; font-size: 12px; }
@media (max-width: 760px) { .paramter-shell { width: min(100% - 28px, 1240px); } .paramter-overview { align-items: flex-start; flex-direction: column; } .paramter-panel-head { align-items: flex-start; flex-direction: column; } }

/* 今日任务 */
.today-task-shell { width: min(100% - 40px, 1120px); padding-bottom: 54px; }
.today-task-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.today-stat-card { display: grid; gap: 5px; padding: 18px 20px; border: 1px solid var(--wb-line); border-radius: 15px; background: #fff; box-shadow: 0 8px 20px rgba(31,42,84,.045); }
.today-stat-card span, .today-stat-card small { color: var(--wb-text-muted); font-size: 12px; font-weight: 650; }
.today-stat-card strong { font-size: 29px; letter-spacing: -.05em; }
.today-stat-pending { border-color: #f4d8b1; background: linear-gradient(120deg, #fff 45%, #fff8ec); }.today-stat-pending strong { color: #d97706; }
.today-stat-completed { border-color: #bae8d4; background: linear-gradient(120deg, #fff 45%, #effbf5); }.today-stat-completed strong { color: #16815a; }
.today-stat-total { border-color: #d9d9ff; background: linear-gradient(120deg, #fff 45%, #f3f2ff); }.today-stat-total strong { color: var(--wb-primary); }
.today-task-panel { overflow: hidden; }
.today-task-panel-head { padding: 19px 20px 12px; }
.today-task-panel-head h2 { margin: 0; color: #344054; font-size: 17px; letter-spacing: -.02em; }.today-task-panel-head p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 12px; }
.today-task-search { margin: 0; padding: 0 20px 16px; border-bottom: 1px solid var(--wb-line); }.today-task-search .manage-input { max-width: 470px; }
.today-task-table-wrap { overflow-x: auto; }.today-task-table { min-width: 820px; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.today-task-table th { padding: 13px 16px; }.today-task-table td { padding: 14px 16px; vertical-align: middle; }
.today-task-content { min-width: 260px; max-width: 440px; }.today-task-content strong { display: -webkit-box; overflow: hidden; color: #344054; font-size: 13px; font-weight: 700; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.today-task-meta { display: grid; min-width: 205px; gap: 4px; color: var(--wb-text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.4; white-space: nowrap; }
.today-task-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; }.today-task-status.pending { color: #c56809; background: #fff1dc; }
.today-task-edit { min-height: 33px; padding: 0 10px; font-size: 12px; white-space: nowrap; }.today-task-empty { padding: 45px !important; color: var(--wb-text-muted); text-align: center; }.today-task-error { color: #d92d20; }
.today-task-dialog { width: min(720px, calc(100% - 28px)); }.today-task-textarea { min-height: 235px; resize: vertical; line-height: 1.65; }.today-task-dialog-status { min-height: 18px; margin: 12px 0 0; color: #d92d20; font-size: 12px; }
@media (max-width: 760px) { .today-task-shell { width: min(100% - 28px, 1120px); }.today-task-stats { grid-template-columns: 1fr; }.today-task-search { flex-wrap: wrap; }.today-task-search .manage-input { width: 100%; max-width: none; } }

/* 打车费用 */
.taxi-pay-shell { width: min(100% - 40px, 1080px); padding-bottom: 54px; }
.taxi-pay-stats { display: grid; grid-template-columns: 1.25fr .85fr .85fr; gap: 14px; margin-bottom: 18px; }
.taxi-pay-stat { display: grid; gap: 5px; padding: 18px 20px; border: 1px solid var(--wb-line); border-radius: 15px; background: #fff; box-shadow: 0 8px 20px rgba(31,42,84,.045); }
.taxi-pay-stat span, .taxi-pay-stat small { color: var(--wb-text-muted); font-size: 12px; font-weight: 650; }.taxi-pay-stat strong { color: #344054; font-size: 27px; letter-spacing: -.04em; }.taxi-pay-amount { border-color: #d9d9ff; background: linear-gradient(120deg, #fff 45%, #f3f2ff); }.taxi-pay-amount strong { color: var(--wb-primary); font-size: 19px; letter-spacing: -.02em; }.taxi-pay-invoice { border-color: #bae8d4; background: linear-gradient(120deg, #fff 45%, #effbf5); }.taxi-pay-invoice strong { color: #16815a; }
.taxi-pay-panel { overflow: hidden; }.taxi-pay-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 20px; border-bottom: 1px solid var(--wb-line); }.taxi-pay-panel-head h2 { margin: 0; color: #344054; font-size: 17px; letter-spacing: -.02em; }.taxi-pay-panel-head p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 12px; }
.taxi-pay-period { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: var(--wb-primary); background: var(--wb-primary-soft); font-size: 11px; font-weight: 750; white-space: nowrap; }.taxi-pay-table-wrap { overflow-x: auto; }.taxi-pay-table { min-width: 760px; margin: 0; border: 0; border-radius: 0; box-shadow: none; }.taxi-pay-table th { padding: 13px 17px; }.taxi-pay-table td { padding: 14px 17px; vertical-align: middle; }.taxi-pay-id { display: inline-flex; padding: 5px 8px; border-radius: 8px; color: #475467; background: #f4f5f9; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 700; }.taxi-pay-money { color: #d97706; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; }.taxi-pay-time { min-width: 172px; color: var(--wb-text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; white-space: nowrap; }.taxi-pay-user { color: #344054; font-size: 12px; font-weight: 700; }.taxi-invoice { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; }.taxi-invoice.is-invoiced { color: #16815a; background: #e7f8ef; }.taxi-invoice.is-pending { color: #b36a0d; background: #fff1dc; }.taxi-pay-empty { padding: 45px !important; color: var(--wb-text-muted); text-align: center; }
@media (max-width: 760px) { .taxi-pay-shell { width: min(100% - 28px, 1080px); }.taxi-pay-stats { grid-template-columns: 1fr; }.taxi-pay-panel-head { align-items: flex-start; flex-direction: column; } }

/* 密码记录 */
.password-history-shell { width: min(100% - 40px, 980px); padding-bottom: 54px; }
.password-latest { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 19px 21px; border: 1px solid #d5d8ff; border-radius: 16px; background: linear-gradient(115deg, #f1f1ff, #fff 58%, #f6f8ff); box-shadow: 0 10px 24px rgba(70,78,180,.08); }
.password-latest > div:first-child { display: grid; gap: 5px; }.password-latest span, .password-latest small { color: var(--wb-text-muted); font-size: 12px; font-weight: 650; }.password-latest strong { color: #344054; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 23px; letter-spacing: .12em; }.password-latest-actions { display: flex; gap: 8px; }.password-history-panel { overflow: hidden; }.password-history-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 20px; border-bottom: 1px solid var(--wb-line); }.password-history-head h2 { margin: 0; color: #344054; font-size: 17px; letter-spacing: -.02em; }.password-history-head p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 12px; }.password-history-count { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: var(--wb-primary); background: var(--wb-primary-soft); font-size: 11px; font-weight: 750; white-space: nowrap; }.password-history-table-wrap { overflow-x: auto; }.password-history-table { min-width: 690px; margin: 0; border: 0; border-radius: 0; box-shadow: none; }.password-history-table th { padding: 13px 17px; }.password-history-table td { padding: 14px 17px; vertical-align: middle; }.password-value { display: inline-block; min-width: 125px; color: #475467; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; letter-spacing: .08em; }.password-time { min-width: 170px; color: var(--wb-text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; white-space: nowrap; }.password-user { color: #344054; font-size: 12px; font-weight: 700; }.password-history-table .manage-button { min-height: 32px; margin-right: 6px; padding: 0 10px; font-size: 12px; }.password-empty { padding: 45px !important; color: var(--wb-text-muted); text-align: center; }
/* 私人网站 */
.private-net-shell { width: min(100% - 40px, 1120px); padding-bottom: 54px; }.private-net-panel { overflow: hidden; }.private-net-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 20px 12px; }.private-net-head h2 { margin: 0; color: #344054; font-size: 17px; letter-spacing: -.02em; }.private-net-head p { margin: 6px 0 0; color: var(--wb-text-muted); font-size: 12px; }.private-net-count { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: var(--wb-primary); background: var(--wb-primary-soft); font-size: 11px; font-weight: 750; white-space: nowrap; }.private-net-search { margin: 0; padding: 0 20px 16px; border-bottom: 1px solid var(--wb-line); }.private-net-search .manage-input { max-width: 430px; }.private-net-table-wrap { overflow-x: auto; }.private-net-table { min-width: 870px; margin: 0; border: 0; border-radius: 0; box-shadow: none; }.private-net-table th { padding: 13px 16px; }.private-net-table td { padding: 14px 16px; vertical-align: middle; }.private-net-name { min-width: 180px; max-width: 260px; overflow: hidden; color: #344054; font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }.private-net-address { display: block; min-width: 280px; max-width: 400px; overflow: hidden; color: var(--wb-primary); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }.private-net-address:hover { text-decoration: underline; }.private-net-time { min-width: 160px; color: var(--wb-text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; white-space: nowrap; }.private-net-user { color: #344054; font-size: 12px; font-weight: 700; }.private-net-edit { min-height: 33px; padding: 0 10px; font-size: 12px; }.private-net-empty { padding: 45px !important; color: var(--wb-text-muted); text-align: center; }.private-net-dialog { width: min(720px, calc(100% - 28px)); }.private-net-status { min-height: 18px; margin: 12px 0 0; color: #d92d20; font-size: 12px; }
@media (max-width: 760px) { .password-history-shell, .private-net-shell { width: min(100% - 28px, 1120px); }.password-latest { align-items: flex-start; flex-direction: column; }.private-net-head { align-items: flex-start; flex-direction: column; }.private-net-search { flex-wrap: wrap; }.private-net-search .manage-input { width: 100%; max-width: none; } }

/* 用户弹窗：避免全屏模糊重绘，仅动画合成层上的透明度和位移。 */
html:has(.user-management-page) { scrollbar-gutter: stable; }
.user-management-page .manage-header { backdrop-filter: none; background: #fff; }
.user-management-page .manage-dialog { box-shadow: 0 16px 48px rgba(20, 27, 48, .18); }
.user-management-page .manage-dialog::backdrop { backdrop-filter: none; background: rgba(20, 27, 48, .38); }
.user-management-page .manage-dialog[open] { animation: user-dialog-enter 140ms ease-out; }
.user-management-page .manage-dialog[open]::backdrop { animation: user-backdrop-enter 140ms ease-out; }
.user-management-page .manage-dialog .manage-status { min-height: 20px; }
.user-management-page .manage-button { transition: background-color .14s ease, border-color .14s ease, color .14s ease; }
.user-management-page .manage-input { transition: border-color .14s ease; }
.user-management-page .manage-button:disabled { opacity: .5; cursor: default; }
@keyframes user-dialog-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes user-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .user-management-page .manage-dialog[open], .user-management-page .manage-dialog[open]::backdrop { animation: none; }
}