/* ======================================================================
 * DG3 · 第 3 组「数码 / 影音 / 游戏 / AI」公共设计底座
 *
 * 这里只提供：设计令牌、深浅主题骨架、字体层级、无障碍、表单原子、
 * 面包屑皮肤、吐司与「操作后才创建」的结果弹窗。
 * 具体配色、版式、卡片造型、首屏构图由每页独立的 css/dg3/{slug}.css 决定，
 * 10 个工具互不复用视觉方案。
 * ====================================================================== */

.dg3 {
    /* 令牌默认值；每个页面用自己的 [data-page] 覆盖 */
    --bg: #f5f7fa;
    --bg2: #eaeef4;
    --card: #ffffff;
    --card2: #f7f9fc;
    --ink: #17202b;
    --ink2: #3c4959;
    --muted: #6b7889;
    --line: #d7dfe8;
    --line2: #e8edf3;
    --accent: #12657a;
    --accent-ink: #ffffff;
    --accent-soft: #e1f1f4;
    --accent2: #d1622b;
    --accent2-soft: #fbeade;
    --ok: #177a48;
    --ok-bg: #e2f3e9;
    --warn: #9a6207;
    --warn-bg: #fbf0d9;
    --bad: #b1362b;
    --bad-bg: #fbe7e4;
    --shadow: 0 2px 14px rgba(23, 32, 43, .07);
    --radius: 12px;
    --radius-sm: 7px;
    --font-head: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
    --font-body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;
    --head-weight: 700;
    --tracking: 0;

    display: block;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.78;
    padding: 0 0 54px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 深色主题：跟随公共导航 #themeToggle 写入的 <html data-theme="dark">。
   各页再针对自己的强调色做二次覆盖。 */
:root[data-theme="dark"] .dg3 {
    --bg: #121820;
    --bg2: #18212c;
    --card: #1c2632;
    --card2: #222e3b;
    --ink: #e2ebf4;
    --ink2: #bccbd9;
    --muted: #8999aa;
    --line: #354454;
    --line2: #2a3745;
    --accent: #5fb6cf;
    --accent-ink: #0d1a20;
    --accent-soft: #1d3a45;
    --accent2: #e89154;
    --accent2-soft: #3b2a1c;
    --ok: #5dbb84;
    --ok-bg: #1c3427;
    --warn: #dcb055;
    --warn-bg: #372d19;
    --bad: #e38076;
    --bad-bg: #3b2321;
    --shadow: 0 2px 16px rgba(0, 0, 0, .42);
}

.dg3 *,
.dg3 *::before,
.dg3 *::after { box-sizing: border-box; }

.dg3-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- 字体层级：标题重、正文轻，行距宽松降低阅读阻力 ---------- */
.dg3 h1, .dg3 h2, .dg3 h3, .dg3 h4 {
    font-family: var(--font-head);
    font-weight: var(--head-weight);
    letter-spacing: var(--tracking);
    line-height: 1.3;
    margin: 0;
    color: var(--ink);
}
.dg3 h1 { font-size: clamp(27px, 3.4vw, 40px); }
.dg3 h2 { font-size: clamp(19px, 2.1vw, 24px); }
.dg3 h3 { font-size: 17px; }
.dg3 p { margin: 0 0 12px; }
.dg3 p:last-child { margin-bottom: 0; }
.dg3 b, .dg3 strong { font-weight: 700; color: var(--ink); }
.dg3 .kw {
    font-weight: 700;
    color: var(--accent);
    border-bottom: 2px solid var(--accent-soft);
    padding-bottom: 1px;
}
:root[data-theme="dark"] .dg3 .kw { color: var(--accent2); border-bottom-color: var(--accent2-soft); }
.dg3 small { font-size: 12.5px; color: var(--muted); }
.dg3 code { font-family: var(--font-mono); font-size: .93em; background: var(--card2); padding: 1px 5px; border-radius: 4px; }
.dg3 .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dg3 .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.dg3 .sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 面包屑（复用公共 partial，只换皮肤） ---------- */
.dg3 .tsk-crumb-bar { background: transparent; border-bottom: 1px solid var(--line2); }
.dg3 .tsk-crumb-bar-in { max-width: 1120px; margin: 0 auto; padding: 11px 20px; }
.dg3 .tsk-crumb { font-size: 12.5px; color: var(--muted); margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.dg3 .tsk-crumb a { color: var(--muted); text-decoration: none; }
.dg3 .tsk-crumb a:hover { color: var(--accent); text-decoration: underline; }
.dg3 .tsk-crumb-sep { margin: 0 8px; opacity: .55; }
.dg3 .tsk-crumb-cur { color: var(--ink2); font-weight: 600; }

/* ---------- 通用结构件 ---------- */
.dg3-sec { margin: 0 0 22px; }
.dg3-sec-hd {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.dg3-sec-hd .idx {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
    color: var(--accent); font-weight: 700;
}
.dg3-sec-hd .hint { font-size: 12.5px; color: var(--muted); margin-left: auto; }
.dg3-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
}
.dg3-card--flat { box-shadow: none; background: var(--card2); }
.dg3-grid { display: grid; gap: 14px; }
.dg3-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dg3-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dg3-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dg3-divider { height: 1px; background: var(--line2); margin: 18px 0; border: 0; }

/* ---------- 表单原子 ---------- */
.dg3-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dg3-field > label,
.dg3-label {
    font-size: 13px; font-weight: 600; color: var(--ink2); line-height: 1.45;
}
.dg3-field .tip { font-size: 12px; color: var(--muted); font-weight: 400; }
.dg3 input[type="text"],
.dg3 input[type="number"],
.dg3 select,
.dg3 textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    line-height: 1.55;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.dg3 textarea { min-height: 118px; resize: vertical; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; }
.dg3 input::placeholder, .dg3 textarea::placeholder { color: var(--muted); opacity: .78; }
.dg3 input:focus, .dg3 select:focus, .dg3 textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.dg3 input[aria-invalid="true"], .dg3 select[aria-invalid="true"], .dg3 textarea[aria-invalid="true"] {
    border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg);
}
.dg3 select { appearance: none; padding-right: 30px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.dg3 input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.dg3 input[type="checkbox"], .dg3 input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
.dg3 .checkline { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--ink2); line-height: 1.6; }
.dg3 .checkline input { flex: 0 0 auto; margin-top: 4px; }

.dg3-acts { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 16px; }
.dg3-btn {
    appearance: none; border: 1px solid var(--line); background: var(--card);
    color: var(--ink2); font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
    line-height: 1.4; padding: 9px 16px; border-radius: var(--radius-sm);
    cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
    transition: transform .14s ease, border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
}
.dg3-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.dg3-btn:active { transform: translateY(0); }
.dg3-btn--main { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.dg3-btn--main:hover { background: var(--accent); color: var(--accent-ink); box-shadow: 0 5px 16px var(--accent-soft); }
.dg3-btn--alt { background: var(--accent2); color: #fff; border-color: var(--accent2); }
.dg3-btn--alt:hover { background: var(--accent2); color: #fff; }
.dg3-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.dg3 :focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }

.dg3-err {
    display: none; margin-top: 12px; padding: 10px 13px; font-size: 13.5px;
    color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad);
    border-radius: var(--radius-sm); line-height: 1.6;
}
.dg3-err.is-on { display: block; }
.dg3-note {
    font-size: 13.5px; color: var(--ink2); background: var(--card2);
    border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 11px 14px; line-height: 1.72;
}
.dg3-note.is-warn { border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.dg3-note.is-bad { border-left-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.dg3-note.is-ok { border-left-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.dg3-tag {
    display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.5;
    padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
}
.dg3-tag.is-ok { background: var(--ok-bg); color: var(--ok); }
.dg3-tag.is-warn { background: var(--warn-bg); color: var(--warn); }
.dg3-tag.is-bad { background: var(--bad-bg); color: var(--bad); }

/* ---------- 表格 / 滚动区 ---------- */
.dg3-table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.65; }
.dg3-table th, .dg3-table td { border-bottom: 1px solid var(--line2); padding: 9px 10px; text-align: left; vertical-align: top; }
.dg3-table th { color: var(--ink2); font-weight: 700; background: var(--card2); white-space: nowrap; }
.dg3-table td { color: var(--ink2); }
.dg3-table tr:last-child th, .dg3-table tr:last-child td { border-bottom: 0; }
.dg3-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dg3-scroll table { min-width: 520px; }

/* ---------- 结果 / 状态 ---------- */
.dg3-result { display: none; }
.dg3-result.is-on { display: block; }
.dg3-empty { color: var(--muted); font-size: 13.5px; padding: 14px 0; }
.dg3-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.dg3-kv > div { background: var(--card2); border: 1px solid var(--line2); border-radius: var(--radius-sm); padding: 10px 12px; }
.dg3-kv dt { font-size: 12px; color: var(--muted); margin: 0 0 3px; }
.dg3-kv dd { margin: 0; font-size: 18px; font-weight: 700; font-family: var(--font-mono); color: var(--accent); }
.dg3-kv dd small { font-size: 12px; font-weight: 400; }
.dg3-bar { height: 7px; border-radius: 99px; background: var(--line2); overflow: hidden; }
.dg3-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .5s ease; }
.dg3-ai-box { min-height: 24px; font-size: 14px; line-height: 1.8; color: var(--ink2); white-space: pre-wrap; }
.dg3-ai-status { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* ---------- FAQ / 正文阅读区 ---------- */
.dg3-prose { max-width: 860px; font-size: 15px; line-height: 1.92; color: var(--ink2); }
.dg3-prose h3 { margin: 20px 0 8px; }
.dg3-prose p { margin: 0 0 13px; }
.dg3-prose ul, .dg3-prose ol { margin: 0 0 14px; padding-left: 22px; }
.dg3-prose li { margin-bottom: 7px; }
.dg3-faq { display: grid; gap: 9px; }
.dg3-faq details {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 0 15px;
}
.dg3-faq summary {
    cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--ink);
    padding: 12px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.dg3-faq summary::-webkit-details-marker { display: none; }
.dg3-faq summary::after { content: "+"; color: var(--accent); font-family: var(--font-mono); font-size: 17px; }
.dg3-faq details[open] summary::after { content: "−"; }
.dg3-faq details > div { padding: 0 0 14px; font-size: 14px; line-height: 1.85; color: var(--ink2); }
.dg3-faq details > div p { margin: 0; }
.dg3-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.dg3-related a {
    display: flex; gap: 10px; align-items: center; text-decoration: none;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 11px 13px; transition: border-color .15s ease, transform .15s ease;
}
.dg3-related a:hover { border-color: var(--accent); transform: translateY(-2px); }
.dg3-related .ri { font-size: 20px; line-height: 1; }
.dg3-related b { display: block; font-size: 13.5px; color: var(--ink); }
.dg3-related small { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; }
.dg3-foot { margin-top: 26px; font-size: 12.5px; line-height: 1.8; color: var(--muted); }

/* ---------- 吐司（仅操作后创建） ---------- */
#dg3Toast {
    position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(12px);
    z-index: 100010; max-width: min(86vw, 520px); padding: 10px 18px;
    border-radius: 10px; font-size: 13.5px; line-height: 1.55;
    background: var(--ink); color: var(--bg); box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
    opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease;
}
#dg3Toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
#dg3Toast.is-bad { background: var(--bad); color: #fff; }

/* ---------- 结果弹窗（DOM 由 JS 在用户完成操作后创建，页面加载时不存在） ---------- */
#dg3ModalMask {
    position: fixed; inset: 0; z-index: 100020; background: rgba(10, 16, 23, .6);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    backdrop-filter: blur(2px);
}
#dg3Modal {
    width: min(640px, 100%); max-height: min(76vh, 720px); overflow: auto;
    background: var(--card); color: var(--ink); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: 0 22px 60px rgba(0, 0, 0, .32);
    padding: 22px 24px; font-size: 14px; line-height: 1.8;
}
#dg3Modal h3 { margin-bottom: 12px; }
#dg3Modal .dg3-modal-acts { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
#dg3Modal pre {
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
    white-space: pre-wrap; word-break: break-word; background: var(--card2);
    border: 1px solid var(--line2); border-radius: var(--radius-sm); padding: 12px; margin: 0;
    color: var(--ink2);
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
    .dg3-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dg3-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dg3-sec-hd .hint { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
    .dg3 { font-size: 14.5px; padding-bottom: 36px; }
    .dg3-wrap { padding: 0 14px; }
    .dg3 .tsk-crumb-bar-in { padding: 9px 14px; }
    .dg3-card { padding: 16px 14px; }
    .dg3-grid--2, .dg3-grid--3, .dg3-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .dg3-acts { gap: 7px; }
    .dg3-btn { padding: 8px 12px; font-size: 13px; }
    .dg3-prose { line-height: 1.85; }
}

/* 公共推荐位（layouts.app 内）在窄屏下的既有溢出：
   base.css 只在本组 10 页加载，因此下面的修复不会改动任何线上已有页面。 */
@media (max-width: 640px) {
    .tool-rec { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; box-sizing: border-box; }
    .tool-rec-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .tool-rec-item { min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
    .tool-rec-body, .tool-rec-body b, .tool-rec-body small { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
    .dg3 *, .dg3 *::before, .dg3 *::after { transition: none !important; animation: none !important; }
}

@media print {
    .dg3 { background: #fff; color: #000; }
    .dg3-acts, .dg3-btn, #dg3Toast, #dg3ModalMask { display: none !important; }
    .dg3-card { box-shadow: none; break-inside: avoid; }
}