:root {
  
  --app-surface-base: #FFFFFF;
  --app-surface-subtle: #F8FAFC;
  --app-surface-muted: #F1F5F9;
  --app-surface-strong: #E2E8F0;
  --app-surface-overlay: #FFFFFF;
  --app-surface-inverse: #0F172A;
  --app-surface-inverse-border: #1E293B;
  --app-scrim: #00000080;

  
  --app-text-primary: #1E293B;
  --app-text-secondary: #475569;
  --app-text-tertiary: #64748B;
  --app-text-muted: #64748B;
  --app-text-on-accent: #FFFFFF;
  --app-decorative: #94A3B8;

  
  --app-border-subtle: #E2E8F0;
  --app-border-strong: #CBD5E1;
  --app-border-focus: #A5B4FC;

  
  --app-accent: #4F46E5;
  --app-accent-hover: #4338CA;
  --app-accent-disabled: #A5B4FC;
  --app-accent-muted: #6366F1;
  --app-accent-subtle: #EEF2FF;
  --app-accent-subtle-border: #E0E7FF;

  
  --app-danger: #EF4444;
  --app-danger-strong: #DC2626;
  --app-danger-text: #B91C1C;
  --app-danger-subtle: #FEF2F2;
  --app-danger-border: #FCA5A5;

  --app-success: #10B981;
  --app-success-text: #047857;
  --app-success-subtle: #ECFDF5;
  --app-success-border: #A7F3D0;

  --app-warning: #F59E0B;
  --app-warning-text: #C2410C;
  --app-warning-subtle: #FFF7ED;
  --app-warning-border: #FCD34D;

  
  --app-info: #0EA5E9;
  --app-info-text: #0369A1;
  --app-info-subtle: #F0F9FF;
  --app-info-border: #7DD3FC;

  
  --app-state-hover: #F1F5F9;
  --app-state-selected: #E0E7FF;
  --app-state-pressed: #CBD5E1;

  
  --app-font-size-micro: 10px;
  --app-font-size-caption: 11px;
  --app-font-size-body: 12px;
  --app-font-size-body-lg: 13px;
  --app-font-size-subtitle: 14px;
  --app-font-size-title: 16px;
  --app-font-size-title-lg: 20px;
  --app-font-size-display: 28px;
  --app-font-size-numeric: 36px;

  --app-space-half: 2px;
  --app-space-xs: 4px;
  --app-space-sm: 6px;
  --app-space-md: 8px;
  --app-space-md-lg: 10px;
  --app-space-lg: 12px;
  --app-space-xl: 16px;
  --app-space-xxl: 24px;

  --app-radius-xs: 2px;
  --app-radius-sm: 4px;
  --app-radius-md: 6px;
  --app-radius-lg: 8px;
  --app-radius-lg-plus: 10px;
  --app-radius-xl: 12px;
  --app-radius-xxl: 16px;
  
  --app-radius-pill: 32px;

  --app-content-max-width: 1100px;
  --app-form-max-width: 880px;

  

  
  --app-node-start: #10B981;
  --app-node-end: #EF4444;
  --app-node-agent: #7C3AED;
  --app-node-condition: #F59E0B;
  --app-node-sub-workflow: #3B82F6;
  --app-node-join: #06B6D4;
  --app-node-approval: #E11D48;
  --app-node-set: #8B5CF6;
  --app-node-merge: #0891B2;
  --app-node-http: #EA580C;
  --app-node-filter: #16A34A;
  --app-node-code: #DB2777;
  --app-node-browser-script: #65A30D;
  --app-node-unknown: #94A3B8;

  
  --app-node-start-subtle: #ECFDF5;
  --app-node-end-subtle: #FEF2F2;
  --app-node-agent-subtle: #F5F3FF;
  --app-node-condition-subtle: #FFFBEB;
  --app-node-sub-workflow-subtle: #EFF6FF;
  --app-node-join-subtle: #ECFEFF;
  --app-node-approval-subtle: #FFF1F2;
  --app-node-set-subtle: #FAF5FF;
  --app-node-merge-subtle: #ECFEFF;
  --app-node-http-subtle: #FFF7ED;
  --app-node-filter-subtle: #F0FDF4;
  --app-node-code-subtle: #FDF2F8;
  --app-node-browser-script-subtle: #F7FEE7;
  --app-node-unknown-subtle: #F8FAFC;

  
  --app-budget-system: #10B981;
  --app-budget-tools: #F59E0B;
  --app-budget-history: #3B82F6;
  --app-budget-input: #8B5CF6;
  --app-budget-reserve: #94A3B8;
  --app-budget-remaining: #E2E8F0;

  
  --app-source-system: #6366F1;
  --app-source-built-in: #10B981;
  --app-source-mcp: #F59E0B;
  --app-source-unknown: #94A3B8;
  --app-source-system-accent: #818CF8;
  --app-source-built-in-accent: #34D399;
  --app-source-mcp-accent: #FBBF24;
  --app-source-unknown-accent: #CBD5E1;
  --app-source-system-subtle: #EEF2FF;
  --app-source-built-in-subtle: #ECFDF5;
  --app-source-mcp-subtle: #FFFBEB;
  --app-source-unknown-subtle: #F1F5F9;

  
  --app-latency-asr: #64748B;
  --app-latency-ttfs: #4F46E5;
  --app-latency-synth: #0891B2;
  --app-latency-tts: #16A34A;

  
  --app-capability-chat: #7C3AED;
  --app-capability-summary: #06B6D4;
  --app-capability-vision: #3B82F6;
  --app-capability-media: #E11D48;

  
  --app-template-cat-text: #3B82F6;
  --app-template-cat-multi-agent: #7C3AED;
  --app-template-cat-custom: #10B981;
  --app-template-cat-other: #F59E0B;

  
  --app-nav-rail: #F1F5F9;
  --app-nav-text: #5B6980;
  --app-nav-hover: #E3E9F0;
  --app-nav-divider: #DCE3EB;

  
  --app-scroll-thumb: #94a3b859;
  --app-scroll-thumb-hover: #94a3b899;
  --app-scroll-thumb-pressed: #94a3b8cc;

  
  --app-shadow-sm: 0px 1px 3px 0px #0000001a;
  --app-shadow-md: 0px 2px 6px 0px #00000026;
  --app-shadow-lg: 0px 8px 32px 0px #00000040;
  --app-shadow-xl: 0px 18px 48px 0px #00000026;

  
  --app-ring-running: 0px 0px 0px 3px #3b82f666;
  --app-ring-retrying: 0px 0px 0px 3px #f59e0b66;
  --app-ring-completed: 0px 0px 0px 2px #10b9814d;
  --app-ring-failed: 0px 0px 0px 3px #ef444466;
  --app-ring-skipped: 0px 0px 0px 2px #94a3b84d;
  --app-ring-fallback: 0px 0px 0px 2px #f59e0b4d;
  --app-ring-selected: 0px 0px 0px 2px #4f46e566;

  
  --app-site-accent: #4a52e6;
  --app-site-accent-ink: #3b43d6;
  --app-site-accent-soft: #eceffe;

  
  --app-site-grad-1: #d3d9f4;
  --app-site-grad-2: #8f95ee;
  --app-site-grad-3: #9aa0f1;
  --app-site-grad-4: #eef0fc;

  --app-site-ink-on-grad: #14183a;
  --app-site-ink-on-grad-soft: #2b3059;
  
  --app-site-sheen: rgba(74,82,230,.88);

  --app-site-radius-sm: 10px;
  --app-site-radius-md: 16px;
  --app-site-radius-lg: 22px;
  --app-site-shadow-card: 0 1px 2px rgba(16,16,24,.04), 0 8px 24px -12px rgba(16,16,24,.12);
  --app-site-shadow-glass: 0 2px 8px rgba(24,26,64,.08), 0 24px 48px -20px rgba(24,26,64,.28);
  --app-site-shadow-float: 0 2px 6px rgba(16,16,24,.06), 0 40px 80px -34px rgba(30,28,70,.38);
  --app-site-maxw: 1200px;
  --app-site-gutter: 24px;
  --app-site-nav-h: 66px;
  --app-site-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  
  --app-site-plate: #ffffff;
  --app-site-mini-label: #5b5f86;

  
  --app-site-bg-inverse: #0c0c0d;
  --app-site-fg-inverse: #f7f7f8;

  
  --app-site-glow-1-rgb: 122, 132, 244;  
  --app-site-glow-2-rgb: 138, 146, 240;  
  --app-site-glow-3-rgb: 150, 162, 255;  
  --app-site-glow-4-rgb: 150, 150, 230;  
  --app-site-glow-5-rgb: 140, 140, 220;  
  --app-site-glow-6-rgb: 120, 105, 230;  

  
  --app-site-shade-1-rgb: 24, 26, 64;    
  --app-site-shade-2-rgb: 20, 24, 58;    
  --app-site-shade-3-rgb: 16, 16, 24;    
  --app-site-shade-4-rgb: 18, 18, 24;    

  
  --app-site-near-black-rgb: 11, 11, 13; 

  
  --app-auth-text: #1E293B;
  --app-auth-text-muted: #6B7280;
  --app-auth-border: #E2E8F0;
  --app-auth-surface: #FFFFFF;

  --app-auth-grad-1: #D3D9F4;
  --app-auth-grad-2: #8F95EE;
  --app-auth-grad-3: #9AA0F1;
  --app-auth-grad-4: #EEF0FC;

  --app-auth-veil-95: rgba(255, 255, 255, .95);
  --app-auth-veil-92: rgba(255, 255, 255, .92);
  --app-auth-veil-55: rgba(255, 255, 255, .55);
  --app-auth-veil-50: rgba(255, 255, 255, .50);
  --app-auth-card-border: rgba(255, 255, 255, .7);

  --app-auth-glow-blue: rgba(138, 146, 240, .50);
  --app-auth-glow-violet: rgba(122, 132, 244, .50);

  --app-auth-mesh-dot: rgba(74, 82, 230, .40);
  --app-auth-mesh-line: rgba(20, 24, 58, .13);
  --app-auth-mesh-mask-solid: #000000;
  --app-auth-mesh-mask-fade: rgba(0, 0, 0, .70);

  --app-auth-card-shadow: 0 2px 6px rgba(16, 16, 24, .06), 0 40px 80px -34px rgba(30, 28, 70, .38);
  --app-auth-divider: #C7CBD6;

  --app-auth-error-bg: #FEF2F2;
  --app-auth-error-fg: #DC2626;
  --app-auth-error-border: #FECACA;

  --app-auth-focus-ring: #4A52E6;
  --app-auth-focus-shadow: rgba(74, 82, 230, .14);

  --app-auth-cta-bg: #0C0C0D;
  --app-auth-cta-fg: #F7F7F8;
  --app-auth-hover-tint: #F6F7FB;

  --app-auth-github-border: #D3D6DB;
  --app-auth-github-fg: #24292E;

  --app-auth-wechat-border: #A8E3C4;
  --app-auth-wechat-fg: #06A452;
  --app-auth-wechat-hover: #07C160;

  --app-auth-qq-border: #A9DFF5;
  --app-auth-qq-fg: #0E96C9;
  --app-auth-qq-hover: #12B7F5;
}

