/* ============ 爱威电子书生成器 · 界面设计规范（第 3 版：黄黑海报风格） ============
   明亮的品牌黄底 + 纯黑粗体字；黑色圆角方块图标、黑底黄字标签、细黑分隔线、背景大圆环纹理
   字号：正文 15px · 卡片标题 22px（特粗）· 首屏标题 44px（特粗）
   圆角：控件 12px、卡片 22px、主按钮胶囊形；控件高度 44px */
:root{
  --yellow:#ffcb05; --yellow-2:#ffd633; --yellow-deep:#f2b600;
  --ink:#0b0b0b; --ink-2:#26231a;
  --bg:var(--yellow);
  --surface:#fffbea; --surface-2:#fff4c7; --surface-3:#ffe98c; --field:#fffef7;
  --line:rgba(11,11,11,.16); --line-strong:rgba(11,11,11,.55); --rule:#0b0b0b;
  --fg:var(--ink); --fg-2:#2a261b; --muted:#5a5238; --faint:#81775a;
  --accent:var(--ink); --accent-soft:rgba(11,11,11,.07); --accent-ring:rgba(11,11,11,.22);
  --ok:#1f7a3a; --ok-soft:#eaf7ec; --warn:#9a5b00; --warn-soft:#fff3d6; --danger:#c62828; --danger-soft:#fdecec;
  --r-sm:8px; --r:12px; --r-lg:22px;
  --shadow-sm:0 1px 0 rgba(11,11,11,.08);
  --shadow:0 2px 0 rgba(11,11,11,.08),0 18px 36px -22px rgba(80,55,0,.45);
  --shadow-lg:0 30px 70px -18px rgba(40,28,0,.55);
  --font:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* 背景：品牌黄 + 大圆环纹理（与海报背景的圆形图案呼应） */
body{margin:0;min-height:100vh;color:var(--fg);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 88% 12%,transparent 0 150px,rgba(255,255,255,.22) 151px 153px,transparent 154px 230px,rgba(255,255,255,.16) 231px 233px,transparent 234px),
    radial-gradient(circle at 6% 78%,transparent 0 190px,rgba(255,255,255,.2) 191px 193px,transparent 194px 300px,rgba(255,255,255,.12) 301px 303px,transparent 304px),
    radial-gradient(1200px 700px at 50% -10%,var(--yellow-2),transparent 70%),
    var(--yellow);
  background-attachment:fixed}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg .fill{fill:currentColor;stroke:none}
a{color:var(--ink);font-weight:650;text-decoration-thickness:1.5px;text-underline-offset:3px}
.muted{color:var(--muted)}
.small{font-size:13px}
.mt{margin-top:22px}.mt-sm{margin-top:12px}.mb{margin-bottom:22px}
::selection{background:var(--ink);color:var(--yellow)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(11,11,11,.35);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

/* ============ 顶部应用栏 ============ */
.appbar{position:sticky;top:0;z-index:20;background:rgba(255,203,5,.9);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);border-bottom:2px solid var(--rule)}
.appbar-inner{max-width:1280px;margin:0 auto;height:68px;padding:0 32px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-icon{width:40px;height:40px;border-radius:12px;flex:none;background:var(--ink);color:var(--yellow);display:flex;align-items:center;justify-content:center}
.brand-icon svg{width:24px;height:24px;stroke-width:2}
.brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.brand-text b{font:900 19px/1.2 var(--font-display);letter-spacing:-.02em}
.brand-sub{display:none}
.appbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:transparent;border:2px solid var(--ink);font-size:12.5px;color:var(--ink);font-weight:750;white-space:nowrap}
.pill.soft{height:24px;background:var(--ink);border-color:var(--ink);color:var(--yellow);font-size:12.5px;vertical-align:4px}
.btn-icon{display:inline-flex;align-items:center;gap:6px;height:40px;min-width:40px;padding:0 12px;border-radius:999px;border:2px solid transparent;background:none;color:var(--ink);cursor:pointer;font-size:14px;font-weight:800;transition:background .15s,border-color .15s}
.btn-icon:hover{background:rgba(11,11,11,.08)}
.btn-icon:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
/* 中英文切换按钮：与左边“桌面版”版本标签同样的外框高度和样式 */
.lang-ui{height:28px;min-width:0;padding:0 12px;gap:5px;border-color:var(--ink);font-size:12.5px;font-weight:750}
.lang-ui svg{width:15px;height:15px}
.lang-ui:hover{background:var(--ink);color:var(--yellow)}
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 10px);min-width:250px;background:var(--surface);border:2px solid var(--ink);border-radius:16px;box-shadow:var(--shadow-lg);padding:6px;animation:pop .16s ease-out;transform-origin:top right}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;cursor:pointer;text-align:left;font-size:14.5px;font-weight:600;color:var(--fg)}
.menu button:hover{background:var(--ink);color:var(--yellow)}
.menu button.danger{color:var(--danger)}
.menu button.danger:hover{background:var(--danger);color:#fff}
.menu-sep{height:1px;background:var(--line);margin:6px 4px}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}

