/*!
 * #57 游戏年龄分级对照 · game-age-rating-guide
 * 独立设计系统「分级档案柜」：牛皮纸白 + 墨绿 + 分级色标（绿/青/黄/橙/红/黑）
 * 版式：首屏适龄查询 + 三套体系立体标牌 + 互查矩阵 / 批量对照
 * 主题：浅色默认，深色由公共导航 #themeToggle 控制
 */
.gar-page, .gar-modal, .gar-sheet, .gar-toast {
    --gar-bg: #f7f3e9;
    --gar-card: #fffdf7;
    --gar-card2: #f3eee1;
    --gar-line: #e2d9c5;
    --gar-line2: #cbbfa4;
    --gar-ink: #2b2a22;
    --gar-ink2: #5e5c4c;
    --gar-ink3: #918c78;
    --gar-green: #1d4b3c;
    --gar-green-soft: rgba(29, 75, 60, .09);
    --gar-brass: #a97b2c;
    --gar-brass-soft: rgba(169, 123, 44, .13);
    --gar-lv3: #4a9d5b;
    --gar-lv7: #2f8f8f;
    --gar-lv12: #d9a520;
    --gar-lv16: #e07b2f;
    --gar-lv18: #c0392b;
    --gar-black: #25231f;
    --gar-red: #b7402f;
    --gar-red-soft: rgba(183, 64, 47, .12);
    --gar-shadow: 0 20px 44px -30px rgba(43, 42, 34, .55);
    --gar-shadow-s: 0 8px 20px -14px rgba(43, 42, 34, .42);
    --gar-radius: 12px;
    --gar-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    --gar-serif: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
}
:root[data-theme="dark"] .gar-page,
:root[data-theme="dark"] .gar-modal,
:root[data-theme="dark"] .gar-sheet,
:root[data-theme="dark"] .gar-toast {
    --gar-bg: #141a16;
    --gar-card: #1d2620;
    --gar-card2: #222c25;
    --gar-line: #344238;
    --gar-line2: #455749;
    --gar-ink: #ecf0e6;
    --gar-ink2: #b8c5b6;
    --gar-ink3: #87988a;
    --gar-green: #8fd5b4;
    --gar-green-soft: rgba(143, 213, 180, .12);
    --gar-brass: #e0bb72;
    --gar-brass-soft: rgba(224, 187, 114, .14);
    --gar-lv3: #76cf8c;
    --gar-lv7: #63c6c6;
    --gar-lv12: #eac860;
    --gar-lv16: #f0a068;
    --gar-lv18: #ef8573;
    --gar-black: #0f1511;
    --gar-red: #ef8573;
    --gar-red-soft: rgba(239, 133, 115, .14);
    --gar-shadow: 0 20px 44px -28px rgba(0, 0, 0, .8);
    --gar-shadow-s: 0 8px 20px -12px rgba(0, 0, 0, .7);
}
.gar-page { color: var(--gar-ink); background: var(--gar-bg); font-size: 15px; line-height: 1.82; min-height: 60vh; }
.gar-page *, .gar-page *::before, .gar-page *::after { box-sizing: border-box; }
.gar-page .gar-wrap { max-width: 1200px; margin: 0 auto; padding: 20px 16px 8px; }
.gar-page h1, .gar-page h2, .gar-page h3 { margin: 0; }
.gar-page b, .gar-page strong { font-weight: 700; }
.gar-hint { margin: 0; font-size: 12.8px; color: var(--gar-ink3); }
.gar-eyebrow { font: 700 10.5px/1.4 var(--gar-mono); letter-spacing: .14em; color: var(--gar-ink3); }