:root[data-theme="dark"] {
  

  
  --app-surface-base: #0F172A;
  --app-surface-subtle: #1A2436;
  --app-surface-muted: #1E293B;
  --app-surface-strong: #334155;
  --app-surface-overlay: #1E293B;
  
  --app-surface-inverse: #334155;
  --app-surface-inverse-border: #475569;
  --app-scrim: #000000a6;

  
  --app-text-primary: #F1F5F9;   
  --app-text-secondary: #CBD5E1; 
  --app-text-tertiary: #94A3B8;  
  --app-text-muted: #8494AB;     
  --app-text-on-accent: #FFFFFF;
  --app-decorative: #64748B;

  
  --app-border-subtle: #293548;
  --app-border-strong: #3E4C63;
  --app-border-focus: #818CF8;

  
  --app-accent: #6366F1;
  --app-accent-hover: #818CF8;
  --app-accent-disabled: #3730A3;
  --app-accent-muted: #818CF8;
  --app-accent-subtle: #1E1B4B;
  --app-accent-subtle-border: #312E81;

  
  --app-danger: #F87171;
  --app-danger-strong: #EF4444;
  --app-danger-text: #FCA5A5;
  --app-danger-subtle: #3F1D1D;
  --app-danger-border: #7F1D1D;

  --app-success: #34D399;
  --app-success-text: #6EE7B7;
  --app-success-subtle: #0C2E24;
  --app-success-border: #065F46;

  --app-warning: #FBBF24;
  --app-warning-text: #FDBA74;
  --app-warning-subtle: #3A2410;
  --app-warning-border: #78350F;

  
  --app-info: #38BDF8;
  --app-info-text: #7DD3FC;
  --app-info-subtle: #0C2A3E;
  --app-info-border: #075985;

  
  --app-state-hover: #1E293B;
  --app-state-selected: #312E81;
  --app-state-pressed: #3E4C63;

  

  --app-node-start: #34D399;
  --app-node-end: #F87171;
  --app-node-agent: #A78BFA;
  --app-node-condition: #FBBF24;
  --app-node-sub-workflow: #60A5FA;
  --app-node-join: #22D3EE;
  --app-node-approval: #FB7185;
  --app-node-set: #C4B5FD;
  --app-node-merge: #67E8F9;
  --app-node-http: #FB923C;
  --app-node-filter: #4ADE80;
  --app-node-code: #F472B6;
  --app-node-browser-script: #A3E635;
  --app-node-unknown: #94A3B8;

  
  --app-node-start-subtle: #0C2E24;
  --app-node-end-subtle: #3F1D1D;
  --app-node-agent-subtle: #2A1B4D;
  --app-node-condition-subtle: #3A2410;
  --app-node-sub-workflow-subtle: #152A47;
  --app-node-join-subtle: #0C2E33;
  --app-node-approval-subtle: #3F1522;
  --app-node-set-subtle: #2E1B47;
  --app-node-merge-subtle: #0C2E33;
  --app-node-http-subtle: #3A2110;
  --app-node-filter-subtle: #0F2E1A;
  --app-node-code-subtle: #3D1530;
  --app-node-browser-script-subtle: #232E10;
  --app-node-unknown-subtle: #1A2436;

  
  --app-budget-system: #34D399;
  --app-budget-tools: #FBBF24;
  --app-budget-history: #60A5FA;
  --app-budget-input: #C4B5FD;
  --app-budget-reserve: #94A3B8;
  --app-budget-remaining: #334155;

  --app-source-system: #818CF8;
  --app-source-built-in: #34D399;
  --app-source-mcp: #FBBF24;
  --app-source-unknown: #94A3B8;
  --app-source-system-accent: #A5B4FC;
  --app-source-built-in-accent: #6EE7B7;
  --app-source-mcp-accent: #FDE68A;
  --app-source-unknown-accent: #475569;
  --app-source-system-subtle: #1E1B4B;
  --app-source-built-in-subtle: #0C2E24;
  --app-source-mcp-subtle: #3A2410;
  --app-source-unknown-subtle: #1E293B;

  --app-latency-asr: #94A3B8;
  --app-latency-ttfs: #818CF8;
  --app-latency-synth: #22D3EE;
  --app-latency-tts: #4ADE80;

  --app-capability-chat: #A78BFA;
  --app-capability-summary: #22D3EE;
  --app-capability-vision: #60A5FA;
  --app-capability-media: #FB7185;

  --app-template-cat-text: #60A5FA;
  --app-template-cat-multi-agent: #A78BFA;
  --app-template-cat-custom: #34D399;
  --app-template-cat-other: #FBBF24;

  --app-nav-rail: #0B1220;
  --app-nav-text: #A9B6C8;
  --app-nav-hover: #1E293B;
  --app-nav-divider: #293548;

  
  --app-scroll-thumb: #ffffff59;
  --app-scroll-thumb-hover: #ffffff99;
  --app-scroll-thumb-pressed: #ffffffcc;

  
  --app-shadow-sm: 0px 1px 3px 0px #00000066;
  --app-shadow-md: 0px 2px 6px 0px #00000080;
  --app-shadow-lg: 0px 8px 32px 0px #000000a6;
  --app-shadow-xl: 0px 18px 48px 0px #00000099;

  
  --app-ring-running: 0px 0px 0px 3px #60a5fa80;
  --app-ring-retrying: 0px 0px 0px 3px #fbbf2480;
  --app-ring-completed: 0px 0px 0px 2px #34d39966;
  --app-ring-failed: 0px 0px 0px 3px #f8717180;
  --app-ring-skipped: 0px 0px 0px 2px #94a3b866;
  --app-ring-fallback: 0px 0px 0px 2px #fbbf2466;
  --app-ring-selected: 0px 0px 0px 2px #6366f180;

  
  --app-site-accent: #8a92f8;
  --app-site-accent-ink: #a0a7fb;
  --app-site-accent-soft: #16192e;

  --app-site-grad-1: #262c5c;
  --app-site-grad-2: #2f367e;
  --app-site-grad-3: #2b3170;
  --app-site-grad-4: #0b0b0d;

  --app-site-ink-on-grad: #eef0ff;
  --app-site-ink-on-grad-soft: #c9cee8;
  --app-site-sheen: rgba(255,255,255,.95);

  --app-site-shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.6);
  --app-site-shadow-glass: 0 2px 8px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.7);
  --app-site-shadow-float: 0 2px 6px rgba(0,0,0,.5), 0 40px 80px -34px rgba(0,0,0,.8);
  

  
  --app-site-mini-label: #9aa0c4;

  
  --app-site-bg-inverse: #f4f4f6;
  --app-site-fg-inverse: #0c0c0d;

  
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


