/* ============================================================
   growth-hormone-cost · 生长激素与性早熟治疗费用计算器
   儿科内分泌专科风（ghc-）：薄荷绿 + 暖橙 + 骨白
   ============================================================ */
.ghc-page {
    --ghc-mint: #7fd1b9;
    --ghc-mint-deep: #1e6b5a;
    --ghc-mint-soft: rgba(127, 209, 185, 0.12);
    --ghc-orange: #ff8c69;
    --ghc-orange-deep: #d95a38;
    --ghc-orange-soft: rgba(255, 140, 105, 0.12);
    --ghc-bone: #f5f0e6;
    --ghc-milk: #ffffff;
    --ghc-milk-deep: #faf5ed;
    --ghc-text: #1f3330;
    --ghc-muted: #6d7a75;
    --ghc-line: #e4dccf;
    --ghc-line-strong: #c8b99e;
    --ghc-ok: #4f8c6b;
    --ghc-warn: #b26a12;
    --ghc-danger: #c24545;
    --ghc-shadow: 0 8px 24px rgba(30, 107, 90, 0.08);
    color: var(--ghc-text);
    font-size: 15px; line-height: 1.75;
}

[data-theme="dark"] .ghc-page {
    --ghc-mint: #8fe0c6;
    --ghc-mint-deep: #b8f0de;
    --ghc-mint-soft: rgba(143, 224, 198, 0.14);
    --ghc-orange: #ffa07a;
    --ghc-orange-deep: #ffc4a8;
    --ghc-orange-soft: rgba(255, 160, 122, 0.14);
    --ghc-bone: #1a2220;
    --ghc-milk: #222a28;
    --ghc-milk-deep: #2a3430;
    --ghc-text: #e8f0ec;
    --ghc-muted: #93a39d;
    --ghc-line: #34403c;
    --ghc-line-strong: #485852;
    --ghc-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.ghc-page h1, .ghc-page h2, .ghc-page h3 { line-height: 1.35; }
.ghc-page b, .ghc-page strong { color: var(--ghc-mint-deep); }

/* Hero */
.ghc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(200px, 0.8fr) minmax(220px, 0.7fr);
    gap: 22px 28px;
    align-items: center;
    padding: 30px 32px 26px;
    margin-bottom: 26px;
    border: 1px solid var(--ghc-line);
    border-radius: 24px;
    background:
        radial-gradient(90% 120% at 100% 0%, var(--ghc-orange-soft), transparent 55%),
        radial-gradient(70% 100% at 0% 100%, var(--ghc-mint-soft), transparent 55%),
        var(--ghc-milk);
    box-shadow: var(--ghc-shadow);
}
.ghc-kicker { display: inline-block; padding: 5px 14px; margin-bottom: 12px; border-radius: 8px; background: var(--ghc-mint-soft); color: var(--ghc-mint-deep); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; }
.ghc-hero h1 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 900; }
.ghc-hero-sub { margin: 0 0 14px; max-width: 60ch; color: var(--ghc-muted); font-size: 15px; }
.ghc-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ghc-hero-chips li { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--ghc-line-strong); background: var(--ghc-milk-deep); color: var(--ghc-muted); font-size: 12px; font-weight: 700; }

/* Ruler (unique visual) */
.ghc-hero-ruler { position: relative; padding: 20px 10px 30px; }
.ghc-ruler-track {
    position: relative;
    height: 60px;
    background: var(--ghc-milk-deep);
    border: 1.5px solid var(--ghc-line-strong);
    border-radius: 8px;
    overflow: hidden;
}
.ghc-ruler-fill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 35%;
    background: linear-gradient(90deg, var(--ghc-mint), var(--ghc-orange));
    opacity: 0.25;
    transition: width 0.3s ease;
}
.ghc-ruler-mark {
    position: absolute; bottom: -2px; transform: translateX(-50%);
    font-size: 10px; font-weight: 800; color: var(--ghc-muted);
}
.ghc-ruler-mark::before { content: ''; position: absolute; top: -62px; left: 50%; transform: translateX(-50%); width: 1px; height: 56px; background: var(--ghc-line-strong); }
.ghc-ruler-mark span { display: block; margin-top: 8px; padding: 2px 6px; border-radius: 4px; background: var(--ghc-milk); white-space: nowrap; }
.ghc-ruler-mark { left: 0; }
.ghc-ruler-mark.ghc-mid { left: 50%; }
.ghc-ruler-mark.ghc-right { left: 100%; }
.ghc-ruler-needle {
    position: absolute; bottom: 22px; left: 35%;
    transform: translateX(-50%);
    color: var(--ghc-orange-deep);
    font-size: 20px;
    font-weight: 900;
    transition: left 0.3s ease;
    text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.ghc-hero-readout { display: grid; gap: 5px; padding: 18px 20px; border: 1px solid var(--ghc-line-strong); border-radius: 14px; border-top: 4px solid var(--ghc-mint-deep); background: var(--ghc-milk-deep); }
.ghc-readout-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--ghc-muted); text-transform: uppercase; }
.ghc-readout-num { font-size: 36px; font-weight: 900; line-height: 1; color: var(--ghc-orange-deep); font-variant-numeric: tabular-nums; }
.ghc-readout-avg { font-size: 13px; font-weight: 700; color: var(--ghc-muted); }

