/*
 * ui-refresh.css
 * Visual-only workspace refresh. This file deliberately does not hide or replace
 * page controls; it standardizes the existing shell, forms, tables, tabs, cards,
 * dropdowns, drawers and dialogs.
 */

:root {
    --ui-canvas: #f5f5f7;
    --ui-sidebar: #eeeef1;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f7f8fa;
    --ui-line: #e2e5ea;
    --ui-line-strong: #d3d7df;
    --ui-text: #1d1d1f;
    --ui-text-soft: #6e6e73;
    --ui-text-faint: #89898f;
    --ui-blue: #2874df;
    --ui-blue-hover: #2269cf;
    --ui-blue-soft: #edf5ff;
    --ui-cyan: #249fc4;
    --ui-cyan-soft: #e8f7fb;
    --ui-green: #248a3d;
    --ui-green-soft: #edf8ef;
    --ui-amber: #9a6700;
    --ui-amber-soft: #fff3d6;
    --ui-red: #c73832;
    --ui-red-soft: #fff2f1;
    --ui-violet: #765fc2;
    --ui-violet-soft: #f0ecff;
    --ui-sidebar-width: 204px;
    --ui-radius: 8px;
    --ui-shadow-dialog: 0 24px 70px rgba(35, 47, 68, 0.2);

    --primary-color: var(--ui-blue);
    --primary-hover: var(--ui-blue-hover);
    --primary-active: #1858a8;
    --primary-gradient: var(--ui-blue);
    --accent-color: var(--ui-violet);
    --accent-gradient: var(--ui-violet);
    --success-color: var(--ui-green);
    --warning-color: var(--ui-amber);
    --danger-color: var(--ui-red);
    --info-color: var(--ui-cyan);
    --mac-bg-primary: var(--ui-canvas);
    --mac-bg-secondary: var(--ui-sidebar);
    --mac-bg-card: var(--ui-surface);
    --mac-bg-card-hover: var(--ui-surface);
    --text-primary: var(--ui-text);
    --text-secondary: var(--ui-text-soft);
    --text-tertiary: var(--ui-text-faint);
    --border-light: var(--ui-line);
    --border-medium: var(--ui-line-strong);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius-xl: 8px;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: 0 8px 22px rgba(37, 51, 73, 0.08);
    --shadow-lg: var(--ui-shadow-dialog);

    --icon-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
    --icon-stats: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 19V9M10 19V5M16 19v-7M22 19V3'/%3E%3C/svg%3E");
    --icon-activity: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2-7 4 14 2-7h6'/%3E%3C/svg%3E");
    --icon-sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3-1.4 3.6L7 8l3.6 1.4L12 13l1.4-3.6L17 8l-3.6-1.4L12 3Z'/%3E%3Cpath d='m5 14-.8 2.2L2 17l2.2.8L5 20l.8-2.2L8 17l-2.2-.8L5 14Z'/%3E%3Cpath d='m19 13-1 2.5-2.5 1L18 17.5l1 2.5 1-2.5 2.5-1-2.5-1L19 13Z'/%3E%3C/svg%3E");
    --icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    --icon-toolbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18v11H3zM8 9V5h8v4M3 13h18M10 13v2h4v-2'/%3E%3C/svg%3E");
    --icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l2-2a5 5 0 0 0-7-7l-1.1 1.1M14 11a5 5 0 0 0-7.5-.5l-2 2a5 5 0 0 0 7 7l1.1-1.1'/%3E%3C/svg%3E");
    --icon-scroll: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3Z'/%3E%3Cpath d='M8 7h7M8 11h7M8 15h4'/%3E%3C/svg%3E");
    --icon-zap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8Z'/%3E%3C/svg%3E");
    --icon-message: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4Z'/%3E%3Cpath d='m9 11 2 2 4-4'/%3E%3C/svg%3E");
    --icon-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/%3E%3C/svg%3E");
    --icon-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 13 5 3V8l-5 3'/%3E%3Crect x='3' y='5' width='13' height='14' rx='2'/%3E%3C/svg%3E");
    --icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
    --icon-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='18' rx='2'/%3E%3Cpath d='M9 4V2h6v2M9 12l2 2 4-4M9 18h6'/%3E%3C/svg%3E");
    --icon-repeat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 1 4 4-4 4M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
    --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4a1.7 1.7 0 0 0 1-1.6v-.2h4v.2A1.7 1.7 0 0 0 15 4a1.7 1.7 0 0 0 1.9.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z'/%3E%3C/svg%3E");
    --icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E");
    --icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V3h8v3M19 6l-1 15H6L5 6M10 11v5M14 11v5'/%3E%3C/svg%3E");
    --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
    --icon-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
    --icon-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7V5a2 2 0 0 0-2-2H5a3 3 0 0 0 0 6h16v10a2 2 0 0 1-2 2H5a3 3 0 0 1-3-3V6'/%3E%3Cpath d='M16 13h2'/%3E%3C/svg%3E");
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

html,
body {
    min-width: 320px;
    background: var(--ui-canvas);
    color: var(--ui-text);
    letter-spacing: 0;
}

body,
button,
input,
select,
textarea {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
    letter-spacing: 0;
}

body .app-container {
    min-height: 100vh;
    background: var(--ui-canvas);
}

/* Workspace shell */
html body .mac-sidebar {
    width: var(--ui-sidebar-width);
    padding: 16px 12px 12px;
    overflow: hidden;
    border-right: 1px solid var(--ui-line);
    background: var(--ui-sidebar);
    box-shadow: none;
    backdrop-filter: none;
}

html body .mac-sidebar .logo {
    min-height: 58px;
    margin: 0 0 10px;
    padding: 0 2px;
}

html body .logo-icon {
    position: relative;
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    margin-right: 8px;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #23ade5 0%, #fb7299 100%);
    box-shadow: 0 4px 12px rgba(35, 122, 184, 0.16);
}

html body .logo-icon::after {
    width: 19px;
    height: 19px;
    background: #fff;
    content: "";
    -webkit-mask: var(--icon-sparkles) center / contain no-repeat;
    mask: var(--icon-sparkles) center / contain no-repeat;
}

html body .logo span,
html body .logo-title {
    color: var(--ui-text);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
    white-space: nowrap;
}

html body .mac-sidebar > nav {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    padding: 2px 0;
}

html body .nav-item {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 10px;
    margin: 1px 0;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #5e6b7e;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    box-shadow: none;
}

html body .nav-item::before {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    background: currentColor;
    content: "";
    -webkit-mask: var(--nav-icon, var(--icon-dashboard)) center / contain no-repeat;
    mask: var(--nav-icon, var(--icon-dashboard)) center / contain no-repeat;
}

html body .nav-item[href="/dashboard"],
html body .nav-item[href$="dashboard.html"] { --nav-icon: var(--icon-dashboard); }
html body .nav-item[href="/account-stats"],
html body .nav-item[href$="account-stats.html"] { --nav-icon: var(--icon-stats); }
html body .nav-item[href$="account-activity-monitor.html"] { --nav-icon: var(--icon-activity); }
html body .nav-item[href="/smart-delivery"],
html body .nav-item[href$="smart-delivery.html"],
html body .nav-item[href="/strategy"],
html body .nav-item[href$="strategy.html"],
html body .nav-item[href$="smart-placement-ai.html"] { --nav-icon: var(--icon-sparkles); }
html body .nav-item[href="/accounts"],
html body .nav-item[href$="accounts.html"] { --nav-icon: var(--icon-users); }
html body .nav-item[href$="tools.html"] { --nav-icon: var(--icon-link); }
html body .nav-item[href$="tools-monitor-link-check.html"] { --nav-icon: var(--icon-link); }
html body .nav-item[href$="tools-budget-roll.html"] { --nav-icon: var(--icon-scroll); }
html body .nav-item[href$="tools-qwen.html"] { --nav-icon: var(--icon-zap); }
html body .nav-item[href$="tools-bv-link-check.html"] { --nav-icon: var(--icon-message); }
html body .nav-item[href$="tools-daily-infra.html"] { --nav-icon: var(--icon-building); }
html body .nav-item[href$="tools-auto-build.html"] { --nav-icon: var(--icon-video); }
html body .nav-item[href$="tools-material-report.html"] { --nav-icon: var(--icon-image); }
html body .nav-item[href$="tools-data-review.html"] { --nav-icon: var(--icon-clipboard); }
html body .nav-item[href$="tools-bvid-avid.html"] { --nav-icon: var(--icon-repeat); }
html body .nav-item[href$="tools-scheduled-bid.html"] { --nav-icon: var(--icon-clock); }
html body .nav-item[href$="app-packages.html"] { --nav-icon: var(--icon-toolbox); }
html body .nav-item[href$="admin.html"] { --nav-icon: var(--icon-settings); }

html body .nav-item:hover {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.62);
    color: var(--ui-text);
    transform: none;
}