.warn{max-width:1216px;margin:20px auto 0;background:var(--ink);color:var(--yellow);padding:14px 18px;border-radius:14px;font-weight:600}
.warn b{color:#fff}

/* ============ 布局：左侧步骤时间线 + 右侧内容 ============ */
.layout{max-width:1280px;margin:0 auto;padding:34px 32px;display:grid;grid-template-columns:236px minmax(0,1fr);gap:32px;align-items:start}
.sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:2px}
.nav-title{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:0 12px 12px;opacity:.75}
.nav-step{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border:0;border-radius:14px;background:none;cursor:pointer;text-align:left;font-size:15px;color:var(--ink);font-weight:750;transition:background .15s,color .15s}
.nav-step+.nav-step::before{content:"";position:absolute;left:27px;top:-9px;height:18px;width:2px;background:rgba(11,11,11,.3)}
.nav-step.done+.nav-step::before{background:var(--ink)}
.nav-step:hover:not(:disabled){background:rgba(255,255,255,.35)}
.nav-step:disabled{cursor:default;color:rgba(11,11,11,.45)}
.nav-num{position:relative;z-index:1;width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;background:transparent;border:2px solid currentColor;color:inherit;flex:none;transition:.2s}
.nav-step.current{background:var(--ink);color:var(--yellow)}
.nav-step.current .nav-num{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.nav-step.done .nav-num{background:var(--ink);border-color:var(--ink);color:var(--yellow);font-size:0}
.nav-step.done .nav-num::after{content:"";width:11px;height:6px;border:2.5px solid var(--yellow);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.tips{margin-top:24px;padding:16px 16px 14px;border-radius:18px;background:var(--ink);color:#f3ecd2}
.tips-t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:900;color:var(--yellow);margin-bottom:8px;letter-spacing:.02em}
.tips-t svg{color:var(--yellow);width:18px;height:18px}
.tips ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.55}
.tips li::marker{color:var(--yellow)}
.main{min-width:0;display:flex;flex-direction:column;gap:26px}

/* ============ 卡片 ============ */
.card{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r-lg);padding:30px 32px;box-shadow:var(--shadow);scroll-margin-top:96px;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px;padding-bottom:18px;border-bottom:1.5px solid var(--rule)}
.card-head h2{margin:0;font:900 23px/1.25 var(--font-display);letter-spacing:-.02em}
.card-desc{margin:4px 0 0;color:var(--muted);font-size:14.5px}
.head-action{margin-left:auto;flex:none}
.step{width:40px;height:40px;border-radius:12px;background:var(--ink);color:var(--yellow);display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:17px;flex:none}
h3{margin:0 0 4px;font-size:17px;font-weight:850}
.group{margin:28px 0 14px;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:12px}
.group::after{content:"";flex:1;height:1.5px;background:var(--rule)}
.card-head + .group{margin-top:0}

/* ============ 首屏：导入 ============ */
.hero-card{padding:0;overflow:hidden}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:24px;align-items:center;padding:30px 36px 28px;overflow:hidden;
  background:
    radial-gradient(circle at 92% 20%,transparent 0 90px,rgba(255,255,255,.35) 91px 93px,transparent 94px 140px,rgba(255,255,255,.25) 141px 143px,transparent 144px),
    var(--yellow);
  border-bottom:2px solid var(--ink)}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 16px 0 4px;border-radius:999px;background:var(--ink);color:var(--yellow);font-size:13.5px;font-weight:850;letter-spacing:.03em}
