/* ============================================================
   云网页 CloudPage · Design Tokens
   主题基调参考 siyiyun.cn /assets/css/main.css
   主色 #ff6900 · 中性灰阶 · 栅格底纹 · 玻璃拟态
   ============================================================ */
:root {
  /* 主色与状态色 */
  --o: #ff6900;
  --o-hover: #ff7d1f;
  --o-press: #e85f00;
  --o-soft: rgba(255, 105, 0, .12);
  --o-soft-2: rgba(255, 105, 0, .2);
  --p: #f97316;

  /* 中性阶 */
  --h: #18181b;
  --g: #3f3f46;
  --f: #71717a;
  --e: #a1a1aa;
  --d: #d4d4d8;
  --c: #e4e4e7;
  --b: #f4f4f5;
  --a: #fafafa;
  --w: #fff;
  --canvas: #f5f5f5;

  /* 语义色 */
  --blue: #2563eb;
  --blue-soft: rgba(37, 99, 235, .12);
  --green: #16a34a;
  --green-soft: rgba(22, 163, 74, .12);
  --purple: #7c3aed;
  --purple-soft: rgba(124, 58, 241, .12);
  --cyan: #0891b2;
  --cyan-soft: rgba(8, 145, 178, .12);
  --pink: #db2777;
  --pink-soft: rgba(219, 39, 119, .12);
  --yellow: #ca8a04;
  --yellow-soft: rgba(202, 138, 4, .14);
  --red: #dc2626;
  --red-soft: rgba(220, 38, 38, .12);

  /* 面板 */
  --panel: #ffffff;
  --panel-2: #fbfbfc;
  --line: #e8e8ec;
  --line-2: #f0f0f3;

  /* 排版 */
  --font: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Courier New', monospace;

  /* 圆角 */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-xl: 18px;

  /* 阴影 */
  --sh-1: 0 1px 2px rgba(24, 24, 27, .05);
  --sh-2: 0 2px 8px rgba(24, 24, 27, .07), 0 1px 2px rgba(24, 24, 27, .04);
  --sh-3: 0 8px 28px rgba(24, 24, 27, .10), 0 2px 6px rgba(24, 24, 27, .05);
  --sh-o: 0 8px 28px rgba(255, 105, 0, .22);

  /* 尺寸 */
  --topbar-h: 52px;
  --statusbar-h: 30px;
  --rail-w: 264px;
  --insp-w: 328px;

  --dur: .18s;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

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

/* hidden 属性必须生效：避免被组件自身的 display 规则覆盖 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--h);
  background: var(--canvas);
  background-image:
    linear-gradient(rgba(0, 0, 0, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .028) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  font-size: 13px;
}

::selection { background: var(--o); color: #fff; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
input, textarea, select { outline: none; }
ul, ol { list-style: none; }

/* 滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d9d9de; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #bcbcc4; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ============ 通用原子 ============ */
.cp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500;
  color: var(--g);
  background: var(--w);
  border: 1px solid var(--line);
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.cp-btn:hover { border-color: #d4d4d8; background: var(--a); color: var(--h); }
.cp-btn:active { transform: translateY(.5px); }
.cp-btn.icon { width: 30px; padding: 0; justify-content: center; }
.cp-btn.ghost { background: transparent; border-color: transparent; }
.cp-btn.ghost:hover { background: var(--b); }
.cp-btn.primary {
  background: var(--o); color: #fff; border-color: var(--o);
  box-shadow: 0 1px 2px rgba(255, 105, 0, .3);
}
.cp-btn.primary:hover { background: var(--o-hover); border-color: var(--o-hover); color: #fff; }
.cp-btn.dark { background: var(--h); color: #fff; border-color: var(--h); }
.cp-btn.dark:hover { background: #2b2b31; color: #fff; }
/* ghost 与 primary / dark 同时存在时的显式覆盖。
   两者的选择器优先级相同（0,2,0），只靠源码顺序决定胜负 ——
   一旦 .ghost 排在后面，它的 background: transparent 就会盖掉实心底色，
   只留下 .primary 的 color: #fff，变成"白图标 + 透明底"而彻底看不见。
   这三条用 0,3,0 的优先级把组合情况钉死，不再依赖书写顺序。 */
.cp-btn.ghost.primary {
  background: var(--o); border-color: var(--o); color: #fff;
  box-shadow: 0 1px 2px rgba(255, 105, 0, .3);
}
.cp-btn.ghost.primary:hover { background: var(--o-hover); border-color: var(--o-hover); color: #fff; }
.cp-btn.ghost.dark { background: var(--h); border-color: var(--h); color: #fff; }
.cp-btn.ghost.dark:hover { background: #2b2b31; border-color: #2b2b31; color: #fff; }
.cp-btn[disabled] { opacity: .45; pointer-events: none; }

.cp-input {
  height: 28px; width: 100%;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--w);
  font-size: 12.5px;
  transition: all var(--dur) var(--ease);
}
.cp-input:focus { border-color: var(--o); box-shadow: 0 0 0 3px var(--o-soft); }
textarea.cp-input { height: auto; padding: 7px 9px; resize: vertical; line-height: 1.6; }

.cp-tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 7px;
  border-radius: var(--r-xs);
  font-size: 11px; font-weight: 500;
  background: var(--b); color: var(--f);
}

.cp-sep { height: 1px; background: var(--line-2); margin: 4px 0; }

.cp-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 34px 18px; text-align: center;
  color: var(--e); font-size: 12px; line-height: 1.7;
}
.cp-empty svg { opacity: .5; }

.cp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }