/* =====================================================================
 * 4.5 组 5｜跨境长途与旅行准备 —— 全新设计体系 g5-shell.css
 *
 * 与站内既有批次完全不同的三件事：
 *   ① 配色：暖纸底 + 深墨绿 + 琥珀路标色（不再用旧批次的冷蓝/紫）；
 *   ② 字体层级：编号 kicker(11px) → H1(32px) → lede(15.5px/1.85)
 *      → 段标题(19px) → 正文(14px/1.82) → 数据(等宽 13px)，
 *      标题用带衬线的中文标题栈，数据一律等宽，正文行距 ≥1.8；
 *   ③ 布局：外层「行程档案」窄栏 + 内容宽栏，卡片为直角细线 + 单侧色条，
 *      不再使用旧批次的大圆角大阴影。
 *
 * 本文件只提供令牌、字体层级、公共面包屑皮肤、公共底部套件桥接、
 * 提示/报告/toast 三类原子件。10 个工具的 hero、表单、图表、结果区
 * 全部各写各的 CSS，互不复用。
 * 暗色主题只读公共导航 #themeToggle 写入的 <html data-theme>。
 * ===================================================================== */

.g5 {
    --g5-paper: #f3f1e9;
    --g5-paper2: #e9e5d8;
    --g5-card: #fffdf7;
    --g5-card2: #f7f4ea;
    --g5-ink: #1c2b2a;
    --g5-ink2: #465953;
    --g5-muted: #5d6c64;
    --g5-line: #d9d7c9;
    --g5-line2: #c2c5b4;
    --g5-pri: #126a5e;
    --g5-pri2: #0b4c43;
    --g5-prisoft: #e0efe9;
    --g5-amber: #c07a22;
    --g5-amber-ink: #8a5610;
    --g5-ambersoft: #f8ecd5;
    --g5-ok: #167152;
    --g5-okbg: #e0f1e6;
    --g5-warn: #96621a;
    --g5-warnbg: #faeacd;
    --g5-bad: #a63d3c;
    --g5-badbg: #f8e4e0;
    --g5-info: #2a6175;
    --g5-infobg: #e3eef2;
    --g5-shadow: 0 2px 12px rgba(30, 46, 40, .06);
    --g5-head: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", Georgia, serif;
    --g5-body: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    --g5-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    display: block;
    min-height: 60vh;
    padding-bottom: 72px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 220px),
        var(--g5-paper);
    color: var(--g5-ink);
    font-family: var(--g5-body);
    font-size: 14px;
    line-height: 1.82;
    -webkit-font-smoothing: antialiased;
}
.g5 *, .g5 *::before, .g5 *::after { box-sizing: border-box; }
.g5 h1, .g5 h2, .g5 h3, .g5 h4 { margin: 0; font-family: var(--g5-head); font-weight: 700; line-height: 1.35; }
.g5 h1 { font-size: 32px; letter-spacing: -.01em; }
.g5 h2 { font-size: 19px; }
.g5 h3 { font-size: 16px; }
.g5 p { margin: 0 0 11px; }
.g5 b, .g5 strong { font-weight: 750; color: var(--g5-pri2); }
.g5 a { color: var(--g5-pri); text-decoration: none; border-bottom: 1px solid var(--g5-line2); }
.g5 a:hover { border-bottom-color: var(--g5-pri); }
.g5 code, .g5 .g5-mono { font-family: var(--g5-mono); font-size: .92em; }
.g5 code { background: var(--g5-card2); border: 1px solid var(--g5-line); padding: 1px 5px; }
.g5 button, .g5 input, .g5 select, .g5 textarea { font: inherit; }
.g5 button { cursor: pointer; }
.g5 :focus-visible { outline: 2px solid var(--g5-amber); outline-offset: 2px; }
.g5 [hidden] { display: none !important; }
.g5 table { border-collapse: collapse; }
.g5-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px 40px; }

