/* ===== 基础 ===== */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
    --bg:#f8fafc;
    --card:#ffffff;
    --border:#e2e8f0;
    --text:#334155;
    --text-soft:#64748b;
    --primary:#3b82f6;
    --primary-soft:#eff6ff;
    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;
    --sidebar-bg:#f1f5f9;
    --sidebar-text:#475569;
    --sidebar-active:#3b82f6;
    --sidebar-hover:rgba(0,0,0,.04);
    --sidebar-sub-bg:rgba(0,0,0,.03);
    --sidebar-border:rgba(0,0,0,.06);
    --radius:10px;
    --shadow:0 1px 3px rgba(15,23,42,.05), 0 4px 16px rgba(15,23,42,.03);
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
}

/* ===== 主题：经典蓝（默认） ===== */
[data-theme="classic"]{
    --bg:#f8fafc; --card:#fff; --border:#e2e8f0;
    --text:#334155; --text-soft:#64748b;
    --primary:#3b82f6; --primary-soft:#eff6ff;
    --sidebar-bg:#f1f5f9; --sidebar-text:#475569; --sidebar-active:#3b82f6;
    --shadow:0 1px 3px rgba(15,23,42,.05), 0 4px 16px rgba(15,23,42,.03);
}

/* ===== 主题：薄荷绿 ===== */
[data-theme="mint"]{
    --bg:#f0fdf4; --card:#fff; --border:#dcfce7;
    --text:#1f3a2e; --text-soft:#4b6357;
    --primary:#10b981; --primary-soft:#ecfdf5;
    --sidebar-bg:#ecfdf5; --sidebar-text:#4b6357; --sidebar-active:#10b981;
    --shadow:0 1px 3px rgba(6,78,59,.05), 0 4px 16px rgba(6,78,59,.03);
}

/* ===== 主题：天空蓝 ===== */
[data-theme="sky"]{
    --bg:#f0f9ff; --card:#fff; --border:#e0f2fe;
    --text:#1e3a52; --text-soft:#4b6378;
    --primary:#0ea5e9; --primary-soft:#f0f9ff;
    --sidebar-bg:#f0f9ff; --sidebar-text:#4b6378; --sidebar-active:#0ea5e9;
    --shadow:0 1px 3px rgba(12,74,110,.05), 0 4px 16px rgba(12,74,110,.03);
}

/* ===== 主题：米白暖色 ===== */
[data-theme="warm"]{
    --bg:#fafaf9; --card:#fff; --border:#e7e5e4;
    --text:#44403c; --text-soft:#78716c;
    --primary:#f59e0b; --primary-soft:#fffbeb;
    --sidebar-bg:#faf7f2; --sidebar-text:#78716c; --sidebar-active:#f59e0b;
    --shadow:0 1px 3px rgba(68,64,60,.05), 0 4px 16px rgba(68,64,60,.03);
}

/* ===== 主题：紫罗兰 ===== */
[data-theme="violet"]{
    --bg:#faf5ff; --card:#fff; --border:#ede9fe;
    --text:#3b1f6e; --text-soft:#6b549e;
    --primary:#8b5cf6; --primary-soft:#f5f3ff;
    --sidebar-bg:#f5f3ff; --sidebar-text:#6b549e; --sidebar-active:#8b5cf6;
    --shadow:0 1px 3px rgba(76,29,149,.05), 0 4px 16px rgba(76,29,149,.03);
}

