/* =====================================================================
   前台专属样式（配合 assets/liquid.css 使用）
   ===================================================================== */

.page { padding: 26px 16px 10px; max-width: 940px; }

/* ---------- 顶栏品牌 ---------- */
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); min-width: 0; }
.brand:hover { text-decoration: none; }
.brand .thumb { width: 38px; height: 38px; border-radius: 12px; font-size: 16px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.28; min-width: 0; }
.brand-txt b { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-txt small { font-size: 11.5px; color: var(--text-dim); }

/* ---------- Hero ---------- */
.hero { text-align: center; overflow: hidden; }
.hero::before {
    content: "";
    position: absolute; inset: -40% -10% auto -10%;
    height: 130%;
    background: radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
    pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 13px 5px 11px;
    font-size: 12px; font-weight: 600;
    color: var(--text-soft);
    border-radius: var(--r-pill);
    background: var(--fill);
    border: 1px solid var(--hairline);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.hero-badge .live {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent);
    animation: pulse 2.2s var(--ease) infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); }
    70%  { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.hero-title {
    margin: 16px 0 0;
    font-size: clamp(30px, 7vw, 46px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.12;
}
.hero-sub {
    margin: 12px auto 0;
    max-width: 520px;
    font-size: clamp(14px, 2.4vw, 16px);
    color: var(--text-soft);
    line-height: 1.75;
}
.hero-stats {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    margin-top: 20px;
}
.hero-stats .chip { padding: 6px 13px; font-size: 12.5px; }
.hero-stats .chip b { font-weight: 800; }

/* ---------- 分步容器 ---------- */
.step { scroll-margin-top: 80px; }
.step-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.step-no {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    font-size: 14px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    color: #fff;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--accent), var(--accent-2));
    box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,.42);
}
.step-title { margin: 0; font-size: 17px; font-weight: 700; }
.step-desc { margin: 3px 0 0; font-size: 13px; color: var(--text-dim); }

/* ---------- 工具选择列表 ---------- */
.tool-list { display: flex; flex-direction: column; gap: 11px; }
.pick .thumb { width: 54px; height: 54px; border-radius: 16px; font-size: 21px; }
.pick-desc {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    font-size: 12.5px;
    line-height: 1.78;
    color: var(--text-soft);
    border-top: 1px dashed var(--hairline);
}
.pick .pick-name { padding-right: 30px; }

@media (max-width: 560px) {
    .pick { padding: 13px; gap: 11px; }
    .pick .thumb { width: 46px; height: 46px; border-radius: 14px; font-size: 18px; }
    .step-head { gap: 11px; margin-bottom: 16px; }
    .step-no { width: 34px; height: 34px; border-radius: 11px; font-size: 12.5px; }
    .step-title { font-size: 15.5px; }
    .page { padding: 18px 13px 8px; }
}

/* ---------- 签名结果页（sign/xxx/app.html） ---------- */
.result-card { max-width: 460px; margin: 40px auto; padding: 30px 24px; text-align: center; }
.result-icon {
    width: 84px; height: 84px; margin: 0 auto 18px;
    border-radius: 24px;
    display: grid; place-items: center;
    font-size: 38px;
    background: linear-gradient(145deg, var(--accent), var(--accent-2));
    box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,.45);
}
.result-name { font-size: 21px; font-weight: 750; margin: 0; letter-spacing: -.02em; }
.result-info { margin: 20px 0 0; text-align: left; }
.result-info .ir {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 11px 0;
    font-size: 13.5px;
    border-bottom: 1px solid var(--hairline);
}
.result-info .ir:last-child { border-bottom: 0; }
.result-info .ir b { font-weight: 600; color: var(--text-dim); flex: 0 0 auto; }
.result-info .ir span { text-align: right; word-break: break-all; }
.result-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

/* 安装按钮的呼吸光晕 */
.btn.glow { position: relative; overflow: hidden; }
.btn.glow::before {
    content: "";
    position: absolute; inset: -2px;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
    transform: translateX(-120%);
    animation: shine 3.4s var(--ease) infinite;
}
@keyframes shine {
    0%   { transform: translateX(-120%); }
    55%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}

/* 结果页背景（独立页面，无 JS 时也能跟随系统） */
body.result-page { display: flex; align-items: center; justify-content: center; padding: 20px; }