.hero-kicker .step{width:26px;height:26px;border-radius:999px;font-size:13px;background:var(--yellow);color:var(--ink)}
/* 首屏标题：一行显示，字号随窗口宽度在 22～32px 之间自动调整 */
.hero-title{margin:14px 0 14px;font:900 clamp(21px,2.1vw,30px)/1.25 var(--font-display);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
html[lang="en"] .hero-title{font-size:clamp(18px,1.75vw,26px);letter-spacing:-.025em}
/* 副标题上下两条细黑线（海报中“Building Sustainable Success”的样式） */
/* 说明文字：中文一行显示，字号随窗口宽度自动调整；英文较长，保持自动换行 */
html[lang="zh-CN"] .hero-sub{white-space:nowrap;font-size:clamp(12px,1.02vw,14.5px)!important}
.hero-sub{margin:0;max-width:none;padding:9px 0;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);color:var(--ink-2);font-size:15.5px;font-weight:600;line-height:1.65}
/* 手机等窄屏（网站版在手机浏览器里打开）：一行放不下，允许换行，避免文字被截掉 */
@media (max-width:700px){
  .hero-title{white-space:normal;font-size:22px}
  html[lang="zh-CN"] .hero-sub{white-space:normal;font-size:13.5px!important}
}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 6px;border-radius:10px;background:var(--ink);color:var(--yellow);font-size:13.5px;font-weight:800}
.chip svg{width:24px;height:24px;padding:4px;border-radius:7px;background:var(--yellow);color:var(--ink);stroke-width:2.2}
/* 右侧插画：曲线风格的打开的书（SVG），页面边缘向书脊弯曲，右页卷起翻到左边 */
.hero-art{height:160px;display:flex;align-items:center;justify-content:center}
.hero-art svg.art-book{width:205px;height:auto;overflow:visible;stroke:none;filter:drop-shadow(0 16px 16px rgba(70,48,0,.35))}
@media (prefers-reduced-motion:reduce){.art-flip{display:none}}

.drop{display:flex;flex-direction:column;align-items:center;gap:8px;margin:24px 36px 0;border:2.5px dashed var(--ink);border-radius:20px;padding:30px 20px 26px;text-align:center;cursor:pointer;background:var(--surface-2);transition:background .2s,transform .2s}
.drop:hover,.drop.over{background:var(--surface-3)}
.drop.over{transform:scale(1.01)}
.drop-icon{width:62px;height:62px;border-radius:18px;background:var(--ink);display:flex;align-items:center;justify-content:center;color:var(--yellow);margin-bottom:6px;transition:transform .2s}
.drop:hover .drop-icon{transform:translateY(-3px)}
.drop-icon svg{width:30px;height:30px;stroke-width:2.2}
.drop-title{font:900 19px/1.4 var(--font-display);letter-spacing:-.01em}
.drop-hint{font-size:14px;color:var(--muted);margin-bottom:12px}
.fmt{display:flex;gap:6px;margin-top:14px}
.fmt b{font-size:11.5px;font-weight:900;letter-spacing:.06em;color:var(--ink);border:1.5px solid var(--ink);border-radius:6px;padding:1px 8px}
.hero-card .form-grid{padding:0 36px}
.hero-card > .progress{margin:20px 36px 0}
.hero-card::after{content:"";display:block;height:28px}
.progress{display:flex;align-items:center;gap:14px;margin-top:20px}
.progress .bar{flex:1;height:10px;background:rgba(11,11,11,.12);border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;width:0;border-radius:99px;transition:width .2s;
  background:repeating-linear-gradient(-45deg,var(--ink) 0 10px,#333 10px 20px);background-size:28px 28px;animation:stripes .8s linear infinite}
@keyframes stripes{from{background-position:0 0}to{background-position:28px 0}}
#progText{font-size:14px;color:var(--fg-2);font-weight:600;min-width:180px}

/* ============ 表单 ============ */
.form-grid{display:grid;gap:18px 20px}
.form-grid.cols-2{grid-template-columns:1fr 1fr}
.span2{grid-column:span 2}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field-label{font-size:13.5px;font-weight:800;color:var(--ink)}
input:not([type=checkbox]):not([type=color]):not([type=radio]),select{height:44px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--field);min-width:0;width:100%;transition:border-color .15s,box-shadow .15s}
select{padding-right:38px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px}
input:hover,select:hover{border-color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,203,5,.9),0 0 0 5.5px var(--ink)}
input::placeholder{color:var(--faint)}
input[type=number]{max-width:180px}
.color-field{display:inline-flex;align-items:center;gap:10px}
input[type=color]{width:64px;height:44px;padding:4px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--field);cursor:pointer}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--fg-2);cursor:pointer;line-height:1.5;font-weight:550}
.check input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--ink);flex:none;cursor:pointer}
.hint{font-size:13px;color:var(--muted);line-height:1.55}
#ghConnectMsg.err,.hint.err{color:var(--danger)}
code{background:var(--surface-3);border:1px solid var(--line);padding:1px 6px;border-radius:6px;font-size:13px}

