/* =========================================================
   BEADIORA · 视觉壳 v2 设计系统
   方法：UI Designer（像素君）—— 设计令牌优先 / WCAG AA / 组件库 / 响应式
   域名锁定品牌名 BEADIORA；图形与字标有机一体（4豆花即「O」）
   ========================================================= */

/* ---- 本地品牌字体（离线可用，不依赖外网） ---- */
@font-face{
  font-family:"Beadiora Display";
  src:url("Beadiora-Display-Italic.ttf?v=20260928-2") format("truetype");
  font-weight:400;font-style:italic;font-display:swap;
}
/* ============ 设计令牌 ============ */
:root{
  /* 中性 / 纸感基底 */
  --bg:#FBF6EF;
  --bg-2:#F4ECDC;
  --surface:#FFFFFF;
  --surface-2:#F7F0E6;
  --ink:#271E2E;          /* 主文字 14:1 on bg */
  --ink-soft:#5F5870;     /* 次文字 5.7:1 on bg (AA) */
  --ink-faint:#6E6678;    /* 弱文字 5.1:1 on bg (AA) */
  --line:#E9DECE;
  --line-strong:#DBCBB4;

  /* 品牌主色（深玫瑰，白字按钮 5.3:1 / 浅底文字 4.9:1，均 AA） */
  --brand:#BE3A60;
  --brand-strong:#A53055;
  --brand-soft:#FBE7EE;
  --brand-tint:#F6D3DF;

  /* 拼豆强调色板（数据/装饰，呼应4豆花） */
  --bead-pink:#F4A9C6;
  --bead-yellow:#F4D98A;
  --bead-purple:#B9A3E8;
  --bead-green:#A6D8B0;
  --bead-blue:#9CC7E8;
  --bead-coral:#E98AA0;

  /* 语义 */
  --ok:#3F9D6D;
  --warn:#C9881F;
  --info:#4C7DC4;

  /* 字体 */
  --f-display:"Beadiora Display",ui-serif,Georgia,serif;
  --f-body:system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* 字号阶梯 */
  --t-xs:12px; --t-sm:14px; --t-base:16px; --t-lg:18px;
  --t-xl:22px; --t-2xl:30px; --t-3xl:42px; --t-4xl:60px;

  /* 间距（4px 基准） */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;

  /* 圆角 */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* 阴影 /  elevation */
  --sh-1:0 1px 2px rgba(39,30,46,.06);
  --sh-2:0 6px 16px -6px rgba(39,30,46,.14);
  --sh-3:0 18px 40px -16px rgba(39,30,46,.22);

  /* 动效 */
  --ease:200ms cubic-bezier(.2,.7,.3,1);
  --ease-slow:380ms cubic-bezier(.2,.7,.3,1);

  --maxw:1180px;
}

/* ============ 基础 ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:var(--t-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:6px}

.eyebrow{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-5)}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-size:var(--t-base);font-weight:600;line-height:1;
  padding:14px 22px;border:1px solid transparent;border-radius:var(--r-pill);
  transition:transform var(--ease),box-shadow var(--ease),background var(--ease);
  min-height:44px;
}
.btn.primary{background:var(--brand);color:#fff;box-shadow:var(--sh-2)}
.btn.primary:hover{background:var(--brand-strong);transform:translateY(-1px)}
.btn.quiet{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--sh-1)}
.btn.quiet:hover{border-color:var(--brand);color:var(--brand)}
.btn.ghost{background:transparent;color:var(--ink-soft)}
.btn.ghost:hover{color:var(--brand)}
.btn.full{width:100%}
.btn.sm{padding:9px 14px;font-size:var(--t-sm);min-height:38px}

/* ============ 顶栏 ============ */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:var(--s-6);
  padding:12px var(--s-5);
  background:rgba(251,246,239,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px;flex:0 0 auto}
.brand-word{display:flex;flex-direction:column;line-height:1.05}
.brand-word strong{font-size:18px;letter-spacing:.04em;font-weight:800}
.brand-word small{font-size:10.5px;color:var(--ink-soft);letter-spacing:.02em}
.desktop-nav{display:flex;gap:var(--s-2);margin-left:auto}
.desktop-nav a{
  padding:9px 14px;border-radius:var(--r-pill);font-weight:600;font-size:var(--t-sm);
  color:var(--ink-soft);transition:background var(--ease),color var(--ease);
}
.desktop-nav a:hover,.desktop-nav a.active{background:var(--surface);color:var(--ink)}
.access-pill{
  background:var(--brand-soft);color:var(--brand-strong);border:1px solid var(--brand-tint);
  font-weight:700;font-size:var(--t-sm);padding:10px 16px;border-radius:var(--r-pill);
  transition:background var(--ease);
}
.access-pill:hover{background:var(--brand-tint)}

/* ============ 通用区 ============ */
.screen{display:none;padding:var(--s-12) 0 var(--s-16)}
.screen.active{display:block;animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============ 首页 Hero ============ */
.home{padding-top:var(--s-12)}
.home-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-12);align-items:center;
}
.lockup{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:var(--t-4xl);line-height:.95;letter-spacing:.01em;
}
.lockup .bead-o{width:.92em;height:.92em;display:inline-block;transform:translateY(.04em)}
.hero-tag{font-size:var(--t-xl);font-weight:700;margin-top:6px;letter-spacing:.02em}
.hero-sub{margin-top:var(--s-4);color:var(--ink-soft);font-size:var(--t-lg);max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.hero-links{display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:var(--s-5);font-size:var(--t-sm)}
.hero-links a{color:var(--brand-strong);font-weight:600;border-bottom:1.5px solid transparent;padding-bottom:2px}
.hero-links a:hover{border-color:var(--brand-tint)}
.hero-links .link-btn{padding:10px 14px;min-height:38px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-soft);box-shadow:var(--sh-1);text-decoration:none}
.hero-links .link-btn:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.trust{margin-top:var(--s-6);font-size:var(--t-sm);color:var(--ink-faint)}