html, body { height: 100%; }

body {
  background: var(--app-surface-base);
  color: var(--app-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--app-font-size-body-lg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }


.btn {
  border: none;
  border-radius: var(--app-radius-md);
  padding: var(--app-space-sm) var(--app-space-xl);
  font-size: var(--app-font-size-body-lg);
  font-family: inherit;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--app-accent-subtle); }
.btn:disabled { cursor: not-allowed; }

.btn-primary { background: var(--app-accent); color: var(--app-text-on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--app-accent-hover); }
.btn-primary:disabled { background: var(--app-accent-disabled); }

.btn-secondary {
  background: var(--app-surface-base);
  color: var(--app-text-primary);
  border: 1px solid var(--app-border-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--app-state-hover); }

.btn-danger { background: var(--app-danger); color: var(--app-text-on-accent); }
.btn-danger:hover:not(:disabled) { background: var(--app-danger-strong); }

.btn-ghost { background: transparent; color: var(--app-accent); }
.btn-ghost:hover:not(:disabled) { background: var(--app-accent-subtle); }

.btn-icon {
  background: transparent;
  border: 1px solid var(--app-border-subtle);
  border-radius: var(--app-radius-md);
  padding: var(--app-space-xs) var(--app-space-md);
  color: var(--app-text-secondary);
  cursor: pointer;
}
.btn-icon:hover:not(:disabled) { background: var(--app-state-hover); }