/* ============ HERO：档案柜 ============ */
.gar-hero {
    display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 24px; align-items: center; padding: 30px 34px;
    border: 1.5px solid var(--gar-line2); border-radius: 8px;
    background:
        repeating-linear-gradient(0deg, transparent 0 27px, rgba(169, 123, 44, .045) 27px 28px),
        linear-gradient(135deg, var(--gar-card) 0%, var(--gar-card2) 100%);
    box-shadow: var(--gar-shadow);
}
.gar-kicker {
    display: inline-block; padding: 4px 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em;
    color: var(--gar-green); background: var(--gar-green-soft);
    border: 1px solid var(--gar-green); border-radius: 3px;
}
.gar-hero h1 { margin: 14px 0 10px; font: 800 clamp(26px, 3.2vw, 36px)/1.32 var(--gar-serif); color: var(--gar-green); }
.gar-sub { margin: 0; max-width: 48em; font-size: 15.5px; line-height: 1.95; color: var(--gar-ink2); }
.gar-sub b { color: var(--gar-ink); border-bottom: 2px solid var(--gar-brass-soft); }
.gar-hero-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 22px; }
.gar-mini { display: flex; flex-direction: column; gap: 5px; }
.gar-mini > span { font-size: 12.5px; font-weight: 700; color: var(--gar-ink2); }
.gar-mini input { width: 104px; }
.gar-mini--wide select { width: 178px; }
.gar-mini input, .gar-input {
    padding: 10px 12px; font-family: var(--gar-mono); font-size: 15px; font-weight: 700;
    color: var(--gar-ink); background: var(--gar-card);
    border: 1.5px solid var(--gar-line2); border-radius: 5px; outline: none;
}
.gar-mini input:focus, .gar-input:focus { border-color: var(--gar-green); box-shadow: 0 0 0 3px var(--gar-green-soft); }
.gar-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.gar-fact { padding: 11px 12px; background: var(--gar-card); border: 1px dashed var(--gar-line2); border-radius: 5px; }
.gar-fact b { display: block; font: 800 21px/1.3 var(--gar-mono); color: var(--gar-green); }
.gar-fact span { font-size: 11.5px; color: var(--gar-ink3); }