/* 底板预览卡 */
.board-card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:clamp(18px,2.4vw,28px);box-shadow:var(--sh-3);
}
.hero-board-wrap{width:100%;max-width:590px;margin:0 auto;min-width:0}
.card-caption{display:flex;justify-content:space-between;font-size:var(--t-sm);color:var(--ink-soft);margin-bottom:10px}
.pegboard{
  position:relative;width:100%;aspect-ratio:1/1;
  border-radius:var(--r-md);overflow:hidden;
  background:
    radial-gradient(circle at center, #fff 0 30%, #efe6d6 32% 38%, transparent 40%) ,
    repeating-linear-gradient(0deg,#f0e7d8 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,#f0e7d8 0 1px,transparent 1px 22px),
    #fbf4e8;
  box-shadow:inset 0 0 0 1px var(--line);
}
.pegboard .canvas-img{
  position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;
  mix-blend-mode:multiply;opacity:.92;
}
.card-footer{display:flex;justify-content:space-between;margin-top:12px;font-size:var(--t-sm)}
.card-footer b{color:var(--ink)}
.card-footer span{color:var(--ink-soft)}
.float-note{
  position:absolute;background:var(--surface);border:1px solid var(--line-strong);
  font-size:11px;color:var(--ink-soft);padding:6px 10px;border-radius:var(--r-pill);
  box-shadow:var(--sh-1);
}
.float-note.note-a{top:18px;right:-10px}
.float-note.note-b{bottom:24px;left:-12px}
.hero-glow{
  position:absolute;inset:-30% -10% auto;height:240px;z-index:-1;
  background:radial-gradient(closest-side,rgba(244,169,198,.5),transparent 70%);
  filter:blur(8px);
}

/* 信任带 */
.trust-band{
  margin-top:var(--s-16);display:grid;grid-template-columns:1fr 1fr;gap:var(--s-10);
  align-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:var(--s-8);box-shadow:var(--sh-2);
}
.trust-stats{display:flex;gap:var(--s-8)}
.trust-stats b{display:block;font-size:var(--t-2xl);color:var(--brand);font-family:var(--f-display);font-style:italic}
.trust-stats span{font-size:var(--t-sm);color:var(--ink-soft)}
.trust-proof figure{margin:0}
.trust-proof img{width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--line)}
.trust-proof figcaption{font-size:var(--t-xs);color:var(--ink-soft);margin-top:8px}

/* ============ 区块标题 / 步骤 ============ */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);margin-bottom:var(--s-8)}
.section-head h2{font-size:var(--t-2xl);font-weight:800;letter-spacing:.01em}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.step{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-6);box-shadow:var(--sh-1);transition:transform var(--ease),box-shadow var(--ease);
}
.step:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.step span{font-family:var(--f-display);font-style:italic;font-size:var(--t-2xl);color:var(--brand-tint)}
.step i{display:block;font-style:normal;font-size:22px;margin:6px 0 10px}
.step h3{font-size:var(--t-lg);font-weight:700;margin-bottom:6px}
.step p{font-size:var(--t-sm);color:var(--ink-soft)}

.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-8)}
.feature{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-6);
}
.feature small{color:var(--brand);font-weight:700;letter-spacing:.08em;font-size:11px;text-transform:uppercase}
.feature b{display:block;font-size:var(--t-lg);margin:6px 0 6px}
.feature span,.feature a{font-size:var(--t-sm);color:var(--ink-soft)}
.feature a{color:var(--brand-strong);font-weight:600}

/* ============ 裁剪 ============ */
.page-title{display:flex;gap:var(--s-4);align-items:flex-start;margin-bottom:var(--s-8)}
.round-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--surface);font-size:20px;flex:0 0 auto;box-shadow:var(--sh-1);transition:border-color var(--ease)
}
.round-btn:hover{border-color:var(--brand)}
.round-btn.small{width:36px;height:36px;font-size:16px}
.crop-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:var(--s-6);align-items:start}
.glass{background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-lg)}
.crop-stage{padding:var(--s-5);cursor:grab;touch-action:none}
.crop-stage:active{cursor:grabbing}
.checker{
  position:relative;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;
  background:
    conic-gradient(#efe7d8 25%,#fff 0 50%,#efe7d8 0 75%,#fff 0) 0 0/28px 28px;
  display:grid;place-items:center;
}
.checker img{position:absolute;left:50%;top:50%;max-width:none;max-height:none;border-radius:6px;box-shadow:var(--sh-2);will-change:transform,width,height}
.crop-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;border:2px solid var(--brand);border-radius:6px;box-shadow:0 0 0 4000px rgba(39,30,46,.12);pointer-events:auto;cursor:move;touch-action:none}
.crop-frame i{position:absolute;width:14px;height:14px;border:2px solid var(--brand);background:#fff;z-index:2;cursor:nwse-resize;touch-action:none;pointer-events:auto}
.crop-frame i:nth-child(1){top:-7px;left:-7px}.crop-frame i:nth-child(2){top:-7px;right:-7px}
.crop-frame i:nth-child(3){bottom:-7px;left:-7px}.crop-frame i:nth-child(4){bottom:-7px;right:-7px}
.crop-frame i:nth-child(2),.crop-frame i:nth-child(3){cursor:nesw-resize}
.crop-frame b{position:absolute;inset:0;background:
  linear-gradient(var(--brand),var(--brand)) 33% 0/1px 100% no-repeat,
  linear-gradient(var(--brand),var(--brand)) 66% 0/1px 100% no-repeat,
  linear-gradient(var(--brand),var(--brand)) 0 33%/100% 1px no-repeat,
  linear-gradient(var(--brand),var(--brand)) 0 66%/100% 1px no-repeat;opacity:.4;pointer-events:none}
.crop-tip{margin-top:var(--s-4);font-size:var(--t-sm);color:var(--ink-soft)}
.crop-controls{padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4)}
.panel-heading{display:flex;align-items:baseline;gap:8px;margin-bottom:var(--s-3)}
.panel-heading span{font-family:var(--f-display);font-style:italic;color:var(--brand);font-size:var(--t-xl)}
.panel-heading h3{font-size:var(--t-lg);font-weight:700}
.crop-controls label{display:flex;flex-direction:column;gap:6px;font-size:var(--t-sm);color:var(--ink-soft);font-weight:600}
.crop-controls input[type=range]{width:100%;accent-color:var(--brand)}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);
  padding:8px 14px;border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:600;transition:all var(--ease)
}
.chip.active,.chip:hover{border-color:var(--brand);color:var(--brand-strong);background:var(--brand-soft)}
.split-actions{display:flex;gap:var(--s-3)}
.panel-footer{display:flex;gap:var(--s-3);margin-top:var(--s-2)}