.field, .select {
  width: 100%;
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-md);
  padding: var(--app-space-sm) var(--app-space-md-lg);
  font-size: var(--app-font-size-body-lg);
  font-family: inherit;
  color: var(--app-text-primary);
  background: var(--app-surface-base);
}
.field:focus, .select:focus {
  outline: none;
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px var(--app-accent-subtle);
}
.field:disabled, .select:disabled {
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
  cursor: not-allowed;
}
.field-invalid { border-color: var(--app-danger-border); }


.switch {
  width: 34px; height: 19px; flex: 0 0 34px;
  border-radius: var(--app-radius-pill);
  background: var(--app-accent);
  position: relative; display: inline-block;
  border: none; cursor: pointer; padding: 0;
  transition: background-color .12s ease;
}
.switch::after {
  content: "";
  position: absolute; top: 2px; left: 17px;
  width: 15px; height: 15px; border-radius: var(--app-radius-pill);
  background: var(--app-surface-base);
  transition: left .12s ease;
}
.switch-off { background: var(--app-border-strong); }
.switch-off::after { left: 2px; }


.card {
  border: 1px solid var(--app-border-subtle);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface-base);
  padding: var(--app-space-lg);
  box-shadow: var(--app-shadow-sm);
}


.data-table { width: 100%; border-collapse: collapse; font-size: var(--app-font-size-body-lg); }
.data-table th {
  text-align: left;
  padding: var(--app-space-md) var(--app-space-md-lg);
  background: var(--app-surface-muted);
  color: var(--app-text-secondary);
  font-weight: 600;
  font-size: var(--app-font-size-caption);
  border-bottom: 1px solid var(--app-border-strong);
}
.data-table td {
  padding: var(--app-space-md) var(--app-space-md-lg);
  border-bottom: 1px solid var(--app-border-subtle);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--app-state-hover); }


