/* ============================================================
   新手指引（? 按钮 + Markdown 弹窗）· 共享样式
   DOM 与交互见 static/js/help-guide.js
   内容来自 static/docs/guide.md（改那个文件即可，不用动代码）
   ============================================================ */

/* ---------------- ? 按钮（跟着宿主页面的按钮一起排） ---------------- */
.hg-btn{
    flex:0 0 auto;
    width:30px; height:30px; padding:0; border-radius:9px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    font:800 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
    background:rgba(127,127,127,.10);
    color:inherit;
    border:1px solid rgba(127,127,127,.30);
    transition:background .15s ease, transform .12s ease, border-color .15s ease;
}
.hg-btn:hover{ background:rgba(127,127,127,.20); transform:translateY(-1px); }
.hg-btn:active{ transform:translateY(0); }

/* 各宿主页的尺寸微调，保证跟旁边的按钮一样高 */
.asset-head-actions .hg-btn{ width:34px; height:34px; border-radius:9px; }
.ws-topbar-right .hg-btn{ width:36px; height:36px; border-radius:9px; }
.top-actions .hg-btn{ width:34px; height:34px; border-radius:9px; }
.tk-head .hg-btn{ width:38px; height:38px; border-radius:999px; }
/* 模板库：抽一个右侧容器，让 ? 和搜索框并排 */
.tk-head-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
/* 无限画布：塞进工具条的 fixed 组，跟资产库/日志按钮同一套尺寸 */
.toolbar-fixed .hg-btn{ width:38px; height:38px; border-radius:999px; }
.toolbar.collapsed .toolbar-fixed .hg-btn{ width:32px; height:32px; }
/* 智能画布：跟随整列按钮一起挪到画面左下（2026-09-15 第 14 批 Item 8）。
   原来浮在右上角与左上返回按钮对称；现在顶栏按钮整列下移到底部，
   它排在「资产库」左侧，同样避让右下角小地图。
   ★ 2026-09-15 第 15 批 Item 14：right 由 630 改 636 —— 原来与左边「工作流」按钮的
     间隙只有 2px，用户反馈「问号按钮跟右边按钮的间隙太小」；现在统一成 8px。
     圆角同步从 999px 胶囊改为 10px 圆角矩形，与整列按钮统一。 */
.sc-help-float{ position:absolute; right:636px; bottom:22px; z-index:56; display:flex; }
.sc-help-float .hg-btn{
    width:40px; height:40px; border-radius:10px;
    background:var(--panel); color:var(--text);
    box-shadow:0 16px 40px rgba(15,23,42,.10);
}
#adDock .hg-btn{
    width:26px; height:26px; border-radius:8px;
    background:var(--ad-card); color:var(--ad-ink);
    border:2px solid var(--ad-stroke-soft); box-shadow:2px 2px 0 var(--ad-shadow);
}
#adDock .hg-btn:hover{ transform:translate(-1px,-1px); background:var(--ad-card); }
#adDock.ad-collapsed .hg-btn{ display:none; }

/* ---------------- 弹窗 ---------------- */
.hg-mask{
    position:fixed; inset:0; z-index:2147483200;
    display:flex; align-items:center; justify-content:center; padding:26px;
    background:rgba(8,8,10,.55);
    -webkit-backdrop-filter:blur(16px) saturate(.92);
    backdrop-filter:blur(16px) saturate(.92);
    animation:hgFade .2s ease both;
    --hg-surface:#16171a;
    --hg-surface-2:#1e2024;
    --hg-line:rgba(255,255,255,.12);
    --hg-line-soft:rgba(255,255,255,.07);
    --hg-ink:#eceef1;
    --hg-muted:#9aa0a8;
    --hg-accent:#3b82f6;
    --hg-code-bg:rgba(255,255,255,.07);
}
.hg-mask[hidden]{ display:none !important; }
@keyframes hgFade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes hgRise{ from{ opacity:0; transform:translateY(14px) scale(.986) } to{ opacity:1; transform:none } }

/* 浅色（页面是浅色时由 JS 摘掉 .hg-dark） */
.hg-mask:not(.hg-dark){
    background:rgba(248,249,251,.62);
    --hg-surface:#ffffff;
    --hg-surface-2:#f3f5f8;
    --hg-line:rgba(15,23,42,.14);
    --hg-line-soft:rgba(15,23,42,.07);
    --hg-ink:#14161a;
    --hg-muted:#6b7280;
    --hg-code-bg:rgba(15,23,42,.05);
}

