/*!
 * #11 厨房重油污清洁 · grease-cleaner-ratio
 * 独立设计系统「配方本」：柠檬纸底 + 深墨绿 + 柠檬黄 + 陶橙，衬线标题 + 等宽数字
 * 布局：配方杯首屏 → 四档快捷条 → 左参数单据台 / 右配方单与流程 → 速查表 → 批量汇总
 * 深浅双主题跟随导航 #themeToggle，页面不设独立开关。
 */
.gcr-page, .gcr-modal, .gcr-sheet, .gcr-toast {
    --gcr-bg: #f8f4e7;
    --gcr-bg2: #efe8d3;
    --gcr-card: #fffdf6;
    --gcr-card2: #fbf6e9;
    --gcr-line: #ded4b8;
    --gcr-line2: #c9bc99;
    --gcr-ink: #2c3229;
    --gcr-ink2: #5a6352;
    --gcr-ink3: #89907a;
    --gcr-green: #1f4d3a;
    --gcr-green2: #2f6b50;
    --gcr-green-soft: rgba(31, 77, 58, .09);
    --gcr-lemon: #b8860b;
    --gcr-lemon-soft: rgba(232, 185, 35, .22);
    --gcr-clay: #c4622d;
    --gcr-clay-soft: rgba(196, 98, 45, .11);
    --gcr-shadow: 0 20px 44px -30px rgba(44, 50, 41, .55);
    --gcr-shadow-s: 0 8px 20px -14px rgba(44, 50, 41, .5);
    --gcr-radius: 18px;
    --gcr-serif: Georgia, "Noto Serif SC", "Songti SC", "SimSun", serif;
    --gcr-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-theme="dark"] .gcr-page,
:root[data-theme="dark"] .gcr-modal,
:root[data-theme="dark"] .gcr-sheet,
:root[data-theme="dark"] .gcr-toast {
    --gcr-bg: #121813;
    --gcr-bg2: #0d120e;
    --gcr-card: #1b231c;
    --gcr-card2: #202a21;
    --gcr-line: #33402f;
    --gcr-line2: #465640;
    --gcr-ink: #eaf0e3;
    --gcr-ink2: #b8c5ad;
    --gcr-ink3: #84957b;
    --gcr-green: #8fd6a0;
    --gcr-green2: #a6e5b4;
    --gcr-green-soft: rgba(143, 214, 160, .13);
    --gcr-lemon: #f0c94a;
    --gcr-lemon-soft: rgba(240, 201, 74, .16);
    --gcr-clay: #ef9a68;
    --gcr-clay-soft: rgba(239, 154, 104, .15);
    --gcr-shadow: 0 20px 44px -26px rgba(0, 0, 0, .85);
    --gcr-shadow-s: 0 8px 20px -12px rgba(0, 0, 0, .75);
}

.gcr-page {
    background: linear-gradient(180deg, var(--gcr-bg) 0%, var(--gcr-bg2) 100%);
    color: var(--gcr-ink);
    font-size: 15px;
    line-height: 1.85;
    min-height: 60vh;
    padding-bottom: 40px;
}
.gcr-page *, .gcr-page *::before, .gcr-page *::after { box-sizing: border-box; }
.gcr-page .gcr-wrap { max-width: 1180px; margin: 0 auto; padding: 22px 16px 10px; }
.gcr-page h2 { font-family: var(--gcr-serif); font-weight: 700; letter-spacing: .01em; }
.gcr-page .detail-breadcrumb { margin-bottom: 18px; }