/* Calc */
.ghc-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr); gap: 22px; margin-bottom: 26px; }

.ghc-panel { padding: 22px 24px; border: 1px solid var(--ghc-line); border-radius: 18px; background: var(--ghc-milk); box-shadow: var(--ghc-shadow); margin-bottom: 16px; }
.ghc-panel-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.ghc-step { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, var(--ghc-mint-deep), var(--ghc-orange-deep)); color: #fff; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ghc-panel-head h2 { margin: 0 0 2px; font-size: 17px; font-weight: 900; }
.ghc-panel-head p { margin: 0; font-size: 12.5px; color: var(--ghc-muted); }

.ghc-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.ghc-field { display: grid; gap: 5px; }
.ghc-label { font-size: 12.5px; font-weight: 800; color: var(--ghc-muted); letter-spacing: 0.02em; }
.ghc-input-wrap, .ghc-select-wrap { position: relative; }
.ghc-input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--ghc-line-strong); border-radius: 10px; background: var(--ghc-milk); color: var(--ghc-text); font-size: 14px; font-weight: 600; transition: border-color 0.15s ease, box-shadow 0.15s ease; outline: none; }
.ghc-input:focus { border-color: var(--ghc-mint-deep); box-shadow: 0 0 0 3px rgba(30, 107, 90, 0.15); }
select.ghc-input { padding-right: 28px; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236d7a75' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
.ghc-input-wrap .ghc-unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: var(--ghc-muted); pointer-events: none; }

.ghc-error { padding: 10px 14px; margin-top: 10px; border-radius: 8px; background: rgba(194,69,69,0.10); color: var(--ghc-danger); font-size: 13px; font-weight: 700; }

.ghc-actions { display: flex; gap: 10px; margin-top: 14px; }
.ghc-btn { padding: 10px 22px; border: 1.5px solid var(--ghc-line-strong); border-radius: 10px; background: var(--ghc-milk-deep); color: var(--ghc-text); font-size: 13.5px; font-weight: 800; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease; }
.ghc-btn:hover { transform: translateY(-1px); border-color: var(--ghc-mint-deep); }
.ghc-btn--primary { border: none; background: linear-gradient(135deg, var(--ghc-mint-deep), var(--ghc-orange-deep)); color: #fff; box-shadow: 0 4px 14px rgba(30, 107, 90, 0.3); }

/* Result column */
.ghc-result-col { position: sticky; top: 20px; align-self: start; }
.ghc-result-hero { padding: 22px; border: 1px solid var(--ghc-line); border-radius: 18px; background: linear-gradient(135deg, var(--ghc-milk), var(--ghc-milk-deep)); border-top: 5px solid var(--ghc-orange); box-shadow: var(--ghc-shadow); text-align: center; margin-bottom: 14px; }
.ghc-rh-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--ghc-muted); text-transform: uppercase; display: block; }
.ghc-rh-num { font-size: 44px; font-weight: 900; line-height: 1; color: var(--ghc-orange-deep); font-variant-numeric: tabular-nums; margin: 10px 0 4px; display: block; }
.ghc-rh-sub { font-size: 13px; color: var(--ghc-muted); font-weight: 700; }

.ghc-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ghc-kpi { padding: 14px; border: 1px solid var(--ghc-line); border-radius: 12px; background: var(--ghc-milk); box-shadow: var(--ghc-shadow); text-align: center; }
.ghc-kpi span { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--ghc-muted); text-transform: uppercase; }
.ghc-kpi b { display: block; font-size: 20px; font-weight: 900; color: var(--ghc-mint-deep); font-variant-numeric: tabular-nums; margin: 6px 0 2px; }
.ghc-kpi small { font-size: 11px; color: var(--ghc-muted); }