html body .nav-item.active {
    border-color: #cbdcf5;
    background: var(--ui-blue-soft);
    color: #2269c5;
    font-weight: 650;
    box-shadow: none;
}

html body .nav-sub-item {
    min-height: 35px;
    margin-left: 6px;
    padding-left: 8px;
    font-size: 12px;
}

html body .nav-group {
    margin-top: 10px;
    border-top: 1px solid rgba(191, 202, 218, 0.7);
    padding-top: 8px;
}

html body .nav-group-header {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    padding: 7px 10px;
    color: var(--ui-text);
    font-size: 12px;
    font-weight: 620;
    letter-spacing: 0;
    text-transform: none;
}

html body .nav-group-header::before {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    background: #68778c;
    content: "";
    -webkit-mask: var(--icon-toolbox) center / contain no-repeat;
    mask: var(--icon-toolbox) center / contain no-repeat;
}

html body .nav-group-header .nav-group-icon {
    position: relative;
    width: 14px;
    height: 14px;
    margin-left: auto;
    overflow: hidden;
    color: transparent;
    font-size: 0;
}

html body .nav-group-header .nav-group-icon::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--ui-text-faint);
    border-bottom: 1.5px solid var(--ui-text-faint);
    content: "";
    transform: rotate(45deg);
}

html body .nav-group-content {
    padding-top: 2px;
}

html body .admin-nav-item {
    justify-content: flex-start;
    margin-top: 10px;
    border-top: 1px solid rgba(191, 202, 218, 0.7);
    background: transparent;
    padding-top: 10px;
    text-align: left;
}

html body .main-content {
    min-width: 0;
    margin-left: var(--ui-sidebar-width);
}

html body .mac-header {
    min-height: 78px;
    height: auto;
    margin: 0 30px;
    border-bottom: 1px solid var(--ui-line);
    background: var(--ui-canvas);
    padding: 14px 0;
    box-shadow: none;
    backdrop-filter: none;
}

html body .mac-header .title {
    min-width: 0;
    color: var(--ui-text);
    font-size: 21px;
    font-weight: 680;
    line-height: 1.35;
    text-shadow: none;
}