.gar-hero-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start; }
.gar-hero-cards > p { grid-column: 1 / -1; margin: 4px 0 0; text-align: center; font-size: 11.5px; color: var(--gar-ink3); }
.gar-plate {
    min-height: 138px; padding: 10px 8px; display: flex; flex-direction: column; justify-content: space-between;
    border-radius: 4px; box-shadow: 4px 5px 0 rgba(43, 42, 34, .16), var(--gar-shadow-s);
    transform: rotate(-1.5deg);
}
.gar-plate:nth-child(2) { transform: rotate(1.2deg); }
.gar-plate:nth-child(3) { transform: rotate(-.8deg); }
.gar-plate span { font: 800 11px/1 var(--gar-mono); letter-spacing: .12em; }
.gar-plate b { font: 900 clamp(28px, 3.4vw, 40px)/1 var(--gar-serif); }
.gar-plate em { font: 600 10px/1.3 var(--gar-mono); font-style: normal; letter-spacing: .04em; }
.gar-plate--esrb { color: #f5e7c8; background: var(--gar-black); border: 2px solid var(--gar-brass); }
.gar-plate--esrb b { color: #e8c87a; }
.gar-plate--pegi { color: #fff; background: var(--gar-lv16); border: 2px solid #fff; }
.gar-plate--cero { color: var(--gar-black); background: #fdfaf0; border: 2px solid var(--gar-black); }
.gar-plate--cero b { color: var(--gar-black); }

/* ============ 通用控件 ============ */
.gar-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px; font-size: 13.5px; font-weight: 700; line-height: 1.4; cursor: pointer;
    color: var(--gar-green); background: var(--gar-card);
    border: 1.5px solid var(--gar-line2); border-radius: 5px;
    transition: transform .15s, border-color .15s;
}
.gar-btn:hover { transform: translateY(-1px); border-color: var(--gar-green); }
.gar-btn--main { padding: 11px 22px; font-size: 15px; color: #fff; background: var(--gar-green); border-color: var(--gar-green); }
.gar-btn--main:hover { background: var(--gar-brass); border-color: var(--gar-brass); }
:root[data-theme="dark"] .gar-btn--main { color: #0f1c15; }
.gar-quickbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 14px 0 18px; }
.gar-quick-label { font-size: 13px; font-weight: 700; color: var(--gar-ink2); }
.gar-quick { padding: 7px 14px; font-size: 12.8px; font-weight: 700; cursor: pointer; color: var(--gar-ink2);
    background: var(--gar-card); border: 1px solid var(--gar-line2); border-radius: 3px; }
.gar-quick:hover, .gar-quick.is-on { color: #fff; background: var(--gar-green); border-color: var(--gar-green); }

.gar-body { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.gar-panel, .gar-result, .gar-section {
    background: var(--gar-card); border: 1.5px solid var(--gar-line); border-radius: var(--gar-radius);
    box-shadow: var(--gar-shadow-s);
}
.gar-panel { padding: 20px 18px; }
.gar-panel h2, .gar-section h2, .gar-result h2 { font: 800 19px/1.4 var(--gar-serif); color: var(--gar-green); }
.gar-panel > .gar-hint { margin: 4px 0 16px; }
.gar-field { margin-bottom: 16px; }
.gar-label { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; margin-bottom: 7px; font-size: 13.5px; font-weight: 700; }
.gar-label em { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--gar-ink3); text-align: right; }
.gar-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gar-check { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 11.8px; cursor: pointer;
    background: var(--gar-card2); border: 1px solid var(--gar-line); border-radius: 4px; }
.gar-check input { accent-color: var(--gar-green); }
.gar-check span { line-height: 1.35; }
.gar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.gar-actions .gar-btn { width: 100%; padding: 9px 6px; font-size: 12.8px; }
.gar-actions .gar-btn--main { grid-column: 1 / -1; font-size: 14.5px; padding: 11px; }
.gar-err { margin: 12px 0 0; padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--gar-red);
    background: var(--gar-red-soft); border-radius: 5px; }
.gar-err[hidden] { display: none; }
.gar-panel-foot { margin: 12px 0 0; font-size: 11.8px; line-height: 1.65; color: var(--gar-ink3); }

/* ============ 适龄结果 ============ */
.gar-main { min-width: 0; }
.gar-result { padding: 20px 22px; margin-bottom: 16px; border-top: 5px solid var(--gar-green); }
.gar-result.is-bad { border-top-color: var(--gar-red); }
.gar-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 13px; }
.gar-result h2 { margin-top: 3px; font-size: 22px; }
.gar-badge { padding: 5px 14px; font-size: 13px; font-weight: 800; border-radius: 3px; color: #fff; background: var(--gar-green); }
.is-bad .gar-badge { background: var(--gar-red); }
.gar-result-text { margin: 0 0 16px; font-size: 14px; line-height: 1.9; color: var(--gar-ink2); }
.gar-result-text b { color: var(--gar-ink); }
.gar-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gar-kpi { padding: 12px 13px; background: var(--gar-card2); border: 1px solid var(--gar-line); border-radius: 5px; }
.gar-kpi > span { display: block; font-size: 12px; font-weight: 700; color: var(--gar-ink2); }
.gar-kpi b { display: block; margin: 3px 0 1px; font: 800 20px/1.35 var(--gar-mono); color: var(--gar-green); }
.gar-kpi em { font-style: normal; font-size: 11px; color: var(--gar-ink3); }
.gar-advice { margin-top: 15px; display: flex; flex-direction: column; gap: 7px; }
.gar-advice-row { padding: 9px 12px; font-size: 13.2px; line-height: 1.75; color: var(--gar-ink2);
    background: var(--gar-card2); border-left: 3px solid var(--gar-brass); border-radius: 0 5px 5px 0; }
.gar-advice-row b { color: var(--gar-ink); }

/* ============ 三体系标牌 ============ */
.gar-section { padding: 20px 22px; margin-bottom: 16px; }
.gar-systems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gar-system { min-width: 0; padding: 12px; background: var(--gar-card2); border: 1px solid var(--gar-line2); border-radius: 6px; }
.gar-system-head { margin-bottom: 10px; }
.gar-system-head b { display: block; font: 900 20px/1.2 var(--gar-serif); color: var(--gar-green); }
.gar-system-head span { display: block; font-size: 11.5px; color: var(--gar-ink2); }
.gar-system-head em { display: block; font-style: normal; font-size: 11px; color: var(--gar-ink3); }
.gar-levels { display: flex; flex-direction: column; gap: 6px; }
.gar-level { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 9px; width: 100%;
    padding: 6px 8px; text-align: left; cursor: pointer; background: var(--gar-card);
    border: 1px solid var(--gar-line); border-radius: 4px; }
.gar-level:hover, .gar-level.is-on { border-color: var(--gar-green); box-shadow: 0 0 0 2px var(--gar-green-soft); }
.gar-level b { display: grid; place-items: center; min-height: 34px; font: 900 16px/1 var(--gar-mono); color: #fff;
    background: var(--gar-lv3); border-radius: 3px; }
.gar-level span { font-size: 11.8px; line-height: 1.5; color: var(--gar-ink2); }
.gar-level[data-age="0"] b, .gar-level[data-age="3"] b, .gar-level[data-age="6"] b { background: var(--gar-lv3); }
.gar-level[data-age="7"] b, .gar-level[data-age="10"] b { background: var(--gar-lv7); }
.gar-level[data-age="12"] b, .gar-level[data-age="13"] b { background: var(--gar-lv12); }
.gar-level[data-age="15"] b, .gar-level[data-age="16"] b, .gar-level[data-age="17"] b { background: var(--gar-lv16); }
.gar-level[data-age="18"] b { background: var(--gar-lv18); }
.gar-level.is-blocked { opacity: .58; }
.gar-level.is-blocked b { background: var(--gar-ink3); }
.gar-detail { margin-top: 14px; padding: 14px 16px; background: var(--gar-card2); border: 1px dashed var(--gar-line2); border-radius: 6px; }
.gar-detail h3 { font: 800 16px/1.4 var(--gar-serif); color: var(--gar-green); }
.gar-detail p { margin: 6px 0 0; font-size: 13.2px; line-height: 1.85; color: var(--gar-ink2); }
.gar-detail .gar-detail-tag { display: inline-block; margin-right: 8px; padding: 2px 9px; font: 800 12px/1.6 var(--gar-mono);
    color: #fff; background: var(--gar-green); border-radius: 3px; }

/* ============ 表格 / 描述符 / 跨区 ============ */
.gar-table-scroll { overflow-x: auto; }
.gar-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gar-table th, .gar-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--gar-line); }
.gar-table th { font-size: 12px; font-weight: 800; color: var(--gar-green); background: var(--gar-card2); white-space: nowrap; }
.gar-table .num { text-align: right; font-family: var(--gar-mono); }
.gar-table tbody tr:last-child td { border-bottom: 0; }
.gar-table td b { color: var(--gar-ink); }
.gar-table .ok { color: var(--gar-green); font-weight: 800; }
.gar-table .no { color: var(--gar-red); font-weight: 800; }
.gar-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gar-two-col .gar-section { margin-bottom: 0; }
.gar-desc-list { display: flex; flex-direction: column; gap: 7px; }
.gar-desc-row { padding: 9px 11px; background: var(--gar-card2); border: 1px solid var(--gar-line); border-radius: 5px; }
.gar-desc-row b { display: block; font-size: 13px; }
.gar-desc-row span { font-size: 12px; line-height: 1.7; color: var(--gar-ink2); }
.gar-empty { padding: 12px; font-size: 13px; color: var(--gar-ink3); background: var(--gar-card2); border-radius: 5px; }
.gar-cross { display: flex; flex-direction: column; gap: 8px; }
.gar-cross-item { padding: 10px 12px; background: var(--gar-card2); border-left: 3px solid var(--gar-brass); border-radius: 0 5px 5px 0; }
.gar-cross-item b { display: block; font-size: 13px; }
.gar-cross-item span { font-size: 12px; line-height: 1.7; color: var(--gar-ink2); }

/* ============ 批量 ============ */
.gar-batch { margin-top: 4px; }
.gar-batch-list { display: flex; flex-direction: column; gap: 8px; }
.gar-batch-row { display: grid; grid-template-columns: 1.2fr .8fr .7fr .7fr 34px; gap: 8px; align-items: center;
    padding: 9px 11px; background: var(--gar-card2); border: 1px solid var(--gar-line); border-radius: 5px; }
.gar-batch-row input, .gar-batch-row select { width: 100%; padding: 7px 9px; font-size: 12.8px; color: var(--gar-ink);
    background: var(--gar-card); border: 1.5px solid var(--gar-line); border-radius: 4px; outline: none; }
.gar-batch-row .del { width: 30px; height: 30px; font-size: 18px; cursor: pointer; color: var(--gar-red);
    background: var(--gar-red-soft); border: 0; border-radius: 4px; }
.gar-batch-foot { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.gar-batch .gar-table-scroll { margin-top: 14px; }

/* ============ 浮层 ============ */
.gar-modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
    padding: 18px; background: rgba(20, 28, 20, .62); }
.gar-modal[hidden] { display: none !important; }
.gar-sheet { position: relative; width: min(520px, 100%); padding: 26px 28px; border-radius: 8px;
    background: var(--gar-card); border: 2px solid var(--gar-line2); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }
.gar-sheet h3 { font: 800 20px/1.4 var(--gar-serif); color: var(--gar-green); }
.gar-sheet p { font-size: 13.5px; line-height: 1.8; color: var(--gar-ink2); }
.gar-sheet-code { display: block; padding: 11px 13px; margin: 6px 0 16px; font: 500 12px/1.7 var(--gar-mono);
    word-break: break-all; color: var(--gar-green); background: var(--gar-card2); border: 1px dashed var(--gar-line2); border-radius: 4px; }
.gar-sheet-actions { display: flex; justify-content: flex-end; }
.gar-modal-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; font-size: 21px; line-height: 1;
    cursor: pointer; color: var(--gar-ink2); background: var(--gar-card2); border: 1px solid var(--gar-line); border-radius: 4px; }
.gar-toast { position: fixed; left: 50%; bottom: 30px; z-index: 950; transform: translateX(-50%) translateY(20px);
    padding: 10px 20px; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--gar-green);
    border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.gar-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
:root[data-theme="dark"] .gar-toast { color: #0f1c15; background: var(--gar-green); }

/* ============ 响应式 ============ */
@media (max-width: 1080px) {
    .gar-body { grid-template-columns: 290px minmax(0, 1fr); }
    .gar-systems { grid-template-columns: 1fr; }
    .gar-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .gar-hero { grid-template-columns: 1fr; }
    .gar-body { grid-template-columns: 1fr; }
    .gar-panel { order: 2; }
    .gar-main { order: 1; }
    .gar-two-col { grid-template-columns: 1fr; }
    .gar-hero-cards { max-width: 460px; }
}
@media (max-width: 600px) {
    .gar-page .gar-wrap { padding: 14px 12px 8px; }
    .gar-hero { padding: 20px 16px; }
    .gar-hero h1 { font-size: 25px; }
    .gar-sub { font-size: 14px; }
    .gar-hero-form .gar-btn--main { width: 100%; }
    .gar-mini--wide select { width: 100%; }
    .gar-hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .gar-fact b { font-size: 16px; }
    .gar-kpis { grid-template-columns: 1fr 1fr; }
    .gar-section, .gar-result { padding: 15px 14px; }
    .gar-levels { grid-template-columns: 1fr; }
    .gar-batch-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gar-batch-row > * { min-width: 0; }
    .gar-table th, .gar-table td { padding: 8px 6px; font-size: 12px; }
}
@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; box-sizing: border-box; }
    .tool-rec-body, .tool-rec-body b, .tool-rec-body small { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
    .tskb-legend { min-width: 0; width: 100%; table-layout: fixed; }
    .tskb-legend th, .tskb-legend td { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
    .tskb-tabs { flex-wrap: wrap; }
}
@media print {
    .gar-page { background: #fff; }
    .gar-panel, .gar-quickbar, .gar-modal, .gar-toast, .tskb { display: none !important; }
    .gar-body { display: block; }
    .gar-hero, .gar-result, .gar-section { box-shadow: none; break-inside: avoid; }
}