:root[data-theme="dark"] .g5 {
    --g5-paper: #101715;
    --g5-paper2: #17201d;
    --g5-card: #17211e;
    --g5-card2: #1e2a26;
    --g5-ink: #e9efe9;
    --g5-ink2: #b7c6bd;
    --g5-muted: #8c9e93;
    --g5-line: #2b3a34;
    --g5-line2: #3d5048;
    --g5-pri: #63c8ac;
    --g5-pri2: #a7e0cb;
    --g5-prisoft: #16352d;
    --g5-amber: #e6b262;
    --g5-amber-ink: #e6b262;
    --g5-ambersoft: #3a2f1c;
    --g5-ok: #7fd4a7;
    --g5-okbg: #17362a;
    --g5-warn: #e6bb70;
    --g5-warnbg: #352b18;
    --g5-bad: #ef9a96;
    --g5-badbg: #3a2220;
    --g5-info: #8dc2d6;
    --g5-infobg: #1b3039;
    --g5-shadow: 0 4px 18px rgba(0, 0, 0, .32);
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 220px), var(--g5-paper);
    color-scheme: dark;
}
:root[data-theme="dark"] .g5 input,
:root[data-theme="dark"] .g5 textarea,
:root[data-theme="dark"] .g5 select { background: var(--g5-card2); color: var(--g5-ink); border-color: var(--g5-line); }
:root[data-theme="dark"] .g5 code { background: var(--g5-card2); border-color: var(--g5-line); }

