/* VEO9 STUDIO — 共享主题样式 (docs / login)，沿用主站设计 tokens */
:root{
  --background:#0a0a09; --card:#121210; --muted:#1a1a17; --input:#23221e;
  --foreground:#f0ece4; --muted-foreground:#827d73; --border:#32302a;
  --color-gold:#c8b99e; --color-fog:#dcd7cd; --color-obsidian:#0a0a09;
  --fontSans:"Inter","Helvetica Neue",Arial,sans-serif;
  --fontMono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --radius:.75rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* 隐藏所有滚动条，但保留滚轮 / 触控滚动（强制，覆盖 macOS「总是显示」）*/
html,body,*{scrollbar-width:none!important;-ms-overflow-style:none!important}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}
body{
  font-family:var(--fontSans);background:var(--background);color:var(--foreground);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  line-height:1.6;font-weight:300;
}
a{color:inherit;text-decoration:none}
::selection{background:#c8b99e33}

/* —— 排版 —— */
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-foreground);font-weight:400}
.tracking-brand{letter-spacing:.25em}
.text-gold{color:var(--color-gold)}
.text-fog{color:var(--color-fog)}
.text-muted{color:var(--muted-foreground)}
h1,h2,h3,h4{font-weight:300;letter-spacing:-.01em;color:var(--color-fog)}
h1{font-size:clamp(32px,4vw,52px);font-weight:200}
h2{font-size:clamp(24px,2.4vw,34px)}
h3{font-size:18px;letter-spacing:.02em}
code,kbd,pre,.mono{font-family:var(--fontMono)}

/* —— 按钮 (复用主站) —— */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:14px 32px;border-radius:2px;
  font-size:12px;letter-spacing:.12em;cursor:pointer;border:none;transition:all .35s ease;white-space:nowrap}