/* ============ Hero ============ */
.gcr-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 24px;
    align-items: center;
    padding: 30px 32px 28px;
    border: 1.5px solid var(--gcr-line);
    border-radius: 22px;
    background:
        repeating-linear-gradient(0deg, transparent 0 27px, var(--gcr-green-soft) 27px 28px),
        linear-gradient(135deg, var(--gcr-card) 0%, var(--gcr-card2) 100%);
    box-shadow: var(--gcr-shadow);
    position: relative;
    overflow: hidden;
}
.gcr-hero::after {
    content: ''; position: absolute; right: -60px; top: -60px; width: 210px; height: 210px;
    border-radius: 50%; background: var(--gcr-lemon-soft); pointer-events: none;
}
.gcr-kicker {
    display: inline-block; padding: 3px 13px; border-radius: 3px;
    font-family: var(--gcr-mono); font-size: 12px; font-weight: 700; letter-spacing: .08em;
    color: #fff; background: var(--gcr-green); transform: rotate(-1.5deg);
}
.gcr-hero h1 {
    margin: 16px 0 10px; font-family: var(--gcr-serif);
    font-size: clamp(27px, 3.5vw, 39px); line-height: 1.28; font-weight: 800; letter-spacing: -.01em;
}
.gcr-sub { margin: 0; max-width: 44em; font-size: 15.5px; line-height: 1.95; color: var(--gcr-ink2); }
.gcr-sub b { color: var(--gcr-ink); font-weight: 700; box-shadow: inset 0 -7px 0 var(--gcr-lemon-soft); }
.gcr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.gcr-fact {
    padding: 12px 14px; border: 1px dashed var(--gcr-line2); border-radius: 12px;
    background: var(--gcr-card); text-align: center;
}
.gcr-fact b { display: block; font-family: var(--gcr-mono); font-size: 22px; font-weight: 800; color: var(--gcr-green); }
.gcr-fact.hot b { color: var(--gcr-clay); }
.gcr-fact span { font-size: 12px; color: var(--gcr-ink3); }