.form-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--app-space-md);
  align-items: start;
  margin-bottom: var(--app-space-lg);
}
.form-row > label { font-size: var(--app-font-size-body); color: var(--app-text-secondary); padding-top: var(--app-space-md); }



.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-space-md);
  align-items: center;
  margin-bottom: var(--app-space-lg);
}

.toolbar > .field { flex: 1 1 220px; min-width: 160px; width: auto; }
.toolbar > .select { flex: 0 0 auto; width: auto; }
.form-hint { font-size: var(--app-font-size-caption); color: var(--app-text-muted); margin-top: var(--app-space-xs); }
.form-error { font-size: var(--app-font-size-caption); color: var(--app-danger-text); margin-top: var(--app-space-xs); }


.modal-scrim { position: fixed; inset: 0; background: var(--app-scrim); display: grid; place-items: center; z-index: 100; }
.modal {
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-xl);
  background: var(--app-surface-overlay);
  box-shadow: var(--app-shadow-xl);
  overflow: hidden;
  min-width: 360px;
  max-width: var(--app-form-max-width);
}
.modal-header {
  padding: var(--app-space-md-lg) var(--app-space-lg);
  font-size: var(--app-font-size-subtitle);
  font-weight: 600;
  border-bottom: 1px solid var(--app-border-subtle);
}
.modal-body { padding: var(--app-space-lg); font-size: var(--app-font-size-body-lg); color: var(--app-text-secondary); }
.modal-footer {
  padding: var(--app-space-md-lg) var(--app-space-lg);
  border-top: 1px solid var(--app-border-subtle);
  background: var(--app-surface-subtle);
  display: flex; justify-content: flex-end; gap: var(--app-space-sm);
}