.btn-primary{background:var(--color-gold);color:var(--color-obsidian);font-weight:600}
.btn-primary:hover{background:var(--color-fog);transform:translateY(-1px);box-shadow:0 6px 24px #c8b99e40}
.btn-outline{background:transparent;color:var(--color-gold);border:1px solid #c8b99e80;font-weight:400}
.btn-outline:hover{background:var(--color-gold);color:var(--color-obsidian);border-color:var(--color-gold)}
.btn-block{width:100%;justify-content:center;padding:16px}

/* —— 顶栏 —— */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:20px 48px;background:rgba(10,10,9,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.brand{font-size:18px;letter-spacing:.3em;color:var(--color-gold);font-weight:300}
.topbar nav{display:flex;align-items:center;gap:28px}
.topbar nav a{font-size:12px;letter-spacing:.14em;color:var(--muted-foreground);transition:color .3s}
.topbar nav a:hover{color:var(--color-fog)}

/* —— 表单 / 输入 —— */
.field{margin-bottom:20px}
.field label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-foreground);margin-bottom:9px}
.input{width:100%;background:var(--input);border:1px solid var(--border);border-radius:4px;
  color:var(--foreground);font-family:inherit;font-size:14px;padding:14px 16px;transition:border-color .25s,box-shadow .25s}
.input::placeholder{color:#5a564e}
.input:focus{outline:none;border-color:var(--color-gold);box-shadow:0 0 0 3px #c8b99e22}

/* —— 卡片 / 杂项 —— */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.divider{height:1px;background:var(--border);border:0}
.badge{display:inline-block;font-size:10px;letter-spacing:.1em;padding:3px 9px;border-radius:3px;font-weight:600}
.method-get{background:#3e443433;color:#9fb88a;border:1px solid #5a644b}
.method-post{background:#c8b99e1f;color:var(--color-gold);border:1px solid #c8b99e55}

/* —— 代码块 —— */
.code{position:relative;background:#0e0e0c;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin:16px 0}
.code-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);background:#121210}
.code-head .lang{font-size:11px;letter-spacing:.12em;color:var(--muted-foreground);text-transform:uppercase}
.code pre{padding:18px 20px;overflow-x:auto;font-size:13px;line-height:1.7;color:#cfd8c4}
.code .cp{color:#827d73}.code .ck{color:var(--color-gold)}.code .cs{color:#9fb88a}.code .cn{color:#d9a05b}
.copy-btn{background:transparent;border:1px solid var(--border);color:var(--muted-foreground);font-size:11px;
  letter-spacing:.08em;padding:5px 12px;border-radius:4px;cursor:pointer;transition:all .25s}
.copy-btn:hover{border-color:var(--color-gold);color:var(--color-gold)}

/* —— 进入动画 —— */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.fade{animation:fadeUp .8s cubic-bezier(.22,1,.36,1) both}

/* —— 响应式 —— */
@media(max-width:860px){
  .topbar{padding:14px 18px}
  .brand{font-size:15px;letter-spacing:.16em;white-space:nowrap}
  .topbar nav{gap:14px}
  .topbar nav a{font-size:11px;letter-spacing:.06em;white-space:nowrap}
  .hide-sm{display:none}
  .btn{padding:13px 24px}
}
@media(max-width:480px){
  .topbar{padding:12px 14px}
  .topbar nav{gap:10px}
  .topbar nav a{font-size:10px;letter-spacing:.04em}
}

/* ============ 主题：日/夜 切换 ============ */
:root{ --text-2:#b8b3a8; }              /* 次级正文色(暗色) */

/* ===== 白天模式 · Atelier Daylight（暖沙纸工坊）=====
   三层体系：暖沙画布 #e1d7c7 / 暖纸表面 #f0e8da / 墨 #28231d。
   铜金只做焦点，不再用高亮白把所有层级拉平。 */
:root[data-theme="light"]{
  --background:#e1d7c7; --foreground:#28231d;
  --card:#f0e8da; --card-foreground:#28231d; --popover:#f7f1e7;
  --secondary:#d8ccba; --muted:#ddd2c1; --muted-foreground:#62594c;
  --accent:#dfd0b6; --border:#c8baa4; --input:#f7f1e7;
  --color-gold:#967238; --color-fog:#28231d;
  --color-obsidian:#f5eee2; --color-charcoal:#d8cfc0; --text-2:#5f5649;
}
/* 晨光暖背景网格（docs/login body 可见） */
:root[data-theme="light"] body{
  color:var(--foreground);
  background:
    radial-gradient(135% 95% at 50% -25%, #f2eadc 0%, transparent 55%),
    radial-gradient(85% 70% at 100% 0%, #e8d9bd 0%, transparent 48%),
    radial-gradient(75% 80% at 0% 100%, #d8ccb8 0%, transparent 50%),
    #e1d7c7;
  background-attachment:fixed;
}
/* 重按钮=墨黑+奶油字（高级），铜金留给点睛 */
:root[data-theme="light"] .btn-primary{background:#2b2620;color:#f7f1e5}
:root[data-theme="light"] .btn-primary:hover{background:#1b1813;color:#fff;box-shadow:0 16px 38px -16px #2b262073;transform:translateY(-1px)}
:root[data-theme="light"] .btn-outline{color:#2b2620;border-color:#2b262030}
:root[data-theme="light"] .btn-outline:hover{background:#2b2620;color:#f7f1e5;border-color:#2b2620}
:root[data-theme="light"] .tabs button.active{background:#2b2620;color:#f7f1e5}
/* 暖纸卡片：内顶高光 + 暖棕柔投影，纸片浮起感 */
:root[data-theme="light"] .card,
:root[data-theme="light"] .auth-card{
  box-shadow:0 1px 0 #fffefa inset, 0 2px 4px #6b5a3a12, 0 26px 60px -28px #5b4a2e40;
}
:root[data-theme="light"] .auth-card{border-color:#e2d9c6}
/* 顶栏磨砂暖纸 */
:root[data-theme="light"] .topbar{background:rgba(239,232,220,.9);border-bottom-color:rgba(71,57,39,.2);box-shadow:0 8px 28px rgba(63,49,31,.07)}
/* 代码块：暖象牙底 + 墨字 + 铜/橄榄高亮 */
:root[data-theme="light"] .code{background:#f6efe0;border-color:#ddd2bb}
:root[data-theme="light"] .code-head{background:#efe6d2;border-bottom-color:#ddd2bb}
:root[data-theme="light"] .code pre{color:#40392f}
:root[data-theme="light"] .code .cp{color:#9a9079}
:root[data-theme="light"] .code .cs{color:#5e7a3e}
/* 表单聚焦=铜金柔光 */
:root[data-theme="light"] .input:focus{border-color:#9c7c43;box-shadow:0 0 0 3px #9c7c4322}
/* 侧栏当前项 / 端点徽章 / 选区 = 铜金 */
:root[data-theme="light"] .side a.active{background:#9c7c4314}
:root[data-theme="light"] .method-post{background:#9c7c4314;border-color:#9c7c4340}
:root[data-theme="light"] ::selection{background:#9c7c4333}
/* 登录卡背景：暖光晕 */
:root[data-theme="light"] .auth-main::before{
  background:radial-gradient(60% 50% at 50% 0%, #9c7c4316, transparent 70%),
             radial-gradient(50% 40% at 80% 100%, #c8a86022, transparent 70%)}

/* 浮动主题切换按钮（三页通用） */
.theme-toggle{position:fixed;right:22px;bottom:22px;z-index:999;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:1px solid var(--border);
  background:var(--card);color:var(--color-gold);transition:all .3s ease;
  box-shadow:0 6px 24px #00000033}
.theme-toggle:hover{border-color:var(--color-gold);transform:translateY(-2px)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .icon-sun{display:none}
:root[data-theme="light"] .theme-toggle .icon-sun{display:block}
:root[data-theme="light"] .theme-toggle .icon-moon{display:none}

/* 纸张颗粒质感 overlay（仅白天，三页通用，由 veo9-theme.js 注入 .veo9-grain） */
.veo9-grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:0;transition:opacity .4s ease}
:root[data-theme="light"] .veo9-grain{opacity:.14;mix-blend-mode:multiply;background-size:220px 220px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
