/* static/css/base.css — extracted from index.html (FrameFlow prototype) */
  :root {
    --bg: #050505;
    /* 可复用背景光效模板（设置 → 外观 可调颜色/强度） */
    --ambient-glow-a: rgba(74,222,128,0.16);
    --ambient-glow-b: rgba(34,211,238,0.13);
    --ambient-glow-a-light: rgba(22,163,74,0.12);
    --ambient-glow-b-light: rgba(8,145,178,0.10);
    --bg-elevated: #080808;
    --surface: rgba(255, 255, 255, 0.035);
    --surface-2: rgba(255, 255, 255, 0.06);
    --surface-hover: rgba(255, 255, 255, 0.10);
    --border: #222222;
    --border-strong: #2c2c2c;
    --modal-bg: #1c1c1c;
    --modal-border: #222222;
    --neon: #4ade80;
    --neon-bright: #86efac;
    --neon-dim: rgba(74, 222, 128, 0.12);
    --neon-glow: rgba(74, 222, 128, 0.35);
    --text: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.70);
    --text-muted: rgba(255, 255, 255, 0.45);
    --danger: #ef4444;
    --warning: #f59e0b;
    --radius: 22px;
    --radius-sm: 14px;
    --sidebar-w: 260px;
    --right-w: 534px;
    --content-max: 1320px;
    --accent: #4ade80;
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', monospace;
  }

  html[data-theme="light"] {
    --bg: #f7f8fa;
    --bg-elevated: #ffffff;
    --surface: rgba(0, 0, 0, 0.03);
    --surface-2: rgba(0, 0, 0, 0.06);
    --surface-hover: rgba(0, 0, 0, 0.08);
    --border: rgba(0, 0, 0, 0.12);
    --border-strong: rgba(0, 0, 0, 0.22);
    --neon: #15803d;
    --neon-bright: #16a34a;
    --neon-dim: rgba(22, 163, 74, 0.14);
    --neon-glow: rgba(22, 163, 74, 0.32);
    --modal-bg: #ffffff;
    --modal-border: #d4d4d8;
    --text: #0f1115;
    --text-dim: rgba(0, 0, 0, 0.74);
    --text-muted: rgba(0, 0, 0, 0.62);
    --danger: #dc2626;
    --warning: #d97706;
  }
  html[data-theme="light"] .app-shell {
    /* 浅色主题：光效更淡 + 极淡网格 */
    background-image:
      radial-gradient(560px 560px at 12% -6%, var(--ambient-glow-a-light, rgba(22,163,74,0.10)), transparent 62%),
      radial-gradient(560px 560px at 106% -6%, var(--ambient-glow-b-light, rgba(8,145,178,0.08)), transparent 62%),
      radial-gradient(560px 560px at -6% 106%, var(--ambient-glow-b-light, rgba(8,145,178,0.08)), transparent 62%),
      radial-gradient(560px 560px at 106% 112%, var(--ambient-glow-a-light, rgba(22,163,74,0.10)), transparent 62%),
      radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: auto, auto, auto, auto, 32px 32px;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  }

  * { box-sizing: border-box; }

  /* Unified site-wide scrollbar (WebKit + Firefox) */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
  html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); }
  html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); }
  * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
  html[data-theme="light"] * { scrollbar-color: rgba(0,0,0,0.18) transparent; }

  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* Dot grid background */
  .app-shell {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr var(--right-w);
    grid-template-rows: 64px 1fr;
    grid-template-areas:
      "sidebar topbar topbar"
      "sidebar canvas right";
    transition: grid-template-columns 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background-color: var(--bg);
    /* body 背景光效（漫咔同款）：左上绿光 + 右下青光 + 点阵网格 */
    background-image:
      radial-gradient(560px 560px at 12% -6%, var(--ambient-glow-a, rgba(74,222,128,0.16)), transparent 62%),
      radial-gradient(560px 560px at 106% -6%, var(--ambient-glow-b, rgba(34,211,238,0.13)), transparent 62%),
      radial-gradient(560px 560px at -6% 106%, var(--ambient-glow-b, rgba(34,211,238,0.13)), transparent 62%),
      radial-gradient(560px 560px at 106% 112%, var(--ambient-glow-a, rgba(74,222,128,0.16)), transparent 62%),
      radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
      radial-gradient(rgba(74,222,128,0.06) 1px, transparent 1px);
    background-size: auto, auto, auto, auto, 26px 26px, 52px 52px;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 13px 13px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  }

  .app-shell.collapsed { grid-template-columns: 76px 1fr var(--right-w); }

  /* Disable transitions for one frame on first paint (e.g. restoring collapsed sidebar from storage) */
  .app-shell.no-anim,
  .app-shell.no-anim * { transition: none !important; }

  /* Right panel closed: third column collapses to 0 so the grid transition slides the center content */
  .app-shell.no-right { grid-template-columns: var(--sidebar-w) 1fr 0px; }
  .app-shell.collapsed.no-right { grid-template-columns: 76px 1fr 0px; }

  /* Glass utilities：透明毛玻璃（半透明渐变 + 模糊 + 高光描边） */
  .glass {
    background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius);
    box-shadow:
      0 10px 40px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.08);
  }

  .glass-strong {
    background: linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow:
      0 12px 48px rgba(0,0,0,0.55),
      inset 0 1px 0 rgba(255,255,255,0.10);
  }

  /* 浅色主题：玻璃卡片更通透——纯白底、大模糊低透明度阴影，去掉重黑投影 */
  html[data-theme="light"] .glass {
    background: linear-gradient(145deg, #ffffff, #f7faf8);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow:
      0 8px 24px rgba(0,0,0,0.06),
      inset 0 1px 0 rgba(255,255,255,0.95);
  }
  html[data-theme="light"] .glass-strong {
    background: linear-gradient(145deg, #ffffff, #f4f8f6);
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow:
      0 12px 30px rgba(0,0,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.95);
  }

  .glow-green {
    box-shadow:
      0 0 0 1px rgba(74,222,128,0.35),
      0 0 40px rgba(74,222,128,0.12),
      inset 0 1px 0 rgba(255,255,255,0.06);
  }


/* ── 设置 → 通用偏好 → 语言与字体：全局生效变量 ── */
:root {
  --ff-font-size: 14px;
  --ff-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
  font-size: var(--ff-font-size);
  font-family: var(--ff-font-family);
}
input, button, select, textarea {
  font-family: inherit;
}