/* ============ 制作台 ============ */
.studio-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-5);margin-bottom:var(--s-6);flex-wrap:wrap}
.studio-actions{display:flex;gap:var(--s-3)}
.studio-grid{display:grid;grid-template-columns:260px 1fr 280px;gap:var(--s-5);align-items:start}
.left-panel,.right-panel{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-5)}
.left-panel section,.right-panel .panel-heading{display:flex;flex-direction:column;gap:10px}
.source-preview{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.source-preview b{display:block;padding:8px;font-size:var(--t-sm);background:var(--surface-2)}
.line-button{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 14px;font-size:var(--t-sm);font-weight:600;color:var(--ink);transition:border-color var(--ease);cursor:pointer
}
.line-button:hover{border-color:var(--brand);color:var(--brand-strong)}
.file-input{position:fixed;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mini-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mini-tools button{
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:16px
}
.mini-tools button small{font-size:10px;color:var(--ink-soft)}
.mini-tools button.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-strong)}
.canvas-panel{display:flex;flex-direction:column;gap:var(--s-3)}
.canvas-toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px}
.canvas-toolbar button{border:1px solid var(--line);background:var(--surface);border-radius:8px;width:34px;height:34px;font-size:15px}
.canvas-toolbar button.selected,.canvas-toolbar button:not(.dim):hover{border-color:var(--brand);color:var(--brand-strong)}
.canvas-toolbar .sel{margin-left:auto;font-size:var(--t-sm);font-weight:600;color:var(--brand-strong)}
.canvas-stage{position:relative;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;
  background:repeating-linear-gradient(0deg,#f1e8d9 0 1px,transparent 1px 26px),
             repeating-linear-gradient(90deg,#f1e8d9 0 1px,transparent 1px 26px),#fbf4e8;
  box-shadow:inset 0 0 0 1px var(--line)}
.canvas-stage .canvas-img{position:absolute;inset:8%;width:auto;height:84%;left:8%;object-fit:contain;image-rendering:pixelated;mix-blend-mode:multiply;opacity:.94}
.axis{position:absolute;font-size:9px;color:var(--ink-faint);font-family:var(--f-mono);z-index:2;pointer-events:none;overflow:hidden}
.axis span{display:block;min-width:0;line-height:1;white-space:nowrap;text-align:center;overflow:visible}
.axis.dense{font-size:6.5px;letter-spacing:-.35px}
.axis.top,.axis.bottom{left:8%;right:8%;display:grid;align-items:center}
.axis.top{top:5px}.axis.bottom{bottom:5px}
.axis.side,.axis.right{top:8%;bottom:8%;display:flex;flex-direction:column;justify-content:space-between}
.axis.side{left:4px}.axis.right{right:4px}
.board-line{position:absolute;background:rgba(201,66,103,.55)}
.board-line.vertical{top:8%;bottom:8%;left:50%;width:2px}
.board-line.horizontal{left:8%;right:8%;top:50%;height:2px}
.board-badge{position:absolute;bottom:10px;left:10px;background:var(--surface);border:1px solid var(--line-strong);font-size:11px;padding:6px 10px;border-radius:var(--r-pill);box-shadow:var(--sh-1)}
.canvas-note{font-size:var(--t-xs);color:var(--ink-faint)}
.pattern-viewport{position:absolute;inset:8%;overflow:hidden;border-radius:12px;background:#f5f1ea}
.pattern-canvas{display:block;border-radius:12px;touch-action:none;background:#f5f1ea;cursor:default}
.pattern-canvas.is-pan-enabled{cursor:grab}
.pattern-canvas.is-pan-enabled:active{cursor:grabbing}
.canvas-toolbar .sel button{border:0;background:transparent;font:inherit;color:inherit;padding:0 3px;cursor:pointer}
.canvas-toolbar .sel .fit-button{border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 9px;background:var(--surface);color:var(--ink-soft);font-size:var(--t-xs)}
.canvas-toolbar .sel .fit-button:hover{border-color:var(--brand);color:var(--brand-strong);background:var(--brand-soft)}
.tiny-pattern canvas{display:block;width:100%;height:100%;border-radius:8px}
.studio-notice{position:fixed;left:50%;bottom:28px;z-index:100;transform:translateX(-50%);max-width:min(92vw,460px);padding:11px 16px;border-radius:999px;background:rgba(39,30,46,.9);color:#fff;font-size:13px;box-shadow:var(--sh-2)}
.print-sheets{display:none}
@media print{
  @page{size:A4 portrait;margin:12mm}
  body > *:not(#printSheets){display:none!important}
  #printSheets{display:block!important;color:#241c29;background:#fff}
  .print-sheet{break-after:page;min-height:calc(297mm - 24mm);padding:4mm 0;box-sizing:border-box}
  .print-sheet:last-child{break-after:auto}
  .print-sheet h1{margin:0 0 5mm;font:700 17pt/1.2 Georgia,serif}
  .print-sheet p{margin:0 0 5mm;font:10pt/1.5 Arial,sans-serif;color:#5b5260}
  .print-pattern{width:100%;max-width:186mm;margin:0 auto 6mm}
  .print-pattern svg{display:block;width:100%;height:auto}
  .print-materials{border-top:1px solid #d8ced8;padding-top:4mm;word-break:break-word}
}
.stat-row{display:flex;justify-content:space-between;font-size:var(--t-sm)}
.stat-row b{font-size:var(--t-xl);color:var(--brand);font-family:var(--f-display);font-style:italic}
.color-mini{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.color-mini i{aspect-ratio:1/1;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.board-summary small{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em}
.board-summary b{display:block;font-size:var(--t-base);margin:4px 0}
.board-summary span{font-size:var(--t-sm);color:var(--ink-soft)}

/* 移动端 dock */
.mobile-dock{display:none}

/* ============ 教程 ============ */
.guide-hero{text-align:center;max-width:60ch;margin:0 auto var(--s-10)}
.guide-hero h2{font-size:var(--t-2xl);font-weight:800;margin:8px 0}
.guide-path{display:flex;align-items:center;gap:10px;padding:14px 18px;margin:0 auto var(--s-5);border:1px solid var(--brand-tint);border-left:5px solid var(--brand);border-radius:var(--r-md);background:var(--brand-soft);color:var(--ink)}
.guide-path>b{flex:0 0 auto;padding:4px 8px;border-radius:var(--r-pill);background:var(--brand);color:#fff;font-size:var(--t-xs);font-weight:800;letter-spacing:.08em}
.guide-path strong{font-size:var(--t-base);color:var(--brand-strong)}
.guide-path span{font-size:var(--t-sm);color:var(--ink-soft)}
.guide-starter{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);padding:var(--s-6);margin:0 auto var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg)}
.guide-starter h3{font-size:var(--t-lg);margin:5px 0}
.guide-starter p{max-width:70ch;color:var(--ink-soft);font-size:var(--t-sm)}
.guide-kicker{display:block;color:var(--brand);font-size:var(--t-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.guide-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-bottom:var(--s-6);overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:var(--line)}
.guide-facts div{display:flex;flex-direction:column;gap:3px;padding:var(--s-4);background:var(--surface);text-align:center}
.guide-facts b{font-family:var(--f-display);font-size:var(--t-xl);font-style:italic;color:var(--brand-strong)}
.guide-facts span{font-size:var(--t-xs);color:var(--ink-soft)}
.guide-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.guide-cards article{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--sh-1)}
.guide-shot{margin:0 0 var(--s-5);overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:#f5f1ea;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.guide-image-button{position:relative;display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:zoom-in;text-align:left}
.guide-image-button:focus-visible{outline:2.5px solid var(--brand);outline-offset:-3px}
.guide-shot img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center top;transition:transform .22s ease,filter .22s ease}
.guide-image-button:hover img,.guide-image-button:focus-visible img{transform:scale(1.025);filter:saturate(1.04)}
.guide-image-hint{position:absolute;right:9px;bottom:8px;padding:4px 8px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(39,30,46,.72);color:#fff;font-size:11px;line-height:1.2;opacity:0;transform:translateY(3px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.guide-image-button:hover .guide-image-hint,.guide-image-button:focus-visible .guide-image-hint{opacity:1;transform:none}
.guide-shot figcaption{padding:7px 9px;color:var(--ink-faint);font-size:11px;line-height:1.35;background:var(--surface-2)}
.guide-cards>article>span{display:block;font-family:var(--f-display);font-style:italic;font-size:var(--t-xl);color:var(--brand-tint)}
.guide-cards i{display:block;font-style:normal;font-size:22px;margin:6px 0}
.guide-cards h3{font-size:var(--t-lg);margin-bottom:6px}
.guide-cards p{font-size:var(--t-sm);color:var(--ink-soft)}
.guide-action{margin-top:var(--s-5);padding:12px 14px;border:1px solid var(--brand-tint);border-left:4px solid var(--brand);border-radius:var(--r-sm);background:linear-gradient(135deg,var(--brand-soft),#fff)}
.guide-action b{display:block;color:var(--brand-strong);font-size:var(--t-sm);font-weight:800;letter-spacing:.04em}
.guide-action span{display:block;margin-top:4px;color:var(--ink);font-size:var(--t-sm);line-height:1.5}
.guide-notes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-top:var(--s-6)}
.guide-notes article{padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-lg)}
.guide-notes h3{font-size:var(--t-lg);margin:6px 0 10px}
.guide-notes ul{display:grid;gap:8px;margin:0;padding-left:20px;color:var(--ink-soft);font-size:var(--t-sm)}

/* ============ 教程图片大图预览 ============ */
.guide-lightbox{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:clamp(12px,3vw,32px)}
.guide-lightbox[hidden]{display:none}
.guide-lightbox-scrim{position:absolute;inset:0;background:rgba(39,30,46,.72);backdrop-filter:blur(6px)}
.guide-lightbox-panel{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(960px,100%);max-height:calc(100dvh - 24px);padding:clamp(12px,2.5vw,24px);border:1px solid rgba(255,255,255,.65);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-3);animation:modal-fade .18s ease both}
.guide-lightbox-title{align-self:flex-start;padding-right:42px;color:var(--ink);font-size:var(--t-lg);font-weight:800}
.guide-lightbox-image-wrap{display:grid;place-items:center;width:100%;min-height:0;overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);background:#f5f1ea}
.guide-lightbox-image-wrap img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 124px);object-fit:contain}
.guide-lightbox-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:var(--surface-2);color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
.guide-lightbox-close:hover{background:var(--brand-soft);color:var(--brand-strong)}
.guide-lightbox-tip{color:var(--ink-faint);font-size:var(--t-xs)}

/* ============ AI 口令 ============ */
.prompt-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s-6);margin-top:var(--s-6);align-items:start}
.prompt-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-5)}
.prompt-steps span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font-size:var(--t-xs);color:var(--ink-soft)}
.prompt-steps b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--brand-soft);color:var(--brand-strong);font-size:11px}
.prompt-list{display:flex;flex-direction:column;gap:var(--s-3)}
.prompt-list button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;transition:border-color var(--ease),background var(--ease),transform var(--ease);cursor:pointer}
.prompt-list button:hover{transform:translateY(-1px)}
.prompt-list button b{display:block;font-size:var(--t-base)}
.prompt-list button small{display:block;margin-top:3px;font-size:var(--t-sm);color:var(--ink-soft);line-height:1.45}
.prompt-copy{display:block;min-width:0}
.prompt-thumb{position:relative;display:block;flex:0 0 76px;width:76px;height:76px;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #fff8}
.prompt-thumb::before,.prompt-thumb::after,.prompt-thumb i,.prompt-thumb b{position:absolute;content:"";display:block}
.prompt-thumb b{left:6px;right:6px;bottom:5px;color:#fff;text-align:center;font:800 8px/1.1 var(--f-mono);letter-spacing:.08em;text-shadow:0 1px 2px #39243099}
.prompt-thumb-solid{background:linear-gradient(135deg,#fff 0 35%,#f7d6df 35% 68%,#d5c9ed 68%)}
.prompt-thumb-solid::before{inset:10px 14px 20px;background:repeating-linear-gradient(90deg,#332633 0 7px,transparent 7px 12px),repeating-linear-gradient(0deg,#e8a25f 0 7px,transparent 7px 12px);mix-blend-mode:multiply;opacity:.75}
.prompt-thumb-solid i{width:12px;height:12px;border-radius:3px;background:#ffca63;box-shadow:16px 10px #d95273,32px 1px #5a9f88;transform:rotate(8deg);left:19px;top:17px}
.prompt-thumb-solid i:nth-child(2){left:30px;top:29px;background:#4c3151}.prompt-thumb-solid i:nth-child(3){left:42px;top:18px;background:#fff2d1}
.prompt-thumb-person{background:linear-gradient(#fff 0 60%,#d7e8ed 60%)}
.prompt-thumb-person::before{width:40px;height:40px;left:18px;top:12px;border-radius:48% 48% 42% 42%;background:#f2bc91;border:4px solid #2b2433;box-shadow:inset 7px -1px #f2bc91}
.prompt-thumb-person::after{width:54px;height:27px;left:11px;bottom:7px;border-radius:24px 24px 8px 8px;background:#d35a72;border:4px solid #2b2433}
.prompt-thumb-person i{width:5px;height:8px;left:29px;top:34px;border-radius:50%;background:#2b2433;box-shadow:14px 0 #2b2433}
.prompt-thumb-person b{color:#fff}
.prompt-thumb-double{background:linear-gradient(135deg,#f5e4ee,#e4e8f2)}
.prompt-thumb-double::before,.prompt-thumb-double::after{width:25px;height:29px;top:16px;border-radius:48% 48% 42% 42%;background:#f2bc91;border:3px solid #2b2433}
.prompt-thumb-double::before{left:10px;box-shadow:inset 0 8px #5e3a38}.prompt-thumb-double::after{right:10px;box-shadow:inset 0 8px #3c5872}
.prompt-thumb-double i{width:30px;height:20px;left:7px;bottom:10px;border-radius:16px 16px 4px 4px;background:#e37182;border:3px solid #2b2433;box-shadow:31px 0 #668ec0}
.prompt-thumb-double i:nth-child(2){display:none}
.prompt-thumb-cutout{background:#fff}
.prompt-thumb-cutout::before{width:47px;height:48px;left:15px;top:10px;border-radius:50% 48% 46% 44%;background:#f1c28d;border:4px solid #2b2433;box-shadow:inset -8px -3px #f4e0bd}
.prompt-thumb-cutout::after{width:17px;height:30px;left:6px;top:26px;border-radius:12px;background:#7fbf8c;box-shadow:47px 5px #d97791}
.prompt-thumb-cutout i{width:5px;height:5px;left:29px;top:31px;border-radius:50%;background:#2b2433;box-shadow:15px 0 #2b2433}
.prompt-thumb-pet{background:linear-gradient(#fff 0 58%,#f3dfbd 58%)}
.prompt-thumb-pet::before{width:48px;height:43px;left:14px;top:18px;border-radius:46% 46% 42% 42%;background:#d39a63;border:4px solid #2b2433}
.prompt-thumb-pet::after{width:21px;height:22px;left:14px;top:10px;transform:rotate(-28deg);border-radius:4px 16px 4px 16px;background:#d39a63;border:4px solid #2b2433;box-shadow:34px 0 #d39a63}
.prompt-thumb-pet i{width:6px;height:7px;left:28px;top:36px;border-radius:50%;background:#2b2433;box-shadow:17px 0 #2b2433}
.prompt-thumb-pet b{color:#fff}
.prompt-thumb-scene{background:linear-gradient(#9cc7e8 0 46%,#a6d8b0 46% 70%,#e6bd7a 70%)}
.prompt-thumb-scene::before{width:30px;height:31px;left:23px;top:25px;border-radius:50% 50% 5px 5px;background:#d97791;border:4px solid #2b2433}
.prompt-thumb-scene::after{width:20px;height:20px;left:8px;top:18px;border-radius:50%;background:#f4d98a;box-shadow:47px 12px #f4d98a}
.prompt-thumb-scene i{width:100%;height:5px;left:0;top:49px;background:#fff8}
.prompt-thumb-scene b{color:#2b2433;text-shadow:none}
.prompt-list button.active,.prompt-list button:hover{border-color:var(--brand);background:var(--brand-soft)}
.prompt-output{padding:var(--s-6);border-radius:var(--r-lg);border:1px solid var(--line-strong);box-shadow:var(--sh-1)}
.prompt-output-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.prompt-output-head em{font-size:var(--t-xs);font-style:normal;color:var(--ink-faint)}
.prompt-output-head > span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);font-weight:700}
.prompt-output p{margin:14px 0 var(--s-5);padding:var(--s-5);border-left:5px solid var(--brand);border-radius:0 var(--r-md) var(--r-md) 0;background:linear-gradient(105deg,#fff4f7 0%,#fffaf4 100%);color:var(--ink);font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:650;line-height:1.85;letter-spacing:.015em;box-shadow:inset 0 0 0 1px rgba(201,66,103,.1)}
.prompt-output small{display:block;margin-top:10px;color:var(--ink-soft);font-size:var(--t-sm)}
.prompt-check{display:grid;gap:6px;margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line);font-size:var(--t-sm)}
.prompt-check b{color:var(--ink)}
.prompt-check span{color:var(--ink-soft)}
.prompt-check span::before{content:'✓';display:inline-block;margin-right:7px;color:var(--brand);font-weight:800}
.prompt-note{margin-top:var(--s-6);padding:var(--s-4) var(--s-5);border-left:3px solid var(--brand);background:var(--brand-soft);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--ink-soft);font-size:var(--t-sm);line-height:1.7}
.prompt-note b{color:var(--ink)}

/* ============ 空白板 ============ */
.blank-card{display:grid;grid-template-columns:auto 1fr;gap:var(--s-6);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-8);margin-top:var(--s-6);box-shadow:var(--sh-1)}
.empty-board{width:160px;height:160px}

/* ============ 遮罩 / 弹窗 / 抽屉 ============ */
.scrim{position:fixed;inset:0;background:rgba(39,30,46,.45);backdrop-filter:blur(3px);z-index:50;display:none}
.scrim.show{display:block;animation:fade .2s ease both}
.modal,.drawer{
  position:fixed;z-index:60;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh-3);display:none;
}
.modal.show{display:block;animation:modal-fade .2s ease both}
.drawer.show{display:block;animation:drawer-pop .26s cubic-bezier(.2,.8,.3,1) both}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}
@keyframes drawer-pop{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.modal{
  top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,92vw);
  max-height:calc(100dvh - 32px);overflow:auto;border-radius:var(--r-xl);padding:var(--s-8);text-align:center;
}
.modal.show{transform:translate(-50%,-50%)}
.modal .close,.drawer .close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);font-size:18px}
.modal-star{font-size:26px;color:var(--brand)}
.modal input{
  width:100%;margin:var(--s-4) 0;padding:13px 14px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);font-family:var(--f-mono);letter-spacing:.18em;text-align:center;font-size:var(--t-lg)
}
.modal input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.modal-links{display:flex;justify-content:center;gap:var(--s-5);margin-top:var(--s-4);font-size:var(--t-sm)}
.modal-links a{color:var(--brand-strong);font-weight:600}
.modal small{display:block;margin-top:10px;color:var(--ink-faint);font-size:11px}
.access-data{display:flex;gap:var(--s-4);margin:var(--s-5) 0;justify-content:center}
.access-data span{display:flex;flex-direction:column;gap:2px}
.access-data small{font-size:11px;color:var(--ink-soft)}
.access-data b{font-size:var(--t-base)}

.drawer{
  top:0;right:0;height:100vh;width:min(420px,94vw);
  border-radius:var(--r-xl) 0 0 var(--r-xl);padding:var(--s-8);
  overflow-y:auto;
}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--s-5)}
.drawer-head h2{font-size:var(--t-xl);font-weight:800}
.drawer-copy,.drawer-head p{color:var(--ink-soft);font-size:var(--t-sm);margin-top:6px}
.setting-card,.tool-list button{padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:var(--s-4);background:var(--surface-2)}
.setting-card label{font-weight:700;font-size:var(--t-sm);display:flex;justify-content:space-between;margin-bottom:10px}
.setting-card label b{color:var(--brand)}
.setting-card input[type=range]{width:100%;accent-color:var(--brand)}
.setting-card small{display:block;margin-top:8px;font-size:var(--t-xs);color:var(--ink-soft)}
.choice-grid,.board-presets,.option-grid{display:grid;gap:8px;margin-top:10px}
.choice-grid{grid-template-columns:1fr 1fr}
.board-presets{grid-template-columns:repeat(4,1fr)}
.option-grid{grid-template-columns:repeat(2,1fr)}
.board-presets button{display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:var(--t-sm);font-weight:700}
.board-presets button small{font-weight:500;font-size:10px;color:var(--ink-soft)}
.choice-grid button,.option-grid button{text-align:left;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:var(--t-sm)}
.choice-grid button b,.choice-grid button small{display:block}
.choice-grid button small{color:var(--ink-soft);font-size:11px}
.choice-grid button.active,.option-grid button.active,.board-presets button.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-strong)}
.setting-group{margin-top:var(--s-5)}
.setting-group>b{display:block;font-size:var(--t-sm);font-weight:700;margin-bottom:6px}
.palette-brands button{font-size:var(--t-sm)}
[data-palette-note]{line-height:1.6}
[data-palette-source],.palette-selector a{color:var(--brand-strong);text-decoration:underline;text-underline-offset:2px}
details summary{cursor:pointer;font-weight:700;font-size:var(--t-sm);padding:8px 0;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary span{float:right;font-size:10px;color:var(--brand);background:var(--brand-soft);padding:2px 8px;border-radius:var(--r-pill)}
details[open] summary{border-bottom:1px solid var(--line)}
.mini-details{margin-top:6px}
.tool-list{display:flex;flex-direction:column;gap:8px}
.tool-list button{display:flex;align-items:center;gap:12px;margin:0;text-align:left}
.tool-list button i{font-style:normal;font-size:20px;color:var(--brand)}
.tool-list button b{font-size:var(--t-base)}
.tool-list button small{display:block;color:var(--ink-soft);font-size:11px}
.tool-list button.active{border-color:var(--brand);background:var(--brand-soft)}
.tool-color-picker{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.tool-color-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tool-color-heading b{font-size:var(--t-sm)}
.tool-color-heading strong{color:var(--brand-strong);font-size:var(--t-sm);white-space:nowrap}
.tool-color-picker>p{margin:7px 0 10px;color:var(--ink-soft);font-size:var(--t-xs);line-height:1.55}
.tool-color-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-height:190px;overflow:auto;padding:2px;overscroll-behavior:contain}
.tool-color-grid button{display:grid;place-items:center;gap:3px;min-width:0;padding:5px 2px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink-soft);font-size:9px;cursor:pointer}
.tool-color-grid button i{display:block;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),inset 2px 2px 3px rgba(255,255,255,.42)}
.tool-color-grid button.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-strong);box-shadow:0 0 0 2px rgba(201,66,103,.12)}

/* 材料抽屉 */
.material-stats{display:flex;gap:var(--s-5);margin-bottom:var(--s-4)}
.material-stats b{font-size:var(--t-xl);color:var(--brand);font-family:var(--f-display);font-style:italic}
.material-stats span{font-size:var(--t-sm);color:var(--ink-soft)}
.progress{margin-bottom:var(--s-4)}
.progress b{font-size:var(--t-sm);font-weight:700}
.progress i{display:block;height:10px;border-radius:var(--r-pill);background:var(--surface-2);margin-top:6px;overflow:hidden}
.progress i em{display:block;height:100%;width:19%;background:var(--brand)}
.tabs{display:flex;gap:6px;margin:var(--s-4) 0}
.tabs button{flex:1;padding:9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:var(--t-sm);font-weight:600;color:var(--ink-soft)}
.tabs button.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-strong)}
.palette-selector{margin:var(--s-4) 0}
.palette-selector>b{font-size:var(--t-sm);font-weight:700}
.color-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.color-list .row{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--t-sm)}
.color-list .row.highlighted{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-strong)}
.color-list .row i{width:18px;height:18px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.color-list .row b{margin-left:auto;font-family:var(--f-mono);color:var(--ink-soft)}

/* 导出抽屉 */
.export-card{display:flex;gap:12px;align-items:center;padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);margin-bottom:var(--s-4)}
.tiny-pattern{width:64px;height:64px;flex:0 0 auto}
.export-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:var(--s-4) 0 8px;padding:5px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.export-modes button{display:flex;flex-direction:column;gap:2px;align-items:center;padding:9px 5px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink-soft);cursor:pointer;font:inherit}
.export-modes button b{font-size:var(--t-sm)}
.export-modes button small{font-size:10px;color:var(--ink-faint)}
.export-modes button.active,.export-modes button:hover{border-color:var(--brand);background:var(--surface);color:var(--brand-strong)}
.export-modes button.active small{color:var(--brand)}
.export-mode-note{margin:0 2px var(--s-4);color:var(--ink-soft);font-size:var(--t-xs);line-height:1.5}
.export-list{display:flex;flex-direction:column;gap:8px}
.export-list button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);transition:border-color var(--ease)}
.export-list button:hover{border-color:var(--brand)}
.export-list i{font-style:normal;font-weight:800;font-size:11px;background:var(--brand-soft);color:var(--brand-strong);padding:5px 8px;border-radius:6px;width:38px;text-align:center}
.export-list b{font-size:var(--t-base)}
.export-list small{display:block;color:var(--ink-soft);font-size:11px}
.export-note{font-size:11px;color:var(--ink-faint);margin-top:10px}

/* 专注视图 */
.focus-view{position:fixed;inset:0;z-index:70;background:var(--bg);display:none;flex-direction:column}
.focus-view.show{display:flex}
.focus-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line);background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(120%)}
.focus-back{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:rgba(255,255,255,.72);box-shadow:var(--sh-1);color:var(--ink);font-size:var(--t-sm);font-weight:700;white-space:nowrap}
.focus-back:hover{border-color:var(--brand);color:var(--brand-strong);background:var(--surface)}
.focus-back span{font-size:20px;line-height:1;font-weight:500}
.focus-summary{min-width:0}
.focus-summary b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-lg)}
.focus-summary small{display:block;margin-top:3px;color:var(--ink-soft);font-size:var(--t-xs)}
.focus-status{padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:rgba(255,255,255,.64);color:var(--ink-soft);font-size:var(--t-xs);white-space:nowrap}
.focus-main{flex:1;min-height:0;display:grid;place-items:center;padding:var(--s-6)}
.focus-viewport{position:relative;width:min(88vmin,920px);height:min(calc(100vh - 185px),780px);min-width:240px;min-height:240px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:#f5f1ea;box-shadow:var(--sh-2);touch-action:none}
.focus-viewport .pattern-canvas{display:block;width:100%;height:100%;touch-action:none}
.focus-viewport .axis{font-size:10px;color:var(--ink-faint);z-index:2}
.focus-viewport .axis.dense{font-size:7.5px;letter-spacing:-.35px}
.focus-viewport .axis.top,.focus-viewport .axis.bottom{left:4%;right:4%}
.focus-viewport .axis.side,.focus-viewport .axis.right{top:4%;bottom:4%}
.focus-viewport .axis.side{left:4px}.focus-viewport .axis.right{right:4px}
.focus-colors{display:none;align-items:center;gap:8px;overflow-x:auto;padding:8px var(--s-5);border-top:1px solid var(--line);background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(120%)}
.focus-colors.show{display:flex}
.focus-colors button{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:rgba(255,255,255,.8);color:var(--ink-soft);font-size:var(--t-xs);font-weight:700}
.focus-colors button i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.focus-colors button.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-strong)}
.focus-toolbar{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px var(--s-5) calc(9px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(120%);scrollbar-width:none}
.focus-toolbar::-webkit-scrollbar{display:none}
.focus-toolbar button{min-height:38px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-pill);background:rgba(255,255,255,.74);color:var(--ink-soft);font-size:var(--t-xs);font-weight:700;white-space:nowrap}
.focus-toolbar button:hover,.focus-toolbar button.selected,.focus-toolbar button.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-strong)}

/* ============ 页脚 ============ */
.site-foot{background:#F1E7DE;color:var(--ink);border-top:1px solid var(--line);padding:var(--s-12) 0;margin-top:var(--s-16)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:var(--s-8);flex-wrap:wrap;align-items:center}
.site-foot .lockup{color:var(--ink);font-size:var(--t-2xl)}
.site-foot small{color:var(--ink-soft);font-size:var(--t-sm)}
.site-foot .foot-links{display:flex;gap:var(--s-5);font-size:var(--t-sm)}
.site-foot .foot-links a{color:var(--ink-soft)}
.site-foot .foot-links a:hover{color:var(--brand)}
.filing-links{width:100%;display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:12px}.filing-links a{color:var(--ink-faint)}.filing-links a:hover{color:var(--brand)}

/* ============ 响应式 ============ */
@media (max-width:1024px){
  .studio-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .home-grid{grid-template-columns:1fr;gap:var(--s-8)}
  .steps,.feature-row{grid-template-columns:1fr}
  .crop-layout{grid-template-columns:1fr}
  .guide-starter{align-items:flex-start;flex-direction:column}
  .guide-cards{grid-template-columns:repeat(2,1fr)}
  .prompt-layout{grid-template-columns:1fr}
  .trust-band{grid-template-columns:1fr}
  .desktop-nav{display:none}
  .mobile-nav{display:flex}
}
@media (max-width:560px){
  :root{--t-4xl:44px;--t-3xl:34px}
  .trust-stats{flex-direction:column;gap:var(--s-4)}
  .guide-path{align-items:flex-start;flex-direction:column;gap:5px;padding:12px 14px}
  .guide-path strong{font-size:var(--t-sm)}
  .guide-facts{grid-template-columns:repeat(2,1fr)}
  .guide-cards{grid-template-columns:1fr}
  .guide-notes{grid-template-columns:1fr}
  .prompt-output-head{align-items:flex-start;flex-direction:column;gap:4px}
  .blank-card{grid-template-columns:1fr;text-align:center;justify-items:center}
}

@media (max-width:700px){
  .focus-head{grid-template-columns:auto minmax(0,1fr);gap:8px;padding:10px 12px}
  .focus-back{min-height:36px;padding:7px 10px;font-size:12px}
  .focus-back span{font-size:18px}
  .focus-summary b{font-size:15px}
  .focus-summary small{font-size:11px}
  .focus-status{grid-column:2;padding:4px 8px;justify-self:start;font-size:10px}
  .focus-main{padding:10px}
  .focus-viewport{width:100%;height:100%;min-width:0;min-height:0;border-radius:var(--r-md)}
  .focus-colors{padding-left:12px;padding-right:12px}
  .focus-toolbar{justify-content:flex-start;overflow-x:auto;gap:5px;padding-left:8px;padding-right:56px;scroll-snap-type:x proximity}
  .focus-toolbar button{min-width:42px;padding:8px 9px}
}

/* 移动端底部导航 / dock */
.mobile-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:45;display:none;
  align-items:center;justify-content:space-around;gap:4px;
  background:rgba(39,30,46,.78);backdrop-filter:blur(18px) saturate(120%);
  border-top:1px solid rgba(255,255,255,.16);padding:8px 10px;
}
.mobile-nav a,.mobile-nav button{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;font-size:11px;color:#EDE6F2;font-weight:600;flex:1}
.mobile-nav button{font-size:11px;color:#F4C1D0}
.mobile-nav i{font-style:normal;font-size:20px}
.mobile-dock{
  position:fixed;bottom:64px;left:0;right:0;z-index:44;justify-content:space-around;
  background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(120%);border-top:1px solid var(--line);
  padding:8px 14px;transition:transform var(--ease-slow),opacity var(--ease);
}
.mobile-dock button{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;font-size:11px;color:var(--ink-soft)}
.mobile-dock i{font-style:normal;font-size:18px}
.dock-handle{display:none;position:fixed;left:50%;bottom:10px;z-index:46;align-items:center;gap:5px;transform:translateX(-50%);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:7px 14px;background:rgba(255,255,255,.84);backdrop-filter:blur(18px);box-shadow:var(--sh-2);color:var(--ink-soft);font-size:12px;font-weight:700}
.dock-handle i{font-style:normal;font-size:15px;line-height:1}

/* 尊重减少动效 */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* 装饰性光晕不能在移动端制造横向滚动条。 */
html,body{overflow-x:hidden}
[hidden]{display:none!important}
html.is-locked,body.is-locked{overflow:hidden!important;overscroll-behavior:none}

@media (max-width:860px){
  .screen{padding-bottom:calc(var(--s-16) + 18px)}
  .site-foot{margin-bottom:64px;padding-bottom:calc(var(--s-12) + 12px)}
  .hero-board-wrap{max-width:620px}
  .mobile-nav{display:flex}
  /* 首页卡片的悬浮装饰在窄屏会压到标题，不作为功能信息保留。 */
  .hero-board-wrap .float-note{display:none}
  body.studio-mode .mobile-nav{display:none!important}
  body.studio-mode .mobile-dock{display:flex;bottom:0;z-index:46}
  body.studio-mode .mobile-dock.is-hidden{display:none!important}
  .dock-handle.is-visible{display:inline-flex}
}