/* Rise — 居中舞台 ＋ 底部步骤面板（与 Relief 同一套骨架）。
   顶栏中间是七步步骤条；舞台中间是会动的预览（第一步左边多一栏数据编辑），
   底部面板只放这一步的几个控件，两头是上一步 / 下一步。 */

body{height:100dvh;margin:0;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);color:var(--text)}
body>header{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:60px;padding:0 24px;
  background:var(--bg);border-bottom:1px solid var(--border)}
body>header .brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:21px;font-weight:650;letter-spacing:-.01em;min-width:0}
body>header .brand-mark{width:23px;height:23px;color:var(--text);display:block;flex:none}
body>header .brand-sub{font:10px var(--mono);letter-spacing:2px;margin:5px 0 0 12px;color:var(--text-3);white-space:nowrap}
/* 列位写死：空状态时步骤条隐藏，右侧按钮不能因此挤到中间那一列 */
.steps{grid-column:2}
.header-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px}
.head-btn{display:inline-flex;align-items:center;font-size:13px;padding:7px 14px;border-radius:var(--r-pill);color:var(--text-2);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.head-btn:hover{background:var(--surface-3);color:var(--text)}
#theme{padding:0;width:34px;height:34px;flex:none;display:grid;place-items:center;background:transparent;border-color:var(--border);color:var(--text-2)}
#theme svg{width:16px;height:16px}
#theme:hover{background:var(--surface-3);color:var(--text)}
[hidden]{display:none!important}

/* 步骤条 */
.steps{display:flex;align-items:center;gap:3px;padding:4px;border-radius:var(--r-pill);background:var(--surface-3)}
.steps button{display:flex;align-items:center;gap:7px;border:0;background:transparent;padding:5px 13px 5px 6px;border-radius:var(--r-pill);
  color:var(--text-2);font-size:12.5px;white-space:nowrap}
.steps button:hover{background:transparent;color:var(--text)}
.steps button i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:600 11px/1 var(--mono);font-style:normal;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border)}
.steps button.done i,.steps button[aria-current=step] i{background:var(--text);color:var(--bg);box-shadow:none}
.steps button[aria-current=step]{background:var(--surface-2);color:var(--text);box-shadow:0 1px 3px #0002}

main{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding:26px 40px 0}
button.ghost{background:transparent;border-color:transparent;color:var(--text-2);padding:6px 12px;font-size:13px;white-space:nowrap}
button.ghost:hover{background:var(--surface-3);color:var(--text);border-color:transparent}
button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:600;white-space:nowrap}
button.primary:hover{background:var(--accent);border-color:var(--accent);opacity:.88}