.tabs { display: flex; gap: var(--app-space-xs); border-bottom: 1px solid var(--app-border-subtle); }
.tab {
  padding: var(--app-space-sm) var(--app-space-lg);
  font-size: var(--app-font-size-body-lg);
  color: var(--app-text-secondary);
  border-bottom: 2px solid transparent;
  background: transparent; border-top: none; border-left: none; border-right: none;
  cursor: pointer; font-family: inherit;
}
.tab:hover { color: var(--app-text-primary); }
.tab-active { color: var(--app-accent); border-bottom-color: var(--app-accent); font-weight: 600; }


.section-title { font-size: var(--app-font-size-subtitle); font-weight: 600; color: var(--app-text-primary); }
.section-desc { font-size: var(--app-font-size-body); color: var(--app-text-muted); margin-top: var(--app-space-xs); }


.badge {
  display: inline-block;
  font-size: var(--app-font-size-caption);
  padding: var(--app-space-half) var(--app-space-md);
  border-radius: var(--app-radius-pill);
  border: 1px solid transparent;
}
.badge-success { background: var(--app-success-subtle); color: var(--app-success-text); border-color: var(--app-success-border); }
.badge-danger  { background: var(--app-danger-subtle);  color: var(--app-danger-text);  border-color: var(--app-danger-border); }
.badge-warning { background: var(--app-warning-subtle); color: var(--app-warning-text); border-color: var(--app-warning-border); }
.badge-info    { background: var(--app-info-subtle);    color: var(--app-info-text);    border-color: var(--app-info-border); }
.badge-accent  { background: var(--app-accent-subtle);  color: var(--app-accent);       border-color: var(--app-accent-subtle-border); }

.status-dot { width: 8px; height: 8px; border-radius: var(--app-radius-pill); display: inline-block; margin-right: var(--app-space-xs); }
.status-dot-running { background: var(--app-success); }
.status-dot-idle    { background: var(--app-decorative); }
.status-dot-failed  { background: var(--app-danger); }


.toast {
  border-radius: var(--app-radius-lg);
  padding: var(--app-space-md) var(--app-space-lg);
  font-size: var(--app-font-size-body-lg);
  border: 1px solid transparent;
  display: flex; gap: var(--app-space-sm); align-items: center;
}
.toast-success { background: var(--app-success-subtle); border-color: var(--app-success-border); color: var(--app-success-text); }
.toast-danger  { background: var(--app-danger-subtle);  border-color: var(--app-danger-border);  color: var(--app-danger-text); }
.toast-warning { background: var(--app-warning-subtle); border-color: var(--app-warning-border); color: var(--app-warning-text); }


.empty-state { text-align: center; padding: var(--app-space-xxl) var(--app-space-lg); }
.empty-icon  { font-size: var(--app-font-size-display); color: var(--app-decorative); }
.empty-title { font-size: var(--app-font-size-subtitle); margin-top: var(--app-space-md); color: var(--app-text-primary); }
.empty-desc  { font-size: var(--app-font-size-body-lg); color: var(--app-text-muted); margin-top: var(--app-space-xs); }


.progress { height: 4px; border-radius: var(--app-radius-pill); background: var(--app-surface-strong); overflow: hidden; }
.progress-bar { display: block; height: 100%; background: var(--app-accent); border-radius: var(--app-radius-pill); }
.skeleton {
  height: 11px;
  border-radius: var(--app-radius-sm);
  background: linear-gradient(90deg, var(--app-surface-muted), var(--app-surface-strong), var(--app-surface-muted));
  background-size: 200% 100%;
  animation: app-skeleton 1.2s ease-in-out infinite;
}
@keyframes app-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }



@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .btn, .field, .select, .switch, .switch::after { transition: none; }
}



.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 20px;
  background:
    radial-gradient(120% 78% at -10% -20%, var(--app-auth-veil-95) 0%, transparent 46%),
    radial-gradient(46% 40% at 96% 40%, var(--app-auth-glow-blue) 0%, transparent 62%),
    linear-gradient(166deg, var(--app-auth-grad-1) 0%, var(--app-auth-grad-2) 32%, var(--app-auth-grad-3) 54%, var(--app-auth-grad-4) 92%);
}


.login-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.login-fx i {
  position: absolute;
  display: block;
  border-radius: 50%;
  transform: translate3d(calc(var(--mx, 0) * var(--fx-x, 24px)),
                         calc(var(--my, 0) * var(--fx-y, 18px)), 0);
}

.login-fx .g1 {
  --fx-x: 30px;
  --fx-y: 22px;
  width: 54vw;
  height: 44vw;
  left: -14vw;
  top: -18vw;
  background: radial-gradient(closest-side, var(--app-auth-veil-92) 0%, transparent 100%);
}

.login-fx .g2 {
  --fx-x: -26px;
  --fx-y: -20px;
  width: 44vw;
  height: 38vw;
  right: -10vw;
  top: 8vh;
  background: radial-gradient(closest-side, var(--app-auth-glow-violet) 0%, transparent 100%);
}

