/* ═══════════════════════════════════════════════════════════════════════
   风暴方舟 · Foundation v2（2026-10-13）
   —— 设计真值全部取自 ChatGPT/Codex 官方生产 CSS（chatgpt.com app.css）：
      系统字体栈 / gray-fixed 25 档 / 官方蓝谱 / 4px 基准 / 0.5px 发丝线 /
      官方圆角与阴影档位 / 官方动效曲线。
   浅色为 :root 默认；深色由 <html data-theme="dark"> 覆盖（跟随系统由 JS 落锤）。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 官方字体：OpenAI Sans 三档静态字重（品牌位专用） ── */
@font-face{font-family:'OpenAI Sans';src:url('/fonts/OpenAISans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'OpenAI Sans';src:url('/fonts/OpenAISans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'OpenAI Sans';src:url('/fonts/OpenAISans-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ── Token：浅色（默认） ── */
:root{
  /* 字体（UI=系统栈，与官方逐字一致；品牌位用 --f-brand） */
  --f-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --f-brand:'OpenAI Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* 灰阶（官方 gray-fixed） */
  --g0:#fff;--g25:#fcfcfc;--g50:#f9f9f9;--g100:#ededed;--g150:#dfdfdf;--g200:#cdcdcd;
  --g250:#b9b9b9;--g300:#afafaf;--g350:#9f9f9f;--g400:#8f8f8f;--g450:#767676;--g500:#5d5d5d;
  --g550:#4f4f4f;--g600:#414141;--g650:#393939;--g700:#303030;--g750:#282828;--g800:#212121;
  --g850:#1c1c1c;--g900:#181818;--g950:#131313;--g1000:#0d0d0d;
  /* 蓝（官方唯一强调色谱） */
  --b25:#f5faff;--b50:#e5f3ff;--b100:#99ceff;--b200:#66b5ff;--b300:#339cff;--b400:#0285ff;--b500:#0169cc;--b600:#004f99;--b700:#003f7a;

  /* 语义（浅色） */
  --bg:var(--g0);            /* 画布 */
  --surface:var(--g0);       /* 抬升面（卡片/胶囊/弹窗） */
  --sub:var(--g50);          /* 下沉面（侧栏/输入底） */
  --sunken:var(--g25);       /* 更深一档（备用） */
  --hover:rgba(13,13,13,.05);
  --pressed:rgba(13,13,13,.08);
  --sel:var(--g100);         /* 选中行填充 */
  --tx1:#1a1c1f;             /* 一级文字（官方 light foreground） */
  --tx2:color-mix(in oklab,var(--tx1) 60%,transparent);
  --tx3:color-mix(in oklab,var(--tx1) 30%,transparent);
  --line:rgba(13,13,13,.08);       /* 发丝线 */
  --line-2:rgba(13,13,13,.16);     /* 强线/聚焦 */
  --accent:var(--b400);      /* 链接/强调 */
  --accent-soft:var(--b50);
  --bubble-bg:var(--b50);    /* 用户消息气泡底 */
  --bubble-tx:var(--b300);   /* 用户消息气泡字 */
  --btn-bg:var(--g1000);     /* 主按钮（黑，官方） */
  --btn-tx:var(--g0);
  --btn-hover:#2f2f2f;
  --ok:#2ba05c;--warn:#c77e1a;--danger:#d64545;
  --ok-soft:rgba(43,160,92,.1);--warn-soft:rgba(199,126,26,.1);--danger-soft:rgba(214,69,69,.09);
  --code-bg:var(--g50);      /* 代码/终端块底 */
  --code-tx:var(--g1000);
  --code-label:#8f8f8f;

  /* 字号（官方 codex-browser 档） */
  --fs-xs:12px;--fs-sm:14px;--fs-base:16px;--fs-lg:18px;--fs-xl:20px;--fs-2xl:24px;--fs-3xl:30px;--fs-4xl:36px;
  --ls-body:-.15px;--ls-head:-.02em;
  --lh:1.5;

  /* 圆角（官方档位） */
  --r-2xs:2px;--r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:10px;--r-xl:12px;--r-2xl:16px;--r-3xl:20px;--r-4xl:24px;--r-pill:28px;--r-full:9999px;

  /* 阴影（官方档位，克制） */
  --hairline:0 0 0 .5px var(--line);
  --sh-1:0 1px 2px -1px rgba(0,0,0,.08);
  --sh-2:0 8px 16px -4px rgba(0,0,0,.12);
  --sh-3:0 16px 32px -8px rgba(0,0,0,.18);

  /* 动效（官方曲线/时长） */
  --ease-enter:cubic-bezier(.19,1,.22,1);
  --ease-exit:cubic-bezier(.8,0,.4,1);
  --ease-move:cubic-bezier(.65,0,.35,1);
  --dur-1:.15s;--dur-2:.3s;

  /* 布局 */
  --side-w:275px;
  --topbar-h:44px;

  /* 模块微色系（官方增强版）：低饱和主题色——模块图标块/空态/强调点 */
  --hue-blue:#0285ff;   --hue-blue-soft:rgba(2,133,255,.10);
  --hue-violet:#7c5cff; --hue-violet-soft:rgba(124,92,255,.10);
  --hue-indigo:#4f46e5; --hue-indigo-soft:rgba(79,70,229,.10);
  --hue-teal:#0d9488;   --hue-teal-soft:rgba(13,148,136,.10);
  --hue-amber:#c77e1a;  --hue-amber-soft:rgba(199,126,26,.10);
  --hue-rose:#d64545;   --hue-rose-soft:rgba(214,69,69,.10);
  --hue-green:#2ba05c;  --hue-green-soft:rgba(43,160,92,.10);

  color-scheme:light;
}

/* ── Token：深色 ── */
[data-theme="dark"]{
  --bg:var(--g900);
  --surface:var(--g800);
  --sub:var(--g950);
  --sunken:var(--g850);
  --hover:rgba(255,255,255,.06);
  --pressed:rgba(255,255,255,.1);
  --sel:var(--g800);
  --tx1:var(--g150);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);
  --accent:var(--b200);
  --accent-soft:rgba(2,133,255,.16);
  --bubble-bg:#00284d;
  --bubble-tx:var(--b100);
  --btn-bg:var(--g0);
  --btn-tx:var(--g1000);
  --btn-hover:var(--g150);
  --ok:#66d492;--warn:#ffc46b;--danger:#ff8585;
  --ok-soft:rgba(102,212,146,.13);--warn-soft:rgba(255,196,107,.13);--danger-soft:rgba(255,133,133,.13);
  --code-bg:#000;
  --code-tx:#fff;
  --code-label:#b4b4b4;
  --hairline:0 0 0 .5px var(--line);
  --sh-1:0 1px 2px -1px rgba(0,0,0,.4);
  --sh-2:0 8px 16px -4px rgba(0,0,0,.5);
  --sh-3:0 16px 32px -8px rgba(0,0,0,.6);
  /* 模块微色系（深色档：提亮+提高透明度） */
  --hue-blue:#66b5ff;   --hue-blue-soft:rgba(102,181,255,.14);
  --hue-violet:#a08cff; --hue-violet-soft:rgba(160,140,255,.14);
  --hue-indigo:#9d9bff; --hue-indigo-soft:rgba(157,155,255,.14);
  --hue-teal:#2dd4bf;   --hue-teal-soft:rgba(45,212,191,.14);
  --hue-amber:#ffc46b;  --hue-amber-soft:rgba(255,196,107,.14);
  --hue-rose:#ff8585;   --hue-rose-soft:rgba(255,133,133,.14);
  --hue-green:#66d492;  --hue-green-soft:rgba(102,212,146,.14);
  color-scheme:dark;
}

/* ── Reset / Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;tab-size:4;line-height:var(--lh)}
body{
  font-family:var(--f-ui);
  font-size:var(--fs-base);
  line-height:var(--lh);
  letter-spacing:var(--ls-body);
  color:var(--tx1);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;letter-spacing:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
ul,ol{list-style:none}
table{border-collapse:collapse;border-spacing:0}
h1,h2,h3,h4{font-weight:600;letter-spacing:var(--ls-head);line-height:1.25;color:var(--tx1)}
::selection{background:rgba(2,133,255,.2)}
[data-theme="dark"] ::selection{background:rgba(255,255,255,.22)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(13,13,13,.18);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:rgba(13,13,13,.3)}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ═══ 通用组件 ═══ */

/* ── 按钮 ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 16px;border-radius:var(--r-full);
  font-size:var(--fs-sm);font-weight:500;white-space:nowrap;
  transition:background var(--dur-1) var(--ease-move),color var(--dur-1) var(--ease-move),border-color var(--dur-1) var(--ease-move),opacity var(--dur-1);
  user-select:none;
}
.btn:active{transform:translateY(.5px)}
.btn-primary{background:var(--btn-bg);color:var(--btn-tx)}
.btn-primary:hover{background:var(--btn-hover)}
.btn-primary:disabled{background:var(--g200);color:var(--g0);cursor:not-allowed}
[data-theme="dark"] .btn-primary:disabled{background:var(--g600);color:var(--g300)}
.btn-secondary{background:var(--surface);color:var(--tx1);box-shadow:var(--hairline)}
.btn-secondary:hover{background:var(--hover)}
.btn-ghost{background:transparent;color:var(--tx1)}
.btn-ghost:hover{background:var(--hover)}
.btn-danger-ghost{background:transparent;color:var(--danger)}
.btn-danger-ghost:hover{background:var(--danger-soft)}
.btn-sm{height:30px;padding:0 12px;font-size:var(--fs-xs)}
.btn-lg{height:44px;padding:0 22px;font-size:var(--fs-base)}
.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--r-full);display:inline-flex;align-items:center;justify-content:center;color:var(--tx2)}
.btn-icon:hover{background:var(--hover);color:var(--tx1)}
.btn .ico{width:18px;height:18px;flex-shrink:0}
.btn-block{width:100%}

/* ── 表单 ── */
.field{
  width:100%;height:40px;padding:0 12px;border-radius:var(--r-lg);
  background:var(--surface);color:var(--tx1);font-size:var(--fs-sm);
  box-shadow:0 0 0 .5px var(--line-2);
  outline:none;transition:box-shadow var(--dur-1);
}
.field::placeholder{color:var(--tx3)}
.field:focus{box-shadow:0 0 0 1px var(--tx1)}
textarea.field{height:auto;min-height:80px;padding:10px 12px;resize:vertical;line-height:1.5}
select.field{appearance:none;cursor:pointer;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238f8f8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.field-pill{border-radius:var(--r-full);height:44px;padding:0 18px}
.field-label{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--tx2);margin-bottom:6px}
.field-hint{font-size:var(--fs-xs);color:var(--tx3);margin-top:6px}

/* ── chips / 标签 ── */
.chip{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border-radius:var(--r-full);background:var(--hover);color:var(--tx1);
  font-size:var(--fs-xs);font-weight:500;cursor:pointer;
  transition:background var(--dur-1);
}
.chip:hover{background:var(--pressed)}
.chip.is-on{background:var(--btn-bg);color:var(--btn-tx)}
.chip.is-soft{background:var(--accent-soft);color:var(--accent)}
.chip .ico{width:14px;height:14px}
.badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:var(--r-full);background:var(--hover);color:var(--tx2);font-size:11px;font-weight:500;letter-spacing:0}
.badge-ok{background:var(--ok-soft);color:var(--ok)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}
.badge-danger{background:var(--danger-soft);color:var(--danger)}
.badge-accent{background:var(--accent-soft);color:var(--accent)}

/* ── 卡片 ── */
.card{background:var(--surface);border-radius:var(--r-4xl);box-shadow:var(--hairline);padding:20px}
.card-flat{background:var(--sub);border-radius:var(--r-2xl);padding:16px}
.card-hover{transition:box-shadow var(--dur-1)}
.card-hover:hover{box-shadow:0 0 0 .5px var(--line-2)}
.card-title{font-size:var(--fs-base);font-weight:600;letter-spacing:var(--ls-head)}
.card-sub{font-size:var(--fs-xs);color:var(--tx3);margin-top:4px}

/* ── 菜单 / 下拉 ── */
.menu{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--hairline),var(--sh-2);padding:6px;min-width:180px}
.menu-item{
  display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:var(--r-lg);
  font-size:var(--fs-sm);color:var(--tx1);cursor:pointer;transition:background var(--dur-1);
}
.menu-item:hover{background:var(--hover)}
.menu-item.is-on{background:var(--sel)}
.menu-item .ico{width:16px;height:16px;color:var(--tx2)}
.menu-label{padding:8px 10px 4px;font-size:var(--fs-xs);color:var(--tx3);font-weight:500}
.menu-sep{height:.5px;background:var(--line);margin:6px 4px}