html body .header-subtitle {
    margin-top: 4px;
    color: var(--ui-text-faint);
    font-size: 11px;
}

html body .user-area {
    gap: 8px;
    color: var(--ui-text-soft);
    font-size: 13px;
}

html body .avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid #d8dfeb;
    background: #e5eaf2;
    color: #566277;
    font-size: 12px;
}

html body .user-area a[href*="help.html"] {
    display: inline-flex !important;
    min-height: 32px;
    align-items: center;
    gap: 6px !important;
    margin-right: 4px !important;
    color: var(--ui-text-soft) !important;
    font-size: 0 !important;
}

html body .user-area a[href*="help.html"]::before {
    width: 15px;
    height: 15px;
    background: currentColor;
    content: "";
    -webkit-mask: var(--icon-scroll) center / contain no-repeat;
    mask: var(--icon-scroll) center / contain no-repeat;
}

html body .user-area a[href*="help.html"]::after {
    content: "\4f7f\7528\624b\518c";
    font-size: 12px;
}

html body .page-content {
    min-width: 0;
    padding: 22px 30px 40px;
    background: var(--ui-canvas) !important;
}

/* Buttons and controls */
html body .btn,
html body .open-btn,
html body .link-btn,
html body .help-btn,
html body .btn-recheck,
html body .material-btn-ghost {
    display: inline-flex;
    min-height: 36px;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--ui-line-strong);
    border-radius: 6px;
    background: var(--ui-surface);
    color: #4e5b70;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 550;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
    box-shadow: none;
    transform: none;
}

html body .btn:hover,
html body .open-btn:hover,
html body .link-btn:hover,
html body .help-btn:hover,
html body .btn-recheck:hover,
html body .material-btn-ghost:hover {
    border-color: #b8c5d7;
    background: var(--ui-surface-soft);
    color: var(--ui-text);
    box-shadow: none;
    transform: none;
}

html body .btn-primary,
html body .open-btn {
    border-color: var(--ui-blue);
    background: var(--ui-blue);
    color: #fff;
}

html body .btn-primary:hover,
html body .open-btn:hover {
    border-color: var(--ui-blue-hover);
    background: var(--ui-blue-hover);
    color: #fff;
}

html body .btn-secondary,
html body .btn-quiet {
    border-color: var(--ui-line-strong);
    background: var(--ui-surface);
    color: #4e5b70;
}

html body .btn-danger {
    border-color: #edc1c4;
    background: #fff7f7;
    color: var(--ui-red);
}

html body .btn-sm {
    min-height: 29px;
    padding: 4px 9px;
    font-size: 11px;
}

html body .btn:disabled,
html body button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

html body :is(button, a) > :is(svg, .bi),
html body :is(button, a)::before {
    flex: 0 0 auto;
}

html body .btn-logout {
    min-height: 30px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent !important;
    color: var(--ui-text-soft) !important;
    padding: 5px 8px;
    font-size: 12px;
}

html body .btn-logout:hover {
    border-color: var(--ui-line);
    background: #fff !important;
    color: var(--ui-text) !important;
}

html body .form-label,
html body .smart-field label,
html body label.form-label {
    margin-bottom: 6px;
    color: #566277;
    font-size: 12px;
    font-weight: 600;
}

html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html body select,
html body textarea,
html body .form-input,
html body .form-select,
html body .form-textarea,
html body .ai-input,
html body .ai-select,
html body .material-toolbar-input,
html body .review-toolbar-input,
html body .review-batch-input,
html body .month-select,
html body .preset-select {
    min-height: 36px;
    border: 1px solid var(--ui-line-strong);
    border-radius: 6px;
    background-color: #fff;
    color: var(--ui-text);
    padding: 7px 10px;
    font-size: 12px;
    box-shadow: none;
}

html body textarea,
html body .form-textarea,
html body textarea.form-input {
    min-height: 90px;
    line-height: 1.55;
    resize: vertical;
}

html body select,
html body .form-select,
html body .month-select,
html body .preset-select {
    appearance: none;
    padding-right: 30px;
    background-image: var(--icon-chevron-down);
    background-position: calc(100% - 10px) center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
}

html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
html body select:focus,
html body textarea:focus,
html body .form-input:focus,
html body .form-select:focus,
html body .form-textarea:focus {
    border-color: #78a6e9;
    outline: none;
    box-shadow: 0 0 0 3px rgba(40, 121, 223, 0.09);
}

html body :is(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid #7aa5df;
    outline-offset: 2px;
}

html body :is(button, a, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
    outline: none;
}

html body input[type="checkbox"],
html body input[type="radio"] {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    accent-color: var(--ui-blue);
}

html body .form-group {
    margin-bottom: 16px;
}

html body .form-row {
    gap: 12px;
    margin-bottom: 16px;
}

html body .searchable-select-dropdown,
html body .material-search-results,
html body .review-search-results,
html body .account-list,
html body .ai-account-list,
html body .qwen-account-list {
    overflow: auto;
    border: 1px solid var(--ui-line-strong);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(34, 49, 72, 0.14);
}

html body .searchable-select-option,
html body .material-search-row,
html body .review-search-row {
    min-height: 38px;
    border-bottom: 1px solid #edf0f5;
    padding: 9px 11px;
    color: #4d596c;
    font-size: 12px;
}

html body .searchable-select-option:hover,
html body .searchable-select-option.selected,
html body .material-search-row:hover,
html body .review-search-row:hover {
    background: #f3f7fd;
    color: var(--ui-blue);
}

