/* ======================================================================
   CreatAgent 品牌基础样式（T014）：只消费 tokens.css 里的 --b-* 令牌。
   分四层：0 场景（天 / 地平线 / 海 / 纸纹）｜100 内容｜200 外框角落（标志、菜单、页脚）｜
   手机画框（.phone）复用 design/ui-v2/frames 的尺寸，App 页面在画框里再铺一遍场景。
   ====================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{
  min-height:100dvh;background:var(--b-paper);color:var(--b-ink);
  font:var(--b-fs-sm)/var(--b-lh-body) var(--b-sans);
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--b-t-theme) var(--b-ease),color var(--b-t-theme) var(--b-ease);
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:1px solid var(--b-ink);outline-offset:3px}
h1,h2,h3{font-weight:400;text-wrap:balance}
.num{font-variant-numeric:tabular-nums}
.serif{font-family:var(--b-serif)}
.mono{font-family:var(--b-mono)}
.label{font:500 var(--b-fs-xs)/1 var(--b-mono);letter-spacing:var(--b-tracking-label);text-transform:uppercase;color:var(--b-ink-2)}

/* ---------- 0. 场景 ---------- */
.scene{position:relative;isolation:isolate;overflow:hidden;background:var(--b-sky-top)}
.scene>.sky,.scene>.sea,.scene>.grain,.scene>.stars{position:absolute;inset:0;pointer-events:none}
.scene>.sky{
  background:linear-gradient(to bottom,var(--b-sky-top) 0%,var(--b-sky-bottom) 100%);
  transition:background var(--b-t-theme) var(--b-ease);
}
.scene>.sea{
  top:auto;height:var(--b-horizon);
  background:
    repeating-linear-gradient(176deg,transparent 0 11px,rgba(var(--b-paper-rgb),var(--b-wave-hi)) 11px 13px,transparent 13px 29px),
    repeating-linear-gradient(183deg,transparent 0 17px,rgba(var(--b-ink-rgb),var(--b-wave-lo)) 17px 18px,transparent 18px 41px),
    linear-gradient(to bottom,var(--b-sea-top),var(--b-sea-bottom));
  border-top:1px solid rgba(var(--b-paper-rgb),.35);
  transition:background var(--b-t-theme) var(--b-ease);
  animation:seaDrift 46s linear infinite;
}
:root[data-theme="dark"] .scene>.sea{border-top-color:rgba(var(--b-paper-rgb),.08)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .scene>.sea{border-top-color:rgba(var(--b-paper-rgb),.08)}}
@keyframes seaDrift{from{background-position:0 0,0 0,0 0}to{background-position:-180px 0,140px 0,0 0}}
.scene>.stars{
  opacity:0;transition:opacity var(--b-t-theme) var(--b-ease);
  background-image:
    radial-gradient(1px 1px at 12% 18%,rgba(var(--b-paper-rgb),.7) 50%,transparent 51%),
    radial-gradient(1px 1px at 33% 9%,rgba(var(--b-paper-rgb),.55) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 57% 23%,rgba(var(--b-paper-rgb),.8) 50%,transparent 51%),
    radial-gradient(1px 1px at 71% 6%,rgba(var(--b-paper-rgb),.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 86% 31%,rgba(var(--b-paper-rgb),.6) 50%,transparent 51%),
    radial-gradient(1px 1px at 22% 41%,rgba(var(--b-paper-rgb),.45) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 36%,rgba(var(--b-paper-rgb),.65) 50%,transparent 51%),
    radial-gradient(1px 1px at 64% 48%,rgba(var(--b-paper-rgb),.4) 50%,transparent 51%),
    radial-gradient(1px 1px at 92% 14%,rgba(var(--b-paper-rgb),.6) 50%,transparent 51%),
    radial-gradient(1px 1px at 5% 52%,rgba(var(--b-paper-rgb),.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 78% 44%,rgba(var(--b-paper-rgb),.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 39% 55%,rgba(var(--b-paper-rgb),.35) 50%,transparent 51%);
}
:root[data-theme="dark"] .scene>.stars{opacity:1}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .scene>.stars{opacity:1}}
.scene>.grain{
  opacity:var(--b-grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:220px 220px;
}
:root[data-theme="dark"] .scene>.grain{mix-blend-mode:screen}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .scene>.grain{mix-blend-mode:screen}}

/* 地平线上方的主句：底边锚在地平线上方一个空隙处 */
.scene .above{
  position:absolute;left:0;right:0;z-index:100;
  bottom:calc(var(--b-horizon) + var(--b-horizon-gap));
  padding-inline:var(--b-frame);text-align:center;
}
@media (max-width:900px){.scene .above{padding-inline:var(--b-frame-md)}}
@media (max-width:480px){.scene .above{padding-inline:var(--b-frame-sm)}}
.quote{
  font:400 var(--b-fs-quote)/var(--b-lh-quote) var(--b-serif);
  max-width:var(--b-measure);margin-inline:auto;text-wrap:balance;color:var(--b-ink);
}

/* ---------- 200. 外框角落 ---------- */
.corner{position:absolute;z-index:200;font:500 var(--b-fs-xs)/1 var(--b-mono);letter-spacing:var(--b-tracking-label);text-transform:uppercase;color:var(--b-ink);display:flex;gap:22px;align-items:center}
.corner.tl{top:var(--b-frame);left:var(--b-frame)}
.corner.tr{top:var(--b-frame);right:var(--b-frame)}
.corner.bl{bottom:var(--b-frame);left:var(--b-frame)}
.corner.br{bottom:var(--b-frame);right:var(--b-frame)}
@media (max-width:900px){.corner.tl,.corner.bl{left:var(--b-frame-md)}.corner.tr,.corner.br{right:var(--b-frame-md)}.corner.tl,.corner.tr{top:var(--b-frame-md)}.corner.bl,.corner.br{bottom:var(--b-frame-md)}}
@media (max-width:480px){.corner.tl,.corner.bl{left:var(--b-frame-sm)}.corner.tr,.corner.br{right:var(--b-frame-sm)}.corner.tl,.corner.tr{top:var(--b-frame-sm)}.corner.bl,.corner.br{bottom:var(--b-frame-sm)}}
.corner a,.corner button{opacity:.78;transition:opacity var(--b-t-hover) ease}
.corner a:hover,.corner button:hover{opacity:1}

/* 标志：新月 C（icon/a-crescent.svg 的线稿版）：月牙随墨色，怀里一点光是唯一的暖金 */
.emblem{display:inline-flex;align-items:center;gap:10px;color:var(--b-ink)}
.emblem svg{width:22px;height:22px;display:block}
.emblem .moon{fill:currentColor}
.emblem .dot{fill:var(--b-glow)}
.emblem .word{font:500 var(--b-fs-xs)/1 var(--b-mono);letter-spacing:var(--b-tracking-label)}

/* 链接旁的小星：悬停才转 */
.star{position:relative}
.star::after{
  content:"";position:absolute;right:-18px;top:50%;width:10px;height:10px;transform:translateY(-50%);
  background:currentColor;opacity:0;transition:opacity var(--b-t-hover) ease;
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}
.star:hover::after{opacity:.9;animation:starSpin .85s linear infinite}
@keyframes starSpin{to{transform:translateY(-50%) rotate(360deg)}}

/* ---------- 表单与按钮（登录页、官网下载） ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font:500 var(--b-fs-xs)/1 var(--b-mono);letter-spacing:.08em;color:var(--b-ink-2)}
.field input{
  width:100%;height:50px;padding:0 14px;border-radius:var(--b-radius);
  border:1px solid var(--b-line-strong);background:transparent;color:var(--b-ink);
  font:var(--b-fs-md)/1 var(--b-sans);letter-spacing:.02em;
}
.field input::placeholder{color:var(--b-ink-3)}
.field input:focus{border-color:var(--b-ink);outline:0}
.field .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;
  border-radius:var(--b-radius);background:var(--b-ink);color:var(--b-paper);
  font:500 var(--b-fs-sm)/1 var(--b-sans);letter-spacing:.04em;white-space:nowrap;
  transition:opacity var(--b-t-hover) ease;
}
.btn:hover{opacity:.9}
.btn.ghost{background:transparent;color:var(--b-ink);border:1px solid var(--b-line-strong)}
.btn.text{background:transparent;color:var(--b-ink-2);height:auto;padding:0;font-family:var(--b-mono);font-size:var(--b-fs-xs);letter-spacing:.08em}
.btn.text:hover{color:var(--b-ink)}

/* ---------- 手机画框（沿用 ui-v2 的 390×844） ---------- */
.ph-col{--s:1;display:flex;flex-direction:column;gap:10px;align-items:center}
@media (max-width:440px){.ph-col{--s:.86}}
@media (max-width:380px){.ph-col{--s:.78}}
.ph-box{width:calc(390px*var(--s));height:calc(844px*var(--s))}
.phone{width:390px;height:844px;transform:scale(var(--s));transform-origin:top left;background:var(--b-device);border-radius:54px;padding:12px;box-shadow:0 24px 60px rgba(var(--b-ink-rgb),.28),0 0 0 1px rgba(var(--b-paper-rgb),.06) inset}
.scr{position:relative;width:100%;height:100%;border-radius:42px;overflow:hidden;background:var(--b-paper);color:var(--b-ink);font:var(--b-fs-sm)/var(--b-lh-body) var(--b-sans);display:flex;flex-direction:column}
.scr .isl{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:122px;height:36px;background:var(--b-device-island);border-radius:20px;z-index:220}
.scr .sb{position:absolute;top:0;left:0;right:0;z-index:210;height:54px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 30px 6px;font:600 15px/1 var(--b-sans)}
.scr .sb .r{display:flex;gap:5px;align-items:center}
.scr .sig{display:inline-flex;gap:1.5px;align-items:flex-end}.scr .sig i{display:block;width:3px;background:currentColor;border-radius:1px}
.scr .bat{width:26px;height:12px;border:1.5px solid currentColor;border-radius:4px;position:relative;opacity:.9}.scr .bat::after{content:"";position:absolute;inset:2px;right:6px;background:currentColor;border-radius:1.5px}
.scr .home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:currentColor;opacity:.85;z-index:210}
.scr .scene{flex:1;min-height:0}
.scr .corner{font-size:11px}
.scr .corner.tl,.scr .corner.bl{left:var(--b-frame-sm)}
.scr .corner.tr,.scr .corner.br{right:var(--b-frame-sm)}
.scr .corner.tl,.scr .corner.tr{top:66px}
.scr .corner.bl,.scr .corner.br{bottom:34px}
.scr .above{padding-inline:var(--b-frame-sm)}
.scr .quote{font-size:21px;line-height:1.75}

/* ---------- 标注（设计稿模式用，样稿页面默认不显示） ---------- */
.m{position:absolute;z-index:300;width:18px;height:18px;border-radius:50%;background:var(--b-ink);color:var(--b-paper);font:600 10px/18px var(--b-mono);text-align:center;box-shadow:0 0 0 2px var(--b-paper)}
body:not(.annot) .m{display:none}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}