/* ── 弹窗 ── */
.modal-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:90;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease-move);
}
.modal-mask.show{opacity:1;pointer-events:auto}
.modal{
  width:100%;max-width:440px;background:var(--surface);border-radius:var(--r-4xl);
  box-shadow:var(--sh-3);padding:24px;
  transform:scale(.97) translateY(6px);transition:transform var(--dur-2) var(--ease-enter);
}
.modal-mask.show .modal{transform:none}
.modal-title{font-size:var(--fs-lg);font-weight:600;letter-spacing:var(--ls-head);margin-bottom:14px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* ── Toast ── */
.toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(8px);
  background:var(--surface);color:var(--tx1);border-radius:var(--r-xl);box-shadow:var(--hairline),var(--sh-2);
  padding:10px 16px;font-size:var(--fs-sm);z-index:120;opacity:0;pointer-events:none;
  transition:opacity var(--dur-2) var(--ease-enter),transform var(--dur-2) var(--ease-enter);
  max-width:min(90vw,420px);text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast-err{color:var(--danger)}

/* ── 加载 / 空态 ── */
.spinner{
  width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--line-2);border-top-color:var(--tx1);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:var(--hover);border-radius:var(--r-md);animation:sk 2s var(--ease-move) infinite}
@keyframes sk{50%{opacity:.55}}
.empty{padding:56px 20px;text-align:center;color:var(--tx3)}
.empty .ico{width:32px;height:32px;margin:0 auto 12px;color:var(--tx3)}
.empty b{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--tx2);margin-bottom:4px}
.empty p{font-size:var(--fs-xs)}

/* ── 表格 ── */
.table{width:100%;font-size:var(--fs-sm)}
.table th{height:38px;text-align:left;font-size:var(--fs-xs);font-weight:500;color:var(--tx3);border-bottom:.5px solid var(--line);padding:0 10px;white-space:nowrap}
.table td{height:44px;padding:0 10px;border-bottom:.5px solid var(--line);color:var(--tx1);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tr:hover td{background:var(--hover)}

/* ── 代码 / 终端块（官方执行输出样式） ── */
.codeblock{
  background:var(--code-bg);color:var(--code-tx);border-radius:var(--r-xl);
  padding:12px 14px;font-family:var(--f-mono);font-size:var(--fs-xs);line-height:1.6;
  overflow-x:auto;letter-spacing:0;
}
.codeblock .label{color:var(--code-label);display:block;margin-bottom:6px;font-family:var(--f-ui)}

/* ── 工具类 ── */
.hair{outline:.5px solid var(--line);outline-offset:-.5px}
.muted{color:var(--tx3)}
.row{display:flex;align-items:center;gap:8px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:8px}
.grow{flex:1;min-width:0}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 模块微色系工具（容器加 .tint-x，内部 .tic/空态图标自动取色） ── */
.tint-blue{--tint:var(--hue-blue);--tint-soft:var(--hue-blue-soft)}
.tint-violet{--tint:var(--hue-violet);--tint-soft:var(--hue-violet-soft)}
.tint-indigo{--tint:var(--hue-indigo);--tint-soft:var(--hue-indigo-soft)}
.tint-teal{--tint:var(--hue-teal);--tint-soft:var(--hue-teal-soft)}
.tint-amber{--tint:var(--hue-amber);--tint-soft:var(--hue-amber-soft)}
.tint-rose{--tint:var(--hue-rose);--tint-soft:var(--hue-rose-soft)}
.tint-green{--tint:var(--hue-green);--tint-soft:var(--hue-green-soft)}