/* Surfaces */
html body .card,
html body .metric-card,
html body .customer-card,
html body .glass-card,
html body .preset-glass-card,
html body .panel,
html body .summary-card,
html body .account-card,
html body .smart-account-row-card,
html body .review-panel,
html body .material-picker,
html body .review-form-card,
html body .admin-section.card,
html body .bvid-avid-panel,
html body .stat-box {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
}

html body .card:hover,
html body .metric-card:hover,
html body .customer-card:hover,
html body .glass-card:hover,
html body .preset-glass-card:hover,
html body .panel:hover,
html body .account-card:hover,
html body .smart-account-row-card:hover,
html body .admin-section.card:hover {
    border-color: #d3dbe8;
    background: var(--ui-surface);
    box-shadow: none;
    transform: none;
}

html body .card {
    margin-bottom: 14px;
    padding: 16px;
}

html body .card-header,
html body .panel-header {
    min-height: 50px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--ui-line);
    padding: 10px 14px;
}

html body .card-title,
html body .panel-title {
    color: var(--ui-text);
    font-size: 14px;
    font-weight: 650;
}

html body .card-body,
html body .panel-body {
    padding: 14px;
}

html body .metrics-grid,
html body .summary-cards,
html body .monitor-metrics {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: #fff;
}

html body .metric-card,
html body .summary-card,
html body .monitor-metrics > * {
    min-height: 86px;
    margin: 0;
    border: 0;
    border-right: 1px solid var(--ui-line);
    border-radius: 0;
    padding: 13px 15px;
}

html body .metric-card:last-child,
html body .summary-card:last-child,
html body .monitor-metrics > *:last-child {
    border-right: 0;
}

html body .metric-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 7px;
    font-size: 15px;
}

html body .metric-icon > span {
    display: block;
    width: 17px;
    height: 17px;
    overflow: hidden;
    background: currentColor;
    font-size: 0 !important;
    -webkit-mask: var(--metric-icon, var(--icon-stats)) center / contain no-repeat;
    mask: var(--metric-icon, var(--icon-stats)) center / contain no-repeat;
}

html body .metrics-grid .metric-card:nth-child(1) { --metric-icon: var(--icon-dashboard); }
html body .metrics-grid .metric-card:nth-child(2) { --metric-icon: var(--icon-users); }
html body .metrics-grid .metric-card:nth-child(3) { --metric-icon: var(--icon-wallet); }
html body .metrics-grid .metric-card:nth-child(4) { --metric-icon: var(--icon-activity); }
html body .metrics-grid .metric-card:nth-child(5) { --metric-icon: var(--icon-stats); }

html body .metric-value,
html body .stat-value {
    color: var(--ui-text);
    font-size: 21px;
    font-weight: 680;
    letter-spacing: 0;
}

html body .metric-title,
html body .stat-label {
    color: var(--ui-text-faint);
    font-size: 11px;
}

html body .chart-container-wrapper {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: #fff;
    box-shadow: none;
}

/* Tables */
html body .table-container,
html body .table-scroll,
html body .table-wrap,
html body .link-table-wrap,
html body .bvid-avid-table-wrap,
html body .ai-table-wrap {
    overflow-x: auto;
    border-radius: 0;
    overscroll-behavior-inline: contain;
}

html body table {
    max-width: 100%;
}

html body .account-table {
    min-width: 1118px;
}

html body .customer-arrow {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    overflow: hidden;
    background: var(--ui-text-faint);
    font-size: 0;
    -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
    mask: var(--icon-chevron-down) center / contain no-repeat;
}

html body .account-table th:last-child,
html body .account-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--ui-surface);
    box-shadow: -1px 0 0 var(--ui-line);
}

html body .account-table th:last-child {
    z-index: 2;
    background: var(--ui-surface-soft);
}

html body .table,
html body .smart-table,
html body .compact-table,
html body .link-table,
html body .bvid-avid-table,
html body .audit-log-table,
html body .history-table,
html body .ai-table,
html body table {
    border-collapse: collapse;
    border-spacing: 0;
}

html body .table th,
html body .smart-table th,
html body .compact-table th,
html body .link-table th,
html body .bvid-avid-table th,
html body .audit-log-table th,
html body .history-table th,
html body .ai-table th,
html body table th {
    height: 38px;
    border-bottom: 1px solid var(--ui-line);
    background: var(--ui-surface-soft);
    color: var(--ui-text-soft);
    padding: 9px 11px;
    font-size: 11px;
    font-weight: 620;
    letter-spacing: 0;
    text-transform: none;
}

html body .table td,
html body .smart-table td,
html body .compact-table td,
html body .link-table td,
html body .bvid-avid-table td,
html body .audit-log-table td,
html body .history-table td,
html body .ai-table td,
html body table td {
    border-bottom: 1px solid #e9edf3;
    padding: 10px 11px;
    color: #3e4a5d;
    font-size: 12px;
    line-height: 1.45;
}

html body table tbody tr:hover td {
    background: #f9fbfe;
}

/* Tabs, segmented controls and badges */
html body .tab-bar,
html body .smart-tabs,
html body .modal-tabs {
    display: flex;
    min-height: 44px;
    align-items: end;
    gap: 18px;
    overflow-x: auto;
    border-bottom: 1px solid var(--ui-line);
    background: #fff !important;
    padding: 0 14px !important;
}

html body .tab-item,
html body .smart-tab {
    min-width: max-content;
    min-height: 43px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ui-text-soft);
    padding: 0 2px;
    font-size: 12px;
    line-height: 43px;
}

html body .tab-item.active,
html body .smart-tab.active {
    border-bottom-color: var(--ui-blue);
    background: transparent;
    color: var(--ui-blue);
    font-weight: 650;
}