/* ---------- 公共面包屑：本组新皮肤（细虚线 + 编号路标） ---------- */
.g5 .tsk-crumb-bar { background: transparent; border-bottom: 1px dashed var(--g5-line2); margin: 0 0 30px; }
.g5 .tsk-crumb-bar-in { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.g5 .tsk-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 48px; font-size: 12px; letter-spacing: .1em; color: var(--g5-muted); }
.g5 .tsk-crumb a { color: var(--g5-ink2); border: 0; font-weight: 600; }
.g5 .tsk-crumb a:hover { color: var(--g5-pri); }
.g5 .tsk-crumb-sep { color: var(--g5-muted); font-size: 14px; }
.g5 .tsk-crumb-cur { color: #fff; background: var(--g5-pri2); padding: 3px 10px; font-weight: 700; letter-spacing: .04em; }
:root[data-theme="dark"] .g5 .tsk-crumb-cur { color: #0d1512; }

/* ---------- 公共原子件（按钮/字段/提示/标签），各工具靠变量与覆写做区分 ---------- */
.g5 .g5-btn {
    border: 1px solid var(--g5-line2);
    background: var(--g5-card);
    color: var(--g5-ink2);
    border-radius: 3px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    transition: border-color .16s, background .16s, color .16s, transform .16s;
}
.g5 .g5-btn:hover { border-color: var(--g5-pri); color: var(--g5-pri); }
.g5 .g5-btn:active { transform: translateY(1px); }
.g5 .g5-btn:disabled { opacity: .5; cursor: not-allowed; }
.g5 .g5-btn-main { border-color: var(--g5-pri2); background: var(--g5-pri2); color: #fff; }
.g5 .g5-btn-main:hover { background: var(--g5-pri); border-color: var(--g5-pri); color: #fff; }
:root[data-theme="dark"] .g5 .g5-btn-main { color: var(--g5-paper); }
.g5 .g5-btn-amber { border-color: var(--g5-amber); background: var(--g5-amber); color: #241a04; }
.g5 .g5-btn-amber:hover { filter: brightness(1.08); color: #241a04; }
.g5 .g5-btn-mini { padding: 4px 10px; font-size: 12px; }
.g5 .g5-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 14px; }
.g5 .g5-check { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--g5-line); background: var(--g5-card); color: var(--g5-ink2); font-size: 12px; font-weight: 600; cursor: pointer; user-select: none; }
.g5 .g5-check input { margin: 0; width: 14px; height: 14px; accent-color: var(--g5-pri); }
.g5 .g5-check:hover { border-color: var(--g5-pri); }
.g5 .g5-check.is-on { border-color: var(--g5-pri); background: var(--g5-prisoft); color: var(--g5-ink); }
.g5 .g5-err { margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--g5-bad); background: var(--g5-badbg); color: var(--g5-bad); font-size: 12.5px; line-height: 1.7; }
.g5 .g5-note { margin-top: 10px; font-size: 12.5px; color: var(--g5-muted); line-height: 1.75; }
.g5 .g5-tag { display: inline-block; padding: 1px 7px; border: 1px solid var(--g5-line2); font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--g5-ink2); }
.g5 .g5-tag-ok { border-color: var(--g5-ok); color: var(--g5-ok); background: var(--g5-okbg); }
.g5 .g5-tag-warn { border-color: var(--g5-warn); color: var(--g5-warn); background: var(--g5-warnbg); }
.g5 .g5-tag-bad { border-color: var(--g5-bad); color: var(--g5-bad); background: var(--g5-badbg); }
.g5 .g5-kicker { display: inline-block; font-family: var(--g5-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--g5-amber-ink); }
.g5 .g5-lede { font-size: 15.5px; line-height: 1.85; color: var(--g5-ink2); max-width: 70ch; }
.g5 .g5-lede b { color: var(--g5-pri2); }
.g5 .g5-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.g5 .g5-scroll table { min-width: 620px; width: 100%; }
.g5 .g5-scroll th, .g5 .g5-scroll td { padding: 8px 10px; border-bottom: 1px solid var(--g5-line); text-align: left; font-size: 13px; vertical-align: top; }
.g5 .g5-scroll th { background: var(--g5-card2); font-weight: 700; color: var(--g5-ink2); white-space: nowrap; }
.g5 input[aria-invalid="true"], .g5 select[aria-invalid="true"], .g5 textarea[aria-invalid="true"] {
    border-color: var(--g5-bad) !important; background: var(--g5-badbg) !important;
}

/* ---------- 公共底部套件：跟随本组令牌，深色下不出现白底 ---------- */
.g5 .tskb {
    --tskb-bg: var(--g5-card);
    --tskb-soft: var(--g5-card2);
    --tskb-ink: var(--g5-ink);
    --tskb-ink2: var(--g5-ink2);
    --tskb-ink3: var(--g5-muted);
    --tskb-line: var(--g5-line);
    --tskb-line2: var(--g5-line2);
    --tskb-accent: var(--g5-pri2);
    --tskb-accent-soft: var(--g5-prisoft);
    margin-top: 46px;
    font-family: var(--g5-body);
    font-size: 13.5px;
    line-height: 1.9;
}
.g5 .tskb p, .g5 .tskb li, .g5 .tskb td, .g5 .tskb th { line-height: 1.9; }
.g5 .tskb b, .g5 .tskb strong { color: var(--g5-pri2); }
.g5 .tskb-card, .g5 .tskb-panel, .g5 .tskb-related { border-radius: 3px; }
.g5 .tskb .ri { color: var(--g5-ink2); }
.g5 .g5-footnote { margin: 26px 0 0; padding-top: 16px; border-top: 1px dashed var(--g5-line2); font-size: 12px; line-height: 1.85; color: var(--g5-muted); }

/* ---------- 操作后报告 / AI 结果 / toast（均只在用户点击后出现） ---------- */
.g5-report { margin: 24px 0 0; border: 1px solid var(--g5-line2); border-top: 3px solid var(--g5-pri); background: var(--g5-card); box-shadow: var(--g5-shadow); }
.g5-report-hd { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--g5-line); background: var(--g5-card2); }
.g5-report-hd h3 { font-size: 16px; }
.g5-report-hd span { font-size: 12px; color: var(--g5-muted); }
.g5-report-body { padding: 16px 18px 4px; font-size: 13.5px; line-height: 1.9; }
.g5-report-ft { padding: 0 18px 16px; }
.g5-ai-box { margin-top: 12px; padding: 14px 16px; border: 1px dashed var(--g5-line2); background: var(--g5-card2); font-size: 13.5px; line-height: 1.9; white-space: pre-wrap; color: var(--g5-ink2); }
.g5-ai-box.is-err { border-color: var(--g5-bad); color: var(--g5-bad); }
.g5-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); z-index: 9999; max-width: 88vw; padding: 9px 18px; background: var(--g5-ink); color: var(--g5-card); font-size: 13px; font-weight: 650; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.g5-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.g5-toast.is-err { background: var(--g5-bad); color: #fff; }

@media (max-width: 860px) {
    .g5-wrap { padding: 0 16px 32px; }
    .g5 .tsk-crumb-bar-in { padding: 0 16px; }
    .g5 h1 { font-size: 26px; }
    .g5 .g5-lede { font-size: 14.5px; }
    .g5 { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .g5 *, .g5 *::before, .g5 *::after { transition: none !important; animation: none !important; }
}
@media print {
    .g5 .tsk-crumb-bar, .g5 .tskb, .g5-report-ft, .g5-toast, .g5 .g5-actions { display: none !important; }
    .g5 { background: #fff; color: #000; }
}