/* 舞台：尺寸容器，里面的画布 / 裁切框按比例塞进来 */
.stage{flex:1;min-height:0;width:100%;max-width:980px;position:relative;display:grid;place-items:center;container-type:size}
/* 画布透明的地方（背景缩小后露白）透出半透明棋盘格 —— 只在预览里，导出不带 */
.preview{display:block;border-radius:12px;box-shadow:0 0 0 1px var(--border),0 22px 50px -30px #0008;
  background:repeating-conic-gradient(#8883 0 25%,#8881 0 50%) 0 0/16px 16px}

/* ── 底部步骤面板 ── */
.dock{flex:none;margin:18px 0 22px;display:flex;align-items:center;gap:16px;padding:10px 12px;border-radius:24px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border),0 10px 30px -18px #0004;max-width:100%}
.dock .ctls{display:flex;align-items:flex-end;gap:18px;min-width:0}
.dock .nav{padding:8px 16px;white-space:nowrap;flex:none}
.dock .nav.back{padding:8px 12px}
.ctl{display:flex;flex-direction:column;gap:6px;min-width:0}
.lab{font-size:11.5px;color:var(--text-3);white-space:nowrap;display:flex;justify-content:space-between;gap:10px}
.lab output{font-family:var(--mono);color:var(--text)}
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:var(--r-pill);background:var(--surface-3);align-self:flex-start}
.seg button{padding:4px 11px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-2);font-size:12.5px;white-space:nowrap}
.seg button:hover{background:transparent;color:var(--text)}
.seg button[aria-pressed=true]{background:var(--surface-2);color:var(--text);box-shadow:0 1px 3px #0002}
.dock input[type=range]{width:130px;margin:5px 0;height:4px;accent-color:var(--accent);cursor:pointer}
.row{display:flex;gap:6px}
.pill{padding:5px 13px;font-size:12.5px;white-space:nowrap}
.swatches{display:flex;gap:6px;align-items:center}
.swatches button{width:24px;height:24px;padding:0;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px #0002}
.swatches button[aria-pressed=true]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
.swatches label{position:relative;width:24px;height:24px;border-radius:50%;overflow:hidden;cursor:pointer;
  background:conic-gradient(#ff6b6b,#fcc419,#51cf66,#22b8cf,#845ef7,#ff6b6b)}
.swatches label input{position:absolute;inset:0;opacity:0;cursor:pointer}
.field{border:1px solid var(--border-control);background:var(--surface-2);border-radius:var(--r-pill);padding:5px 13px;font-size:12.5px;color:var(--text);width:200px}
.col{display:flex;flex-direction:column;gap:6px}
.tpls{display:grid;grid-template-columns:repeat(5,60px);gap:6px}
.tpls button{position:relative;padding:0;width:60px;height:45px;border:0;border-radius:9px;overflow:hidden;background:repeating-conic-gradient(#8883 0 25%,#8881 0 50%) 0 0/8px 8px;display:grid;place-items:center}
.tpls button canvas{display:block;max-width:100%;max-height:100%}
.tpls button[aria-pressed=true]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
.tpls button span{position:absolute;left:3px;right:3px;bottom:3px;font:600 8.5px/1.4 var(--sans);border-radius:99px;background:#ffffffe0;color:#0d0d0d;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.readout{font:12px var(--mono);color:var(--text-2);white-space:nowrap;padding:5px 0}
.hint{margin:2px 0 0;font-size:11.5px;color:var(--text-3)}
.swatches button.auto{width:auto;padding:0 10px;border-radius:var(--r-pill);font-size:11.5px;color:var(--text-2);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-control)}

/* 画面上直接改字：透明点击区 + 闪烁光标 + 原位编辑框 */
.text-layer{position:absolute;pointer-events:none}
.txt-hit{position:absolute;padding:0;border:0;border-radius:8px;background:transparent;cursor:text;pointer-events:auto;
  outline:1.5px dashed transparent;outline-offset:2px;transition:outline-color .15s,background .15s}
.txt-hit:hover,.txt-hit:focus-visible{outline-color:#ffffffcc;background:#ffffff14;box-shadow:0 0 0 1px #0000001f}
.txt-caret{position:absolute;width:2px;border-radius:1px;pointer-events:none;animation:caret 1.06s steps(1) infinite}
@keyframes caret{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.text-editor{position:absolute;margin:0;padding:0;border:0;resize:none;overflow:hidden;background:transparent;pointer-events:auto;
  outline:1.5px dashed #ffffffcc;outline-offset:6px;border-radius:4px;caret-color:currentColor;white-space:pre-wrap;word-break:break-all}

/* 导入样式弹窗 */
.import-dialog{width:min(460px,calc(100vw - 32px));padding:22px 22px 18px;border:1px solid var(--border);border-radius:var(--r-panel);
  background:var(--surface-2);color:var(--text);box-shadow:0 24px 60px #0004}
.import-dialog::backdrop{background:#0006}
.import-dialog h2{margin:0 0 6px;font-size:16px}
.import-dialog p{margin:0 0 12px;font-size:12.5px;color:var(--text-2);line-height:1.6}
.import-dialog a{color:inherit}
.import-dialog kbd{font:11px var(--mono);padding:1px 6px;border-radius:6px;background:var(--surface-3)}
.import-paste{position:relative;display:grid;place-items:center;min-height:120px;padding:16px;border-radius:var(--r-card);text-align:center;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-control);font-size:12.5px;color:var(--text-2);cursor:pointer}
.import-paste:hover,.import-paste:focus-visible{box-shadow:inset 0 0 0 1.5px var(--text);color:var(--text);outline:none}
.import-paste input{position:absolute;inset:0;opacity:0;cursor:pointer}
.chip{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--r-pill);background:var(--surface-3);font:12px var(--mono);color:var(--text);white-space:nowrap}
.import-dialog textarea{width:100%;box-sizing:border-box;resize:vertical;padding:10px 12px;border-radius:var(--r-card);border:1px solid var(--border-control);
  background:var(--surface);color:var(--text);font:12px var(--mono)}
.import-error{min-height:1.2em;color:var(--danger)!important;margin:8px 0 0!important}
.import-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}

.veil{position:fixed;inset:12px;z-index:50;display:grid;place-items:center;border-radius:var(--r-panel);pointer-events:none;
  background:color-mix(in srgb,var(--bg) 70%,transparent);outline:2px solid var(--text);outline-offset:-2px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:16px;font-weight:600}
.toast{position:fixed;left:50%;top:74px;transform:translateX(-50%);z-index:60;margin:0;padding:9px 16px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-fg);font-size:13px;box-shadow:0 8px 24px #0003;max-width:calc(100vw - 32px)}

/* ── 窄屏：步骤条换到第二行，面板折行 ── */
@media(max-width:860px){
  body>header{grid-template-columns:1fr auto;height:auto;padding:10px 16px;row-gap:10px}
  body>header .brand-sub{display:none}
  .steps{grid-column:1/-1;grid-row:2;justify-self:center;overflow-x:auto;max-width:100%}
  .header-right{grid-column:2}
  .steps button{padding:4px 9px 4px 4px}
  main{padding:14px 16px 0}
  .dock{flex-wrap:wrap;justify-content:center;gap:10px 14px;margin:12px 0 14px}
  .dock .ctls{flex-wrap:wrap;justify-content:center}
  .toast{top:116px}                /* 窄屏顶栏是两行（品牌 + 步骤条），提示条放到它下面 */
}
@media(max-width:480px){.steps button{font-size:0;gap:0;padding:4px}.steps button i{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.txt-caret{animation:none}}

/* ── Rise：舞台 = 数据栏（仅第一步）＋ 预览 ─────────────────────────── */
.stage{max-width:1240px;display:flex;align-items:stretch;gap:22px;container-type:normal;place-items:initial}
.editor{flex:0 0 360px;min-height:0;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--r-panel);background:var(--surface);
  box-shadow:0 1px 2px #0000000a,0 18px 40px -26px #0000004d;overflow:auto;align-self:flex-start;max-height:100%}
.ed-head{display:flex;align-items:center;gap:8px}
.ed-head b{font-size:13px;font-weight:600;flex:none;white-space:nowrap}
.ed-head .count{font:11.5px var(--mono);color:var(--text-3);margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ed-head button{padding:4px 11px;font-size:12px}
.ed-tip{margin:0;font-size:11.5px;color:var(--text-3);line-height:1.7}
.ed-icon svg{width:13px;height:13px;vertical-align:-2px}

/* 数据行：一行一颗胶囊，靠阴影区分，不画分隔线。横轴那一行整颗反色（黑底白字），一眼就能找到 */
.rows{display:flex;flex-direction:column;gap:8px}
.drow{display:flex;align-items:center;gap:6px;min-height:40px;padding:4px 4px 4px 5px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text);
  box-shadow:0 1px 2px #0000000f,0 6px 16px -10px #00000047;transition:background .15s,color .15s,box-shadow .15s}
.drow:focus-within{box-shadow:0 0 0 1.5px var(--text),0 6px 16px -10px #00000047}
.drow .tag{flex:none;min-width:34px;padding:5px 7px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--text-2);font:600 11px/1 var(--sans);text-align:center;white-space:nowrap}
.drow.empty .tag{background:transparent;color:var(--text-3);font-weight:400}
.drow .dval{flex:1;min-width:0;border:0;background:transparent;color:inherit;font:12.5px/1 var(--mono);padding:6px 2px;outline:none}
.drow .dval::placeholder{color:var(--text-3);font-family:var(--sans);opacity:.8}
.drow .meta{flex:none;font:11px/1 var(--mono);color:var(--text-3);white-space:nowrap}
.drow .meta .amb{padding:4px 9px;font:11px/1 var(--sans);border-radius:var(--r-pill);border:1px dashed var(--border-control);background:transparent;color:var(--text-2)}
.drow .meta .amb:hover{border-style:solid;color:var(--text)}
.axis-btn{flex:none;width:30px;height:30px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--text-3);cursor:pointer}
.axis-btn svg{width:15px;height:15px}
.axis-btn:hover{background:var(--border);color:var(--text)}
.drow.axis{background:var(--accent);color:var(--accent-fg);box-shadow:0 1px 2px #0000001a,0 10px 22px -12px #00000080}
.drow.axis .tag{background:color-mix(in srgb,var(--accent-fg) 18%,transparent);color:var(--accent-fg)}
.drow.axis .meta{color:color-mix(in srgb,var(--accent-fg) 60%,transparent)}
.drow.axis .dval::placeholder{color:color-mix(in srgb,var(--accent-fg) 55%,transparent)}
.drow.axis .axis-btn{background:var(--accent-fg);color:var(--accent)}
.add-row{align-self:flex-start;padding:5px 12px;font-size:12px;border-radius:var(--r-pill);border:0;background:var(--surface-2);color:var(--text-2);
  box-shadow:0 1px 2px #0000000f,0 6px 16px -10px #00000040}
.add-row:hover{color:var(--text)}
.add-row:disabled{opacity:.4;cursor:not-allowed}

.view{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.canvas-wrap{flex:1;min-height:0;width:100%;position:relative}
.canvas-wrap .preview{position:absolute}
.playbar{flex:none;display:flex;align-items:center;gap:10px;max-width:100%}
.playbar .play{width:32px;height:32px;padding:0;display:grid;place-items:center;flex:none}
.playbar .play svg{width:14px;height:14px}
.playbar input[type=range]{width:min(320px,40vw);accent-color:var(--accent);cursor:pointer}
.playbar output{font:11.5px var(--mono);color:var(--text-2);min-width:74px;white-space:nowrap}
.tabs{display:flex;gap:4px;overflow-x:auto;max-width:48vw}
.tabs button{padding:4px 11px;font-size:12px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.tabs button i{width:8px;height:8px;border-radius:2px}
.tabs button[aria-pressed=true]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}

/* 缩略图网格：图表类型、风格、排版 */
/* 按行排、列数由 --cols 给：读起来从左到右；放不下时整块横向滚动 */
.thumbs{display:grid;grid-template-columns:repeat(var(--cols,9),72px);gap:6px;overflow-x:auto;max-width:100%;padding:4px}
/* 面板里其余控件保持原宽，只让缩略图这一栏收窄（收窄后横向滚动） */
.dock .ctls>*{flex:none}
.dock .ctls>.grow{flex:0 1 auto;min-width:160px}
.dock .ctls{min-width:0;flex:0 1 auto;flex-wrap:wrap;row-gap:10px}     /* 真放不下就折行，按钮不能被挤出屏幕 */
.thumbs button{position:relative;padding:0;width:72px;height:54px;border:0;border-radius:9px;overflow:hidden;
  background:repeating-conic-gradient(#8883 0 25%,#8881 0 50%) 0 0/8px 8px;display:grid;place-items:center}
.thumbs button canvas{display:block;max-width:100%;max-height:100%}
.thumbs button[aria-pressed=true]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
.thumbs button span{position:absolute;left:3px;right:3px;bottom:3px;font:600 8.5px/1.45 var(--sans);border-radius:99px;background:#ffffffe6;color:#0d0d0d;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.thumbs button b{position:absolute;top:3px;right:3px;font:600 8px/1 var(--sans);padding:2px 5px;border-radius:99px;background:#0d0d0d;color:#fff}
.thumbs button[aria-disabled=true]{cursor:not-allowed}
.thumbs button[aria-disabled=true] canvas{opacity:.32;filter:grayscale(1)}
.thumbs button[aria-disabled=true] span{opacity:.6}
.thumbs button b.no{background:var(--surface-3);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--border)}
/* 悬停提示：挂在 body 上，不会被横向滚动的缩略图条裁掉 */
.tip{position:fixed;z-index:80;max-width:260px;padding:8px 12px;border-radius:12px;background:var(--accent);color:var(--accent-fg);
  font-size:12px;line-height:1.55;pointer-events:none;box-shadow:0 8px 24px #0003}
.toggles{display:flex;flex-direction:column;gap:6px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--text-2);cursor:pointer;white-space:nowrap}
.toggle input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.dock .pill.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.dock button:disabled{opacity:.45;cursor:not-allowed}
.seg button:disabled{opacity:.4}

@media(max-width:860px){
  .stage{flex-direction:column;gap:12px}
  /* 竖屏：一屏放不下数据卡片 + 预览 + 面板，改成整页滚动 —— 数据卡片按内容撑开、占满宽度，五行都露出来，
     不再是一个只露两行半、里面还要再滚的小窗；预览给一个固定高度（原来靠 flex 分剩余空间，页面一滚动就没有「剩余」了） */
  body{height:auto;min-height:100dvh;overflow:auto}
  main{flex:none}
  .stage{flex:none}
  .editor{flex:none;align-self:stretch;max-height:none;overflow:visible}
  .canvas-wrap{flex:none;height:clamp(200px,64vw,52dvh)}
  .ed-tip{display:none}
  .playbar{flex-wrap:wrap;justify-content:center;row-gap:6px}
  .playbar input[type=range]{width:min(200px,46vw)}
  .thumbs{max-width:calc(100vw - 48px)}
  .tabs{max-width:60vw}
}
/* 七步的步骤条比 Relief 长：中等宽度就先收起品牌副标题，免得和步骤条挤在一起 */
@media(max-width:1180px){body>header .brand-sub{display:none}}