html body .period-control,
html body .audit-type-tabs,
html body .review-mode-switch,
html body .bvid-avid-mode {
    overflow: hidden;
    border: 1px solid var(--ui-line-strong);
    border-radius: 7px;
    background: #fff;
    box-shadow: none;
}

html body .badge,
html body [class*="badge-"],
html body .status-chip,
html body .monitor-state,
html body .account-status-chip,
html body .smart-phase,
html body .smart-log-tag {
    border-radius: 6px;
    box-shadow: none;
}

/* Smart delivery: retain every account, target and detail control. */
html body .smart-toolbar,
html body .monitor-toolbar,
html body .account-toolbar,
html body .ai-account-toolbar,
html body .material-toolbar,
html body .review-toolbar,
html body .result-toolbar,
html body .batch-toolbar {
    display: flex;
    min-height: 52px;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: #fff;
    padding: 9px 11px;
}

html body .smart-workbench,
html body .monitor-page,
html body .ai-wrap {
    gap: 12px;
}

html body .smart-account-row-card {
    margin-bottom: 8px;
    padding: 12px 13px;
}

html body .smart-account-row-card.active {
    border-color: #9dbce9;
    background: #f5f9ff;
    box-shadow: 0 0 0 2px rgba(40, 121, 223, 0.06);
}

html body .smart-metric-pill,
html body .smart-kpi,
html body .smart-progress-panel,
html body .smart-trend-panel,
html body .smart-section-block,
html body .smart-inline-note,
html body .smart-data-note {
    border: 1px solid var(--ui-line);
    border-radius: 7px;
    background: var(--ui-surface-soft);
    box-shadow: none;
}

html body .smart-mode-cards {
    gap: 8px;
}

html body .smart-mode-card {
    min-height: 72px;
    border: 1px solid var(--ui-line-strong);
    border-radius: 7px;
    background: #fff;
    box-shadow: none;
}

html body .smart-mode-card.active {
    border-color: #79a7e9;
    background: #f3f8ff;
    box-shadow: 0 0 0 2px rgba(40, 121, 223, 0.07);
}

html body .smart-target-cpa-grid {
    gap: 8px;
}

html body .smart-target-cpa-row {
    min-height: 64px;
    border: 1px solid var(--ui-line);
    border-radius: 7px;
    background: #fff;
    padding: 10px 12px;
}

html body .smart-switches,
html body .smart-check,
html body .toggle-row {
    color: #4f5b6e;
}

html body .smart-modal-body {
    background: var(--ui-canvas);
}

/* Auto build: keep seed, title, cover upload, monitoring and all advanced tabs visible. */
html body .auto-build-container {
    max-width: 1440px;
    color: var(--ui-text);
}

html body .auto-build-container .form-grid {
    gap: 14px;
}

html body .auto-build-container .card {
    padding: 16px;
}

html body .auto-build-container .form-group > div[style*="display: flex"] > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

html body .auto-build-container .section-title {
    display: flex;
    min-height: 30px;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: var(--ui-text);
    font-size: 14px;
    font-weight: 650;
}

html body .auto-build-container .section-title > span {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    border-radius: 6px;
    background: var(--ui-blue-soft);
    color: var(--ui-blue);
    font-size: 11px;
}

html body .preset-glass-card {
    margin-bottom: 14px;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
    background: #fff !important;
    padding: 10px 12px !important;
    box-shadow: none !important;
}

html body .preset-content {
    min-height: 40px;
}

html body .preset-label {
    color: var(--ui-blue);
    font-size: 12px;
}

html body .preset-divider {
    background: var(--ui-line);
}

html body .btn-icon {
    display: inline-grid !important;
    width: 32px !important;
    height: 32px !important;
    place-items: center;
    border: 1px solid var(--ui-line) !important;
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: none !important;
}

html body .bi {
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: -2px;
    background: currentColor;
    -webkit-mask: var(--bi-icon, var(--icon-info)) center / contain no-repeat;
    mask: var(--bi-icon, var(--icon-info)) center / contain no-repeat;
}

html body .bi-magic { --bi-icon: var(--icon-sparkles); }
html body .bi-pencil-square { --bi-icon: var(--icon-edit); }
html body .bi-trash { --bi-icon: var(--icon-trash); }
html body .bi-info-circle { --bi-icon: var(--icon-info); }
html body .bi-sliders2-vertical { --bi-icon: var(--icon-sliders); }

html body button[title="高级参数编辑"] {
    display: inline-grid;
    width: 40px;
    min-width: 40px;
    padding: 0 !important;
    place-items: center;
    font-size: 0 !important;
}

html body button[title="高级参数编辑"]::before {
    width: 16px;
    height: 16px;
    background: currentColor;
    content: "";
    -webkit-mask: var(--icon-sliders) center / contain no-repeat;
    mask: var(--icon-sliders) center / contain no-repeat;
}

html body .material-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
}

html body .material-item,
html body .upload-zone {
    overflow: hidden;
    border: 1px solid var(--ui-line-strong);
    border-radius: 7px;
    background: #f6f8fb;
    box-shadow: none;
}

html body .upload-zone {
    border-style: dashed;
    color: var(--ui-text-soft);
}

html body .upload-zone:hover {
    border-color: #7fa9e7;
    background: #f2f7ff;
    color: var(--ui-blue);
}

html body .toggle-slider,
html body .slider {
    background: #cbd3de;
}

html body .toggle-switch input:checked + .toggle-slider,
html body input:checked + .slider {
    background: var(--ui-blue);
}