.ghc-verdict { padding: 14px 18px; border-radius: 12px; background: var(--ghc-mint-soft); border-left: 4px solid var(--ghc-mint-deep); font-size: 13.5px; line-height: 1.8; color: var(--ghc-text); margin-bottom: 14px; }
.ghc-verdict b { color: var(--ghc-mint-deep); }
.ghc-verdict.is-warn { background: rgba(178,106,18,0.10); border-left-color: var(--ghc-warn); }
.ghc-verdict.is-danger { background: rgba(194,69,69,0.10); border-left-color: var(--ghc-danger); }

.ghc-mini-card { padding: 16px 18px; border: 1px solid var(--ghc-line); border-radius: 14px; background: var(--ghc-milk); box-shadow: var(--ghc-shadow); margin-bottom: 12px; }
.ghc-mini-card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 900; color: var(--ghc-orange-deep); }
.ghc-review-list { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ghc-muted); line-height: 1.9; }

/* Insurance box */
.ghc-ins-yes { padding: 12px 14px; border-radius: 10px; background: rgba(79,140,107,0.10); color: var(--ghc-ok); font-size: 13px; font-weight: 700; }
.ghc-ins-no { padding: 12px 14px; border-radius: 10px; background: rgba(178,106,18,0.10); color: var(--ghc-warn); font-size: 13px; font-weight: 700; }

/* A4 */
.ghc-sheet-wrap { padding: 22px 24px; margin-bottom: 26px; border: 1px dashed var(--ghc-line-strong); border-radius: 14px; background: var(--ghc-milk-deep); }
.ghc-sheet-head { margin-bottom: 14px; }
.ghc-sheet-kicker { font-size: 11px; font-weight: 900; letter-spacing: 0.14em; color: var(--ghc-mint-deep); }
.ghc-sheet-head h2 { margin: 4px 0 4px; font-size: 18px; font-weight: 900; }
.ghc-sheet { padding: 22px 28px; border: 1px solid var(--ghc-line-strong); border-radius: 10px; background: var(--ghc-milk); box-shadow: var(--ghc-shadow); }
.ghc-sheet-top { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 3px solid var(--ghc-mint-deep); }
.ghc-sheet-top h3 { margin: 0; font-size: 17px; font-weight: 900; }
.ghc-sheet-top p { margin: 0; font-size: 11.5px; color: var(--ghc-muted); }
.ghc-sheet-meta { text-align: right; font-size: 12px; color: var(--ghc-muted); }
.ghc-sheet-meta b { font-size: 12.5px; color: var(--ghc-text); }
.ghc-sheet-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 14px; }
.ghc-sheet-table th, .ghc-sheet-table td { padding: 6px 8px; border: 1px solid var(--ghc-line-strong); text-align: left; }
.ghc-sheet-table th { background: var(--ghc-milk-deep); font-size: 11px; font-weight: 800; }
.ghc-sheet-foot { padding-top: 10px; margin-top: 14px; border-top: 1px solid var(--ghc-line); font-size: 11px; color: var(--ghc-muted); text-align: center; }

/* FAQ */
.ghc-faq { margin-bottom: 26px; }
.ghc-section-head { margin-bottom: 14px; }
.ghc-section-kicker { font-size: 11px; font-weight: 900; letter-spacing: 0.18em; color: var(--ghc-mint-deep); }
.ghc-section-head h2 { margin: 4px 0 4px; font-size: 22px; font-weight: 900; }

/* Top */
.ghc-top { position: fixed; right: 26px; bottom: 30px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--ghc-line-strong); border-radius: 10px; background: var(--ghc-milk); color: var(--ghc-mint-deep); font-size: 17px; font-weight: 900; cursor: pointer; box-shadow: var(--ghc-shadow); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.15s ease; z-index: 60; }
.ghc-top.is-show { opacity: 1; pointer-events: auto; }
.ghc-top:hover { transform: translateY(-2px); }

@media (max-width: 1080px) {
    .ghc-hero { grid-template-columns: minmax(0, 1fr); }
    .ghc-hero-ruler { display: none; }
    .ghc-calc { grid-template-columns: minmax(0, 1fr); }
    .ghc-result-col { position: static; }
}
@media (max-width: 640px) {
    .ghc-hero, .ghc-panel, .ghc-result-hero { padding: 18px 16px; }
    .ghc-grid2 { grid-template-columns: minmax(0, 1fr); }
    .ghc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
    body * { visibility: hidden !important; }
    .ghc-sheet, .ghc-sheet * { visibility: visible !important; }
    .ghc-sheet { position: absolute; left: 0; top: 0; width: 100%; border: none; box-shadow: none; }
    .ghc-top { display: none !important; }
}