* { box-sizing: border-box; margin:0; }

:root {
    --body-bg: #f3f6fb; --panel-bg: #ffffff; --sidebar-bg: #0f172a; --sidebar-text: #ffffff;
    --text-primary: #1f2937; --text-muted: #64748b; --card-text: #475569; --border-color: #e2e8f0;
    --accent: #2563eb; --accent-soft: #dbeafe; --hero-start: #2563eb; --hero-end: #4f46e5;
    --glass: rgba(255,255,255,.72); --shadow-sm: 0 2px 8px rgba(15,23,42,.06);
    --shadow-md: 0 8px 24px rgba(15,23,42,.08); --shadow-lg: 0 18px 50px rgba(15,23,42,.12);
    --radius: 16px; --radius-sm: 12px; --radius-xs: 8px;
}

body { font-family:"Inter","SF Pro Display","Microsoft YaHei",system-ui,sans-serif; background:var(--body-bg); color:var(--text-primary); transition:background .3s,color .3s; line-height:1.6; }

/* ── 登录页 ── */
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--hero-start),var(--hero-end)); }
.login-shell { width:100%; max-width:400px; padding:24px; }
.login-panel { background:var(--panel-bg); border-radius:24px; padding:36px; box-shadow:var(--shadow-lg); backdrop-filter:blur(20px); }
.brand-block { margin-bottom:28px; text-align:center; }
.brand-title { font-size:26px; font-weight:800; letter-spacing:-.5px; }
.brand-subtitle { margin-top:6px; color:var(--text-muted); font-size:13px; }
.login-form { display:grid; gap:16px; }
.field-block { display:grid; gap:6px; font-size:13px; font-weight:500; }
.field-block input,.field-block select,.field-block textarea { border:1.5px solid var(--border-color); border-radius:var(--radius-sm); padding:11px 14px; font-size:14px; background:var(--panel-bg); color:var(--text-primary); width:100%; transition:border .2s,box-shadow .2s; outline:none; }
.field-block input:focus,.field-block select:focus,.field-block textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.primary-btn { border:0; border-radius:var(--radius-sm); padding:12px 20px; font-size:14px; font-weight:600; cursor:pointer; background:var(--accent); color:#fff; transition:transform .1s,box-shadow .2s; letter-spacing:.3px; }
.primary-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(37,99,235,.3); }
.primary-btn:active { transform:translateY(0); }
.ghost-btn { width:100%; background:rgba(255,255,255,.1); color:var(--sidebar-text); border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-sm); padding:10px; cursor:pointer; font-size:13px; transition:background .15s; }
.ghost-btn:hover { background:rgba(255,255,255,.18); }
.form-message { min-height:18px; color:#ef4444; font-size:12px; }

/* ── 主布局 ── */
.dashboard-body { min-height:100vh; }
.dashboard-layout { min-height:100vh; display:grid; grid-template-columns:220px 1fr; }

/* ── 侧边栏 ── */
.sidebar { background:var(--sidebar-bg); color:var(--sidebar-text); padding:20px 14px; display:flex; flex-direction:column; justify-content:space-between; position:sticky; top:0; height:100vh; overflow-y:auto; }
.sidebar-title { font-size:17px; font-weight:800; letter-spacing:-.3px; padding:0 6px; }
.sidebar-subtitle { margin-top:4px; color:rgba(255,255,255,.45); font-size:11px; padding:0 6px; }
.menu-list { display:grid; gap:3px; margin:18px 0; }
.menu-list a { text-decoration:none; color:rgba(255,255,255,.7); background:transparent; padding:10px 12px; border-radius:var(--radius-sm); display:flex; align-items:center; gap:10px; font-size:13px; font-weight:500; transition:all .15s; }
.menu-list a:hover { background:rgba(255,255,255,.08); color:#fff; }
.menu-list a.active { background:var(--accent); color:#fff; font-weight:600; box-shadow:0 4px 12px rgba(37,99,235,.3); }
.menu-icon { font-size:16px; width:22px; text-align:center; }

/* ── 主内容区 ── */
.dashboard-main { padding:24px 28px; overflow-y:auto; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.page-title { font-size:24px; font-weight:800; letter-spacing:-.5px; }
.page-subtitle { margin-top:4px; color:var(--text-muted); font-size:13px; }
.topbar-actions { display:flex; align-items:center; gap:12px; }
.theme-switcher { display:grid; gap:4px; font-size:11px; color:var(--text-muted); font-weight:500; }
.theme-switcher select { min-width:120px; border:1.5px solid var(--border-color); border-radius:var(--radius-sm); padding:7px 10px; background:var(--panel-bg); color:var(--text-primary); font-size:12px; }

/* ── Hero ── */
.hero-panel { background:linear-gradient(135deg,var(--hero-start),var(--hero-end)); color:#fff; border-radius:20px; padding:28px; margin-bottom:22px; display:flex; justify-content:space-between; gap:18px; align-items:center; box-shadow:0 8px 32px rgba(37,99,235,.2); }
.hero-title { font-size:26px; font-weight:800; letter-spacing:-.5px; }
.hero-desc { margin-top:8px; max-width:580px; line-height:1.7; color:rgba(255,255,255,.8); font-size:14px; }
.hero-tags { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.hero-tags span { padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.15); backdrop-filter:blur(8px); font-size:12px; font-weight:500; }

/* ── 模块入口卡片 ── */
.module-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:22px; }
.module-entry { background:var(--panel-bg); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); text-decoration:none; color:var(--text-primary); transition:transform .15s,box-shadow .15s; display:grid; gap:10px; border:1px solid var(--border-color); }
.module-entry:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--accent); }
.module-entry-head { display:flex; align-items:center; justify-content:space-between; }
.module-entry-icon { font-size:28px; }
.module-entry-name { font-size:15px; font-weight:700; }
.module-entry-desc { font-size:12px; color:var(--text-muted); line-height:1.6; }

/* ── 状态标签 ── */
.status-badge { font-size:11px; border-radius:999px; padding:4px 10px; font-weight:600; letter-spacing:.3px; }
.badge-online { color:#16a34a; background:#dcfce7; }
.badge-offline { color:#dc2626; background:#fee2e2; }
.badge-standby,.badge-partial { color:#d97706; background:#fef3c7; }
.badge-pending { color:#6b7280; background:#f3f4f6; }
.badge-ready { color:#16a34a; background:#dcfce7; }
.badge-running { color:#2563eb; background:#dbeafe; }
.badge-paused { color:#9333ea; background:#f3e8ff; }

/* ── 详细页面板 ── */
.detail-panel { background:var(--panel-bg); border-radius:20px; padding:22px; box-shadow:var(--shadow-sm); margin-bottom:18px; border:1px solid var(--border-color); }
.detail-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.detail-title { font-size:20px; font-weight:700; letter-spacing:-.3px; }
.detail-subtitle { margin-top:3px; color:var(--text-muted); font-size:12px; }
.detail-status { padding:12px; border-radius:var(--radius-sm); background:rgba(15,23,42,.03); font-size:13px; margin-bottom:14px; line-height:1.8; }
.ghost-inline-btn { border:1.5px solid var(--border-color); background:var(--panel-bg); color:var(--text-primary); border-radius:var(--radius-sm); padding:8px 14px; cursor:pointer; font-size:12px; font-weight:500; transition:all .15s; }
.ghost-inline-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ── 查询面板 ── */
.query-row { display:grid; grid-template-columns:200px 1fr auto; gap:12px; align-items:end; }
.result-box { margin-top:14px; min-height:100px; max-height:400px; overflow:auto; border-radius:var(--radius-sm); padding:14px; background:rgba(15,23,42,.03); color:var(--text-primary); font-size:13px; line-height:1.7; white-space:pre-wrap; word-break:break-word; border:1px solid var(--border-color); font-family:"JetBrains Mono","Fira Code",monospace; }

/* ── 模型卡 ── */
.model-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.model-card { background:var(--glass); border:1.5px solid var(--border-color); border-radius:18px; padding:18px; display:grid; gap:12px; transition:border-color .15s; }
.model-card:hover { border-color:var(--accent); }
.model-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.model-title { font-size:16px; font-weight:700; }
.model-meta { margin-top:3px; color:var(--text-muted); font-size:12px; }
.model-body { display:grid; gap:6px; color:var(--card-text); font-size:13px; line-height:1.7; }
.model-action { width:100%; }
.prompt-field { display:grid; gap:6px; font-size:12px; color:var(--text-muted); font-weight:500; }
.prompt-field textarea { width:100%; border:1.5px solid var(--border-color); border-radius:var(--radius-sm); padding:10px; resize:vertical; background:var(--panel-bg); color:var(--text-primary); font-family:inherit; }
.health-text { font-weight:600; }
.health-online { color:#16a34a; }
.health-offline,.health-missing { color:#dc2626; }

/* ── 库存卡片 ── */
.inventory-card { background:rgba(15,23,42,.02); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:12px; margin:6px 0; }
.card-field { display:flex; gap:8px; padding:3px 0; font-size:13px; border-bottom:1px solid rgba(0,0,0,.04); }
.card-field:last-child { border-bottom:none; }
.card-label { color:var(--text-muted); min-width:56px; font-weight:600; font-size:12px; }
.card-value { color:var(--text-primary); }

/* ── 10 皮肤 ── */
.theme-default { --body-bg:#f3f6fb; --panel-bg:#fff; --sidebar-bg:#0f172a; --sidebar-text:#fff; --text-primary:#1f2937; --text-muted:#64748b; --card-text:#475569; --border-color:#e2e8f0; --accent:#2563eb; --accent-soft:#dbeafe; --hero-start:#2563eb; --hero-end:#4f46e5; }
.theme-dark { --body-bg:#0a0a0f; --panel-bg:#161622; --sidebar-bg:#08080e; --sidebar-text:#e5e7eb; --text-primary:#f1f5f9; --text-muted:#94a3b8; --card-text:#cbd5e1; --border-color:#1e293b; --accent:#38bdf8; --accent-soft:rgba(56,189,248,.1); --hero-start:#0c1222; --hero-end:#1e40af; --glass:rgba(22,22,34,.8); }
.theme-emerald { --body-bg:#ecfdf5; --panel-bg:#fff; --sidebar-bg:#064e3b; --sidebar-text:#ecfdf5; --text-primary:#14532d; --text-muted:#4b5563; --card-text:#374151; --border-color:#a7f3d0; --accent:#059669; --accent-soft:#d1fae5; --hero-start:#059669; --hero-end:#10b981; }
.theme-sunset { --body-bg:#fffbf5; --panel-bg:#fff; --sidebar-bg:#7c2d12; --sidebar-text:#ffedd5; --text-primary:#431407; --text-muted:#9a3412; --card-text:#7c2d12; --border-color:#fed7aa; --accent:#ea580c; --accent-soft:#ffedd5; --hero-start:#ea580c; --hero-end:#f97316; }
.theme-violet { --body-bg:#faf5ff; --panel-bg:#fff; --sidebar-bg:#3b0764; --sidebar-text:#f3e8ff; --text-primary:#1e1b4b; --text-muted:#7c3aed; --card-text:#4338ca; --border-color:#c4b5fd; --accent:#7c3aed; --accent-soft:#ede9fe; --hero-start:#7c3aed; --hero-end:#8b5cf6; }
.theme-slate { --body-bg:#f8fafc; --panel-bg:#fff; --sidebar-bg:#1e293b; --sidebar-text:#e2e8f0; --text-primary:#0f172a; --text-muted:#475569; --card-text:#334155; --border-color:#cbd5e1; --accent:#475569; --accent-soft:#e2e8f0; --hero-start:#334155; --hero-end:#475569; }
.theme-rose { --body-bg:#fff1f2; --panel-bg:#fff; --sidebar-bg:#881337; --sidebar-text:#ffe4e6; --text-primary:#4c0519; --text-muted:#be123c; --card-text:#881337; --border-color:#fecdd3; --accent:#e11d48; --accent-soft:#ffe4e6; --hero-start:#e11d48; --hero-end:#fb7185; }
.theme-ocean { --body-bg:#ecfeff; --panel-bg:#fff; --sidebar-bg:#155e75; --sidebar-text:#cffafe; --text-primary:#164e63; --text-muted:#0e7490; --card-text:#155e75; --border-color:#a5f3fc; --accent:#0891b2; --accent-soft:#cffafe; --hero-start:#0891b2; --hero-end:#06b6d4; }
.theme-gold { --body-bg:#fffbeb; --panel-bg:#fff; --sidebar-bg:#78350f; --sidebar-text:#fef3c7; --text-primary:#451a03; --text-muted:#b45309; --card-text:#78350f; --border-color:#fcd34d; --accent:#d97706; --accent-soft:#fef3c7; --hero-start:#d97706; --hero-end:#f59e0b; }
.theme-forest { --body-bg:#f0fdf4; --panel-bg:#fff; --sidebar-bg:#14532d; --sidebar-text:#dcfce7; --text-primary:#052e16; --text-muted:#15803d; --card-text:#166534; --border-color:#86efac; --accent:#16a34a; --accent-soft:#dcfce7; --hero-start:#15803d; --hero-end:#22c55e; }

/* ── 10 排版 ── */
/* L1 经典：左侧栏220+右内容 */
.layout-classic .dashboard-layout { grid-template-columns:220px 1fr; }
.layout-classic .sidebar { border-radius:0; }

/* L2 窄栏：左侧栏180+右内容，侧栏紧凑 */
.layout-narrow .dashboard-layout { grid-template-columns:180px 1fr; }
.layout-narrow .sidebar { padding:16px 10px; }
.layout-narrow .sidebar-title { font-size:15px; }
.layout-narrow .menu-list a { padding:8px 10px; font-size:12px; }

/* L3 宽栏：左侧栏260+右内容，侧栏宽敞 */
.layout-wide .dashboard-layout { grid-template-columns:260px 1fr; }
.layout-wide .sidebar { padding:24px 18px; }
.layout-wide .sidebar-title { font-size:19px; }

/* L4 圆润：大圆角+柔和阴影 */
.layout-rounded .detail-panel { border-radius:28px; }
.layout-rounded .hero-panel { border-radius:28px; }
.layout-rounded .module-entry { border-radius:24px; }
.layout-rounded .sidebar { border-radius:0 24px 24px 0; }
.layout-rounded .login-panel { border-radius:32px; }

/* L5 方正：直角+实线边框 */
.layout-sharp .detail-panel { border-radius:4px; }
.layout-sharp .hero-panel { border-radius:4px; }
.layout-sharp .module-entry { border-radius:4px; }
.layout-sharp .primary-btn { border-radius:4px; }
.layout-sharp .ghost-inline-btn { border-radius:4px; }
.layout-sharp .sidebar { border-radius:0; }
.layout-sharp .field-block input,.layout-sharp .field-block select { border-radius:4px; }

/* L6 卡片间距大 */
.layout-spacious .dashboard-main { padding:32px 36px; }
.layout-spacious .detail-panel { padding:28px; margin-bottom:24px; }
.layout-spacious .module-grid { gap:20px; }

/* L7 紧凑排版 */
.layout-compact .dashboard-main { padding:16px 20px; }
.layout-compact .detail-panel { padding:16px; margin-bottom:12px; border-radius:12px; }
.layout-compact .detail-title { font-size:17px; }
.layout-compact .hero-panel { padding:20px; border-radius:14px; }

/* L8 无边框：去掉面板边框，纯阴影 */
.layout-borderless .detail-panel { border:none; box-shadow:var(--shadow-md); }
.layout-borderless .module-entry { border:none; box-shadow:var(--shadow-sm); }
.layout-borderless .result-box { border:none; }

/* L9 双栏内容 */
.layout-twocol .dashboard-main { column-count:2; column-gap:20px; }
.layout-twocol .detail-panel { break-inside:avoid; }
.layout-twocol .hero-panel { column-span:all; }

/* L10 顶栏模式：侧边栏变成顶栏 */
.layout-topbar .dashboard-layout { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
.layout-topbar .sidebar { position:static; height:auto; flex-direction:row; align-items:center; padding:12px 20px; gap:16px; }
.layout-topbar .sidebar-title { font-size:16px; }
.layout-topbar .sidebar-subtitle { display:none; }
.layout-topbar .menu-list { display:flex; gap:6px; margin:0; }
.layout-topbar .menu-list a { padding:8px 14px; font-size:13px; white-space:nowrap; }
.layout-topbar .ghost-btn { padding:8px 14px; width:auto; }

/* ── 响应式 ── */
@media(max-width:768px){
    .dashboard-layout{grid-template-columns:1fr}
    .sidebar{position:fixed;left:-220px;z-index:100;transition:left .3s}
    .sidebar.open{left:0}
    .query-row{grid-template-columns:1fr}
    .hero-panel{flex-direction:column}
}