html body .property-row {
    border-bottom-color: var(--ui-line) !important;
}

html body .property-hint {
    border-color: var(--ui-line) !important;
    border-radius: 6px !important;
    background: var(--ui-surface-soft) !important;
    color: var(--ui-text-soft) !important;
}

/* Reports, administration and monitor page. */
html body .review-panel,
html body .material-picker,
html body .review-subset-panel,
html body .review-batch-panel,
html body .review-advanced,
html body .material-account-mode,
html body .review-account-mode {
    border-color: var(--ui-line);
    border-radius: 7px;
    background: #fff;
    box-shadow: none;
}

html body .review-mode-face,
html body .material-radio-label,
html body .review-radio-label {
    border-radius: 7px;
}

html body .review-mode-option input:checked + .review-mode-face,
html body .material-radio-label:has(input:checked),
html body .review-radio-label:has(input:checked) {
    border-color: #83abe7;
    background: #f3f8ff;
    color: var(--ui-blue);
    box-shadow: none;
}

html body .admin-page-content {
    max-width: none;
}

html body .admin-layout-controls {
    gap: 8px;
    margin-bottom: 10px;
}

html body .admin-section.card {
    overflow: hidden;
    margin-bottom: 9px;
    padding: 0;
}

html body .admin-section .card-header {
    background: #fff;
}

html body .admin-section-toggle {
    color: var(--ui-text);
}

html body .admin-section-count {
    border-radius: 6px;
    background: #eef2f7;
    color: var(--ui-text-soft);
}

html body .audit-type-tab.is-active {
    background: var(--ui-blue);
    color: #fff;
}

html body .monitor-page .customer-list,
html body .monitor-page .detail-section,
html body .monitor-page .detail-overview {
    border-color: var(--ui-line);
    border-radius: var(--ui-radius);
    background: #fff;
    box-shadow: none;
}

html body .detail-backdrop {
    background: rgba(34, 47, 67, 0.3);
    backdrop-filter: blur(3px);
}

html body .detail-drawer {
    border-left: 1px solid var(--ui-line);
    background: var(--ui-canvas);
    box-shadow: -18px 0 55px rgba(33, 46, 67, 0.13);
}

html body .detail-header {
    border-bottom: 1px solid var(--ui-line);
    background: #fff;
}

/* Modals and native app dialogs */
html body .modal {
    background: rgba(34, 47, 67, 0.32);
    backdrop-filter: blur(4px);
}

html body .modal-content {
    overflow: hidden;
    max-width: calc(100vw - 24px);
    border: 1px solid var(--ui-line-strong);
    border-radius: 9px;
    background: #fff;
    box-shadow: var(--ui-shadow-dialog);
}

html body .modal-header,
html body .modal-footer {
    border-color: var(--ui-line) !important;
    background: #fff !important;
    padding: 14px 16px !important;
}

html body .modal-header h3 {
    color: var(--ui-text);
    font-size: 16px !important;
}

html body .modal-body {
    max-height: calc(90vh - 124px);
    overflow: auto;
    background: var(--ui-canvas) !important;
    padding: 16px !important;
    scrollbar-gutter: stable;
}

html body .modal-close {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--ui-line);
    border-radius: 6px;
    background: #fff;
    color: var(--ui-text-soft);
    font-size: 20px;
}

/* Login */
html body .login-container {
    min-height: 100vh;
    background: #eef2f8;
}

html body .login-container::before {
    background: transparent;
    backdrop-filter: none;
}

html body .login-box {
    width: min(390px, calc(100vw - 32px));
    border: 1px solid var(--ui-line-strong);
    border-radius: 9px;
    background: #fff;
    padding: 34px;
    box-shadow: 0 18px 55px rgba(37, 50, 70, 0.12);
    backdrop-filter: none;
    animation: none;
}

html body .login-box h1 {
    margin-bottom: 24px;
    background: none;
    color: var(--ui-text);
    font-size: 23px;
    font-weight: 680;
    letter-spacing: 0;
    -webkit-text-fill-color: currentColor;
}

/* Legacy AI workspace, normalized without changing its controls or data flow. */
html body.page-smart-ai {
    --ai-canvas-0: var(--ui-canvas);
    --ai-canvas-1: var(--ui-canvas);
    --ai-canvas-2: var(--ui-canvas);
    --ai-panel: #fff;
    --ai-panel-solid: #fff;
    --ai-panel-head: #f8faff;
    --ai-border: var(--ui-line-strong);
    --ai-border-soft: var(--ui-line);
    --ai-text: var(--ui-text);
    --ai-muted: var(--ui-text-soft);
    --ai-accent: var(--ui-blue);
    --ai-accent2: var(--ui-violet);
    --ai-success: var(--ui-green);
    --ai-warning: var(--ui-amber);
    --ai-glow: transparent;
}

html body.page-smart-ai .main-content {
    background: var(--ui-canvas) !important;
}

html body.page-smart-ai .mac-header,
html body.page-smart-ai .mac-header.scrolled {
    border-bottom-color: var(--ui-line) !important;
    background: var(--ui-canvas) !important;
    backdrop-filter: none;
}

html body.page-smart-ai .mac-header .title,
html body.page-smart-ai .mac-header .user-area span#userName {
    color: var(--ui-text) !important;
    text-shadow: none;
}

html body.page-smart-ai .mac-header .user-area a {
    color: var(--ui-text-soft) !important;
}

html body.page-smart-ai .mac-header .avatar {
    border-color: var(--ui-line) !important;
    background: #eaf0f8 !important;
    color: var(--ui-text-soft) !important;
}