/* ===== 主题：深夜模式 ===== */
[data-theme="dark"]{
    --bg:#0f172a; --card:#1e293b; --border:#334155;
    --text:#e2e8f0; --text-soft:#94a3b8;
    --primary:#6366f1; --primary-soft:#312e81;
    --success:#34d399; --warning:#fbbf24; --danger:#f87171;
    --sidebar-bg:#020617; --sidebar-text:#94a3b8; --sidebar-active:#6366f1;
    --sidebar-hover:rgba(255,255,255,.05);
    --sidebar-sub-bg:rgba(0,0,0,.2);
    --sidebar-border:rgba(255,255,255,.06);
    --shadow:0 1px 3px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.15);
}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
    background:#0f172a !important; color:#e2e8f0 !important; border-color:#334155 !important;
}
[data-theme="dark"] th{background:#1e293b !important;}
[data-theme="dark"] tbody tr:hover{background:#1e293b !important;}
[data-theme="dark"] .search-box{background:#0f172a !important;}
[data-theme="dark"] .badge-soft{background:#334155 !important; color:#94a3b8 !important;}
html,body{height:100%;}
body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    letter-spacing:.1px;
}
a{color:inherit;text-decoration:none;}

/* ===== 布局 ===== */
.layout{display:flex;min-height:100vh;}

/* ===== 侧边栏 ===== */
.sidebar{
    width:230px;
    background:var(--sidebar-bg);
    color:var(--sidebar-text);
    display:flex;
    flex-direction:column;
    flex-shrink:0;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    transition:width .2s,margin .2s;
}
.sidebar.collapsed{margin-left:-230px;}
.brand{
    display:flex;align-items:center;gap:12px;
    padding:20px 18px;
    border-bottom:1px solid var(--sidebar-border);
}
.brand-logo{
    width:38px;height:38px;border-radius:9px;
    background:var(--primary);
    background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 65%,#fff));
    color:#fff;font-weight:700;font-size:20px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.brand-name{font-size:15px;font-weight:600;color:var(--text);}
.brand-sub{font-size:12px;color:var(--text-soft);}

.nav{padding:10px 0;flex:1;}
.nav-item,.nav-group-title{
    display:flex;align-items:center;gap:10px;
    padding:10px 18px;cursor:pointer;
    color:var(--sidebar-text);
    border-left:3px solid transparent;
    transition:background .15s,color .15s;
    user-select:none;
}
.nav-item:hover,.nav-group-title:hover{background:var(--sidebar-hover);color:var(--text);}
.nav-icon{width:20px;text-align:center;font-size:16px;flex-shrink:0;}
.nav-label{flex:1;}
.nav-arrow{font-size:12px;opacity:.5;transition:transform .2s;}
.nav-group.open .nav-arrow{transform:rotate(180deg);}
.nav-item.active,.nav-sub-item.active{
    background:var(--sidebar-active);color:#fff;
}
.nav-item.active{border-left-color:rgba(255,255,255,.4);}

.nav-sub{
    max-height:0;overflow:hidden;
    transition:max-height .25s ease;
    background:var(--sidebar-sub-bg);
}
.nav-group.open .nav-sub{max-height:400px;}
.nav-sub-item{
    display:block;padding:9px 18px 9px 48px;
    color:var(--sidebar-text);font-size:13px;
    border-left:3px solid transparent;
    transition:background .15s,color .15s;
}
.nav-sub-item:hover{background:var(--sidebar-hover);color:var(--text);}
.nav-sub-item.active{border-left-color:rgba(255,255,255,.4);}

/* ===== 主区 ===== */
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{
    height:56px;background:var(--card);
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:14px;
    padding:0 20px;position:sticky;top:0;z-index:20;
}
.icon-btn{
    background:none;border:none;font-size:18px;cursor:pointer;color:var(--text-soft);
    padding:6px;border-radius:6px;
}
.icon-btn:hover{background:var(--bg);}
.topbar-title{font-size:16px;font-weight:600;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px;}
.db-tag{
    font-size:12px;color:var(--primary);background:var(--primary-soft);
    padding:3px 8px;border-radius:6px;font-weight:600;
}
.user-chip{font-size:13px;color:var(--text-soft);}

.content{padding:20px;flex:1;}
.footer{
    text-align:center;color:var(--text-soft);font-size:12px;
    padding:16px;border-top:1px solid var(--border);
}

/* ===== 卡片 / 表格 ===== */
.card{
    background:var(--card);border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border));border-radius:var(--radius);
    box-shadow:var(--shadow);padding:18px;
}
.card + .card{margin-top:16px;}
.card-grid > .card{margin-top:0;}
.card-title{
    font-size:15px;font-weight:600;margin-bottom:14px;
    display:flex;align-items:center;justify-content:space-between;
}

.toolbar{
    display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;
}
.search-box{
    display:flex;align-items:center;gap:8px;
    background:var(--bg);border:1px solid var(--border);
    border-radius:8px;padding:7px 12px;flex:1;min-width:200px;
}
.search-box input{border:none;background:none;outline:none;flex:1;font-size:13px;}

table{width:100%;border-collapse:collapse;}
th,td{padding:11px 12px;text-align:left;font-size:13px;}
thead th{
    color:var(--text-soft);font-weight:600;
    border-bottom:2px solid var(--border);white-space:nowrap;
}
tbody tr{border-bottom:1px solid var(--border);}
tbody tr:hover{background:#fafbfd;}
.empty{text-align:center;color:var(--text-soft);padding:30px;}

/* ===== 按钮 ===== */
.btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 16px;border-radius:8px;border:1px solid var(--border);
    background:var(--card);color:var(--text);font-size:13px;cursor:pointer;
    transition:all .15s;white-space:nowrap;
}
.btn:hover{border-color:var(--primary);color:var(--primary);}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn-primary:hover{background:var(--primary);background:color-mix(in srgb,var(--primary) 88%,#000);color:#fff;}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn-danger:hover{border-color:var(--danger);color:var(--danger);}
.btn-link{background:none;border:none;color:var(--primary);padding:4px 6px;cursor:pointer;}
.btn-link.danger{color:var(--danger);}

/* ===== 表单 ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-group.full{grid-column:1 / -1;}
.form-group label{font-size:13px;color:var(--text-soft);font-weight:500;}
.form-control{
    padding:9px 12px;border:1px solid var(--border);border-radius:8px;
    font-size:13px;background:#fff;outline:none;transition:border .15s;
    font-family:inherit;
}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
textarea.form-control{min-height:80px;resize:vertical;}
select.form-control{cursor:pointer;}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px;}

/* ===== 徽章 ===== */
.badge{
    display:inline-block;padding:3px 10px;border-radius:20px;
    font-size:12px;font-weight:500;
}
.badge-soft{background:#eef1f6;color:var(--text-soft);}
.badge-primary{background:var(--primary-soft);color:var(--primary);}
.badge-success{background:#e3f6ee;color:var(--success);}
.badge-warning{background:#fdf2dc;color:var(--warning);}
.badge-danger{background:#fde8e8;color:var(--danger);}
.badge-info{background:#e0f2fe;color:#0ea5e9;}
.badge-purple{background:#f3e8ff;color:#8b5cf6;}
.badge-muted{background:#e5e7eb;color:#9ca3af;}
th a:hover{color:var(--primary) !important;}

/* ===== 弹窗 ===== */
.modal-mask{
    position:fixed;inset:0;background:rgba(31,42,68,.45);
    display:flex;align-items:center;justify-content:center;z-index:50;
}
.modal{
    background:#fff;border-radius:12px;width:560px;max-width:92vw;
    max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.modal-head{
    padding:16px 20px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
}
.modal-head h3{font-size:16px;}
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-soft);}
.modal-body{padding:20px;}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;}

/* ===== 工作台统计 ===== */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.stat-card{
    background:var(--card);border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border));border-radius:var(--radius);padding:14px;
    box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;
    transition:transform .15s,box-shadow .15s,border-color .15s;
}
a.stat-card:hover,.stat-card[onclick]:hover{
    transform:translateY(-2px);box-shadow:0 4px 16px rgba(15,23,42,.1);
    border-color:var(--primary);
}
.stat-icon{
    width:40px;height:40px;border-radius:10px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:18px;
}
.stat-value{font-size:20px;font-weight:700;line-height:1.2;}
.stat-value-lines{font-size:15px;line-height:1.45;}
.stat-label{font-size:11px;color:var(--text-soft);line-height:1.4;margin-top:2px;}
.stat-card-warning{border-color:var(--danger);}
.view-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid var(--border);}

/* ===== 工具卡片网格 ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.tool-card{
    background:var(--card);border-radius:var(--radius);padding:16px;
    box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;
    border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border));
}
.tool-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(31,42,68,.1);border-color:var(--primary);}
.tool-card h4{font-size:14px;margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.tool-card p{font-size:12px;color:var(--text-soft);margin-bottom:10px;}

/* ===== 提示 ===== */
.alert{padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13px;}
.alert-success{background:#e3f6ee;color:var(--success);}
.alert-danger{background:#fde8e8;color:var(--danger);}

/* ===== 响应式 ===== */

/* 平板及以下 */
@media (max-width:900px){
    .sidebar{position:fixed;left:0;top:0;z-index:100;transform:translateX(-100%);transition:transform .25s ease;box-shadow:2px 0 20px rgba(0,0,0,.1);}
    .sidebar.mobile-open{transform:translateX(0);}
    .sidebar.collapsed{transform:translateX(-100%);}
    .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:99;}
    .sidebar-overlay.show{display:block;}
    .stats{grid-template-columns:repeat(3,1fr);}
    .form-grid{grid-template-columns:1fr;}
    .topbar{padding:0 12px;gap:10px;}
    .card{padding:14px;}
    .grid{grid-template-columns:1fr;}
}

/* 手机 */
@media (max-width:640px){
    .content{padding:10px;}
    .card{padding:12px;}
    .topbar{height:50px;padding:0 10px;gap:8px;}
    .topbar-title{font-size:14px;}
    .topbar-right{gap:8px;}
    .db-tag{display:none;}
    .user-chip{font-size:12px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .stats{grid-template-columns:1fr;gap:10px;}
    .stat-card{padding:14px;}
    .stat-icon{width:40px;height:40px;font-size:18px;}
    .stat-value{font-size:20px;}
    .toolbar{flex-direction:column;align-items:stretch;}
    .search-box{min-width:0;}
    .toolbar .btn{width:100%;justify-content:center;}
    .card-title{font-size:14px;flex-wrap:wrap;gap:8px;}
    .card-title .btn{font-size:12px;padding:6px 12px;}
    /* 表格横向滚动 */
    .card{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .card > table{min-width:500px;}
    th,td{padding:8px 10px;font-size:12px;}
    /* 弹窗全屏化 */
    .modal{width:100vw !important;max-width:100vw !important;max-height:100vh !important;border-radius:0;}
    .modal-head{padding:12px 14px;}
    .modal-head h3{font-size:15px;}
    .modal-body{padding:14px;}
    .modal-foot{padding:10px 14px;}
    .modal-foot .btn{flex:1;justify-content:center;}
    /* 表单 */
    .form-grid{gap:10px;}
    .form-control{font-size:14px;padding:10px 12px;}
    /* 按钮 */
    .btn{padding:9px 14px;font-size:13px;}
    .btn-sm{padding:6px 10px;font-size:12px;}
    /* 品牌 */
    .brand{padding:14px 14px;}
    .brand-logo{width:34px;height:34px;font-size:18px;}
    .brand-name{font-size:14px;}
    .brand-sub{font-size:11px;}
    /* 导航 */
    .nav-item,.nav-group-title{padding:9px 16px;font-size:13px;}
    .nav-sub-item{padding:8px 16px 8px 40px;font-size:13px;}
    /* 工具卡片 */
    .tool-card{padding:14px;}
    .tool-card h4{font-size:13px;}
    /* 页脚 */
    .footer{padding:12px;font-size:11px;}
    /* 编辑器 */
    .editor{min-height:240px;padding:12px;}
    .editor-toolbar{padding:6px;}
    .editor-toolbar button,.editor-toolbar select{padding:4px 8px;font-size:12px;}
    /* 统计卡片 */
    .stat-card .stat-icon{width:36px;height:36px;font-size:16px;}
    /* 世界时间双栏改单栏 */
    .wt-layout{grid-template-columns:1fr !important;min-height:auto !important;}
    /* 卡片网格 */
    .card-grid{grid-template-columns:1fr !important;}
}

/* 超小屏幕 */
@media (max-width:380px){
    .topbar-title{font-size:13px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .user-chip{display:none;}
    .card{padding:10px;}
    th,td{padding:6px 8px;font-size:11px;}
}
.muted{color:var(--text-soft);}
.right{margin-left:auto;}

/* ===== 富文本编辑器 ===== */
.editor-toolbar{
    display:flex;align-items:center;gap:4px;flex-wrap:wrap;
    border:1px solid var(--border);border-bottom:none;
    border-radius:8px 8px 0 0;padding:8px 10px;background:#fafbfd;
}
.editor-toolbar button,.editor-toolbar select{
    border:1px solid var(--border);background:#fff;border-radius:6px;
    padding:5px 10px;cursor:pointer;font-size:13px;color:var(--text);
    min-height:30px;outline:none;
}
.editor-toolbar button:hover{border-color:var(--primary);color:var(--primary);}
.editor-toolbar button.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.editor-toolbar select{cursor:pointer;}
.editor-toolbar .sep{width:1px;height:22px;background:var(--border);margin:0 4px;}
.editor-toolbar input[type="color"]{width:34px;height:30px;padding:2px;border:1px solid var(--border);border-radius:6px;background:#fff;cursor:pointer;}
.editor-toolbar .tb-label{font-size:11px;color:var(--muted);margin-right:2px;}
.editor-toolbar select.font-sel{min-width:90px;}
.editor-toolbar select.size-sel{min-width:60px;}
.editor{
    min-height:380px;max-height:680px;overflow-y:auto;
    border:1px solid var(--border);border-radius:0 0 8px 8px;
    padding:18px 22px;background:#fff;line-height:1.8;outline:none;
    font-size:14px;
}
.editor:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.editor h1{font-size:24px;margin:14px 0 8px;}
.editor h2{font-size:20px;margin:12px 0 6px;}
.editor h3{font-size:17px;margin:10px 0 5px;}
.editor p{margin:6px 0;}
.editor ul,.editor ol{margin:6px 0 6px 24px;}
.editor img{max-width:100%;border-radius:6px;}
.editor a{color:var(--primary);}
.editor table{border-collapse:collapse;}
.editor td,.editor th{border:1px solid #ddd;padding:6px 8px;}

/* ===== 客户选择列表 ===== */
.cust-list{
    max-height:280px;overflow-y:auto;
    border:1px solid var(--border);border-radius:8px;
}
.cust-row{
    display:flex;align-items:center;gap:10px;
    padding:9px 12px;border-bottom:1px solid var(--border);
    cursor:pointer;font-size:13px;
}
.cust-row:last-child{border-bottom:none;}
.cust-row:hover{background:#fafbfd;}
.cust-row input{margin:0;}
.cust-row .cust-name{font-weight:600;min-width:90px;}
code{background:#eef1f6;padding:1px 6px;border-radius:4px;font-size:12px;color:var(--primary);}