/* ============ 按钮（主按钮：黑底黄字胶囊） ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);font-size:14.5px;font-weight:800;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s,transform .1s}
.btn:hover{background:rgba(11,11,11,.08)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--accent-ring)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--yellow);box-shadow:0 10px 20px -12px rgba(0,0,0,.8)}
.btn.primary:hover:not(:disabled){background:#222;box-shadow:0 12px 24px -12px rgba(0,0,0,.9)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger:hover{filter:brightness(.95)}
.btn.ghost{background:none;border-color:transparent;color:var(--ink)}
.btn.ghost:hover:not(:disabled){background:rgba(11,11,11,.08)}
.btn.ghost.danger{color:var(--danger)}
.btn.ghost.danger:hover{background:var(--danger-soft)}
.btn.lg{height:50px;padding:0 30px;font-size:16px}
.btn.sm{height:32px;padding:0 13px;font-size:13px;border-width:1.5px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.link{font-size:14px;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer;color:var(--ink)}
.actionbar{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:28px;padding-top:22px;border-top:1.5px solid var(--rule)}
.actionbar .muted{margin-right:auto;font-size:14px;font-weight:600;color:var(--fg-2)}

/* ============ 页面网格（页码为黑底黄字标签） ============ */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:24px 18px;max-height:560px;overflow:auto;padding:10px 8px 12px;margin:-8px}
.pg{position:relative;cursor:grab;text-align:center;font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:800;display:flex;flex-direction:column;align-items:center}
.pg img{width:100%;display:block;border-radius:8px;box-shadow:0 0 0 1.5px var(--ink),0 10px 18px -12px rgba(0,0,0,.6);background:#fff;pointer-events:none;margin-bottom:9px;transition:transform .18s,box-shadow .18s}
.pg:hover img{transform:translateY(-3px);box-shadow:0 0 0 2px var(--ink),0 16px 26px -12px rgba(0,0,0,.6)}
.pg.cover{display:flex}
.pg.cover img{box-shadow:0 0 0 3px var(--ink),0 12px 22px -10px rgba(0,0,0,.7)}
.pg.cover::before{content:"★";position:absolute;top:6px;left:6px;z-index:1;width:24px;height:24px;border-radius:7px;background:var(--ink);color:var(--yellow);font-size:12px;line-height:24px}
.pg.dragging{opacity:.35}
.pg.over-before::before{content:"";position:absolute;left:-11px;top:0;bottom:28px;width:4px;background:var(--ink);border-radius:2px}
.pg .del{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;padding:0;background:var(--ink);color:var(--yellow);border:0;font-size:16px;line-height:26px;display:none;cursor:pointer}
.pg .del:hover{background:var(--danger);color:#fff}
.pg:hover .del{display:block}

/* ============ 选择卡片（翻页形式、发布平台）：选中后黑底黄字 ============ */
.choice-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border:2px solid var(--ink);border-radius:16px;cursor:pointer;background:var(--field);transition:background .15s,color .15s,transform .15s}
.choice:hover{transform:translateY(-1px);background:var(--surface-2)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice:has(input:checked){background:var(--ink);color:var(--yellow)}
.choice:has(input:checked) .choice-text b{color:var(--yellow)}
.choice:has(input:checked) .choice-text small{color:rgba(255,236,160,.8)}
.choice:has(input:checked)::after{content:"";position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:6px;background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
.choice:has(input:focus-visible){box-shadow:0 0 0 4px var(--accent-ring)}
.choice-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.choice-text b{font-size:15.5px;font-weight:900;color:var(--ink)}
.choice-text small{font-size:13px;color:var(--muted);line-height:1.45}
.choice-art{flex:none;width:56px;height:48px;position:relative;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--yellow);border:2px solid var(--ink)}
.choice-art.book i{width:18px;height:26px;background:#fff;border:2px solid var(--ink);display:block}
.choice-art.book i:first-child{border-radius:3px 0 0 3px;border-right-width:1px;transform:perspective(60px) rotateY(18deg);transform-origin:right}
.choice-art.book i:last-child{border-radius:0 3px 3px 0;border-left-width:1px;transform:perspective(60px) rotateY(-18deg);transform-origin:left}
.choice-art.calendar i{width:26px;height:28px;background:#fff;border:2px solid var(--ink);border-radius:3px;position:relative;margin-top:6px;display:block}
.choice-art.calendar i::before{content:"";position:absolute;left:3px;right:3px;top:-8px;height:8px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px)}
.choice-art.platform{font-size:14px;font-weight:900;color:var(--ink)}
.choice:has(input:checked) .choice-art{border-color:var(--yellow)}

/* ============ 分段控件 / 标签（选中黑底黄字） ============ */
.segmented{display:inline-flex;padding:4px;gap:4px;background:transparent;border:2px solid var(--ink);border-radius:999px;flex-wrap:wrap}
.segmented button{border:0;background:none;height:36px;padding:0 20px;border-radius:999px;font-size:14.5px;font-weight:800;color:var(--ink);cursor:pointer;transition:color .15s,background .15s}
.segmented button:hover{background:rgba(11,11,11,.08)}
.segmented button.on{background:var(--ink);color:var(--yellow)}
.segmented.small{border-width:1.5px}
.segmented.small button{height:30px;padding:0 13px;font-size:13px}
.tabs{margin-bottom:22px}
/* 生成后又修改了内容时的提示条 */
.stale-bar{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:12px 14px 12px 18px;border-radius:14px;background:var(--ink);color:var(--yellow);font-size:14px;font-weight:700;line-height:1.5}
.stale-bar span{flex:1}
.stale-bar .btn.primary{background:var(--yellow);border-color:var(--yellow);color:var(--ink);flex:none}
.preview-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.preview-bar .link{margin-left:auto}
.preview-frame{margin:0 auto;background:#1b1b1b;border-radius:18px;overflow:hidden;transition:width .3s,height .3s;border:2px solid var(--ink);box-shadow:0 24px 40px -22px rgba(0,0,0,.8)}
.preview-frame iframe{width:100%;height:100%;border:0;display:block}
.preview-frame.desktop{width:100%;height:600px}
.preview-frame.phone{width:375px;height:720px;max-width:100%;border:10px solid #0b0b0b;border-radius:42px}
.preview-frame.phone-l{width:720px;height:375px;max-width:100%;border:10px solid #0b0b0b;border-radius:42px}

/* ============ 发布 ============ */
.callout{background:var(--surface-2);border:1.5px solid var(--ink);border-left:6px solid var(--ink);border-radius:12px;padding:14px 18px;font-size:14.5px;color:var(--fg-2);line-height:1.7}
.gh-steps{margin:22px 0 0;padding-left:26px;display:flex;flex-direction:column;gap:22px}
.gh-steps li::marker{font-weight:900;color:var(--ink)}
.gh-step-t{font-weight:850;font-size:15.5px;margin-bottom:4px}
.gh-steps .muted{font-size:14px;margin-bottom:12px}
.inline-form{display:flex;gap:10px;margin-top:10px}
.inline-form input{flex:1}
#ghConnectMsg{margin-top:8px}
.gh-user{display:flex;align-items:center;gap:14px;background:var(--surface-2);border:1.5px solid var(--ink);border-radius:16px;padding:14px 18px}
.gh-user img{width:44px;height:44px;border-radius:12px;background:var(--surface-3);border:2px solid var(--ink)}
.gh-user>div{flex:1;min-width:0}
.gh-adv{margin-top:16px;font-size:14.5px}
.gh-adv summary{cursor:pointer;color:var(--ink);font-weight:800}
.guide{margin:14px 0 4px}
.guide ol{margin:12px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--fg-2);line-height:1.65}
.log{margin-top:16px;background:var(--ink);color:#f0e6c0;font:13px/1.7 "Cascadia Mono",Consolas,ui-monospace,monospace;border-radius:14px;padding:14px 16px;max-height:240px;overflow:auto;white-space:pre-wrap}
.log .ok{color:#9be58f}.log .err{color:#ff9d8f}
.pub-result{margin-top:16px;border:2px solid var(--ink);background:var(--surface-2);border-radius:16px;padding:18px 20px}
.pub-status{font-weight:900;margin-bottom:12px;font-size:16px}
.pub-status.wait{color:var(--warn)}.pub-status.ok{color:var(--ok)}.pub-status.err{color:var(--danger)}
.pub-links{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.pub-links>div{display:flex;align-items:center;gap:12px;font-size:14.5px}
.pub-links span{width:96px;flex:none;color:var(--muted);font-weight:700}
.pub-links a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 保存到电脑 */
.save-card{display:flex;gap:18px;align-items:flex-start;background:var(--ink);color:#f3ecd2;border-radius:18px;padding:20px 22px}
.save-card h3{color:var(--yellow)}
.save-card .muted{color:#d9cfa9}
.save-icon{width:52px;height:52px;border-radius:14px;background:var(--yellow);color:var(--ink);display:flex;align-items:center;justify-content:center;flex:none}
.save-icon svg{width:28px;height:28px;stroke-width:2.1}
.save-text h3{margin:2px 0 6px}
.save-text p{margin:0;font-size:14.5px;line-height:1.65}

/* ============ 分享与二维码 ============ */
.qr-section{display:flex;gap:28px;align-items:flex-start;margin-top:32px;padding-top:28px;border-top:1.5px solid var(--rule);flex-wrap:wrap}
.qr-left{flex:1;min-width:280px;display:flex;flex-direction:column;gap:12px}
.qr-left p{margin:0}
.qr-card{width:250px;min-height:250px;border:2px solid var(--ink);border-radius:22px;display:flex;align-items:center;justify-content:center;padding:14px;background:#fff;box-shadow:8px 8px 0 var(--ink)}
.qr-card img{width:100%;display:block}
.qr-empty{color:var(--muted);text-align:center;font-size:14px;line-height:1.6}

/* ============ 页脚 ============ */
.foot{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 0 26px;font-size:13px;color:var(--ink);font-weight:650;text-align:center}
.foot svg{color:var(--ink);width:17px;height:17px}

/* ============ 对话框 ============ */
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(20,16,0,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .16s}
.modal-backdrop.open{opacity:1}
.modal-backdrop.closing{opacity:0}
.modal{width:min(470px,100%);background:var(--surface);border:2px solid var(--ink);border-radius:22px;box-shadow:var(--shadow-lg);padding:26px 26px 22px;transform:translateY(8px) scale(.97);transition:transform .18s cubic-bezier(.2,.9,.3,1.15)}
.modal-backdrop.open .modal{transform:none}
.modal-title{margin:0 0 10px;font:900 19px/1.35 var(--font-display)}
.modal-body{font-size:15px;color:var(--fg-2);line-height:1.65;white-space:pre-line}
.modal-body p{margin:0 0 10px;white-space:normal}
.modal-body p:last-child{margin-bottom:0}
.modal-input{margin-top:14px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}

/* ============ 窄窗口 ============ */
@media (max-width:1200px){
  .hero{grid-template-columns:1fr}
  .hero-art{display:none}
}
@media (max-width:980px){
  .layout{grid-template-columns:1fr;padding:20px}
  .sidebar{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:2px}
  .nav-title,.tips{display:none}
  .nav-step{flex:none}
  .nav-step+.nav-step::before{display:none}
}
@media (max-width:640px){
  .appbar-inner{padding:0 16px}
  .card{padding:20px}
  .hero{padding:26px 20px}
  .hero-title,html[lang="en"] .hero-title{font-size:22px;white-space:normal}
  .drop,.hero-card>.progress{margin-left:20px;margin-right:20px}
  .hero-card .form-grid{padding:0 20px}
  .form-grid.cols-2{grid-template-columns:1fr}.span2{grid-column:auto}
  .choice-cards{grid-template-columns:1fr}
  .qr-card{width:100%}
  .preview-frame.desktop{height:420px}
  .actionbar{flex-direction:column-reverse;align-items:stretch}
  .actionbar .muted{margin:0}
}