.hg-card{
    position:relative; display:flex; flex-direction:column;
    width:min(780px,100%); max-height:min(84vh,900px);
    background:var(--hg-surface); color:var(--hg-ink);
    border-radius:18px; overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px var(--hg-line);
    animation:hgRise .28s cubic-bezier(.22,1.02,.32,1) both;
    font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
.hg-head{
    display:flex; align-items:center; gap:10px; flex:0 0 auto;
    padding:16px 18px; border-bottom:1px solid var(--hg-line-soft);
}
.hg-badge{
    flex:0 0 auto; width:26px; height:26px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:900; color:#fff;
    background:linear-gradient(135deg, var(--hg-accent), #2563eb);
    box-shadow:0 6px 16px rgba(59,130,246,.32);
}
.hg-title{ margin:0; flex:1 1 auto; font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--hg-ink); }
.hg-close{
    flex:0 0 auto; width:30px; height:30px; border:0; border-radius:9px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:17px; line-height:1; font-weight:700;
    background:transparent; color:var(--hg-muted);
    transition:background .15s ease, color .15s ease;
}
.hg-close:hover{ background:var(--hg-surface-2); color:var(--hg-ink); }
.hg-body{
    flex:1 1 auto; min-height:0; overflow-y:auto;
    padding:20px 24px 28px; font-size:13.5px; line-height:1.85; color:var(--hg-ink);
    overflow-wrap:break-word;
}
.hg-body::-webkit-scrollbar{ width:9px; }
.hg-body::-webkit-scrollbar-thumb{ background:var(--hg-line); border-radius:99px; }
.hg-body::-webkit-scrollbar-track{ background:transparent; }

/* ---- Markdown 渲染出来的元素 ---- */
.hg-body h1, .hg-body h2, .hg-body h3, .hg-body h4{
    margin:22px 0 10px; font-weight:800; letter-spacing:-.01em; line-height:1.35; color:var(--hg-ink);
}
.hg-body h1{ font-size:21px; }
.hg-body h2{ font-size:17.5px; padding-bottom:7px; border-bottom:1px solid var(--hg-line-soft); }
.hg-body h3{ font-size:15px; }
.hg-body h4{ font-size:13.5px; color:var(--hg-muted); }
.hg-body h1:first-child, .hg-body h2:first-child, .hg-body h3:first-child{ margin-top:0; }
.hg-body p{ margin:0 0 12px; }
.hg-body ul, .hg-body ol{ margin:0 0 12px; padding-left:22px; }
.hg-body li{ margin:4px 0; }
.hg-body li > p{ margin:0 0 6px; }
.hg-body a{ color:var(--hg-accent); text-decoration:underline; text-underline-offset:3px; }
.hg-body strong{ font-weight:800; }
.hg-body em{ font-style:italic; }
.hg-body code{
    padding:2px 6px; border-radius:6px; font-size:12.5px;
    background:var(--hg-code-bg);
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.hg-body pre{
    margin:0 0 14px; padding:13px 15px; border-radius:11px; overflow-x:auto;
    background:var(--hg-code-bg); box-shadow:inset 0 0 0 1px var(--hg-line-soft);
}
.hg-body pre code{ padding:0; background:transparent; font-size:12.5px; line-height:1.7; }
.hg-body blockquote{
    margin:0 0 14px; padding:8px 14px; border-left:3px solid var(--hg-accent);
    background:var(--hg-code-bg); border-radius:0 10px 10px 0; color:var(--hg-muted);
}
.hg-body hr{ margin:20px 0; border:0; border-top:1px solid var(--hg-line); }
.hg-body table{ width:100%; margin:0 0 14px; border-collapse:collapse; font-size:12.5px; }
.hg-body th, .hg-body td{ padding:8px 10px; border:1px solid var(--hg-line-soft); text-align:left; }
.hg-body th{ background:var(--hg-code-bg); font-weight:800; }
.hg-body img{ max-width:100%; border-radius:10px; }
.hg-empty{ padding:40px 0; text-align:center; color:var(--hg-muted); font-size:13px; }

@media (max-width:640px){
    .hg-mask{ padding:14px; }
    .hg-card{ max-height:88vh; border-radius:15px; }
    .hg-body{ padding:16px 16px 22px; }
}