.login-fx .g3 {
  --fx-x: 16px;
  --fx-y: -12px;
  width: 40vw;
  height: 34vw;
  left: 18vw;
  bottom: -14vw;
  background: radial-gradient(closest-side, var(--app-auth-veil-55) 0%, transparent 100%);
}


.login-fx .fx-mesh {
  --mesh: 480px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--mesh);
  height: var(--mesh);
  overflow: hidden;
  transform: translate3d(calc(var(--px, 50vw) - var(--mesh) / 2),
                         calc(var(--py, 50vh) - var(--mesh) / 2), 0);
  -webkit-mask-image: radial-gradient(closest-side, var(--app-auth-mesh-mask-solid) 0%, var(--app-auth-mesh-mask-fade) 38%, transparent 100%);
          mask-image: radial-gradient(closest-side, var(--app-auth-mesh-mask-solid) 0%, var(--app-auth-mesh-mask-fade) 38%, transparent 100%);
}

.login-fx .fx-mesh-in {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100vw + 480px);
  height: calc(100vh + 480px);
  transform: translate3d(calc(var(--mesh) / 2 - var(--px, 50vw)),
                         calc(var(--mesh) / 2 - var(--py, 50vh)), 0);
  background-image:
    radial-gradient(var(--app-auth-mesh-dot) 1px, transparent 1.7px),
    repeating-linear-gradient(to right,  var(--app-auth-mesh-line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, var(--app-auth-mesh-line) 0 1px, transparent 1px 40px);
  background-size: 40px 40px, auto, auto;
}

.login-fx .fx-spot {
  --spot: 380px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--spot);
  height: var(--spot);
  border-radius: 50%;
  transform: translate3d(calc(var(--px, 50vw) - var(--spot) / 2),
                         calc(var(--py, 50vh) - var(--spot) / 2), 0);
  background: radial-gradient(closest-side, var(--app-auth-veil-50) 0%, transparent 74%);
}

@media (prefers-reduced-motion: reduce) {
  .login-fx i { transform: none; }
  .login-fx .fx-mesh,
  .login-fx .fx-spot { display: none; }
}

@media (hover: none), (pointer: coarse) {
  .login-fx .fx-mesh,
  .login-fx .fx-spot { display: none; }
}

.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  padding: 38px 36px 30px;
  background: var(--app-auth-surface);
  border: 1px solid var(--app-auth-card-border);
  border-radius: 20px;
  box-shadow: var(--app-auth-card-shadow);
}


.login-brand {
  display: grid;
  place-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.login-brand img {
  width: 46px;
  height: 46px;
  display: block;
}

.login-brand h1 {
  color: var(--app-auth-text);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.login-brand-sub {
  display: flex;
  align-items: center;
  gap: .55em;
  font-size: .78rem;
  color: var(--app-auth-text-muted);
}

.login-brand-sub i {
  display: block;
  width: 1px;
  height: 1em;
  background: var(--app-auth-divider);
  font-style: normal;
}

.login-brand-sub .cn { letter-spacing: .3em; margin-right: -.3em; }


.login-hint {
  text-align: center;
  color: var(--app-auth-text-muted);
  font-size: .85rem;
  margin-bottom: 22px;
}

.login-error {
  background: var(--app-auth-error-bg);
  color: var(--app-auth-error-fg);
  border: 1px solid var(--app-auth-error-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .85rem;
  line-height: 1.5;
  margin-bottom: 16px;
}

.login-card h2 {
  color: var(--app-auth-text);
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.25rem;
}


.form-group { margin-bottom: 15px; }

.form-group label {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  margin-bottom: 7px;
  color: var(--app-auth-text);
}

.form-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--app-auth-border);
  border-radius: 10px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--app-auth-text);
  background: var(--app-auth-surface);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-input:focus {
  border-color: var(--app-auth-focus-ring);
  box-shadow: 0 0 0 3px var(--app-auth-focus-shadow);
}

.btn-login {
  width: 100%;
  margin-top: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: var(--app-auth-cta-bg);
  color: var(--app-auth-cta-fg);
  font-size: .96rem;
  font-weight: 500;
  font-family: inherit;
  transition: opacity .15s ease, transform .12s ease;
}

.btn-login:hover:not(:disabled) { opacity: .86; }
.btn-login:active:not(:disabled) { transform: translateY(1px); }
.btn-login:disabled { opacity: .45; cursor: default; }


.login-divider {
  display: flex;
  align-items: center;
  margin: 22px 0 16px;
  color: var(--app-auth-text-muted);
  font-size: .78rem;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--app-auth-border);
}