.gcr-cup-box {
    position: relative; z-index: 1; padding: 16px 18px 12px; border-radius: 16px;
    border: 1px solid var(--gcr-line); background: var(--gcr-card); box-shadow: var(--gcr-shadow-s);
}
.gcr-cup-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gcr-cup-head b { font-family: var(--gcr-serif); font-size: 15px; }
.gcr-cup-head span { font-size: 12px; color: var(--gcr-ink3); }
.gcr-cup { display: block; width: 100%; max-width: 260px; height: 190px; margin: 6px auto 0; color: var(--gcr-ink3); }
.gcr-cup-tick { font-family: var(--gcr-mono); font-size: 10px; fill: var(--gcr-ink3); }
.gcr-cup-legend { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--gcr-ink2); }
.gcr-cup-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gcr-cup-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ============ 首屏快捷条 ============ */
.gcr-quick {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin: 14px 0 20px; padding: 12px 16px;
    border: 1px solid var(--gcr-line); border-radius: 14px; background: var(--gcr-card);
}
.gcr-quick-label { font-size: 13px; font-weight: 700; color: var(--gcr-ink2); margin-right: 4px; }
.gcr-quick-btn {
    padding: 7px 13px; border: 1px solid var(--gcr-line2); border-radius: 999px;
    background: var(--gcr-card2); color: var(--gcr-ink2); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: .18s;
}
.gcr-quick-btn:hover { border-color: var(--gcr-green); color: var(--gcr-green); background: var(--gcr-green-soft); }
.gcr-quick-btn--main { margin-left: auto; background: var(--gcr-green); border-color: var(--gcr-green); color: #fff; }
.gcr-quick-btn--main:hover { background: var(--gcr-green2); color: #fff; }

/* ============ 主体 ============ */
.gcr-body { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: start; }
.gcr-body > * { min-width: 0; }
.gcr-panel, .gcr-recipe, .gcr-flow, .gcr-warn, .gcr-ai, .gcr-lib, .gcr-batch {
    border: 1px solid var(--gcr-line); border-radius: var(--gcr-radius);
    background: var(--gcr-card); box-shadow: var(--gcr-shadow-s);
}
.gcr-panel { padding: 20px 18px; }
.gcr-panel h2, .gcr-recipe h2, .gcr-flow h2, .gcr-warn h2, .gcr-ai h2, .gcr-lib h2, .gcr-batch h2 {
    margin: 0 0 4px; font-size: 19px;
}
.gcr-hint { margin: 0 0 16px; font-size: 12.5px; line-height: 1.7; color: var(--gcr-ink3); }
.gcr-field { margin-bottom: 16px; }
.gcr-label {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    margin-bottom: 7px; font-size: 13.5px; font-weight: 700;
}
.gcr-label em { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--gcr-ink3); }
.gcr-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 11px; background: var(--gcr-bg2); }
.gcr-seg--wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gcr-seg button {
    padding: 7px 4px; border: 0; border-radius: 8px; background: transparent;
    color: var(--gcr-ink2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .16s;
}
.gcr-seg button:hover { color: var(--gcr-green); }
.gcr-seg button.is-on { background: var(--gcr-card); color: var(--gcr-green); box-shadow: 0 2px 8px -4px rgba(0,0,0,.35); }
.gcr-input {
    width: 100%; padding: 9px 11px; border: 1px solid var(--gcr-line2); border-radius: 10px;
    background: var(--gcr-card2); color: var(--gcr-ink); font-family: var(--gcr-mono); font-size: 15px;
}
.gcr-input:focus { outline: 2px solid var(--gcr-green); outline-offset: 1px; }
.gcr-range { width: 100%; margin-top: 8px; accent-color: var(--gcr-green); }
.gcr-switch {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 9px 11px; border: 1px dashed var(--gcr-line2); border-radius: 10px; cursor: pointer;
}
.gcr-switch b { font-size: 13px; font-weight: 700; }
.gcr-switch b span { display: block; font-size: 11.5px; font-weight: 500; color: var(--gcr-ink3); }
.gcr-switch input { width: 18px; height: 18px; accent-color: var(--gcr-clay); flex: none; }
.gcr-note-view { margin: -4px 0 14px; padding: 7px 10px; border-left: 3px solid var(--gcr-lemon); background: var(--gcr-lemon-soft); font-size: 12.5px; border-radius: 0 8px 8px 0; }
.gcr-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gcr-actions--tight { display: flex; flex-wrap: wrap; margin: 12px 0 4px; }
.gcr-btn {
    padding: 9px 12px; border: 1px solid var(--gcr-line2); border-radius: 10px;
    background: var(--gcr-card2); color: var(--gcr-ink); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: .16s;
}
.gcr-btn:hover { border-color: var(--gcr-green); color: var(--gcr-green); }
.gcr-btn--main { grid-column: 1 / -1; background: var(--gcr-clay); border-color: var(--gcr-clay); color: #fff; font-size: 14.5px; }
.gcr-btn--main:hover { background: #a94f22; border-color: #a94f22; color: #fff; }
.gcr-btn-ai { border-color: var(--gcr-green); color: var(--gcr-green); background: var(--gcr-green-soft); }
.gcr-err { margin: 12px 0 0; padding: 9px 11px; border-radius: 9px; background: var(--gcr-clay-soft); color: var(--gcr-clay); font-size: 12.5px; font-weight: 700; }

.gcr-main { display: grid; gap: 16px; }
.gcr-recipe, .gcr-flow, .gcr-warn, .gcr-ai { padding: 20px 20px 18px; }
.gcr-recipe-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.gcr-recipe-head > div { display: flex; align-items: center; gap: 10px; }
.gcr-stamp {
    padding: 3px 9px; border: 2px solid var(--gcr-clay); border-radius: 4px;
    color: var(--gcr-clay); font-family: var(--gcr-serif); font-size: 12px; font-weight: 800;
    transform: rotate(-4deg);
}
.gcr-recipe-meta { font-family: var(--gcr-mono); font-size: 12px; color: var(--gcr-ink3); }
.gcr-table-scroll { overflow-x: auto; }
.gcr-table, .gcr-lib-table, .gcr-batch-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gcr-table th, .gcr-table td, .gcr-lib-table th, .gcr-lib-table td, .gcr-batch-table th, .gcr-batch-table td {
    padding: 9px 10px; border-bottom: 1px solid var(--gcr-line); text-align: left; vertical-align: middle;
}
.gcr-table th, .gcr-lib-table th, .gcr-batch-table th { background: var(--gcr-bg2); font-size: 12px; font-weight: 700; color: var(--gcr-ink2); white-space: nowrap; }
.gcr-table td, .gcr-lib-table td.num, .gcr-batch-table td.num { font-family: var(--gcr-mono); }
.gcr-table .num, .gcr-lib-table .num, .gcr-batch-table .num { text-align: right; }
.gcr-table tbody tr:last-child td { border-bottom: 0; }
.gcr-table .gcr-agent { font-weight: 700; }
.gcr-table .gcr-agent i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; }
.gcr-table tr.is-off td { color: var(--gcr-ink3); text-decoration: line-through; }
.gcr-recipe-foot { margin-top: 13px; padding: 11px 13px; border-radius: 10px; background: var(--gcr-green-soft); font-size: 13px; line-height: 1.8; }
.gcr-recipe-foot b { font-family: var(--gcr-mono); color: var(--gcr-green); }
.gcr-flow-list { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: gcrstep; display: grid; gap: 9px; }
.gcr-flow-list li { counter-increment: gcrstep; position: relative; padding: 10px 12px 10px 46px; border: 1px solid var(--gcr-line); border-radius: 10px; background: var(--gcr-card2); font-size: 13px; line-height: 1.75; }
.gcr-flow-list li::before {
    content: counter(gcrstep); position: absolute; left: 12px; top: 11px;
    width: 24px; height: 24px; border-radius: 50%; background: var(--gcr-green); color: #fff;
    font-family: var(--gcr-mono); font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.gcr-flow-list b { color: var(--gcr-green); }
.gcr-warn { border-color: var(--gcr-clay); background: linear-gradient(180deg, var(--gcr-clay-soft), var(--gcr-card) 60%); }
.gcr-warn ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 7px; font-size: 13px; line-height: 1.75; }
.gcr-warn li::marker { color: var(--gcr-clay); }
.gcr-ai-tip { margin: 4px 0 12px; font-size: 12.5px; color: var(--gcr-ink3); line-height: 1.7; }
.gcr-ai-box { margin-top: 13px; padding: 13px 15px; border-left: 3px solid var(--gcr-green); border-radius: 0 10px 10px 0; background: var(--gcr-green-soft); font-size: 13.5px; line-height: 1.9; white-space: pre-wrap; }
.gcr-ai-box.is-err { border-left-color: var(--gcr-clay); background: var(--gcr-clay-soft); color: var(--gcr-clay); }

/* ============ 速查 / 批量 ============ */
.gcr-lib, .gcr-batch { margin-top: 20px; padding: 20px; }
.gcr-lib-table tbody tr.is-on { background: var(--gcr-lemon-soft); }
.gcr-lib-table tbody tr.is-on td { font-weight: 700; color: var(--gcr-green); }
.gcr-batch-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.gcr-batch-head .gcr-hint { margin: 0 0 12px; }
.gcr-batch-list { display: grid; gap: 8px; }
.gcr-batch-row { display: grid; grid-template-columns: 1.3fr 1fr .7fr 1fr .9fr auto; gap: 7px; align-items: center; }
.gcr-batch-row input, .gcr-batch-row select {
    min-width: 0; width: 100%; padding: 7px 9px; border: 1px solid var(--gcr-line2); border-radius: 8px;
    background: var(--gcr-card2); color: var(--gcr-ink); font-size: 12.5px;
}
.gcr-batch-row select { font-family: inherit; }
.gcr-mini-x { width: 30px; height: 30px; border: 1px solid var(--gcr-line2); border-radius: 8px; background: var(--gcr-card2); color: var(--gcr-clay); font-size: 15px; cursor: pointer; }
.gcr-batch-table-wrap { margin-top: 12px; }
.gcr-batch-table { min-width: 760px; font-size: 12.5px; }
.gcr-batch-table th, .gcr-batch-table td { padding: 7px 9px; }
.gcr-batch-table tfoot td { background: var(--gcr-green-soft); font-weight: 800; color: var(--gcr-green); border-bottom: 0; }

/* ============ 浮层 ============ */
.gcr-modal[hidden] { display: none !important; }
.gcr-modal {
    position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(18, 24, 19, .6); backdrop-filter: blur(3px);
}
.gcr-sheet { width: min(520px, 100%); padding: 24px; border-radius: 18px; border: 1px solid var(--gcr-line); background: var(--gcr-card); box-shadow: var(--gcr-shadow); }
.gcr-sheet h3 { margin: 0 0 8px; font-family: var(--gcr-serif); font-size: 20px; }
.gcr-sheet p { margin: 0 0 14px; font-size: 13.5px; color: var(--gcr-ink2); line-height: 1.8; }
.gcr-sheet-code { display: block; padding: 11px; border-radius: 9px; background: var(--gcr-bg2); font-family: var(--gcr-mono); font-size: 12px; word-break: break-all; color: var(--gcr-green); }
.gcr-sheet-actions { margin-top: 16px; text-align: right; }
.gcr-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(16px);
    z-index: 95; padding: 10px 18px; border-radius: 999px;
    background: var(--gcr-green); color: #fff; font-size: 13.5px; font-weight: 600;
    opacity: 0; pointer-events: none; transition: .25s; box-shadow: var(--gcr-shadow);
}
.gcr-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ 深色细节 ============ */
:root[data-theme="dark"] .gcr-kicker, :root[data-theme="dark"] .gcr-btn--main, :root[data-theme="dark"] .gcr-quick-btn--main { color: #0e1610; }
:root[data-theme="dark"] .gcr-seg button.is-on { color: var(--gcr-green); }
:root[data-theme="dark"] .gcr-fact { background: var(--gcr-card2); }
:root[data-theme="dark"] .gcr-hero { background: linear-gradient(135deg, var(--gcr-card) 0%, var(--gcr-card2) 100%); }

/* ============ 响应式 ============ */
@media (max-width: 980px) {
    .gcr-hero { grid-template-columns: 1fr; }
    .gcr-cup-box { max-width: 420px; }
    .gcr-body { grid-template-columns: 1fr; }
    .gcr-panel { order: 0; }
}
@media (max-width: 620px) {
    .gcr-page .gcr-wrap { padding: 16px 12px 8px; }
    .gcr-hero { padding: 22px 18px; }
    .gcr-hero h1 { font-size: 26px; }
    .gcr-facts { gap: 6px; }
    .gcr-fact b { font-size: 17px; }
    .gcr-quick-btn--main { margin-left: 0; }
    .gcr-recipe, .gcr-flow, .gcr-warn, .gcr-ai, .gcr-lib, .gcr-batch, .gcr-panel { padding: 16px 14px; }
    .gcr-batch-row { grid-template-columns: 1fr 1fr; }
    .gcr-batch-row .gcr-mini-x { width: 100%; }
    .gcr-table, .gcr-lib-table { min-width: 0; }
    .gcr-table th, .gcr-table td, .gcr-lib-table th, .gcr-lib-table td { padding: 7px 6px; font-size: 12px; }
}
@media print {
    .gcr-page { background: #fff; }
    .gcr-hero, .gcr-quick, .gcr-panel, .gcr-flow, .gcr-warn, .gcr-ai, .gcr-lib, .gcr-batch, .tskb, .detail-breadcrumb, .gcr-modal, .gcr-toast { display: none !important; }
    .gcr-body { display: block; }
    .gcr-recipe { border: 1px solid #999; box-shadow: none; }
}


/* 窄屏：公共「相关工具推荐」模块的 grid item 默认 min-width:auto 会被内容撑出横向滚动。
   仅在本批页面级样式里修正，不改动站内任何公共 CSS 与已有页面。 */
@media (max-width: 620px) {
    .tool-rec-grid { grid-template-columns: minmax(0, 1fr); }
    .tool-rec-grid > .tool-rec-item { min-width: 0; max-width: 100%; width: auto; }
    .tool-rec-body, .tool-rec-body b, .tool-rec-body small { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
}