html body.page-smart-ai .mac-header .btn-logout {
    border-color: var(--ui-line-strong) !important;
    background: #fff !important;
    color: var(--ui-text-soft) !important;
}

html body.page-smart-ai .page-content {
    color: var(--ui-text);
}

html body.page-smart-ai .ai-hero {
    margin-bottom: 14px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: #fff;
    padding: 18px 20px;
    box-shadow: none;
}

html body.page-smart-ai .ai-hero h1,
html body.page-smart-ai .ai-card-h h2 {
    color: var(--ui-text);
    letter-spacing: 0;
}

html body.page-smart-ai .ai-hero p,
html body.page-smart-ai .ai-card-h .sub,
html body.page-smart-ai .ai-account-hint,
html body.page-smart-ai .ai-stat-mini,
html body.page-smart-ai .ai-empty,
html body.page-smart-ai .ai-form label {
    color: var(--ui-text-soft);
}

html body.page-smart-ai .ai-badge {
    border-color: #bcd3f6;
    border-radius: 6px;
    background: var(--ui-blue-soft);
    color: #2269c5;
}

html body.page-smart-ai .ai-badge.violet {
    border-color: #d8cef7;
    background: var(--ui-violet-soft);
    color: var(--ui-violet);
}

html body.page-smart-ai .ai-grid {
    gap: 12px;
}

html body.page-smart-ai .ai-card {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
}

html body.page-smart-ai .ai-card-h {
    border-bottom-color: var(--ui-line);
    background: #f8faff;
    padding: 12px 14px;
}

html body.page-smart-ai .ai-card-b {
    min-height: 180px;
    background: #fff;
    padding: 12px 14px;
}

html body.page-smart-ai .ai-input,
html body.page-smart-ai .ai-select {
    border-color: var(--ui-line-strong);
    border-radius: 6px;
    background: #fff;
    color: var(--ui-text);
    font-family: inherit;
}

html body.page-smart-ai .ai-input:focus,
html body.page-smart-ai .ai-select:focus {
    border-color: #79a9ea;
    box-shadow: 0 0 0 3px rgba(40, 121, 223, 0.1);
}

html body.page-smart-ai .ai-btn-watch-add,
html body.page-smart-ai .ai-btn-train {
    border: 1px solid var(--ui-blue);
    border-radius: 6px;
    background: var(--ui-blue);
    color: #fff;
    box-shadow: none;
}

html body.page-smart-ai .ai-btn-watch-add:hover,
html body.page-smart-ai .ai-btn-train:hover:not(:disabled) {
    background: var(--ui-blue-hover);
    filter: none;
    transform: none;
}

html body.page-smart-ai .ai-btn-watch-off,
html body.page-smart-ai .ai-btn-ctrl,
html body.page-smart-ai .ai-account-btn {
    border-color: var(--ui-line-strong);
    border-radius: 6px;
    background: #fff;
    color: var(--ui-text-soft);
}

html body.page-smart-ai .ai-account-btn:hover,
html body.page-smart-ai .ai-account-btn.active,
html body.page-smart-ai .ai-btn-ctrl:hover:not(:disabled) {
    border-color: #a8c7f2;
    background: var(--ui-blue-soft);
    color: #2269c5;
    box-shadow: none;
}

html body.page-smart-ai .ai-table-wrap,
html body.page-smart-ai .ai-camp,
html body.page-smart-ai .ai-train-live {
    border-color: var(--ui-line);
    border-radius: 6px;
    background: #fff;
}

html body.page-smart-ai .ai-table th {
    border-color: var(--ui-line);
    background: #f4f7fb;
    color: var(--ui-text-soft);
    backdrop-filter: none;
}

html body.page-smart-ai .ai-table td,
html body.page-smart-ai .ai-unit-row,
html body.page-smart-ai .ai-camp-h {
    border-color: var(--ui-line);
    color: var(--ui-text-soft);
}

html body.page-smart-ai .ai-camp-h {
    color: var(--ui-text);
}

html body.page-smart-ai .ai-progress {
    border: 0;
    border-radius: 4px;
    background: #e8edf4;
}

html body.page-smart-ai .ai-progress > i {
    background: var(--ui-blue);
}

html body.page-smart-ai .ai-console {
    border-color: #243246;
    border-radius: 6px;
    background: #172131;
    color: #b8c4d4;
}

html body.page-smart-ai .ai-shimmer {
    background: none;
    color: var(--ui-text-faint);
    animation: none;
    -webkit-text-fill-color: currentColor;
}

/* The intentionally playful help content remains, but its shell follows the app. */
html.help-doge-root {
    --help-bar-bg: rgba(255, 255, 255, 0.96);
    --help-bar-border: var(--ui-line);
    --help-text: var(--ui-text);
    --help-muted: var(--ui-text-soft);
}

html.help-doge-root body {
    background: var(--ui-canvas);
}