.login-divider span { padding: 0 12px; white-space: nowrap; }

.external-login-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-external {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--app-auth-border);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  color: var(--app-auth-text);
  background: var(--app-auth-surface);
}

.btn-external:hover { background: var(--app-auth-hover-tint); }

.btn-external-github { border-color: var(--app-auth-github-border); color: var(--app-auth-github-fg); }
.btn-external-github:hover { border-color: var(--app-auth-github-fg); }

.btn-external-wechat { border-color: var(--app-auth-wechat-border); color: var(--app-auth-wechat-fg); }
.btn-external-wechat:hover { border-color: var(--app-auth-wechat-hover); }

.btn-external-qq { border-color: var(--app-auth-qq-border); color: var(--app-auth-qq-fg); }
.btn-external-qq:hover { border-color: var(--app-auth-qq-hover); }


.login-back {
  display: block;
  margin-top: 22px;
  text-align: center;
  font-size: .82rem;
  color: var(--app-auth-text-muted);
  text-decoration: none;
  transition: color .15s ease;
}

.login-back:hover { color: var(--app-auth-text); }

@media (max-width: 460px) {
  .login-card { padding: 30px 22px 24px; border-radius: 16px; }
}

.app-shell {
  display: grid;
  grid-template-columns: 76px 1fr;
  height: 100vh;
  overflow: hidden;
}


.app-shell-content {
  display: flex;
  min-width: 0;
  overflow: hidden;
}

.app-shell-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-shell-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--app-space-xxl);
}


.settings-nav {
  width: 224px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--app-surface-subtle);
  border-right: 1px solid var(--app-border-subtle);
  overflow-y: auto;
}

.settings-nav-row {
  display: flex;
  align-items: center;
  margin: 0 var(--app-space-sm);
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: var(--app-space-md);
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 var(--app-space-md);
  border-radius: var(--app-radius-lg);
  color: var(--app-text-secondary);
  font-size: var(--app-font-size-body-lg);
  text-decoration: none;
}
.settings-nav-item:hover { background: var(--app-state-hover); }
.settings-nav-item.active { background: var(--app-accent-subtle); color: var(--app-accent); font-weight: 600; }
.settings-nav-item svg {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}


.pin-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: var(--app-space-xs);
  flex-shrink: 0;
  border-radius: var(--app-radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--app-text-muted);
  font-family: inherit;
}
.pin-toggle:hover { background: var(--app-state-hover); }
.pin-toggle.pin-toggle-active { color: var(--app-accent); }
.pin-toggle svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}


.section-tabbar {
  display: flex;
  gap: var(--app-space-half);
  padding: var(--app-space-md-lg) var(--app-space-xl);
  border-bottom: 1px solid var(--app-border-subtle);
  background: var(--app-surface-base);
  flex-shrink: 0;
}
.section-tab {
  display: flex;
  align-items: center;
  gap: var(--app-space-sm);
  height: 32px;
  padding: 0 var(--app-space-lg);
  border-radius: var(--app-radius-lg);
  color: var(--app-text-tertiary);
  font-size: var(--app-font-size-body-lg);
  text-decoration: none;
}
.section-tab:hover { background: var(--app-state-hover); }
.section-tab.active { background: var(--app-accent-subtle); color: var(--app-accent); font-weight: 600; }
.section-tab svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}


.nav-rail {
  width: 76px;
  background: var(--app-nav-rail);
  border-right: 1px solid var(--app-nav-divider);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
.nav-rail-mid { overflow-y: auto; overflow-x: hidden; }
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--app-space-half);
  padding: var(--app-space-sm) 0;
  width: 100%;
  color: var(--app-nav-text);
  background: transparent; border: none; cursor: pointer; font-family: inherit;
}
.nav-item:hover { background: var(--app-nav-hover); }
.nav-item-active { background: var(--app-state-selected); color: var(--app-accent); font-weight: 600; }
.nav-item svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav-item-label { font-size: var(--app-font-size-micro); }
.nav-divider { width: 34px; height: 1px; background: var(--app-nav-divider); margin: var(--app-space-xs) auto; }


.nav-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 100%;
  border-radius: var(--app-radius-lg);
  color: var(--app-nav-text);
  text-decoration: none;
}
.nav-pin:hover { background: var(--app-nav-hover); }
.nav-pin.active { background: var(--app-state-selected); color: var(--app-accent); }
.nav-pin svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}


.nav-user { padding: var(--app-space-xs) var(--app-space-sm) 0; text-align: center; }
.nav-user-name {
  display: block;
  font-size: var(--app-font-size-micro);
  color: var(--app-nav-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}