html.help-doge-root .help-topbar {
    min-height: 58px;
    border-bottom-color: var(--ui-line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
}

html.help-doge-root .help-main-title {
    color: var(--ui-text);
    letter-spacing: 0;
}

html.help-doge-root .help-version-pill {
    border-color: #bcd3f6;
    border-radius: 6px;
    background: var(--ui-blue-soft);
    color: #2269c5;
}

html.help-doge-root .help-link {
    color: var(--ui-text-soft);
}

html.help-doge-root .help-link:hover {
    color: var(--ui-blue);
}

html.help-doge-root .help-btn {
    border-color: var(--ui-line-strong);
    border-radius: 6px;
    background: #fff;
    color: var(--ui-text-soft);
}

html.help-doge-root .help-btn:hover {
    border-color: #a8c7f2;
    background: var(--ui-blue-soft);
}

html.help-doge-root .doge-stage {
    min-height: calc(100vh - 58px);
    background: var(--ui-canvas);
    animation: none;
}

html.help-doge-root .doge-frame {
    width: min(72vw, 72vh, 380px);
    height: min(72vw, 72vh, 380px);
    animation: none;
}

html.help-doge-root .doge-frame .doge-img {
    border: 1px solid var(--ui-line-strong);
    border-radius: 8px;
}

html.help-doge-root .doge-frame::after {
    top: 8px;
    right: 10px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    animation: none;
}

html.help-doge-root .doge-caption {
    background: none;
    color: var(--ui-text);
    letter-spacing: 0;
    animation: none;
    -webkit-text-fill-color: currentColor;
}

html.help-doge-root .doge-sub {
    color: var(--ui-text-soft);
    letter-spacing: 0;
}

html.help-doge-root #changePasswordModal {
    background: rgba(34, 47, 67, 0.32) !important;
}

html.help-doge-root #changePasswordModal .modal-content {
    width: min(380px, calc(100vw - 24px)) !important;
    margin: 12vh auto !important;
    border: 1px solid var(--ui-line-strong) !important;
    border-radius: 9px !important;
    padding: 20px !important;
}

/* Dedicated mobile pages and iframe wrappers. */
html body > .topbar,
html body .app > .topbar {
    border-bottom: 1px solid var(--ui-line);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: none;
    backdrop-filter: blur(10px);
}

html body :is(td, th, label, .nav-item, .card-title, .panel-title, .modal-content) {
    overflow-wrap: anywhere;
}

html body > .topbar .title,
html body .app > .topbar .title {
    color: var(--ui-text);
    letter-spacing: 0;
}

html body > iframe {
    background: var(--ui-canvas);
}

html body .site-record-host {
    position: relative;
    padding-bottom: 42px !important;
}

html body .site-record-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(211, 215, 223, 0.72);
    color: var(--ui-text-faint);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

html body .site-record-footer a {
    max-width: calc(100% - 24px);
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

html body .site-record-footer a:hover,
html body .site-record-footer a:focus-visible {
    color: var(--ui-blue);
    text-decoration: underline;
}

html body:has(> iframe) {
    display: flex;
    height: 100dvh;
    flex-direction: column;
    overflow: hidden;
}

html body:has(> iframe) > .topbar {
    flex: 0 0 auto;
}

html body:has(> iframe) > iframe {
    min-height: 0;
    height: auto !important;
    flex: 1 1 auto;
}

@media (max-width: 1180px) {
    html body .mac-header {
        margin: 0 20px;
    }

    html body .page-content {
        padding-right: 20px;
        padding-left: 20px;
    }

    html body .auto-build-container .form-grid {
        grid-template-columns: 1fr;
    }

    html body .account-table th:last-child,
    html body .account-table td:last-child {
        position: static;
        box-shadow: none;
    }
}

@media (max-width: 768px) {
    html body .mac-sidebar {
        width: min(284px, 84vw);
        box-shadow: 14px 0 42px rgba(34, 47, 67, 0.16);
    }

    html body .main-content {
        width: 100%;
        margin-left: 0;
    }

    html body .mac-header {
        min-height: 64px;
        margin: 0 11px;
        padding: 10px 0;
    }

    html body .mac-header .title {
        font-size: 18px;
    }

    html body .page-content {
        padding: 12px 9px 28px;
    }

    html body .btn,
    html body .open-btn,
    html body .link-btn,
    html body .help-btn,
    html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    html body select {
        min-height: 44px;
    }

    html body .metrics-grid,
    html body .summary-cards,
    html body .monitor-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .metric-card,
    html body .summary-card,
    html body .monitor-metrics > * {
        border-right: 1px solid var(--ui-line);
        border-bottom: 1px solid var(--ui-line);
    }

    html body .metric-card:nth-child(2n),
    html body .summary-card:nth-child(2n),
    html body .monitor-metrics > *:nth-child(2n) {
        border-right: 0;
    }

    html body .form-row,
    html body .smart-form-grid,
    html body .review-date-grid,
    html body .config-grid,
    html body .property-row {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    html body .property-label,
    html body .property-value,
    html body .property-hint {
        width: 100%;
        min-width: 0 !important;
        flex-basis: auto !important;
    }

    html body .auto-build-container .form-group > div[style*="display: flex"][style*="gap: 10px"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px !important;
    }

    html body .auto-build-container .form-group > div[style*="display: flex"][style*="gap: 10px"] > .form-input {
        width: 100%;
        min-width: 0;
        grid-column: 1 / -1;
    }

    html body .auto-build-container .form-group > div[style*="display: flex"][style*="gap: 10px"] > .btn {
        width: 100%;
        min-width: 44px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html body .modal-content {
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        max-height: 94vh !important;
        border-radius: 9px 9px 0 0;
    }

    html body .detail-drawer {
        width: 100vw;
    }
}

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

@media (max-width: 430px) {
    html body .metric-value,
    html body .stat-value {
        font-size: 18px;
    }

    html body .login-box {
        padding: 26px 22px;
    }
}

@media (max-width: 340px) {
    html body .metrics-grid,
    html body .summary-cards,
    html body .monitor-metrics {
        grid-template-columns: 1fr;
    }

    html body .metric-card,
    html body .summary-card,
    html body .monitor-metrics > * {
        border-right: 0;
    }
}