/* ==========================================================================
   加油卡折扣与每公里油费计算器 · 「油枪能量站」视觉
   石墨金属 + 荧光青绿 + 琥珀油价 + 电光青
   ========================================================================== */

.fcs-page {
    --fcs-bg: #eef1f3;
    --fcs-card: #ffffff;
    --fcs-card-2: #f5f7f8;
    --fcs-ink: #1d2228;
    --fcs-ink-2: #525b66;
    --fcs-ink-3: #8a929c;
    --fcs-graphite: #23282f;
    --fcs-graphite-2: #2e353e;
    --fcs-green: #00a95c;
    --fcs-green-2: #35e08a;
    --fcs-green-soft: rgba(0, 169, 92, .12);
    --fcs-amber: #ef7d13;
    --fcs-amber-soft: rgba(239, 125, 19, .12);
    --fcs-cyan: #0e9fc4;
    --fcs-cyan-soft: rgba(14, 159, 196, .12);
    --fcs-red: #d0453b;
    --fcs-line: #dde2e6;
    --fcs-line-2: #eaeef0;
    --fcs-shadow: 0 14px 34px rgba(28, 36, 45, .1);
    --fcs-shadow-sm: 0 4px 14px rgba(28, 36, 45, .07);
    --fcs-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fcs-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace;

    color: var(--fcs-ink);
    font-family: var(--fcs-sans);
    line-height: 1.75;
    font-size: 15px;
}

:root[data-theme="dark"] .fcs-page {
    --fcs-bg: #101317;
    --fcs-card: #181c22;
    --fcs-card-2: #1e232a;
    --fcs-ink: #eef2f5;
    --fcs-ink-2: #a7b0ba;
    --fcs-ink-3: #767f8a;
    --fcs-graphite: #0c0f13;
    --fcs-graphite-2: #15191f;
    --fcs-green: #35e08a;
    --fcs-green-2: #5cf0a5;
    --fcs-green-soft: rgba(53, 224, 138, .14);
    --fcs-amber: #ffa245;
    --fcs-amber-soft: rgba(255, 162, 69, .14);
    --fcs-cyan: #38c8e8;
    --fcs-cyan-soft: rgba(56, 200, 232, .14);
    --fcs-red: #ef6b60;
    --fcs-line: #2b323b;
    --fcs-line-2: #232931;
    --fcs-shadow: 0 16px 40px rgba(0, 0, 0, .5);
    --fcs-shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);
}

/* ---------------- Hero：加油站顶棚 ---------------- */
.fcs-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--fcs-shadow);
    margin-bottom: 26px;
    background: var(--fcs-graphite);
    border: 1px solid var(--fcs-line);
}
.fcs-awning {
    height: 22px;
    background: repeating-linear-gradient(115deg, var(--fcs-amber) 0 26px, #f4f7f8 26px 52px);
    opacity: .9;
}
.fcs-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 30px;
    align-items: center;
    padding: 34px 38px 36px;
    color: #eef2f5;
}
.fcs-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fcs-mono);
    font-size: 12px;
    letter-spacing: .18em;
    color: var(--fcs-green-2);
    background: rgba(53, 224, 138, .1);
    border: 1px solid rgba(53, 224, 138, .4);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 16px;
}
.fcs-hero h1 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -.01em;
    margin: 0 0 14px;
    color: #fff;
}
.fcs-lead { font-size: 15px; color: rgba(238, 242, 245, .78); max-width: 700px; margin: 0 0 22px; line-height: 1.95; }
.fcs-lead b { color: var(--fcs-green-2); font-weight: 700; }
.fcs-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; }
.fcs-tags li {
    font-size: 12.5px;
    color: rgba(238, 242, 245, .74);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    padding: 5px 11px;
    background: rgba(255, 255, 255, .04);
}
.fcs-tags li::before { content: "▸ "; color: var(--fcs-amber); }

.fcs-hero-cta { display: flex; flex-direction: column; gap: 10px; }

/* 油价电子屏 */
.fcs-screen {
    background: linear-gradient(180deg, #0b0e12, #14181e);
    border: 1px solid rgba(53, 224, 138, .35);
    border-radius: 16px;
    padding: 18px 20px 20px;
    box-shadow: inset 0 0 30px rgba(53, 224, 138, .1);
    text-align: center;
}
.fcs-screen-label {
    font-family: var(--fcs-mono);
    font-size: 11px;
    letter-spacing: .2em;
    color: rgba(53, 224, 138, .8);
    margin-bottom: 8px;
}
.fcs-screen-val {
    font-family: var(--fcs-mono);
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    color: var(--fcs-green-2);
    text-shadow: 0 0 18px rgba(53, 224, 138, .45);
    letter-spacing: -.02em;
}
.fcs-screen-val small { font-size: 15px; color: rgba(238, 242, 245, .6); margin-left: 4px; text-shadow: none; }
.fcs-screen-sub { font-family: var(--fcs-mono); font-size: 12px; color: rgba(238, 242, 245, .55); margin-top: 10px; }
.fcs-screen-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); margin-top: 12px; overflow: hidden; }
.fcs-screen-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--fcs-cyan), var(--fcs-green-2)); }

.fcs-btn {
    appearance: none;
    border: 1px solid var(--fcs-line);
    background: var(--fcs-card);
    color: var(--fcs-ink);
    font-family: var(--fcs-sans);
    font-size: 14px;
    font-weight: 700;
    padding: 11px 18px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    text-align: center;
}
.fcs-btn:hover { transform: translateY(-2px); box-shadow: var(--fcs-shadow-sm); }
.fcs-btn--primary {
    background: linear-gradient(135deg, var(--fcs-green-2), var(--fcs-green));
    border-color: transparent;
    color: #062014;
    box-shadow: 0 8px 22px rgba(0, 169, 92, .3);
}
.fcs-btn--ghost { background: transparent; }
.fcs-btn--sm { padding: 7px 13px; font-size: 13px; border-radius: 9px; }
.fcs-hero .fcs-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #eef2f5; }
.fcs-hero .fcs-btn--primary { background: linear-gradient(135deg, var(--fcs-green-2), var(--fcs-green)); color: #062014; border-color: transparent; }

/* ---------------- KPI ---------------- */
.fcs-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.fcs-kpi {
    background: var(--fcs-card);
    border: 1px solid var(--fcs-line);
    border-radius: 16px;
    padding: 18px 18px 16px;
    box-shadow: var(--fcs-shadow-sm);
    position: relative;
    overflow: hidden;
}
.fcs-kpi::after {
    content: "";
    position: absolute;
    right: -18px; top: -18px;
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--fcs-green-soft);
}
.fcs-kpi.is-amber::after { background: var(--fcs-amber-soft); }
.fcs-kpi.is-cyan::after { background: var(--fcs-cyan-soft); }
.fcs-kpi.is-red::after { background: rgba(208, 69, 59, .12); }
.fcs-kpi-label { display: block; font-size: 12.5px; color: var(--fcs-ink-3); letter-spacing: .05em; margin-bottom: 8px; position: relative; }
.fcs-kpi-val {
    display: block;
    font-family: var(--fcs-mono);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--fcs-ink);
    position: relative;
}
.fcs-kpi-val small { font-size: 13.5px; font-weight: 600; color: var(--fcs-ink-3); margin-left: 3px; }
.fcs-kpi-note { display: block; font-size: 12px; color: var(--fcs-ink-3); margin-top: 7px; position: relative; }
.fcs-kpi.is-green .fcs-kpi-val { color: var(--fcs-green); }
.fcs-kpi.is-amber .fcs-kpi-val { color: var(--fcs-amber); }
.fcs-kpi.is-cyan .fcs-kpi-val { color: var(--fcs-cyan); }
.fcs-kpi.is-red .fcs-kpi-val { color: var(--fcs-red); }

/* ---------------- 提示 ---------------- */
.fcs-err {
    display: none;
    background: rgba(208, 69, 59, .1);
    border: 1px solid var(--fcs-red);
    color: var(--fcs-red);
    border-radius: 12px;
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 20px;
}
.fcs-err.show { display: block; }

/* ---------------- 面板 ---------------- */
.fcs-panel {
    background: var(--fcs-card);
    border: 1px solid var(--fcs-line);
    border-radius: 18px;
    padding: 26px 28px 28px;
    box-shadow: var(--fcs-shadow-sm);
    margin-bottom: 20px;
}
.fcs-panel-head { margin-bottom: 20px; }
.fcs-pk {
    display: inline-block;
    font-family: var(--fcs-mono);
    font-size: 11.5px;
    letter-spacing: .18em;
    color: var(--fcs-green);
    background: var(--fcs-green-soft);
    border-radius: 5px;
    padding: 3px 9px;
    margin-bottom: 10px;
}
.fcs-panel-head h2 { font-size: 21px; font-weight: 800; margin: 0 0 8px; line-height: 1.4; letter-spacing: -.01em; }
.fcs-panel-head p { margin: 0; font-size: 13.5px; color: var(--fcs-ink-2); line-height: 1.9; }
.fcs-panel-head p b { color: var(--fcs-ink); }

/* ---------------- 表单 ---------------- */
.fcs-grid { display: grid; gap: 16px; }
.fcs-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fcs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fcs-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fcs-field { display: block; min-width: 0; }
.fcs-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--fcs-ink-2); margin-bottom: 7px; }
.fcs-label em { font-style: normal; color: var(--fcs-red); margin-left: 3px; }
.fcs-label i { font-style: normal; color: var(--fcs-ink-3); font-weight: 400; margin-left: 4px; }
.fcs-input, .fcs-select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--fcs-line);
    background: var(--fcs-card-2);
    color: var(--fcs-ink);
    border-radius: 11px;
    padding: 10px 13px;
    font-size: 14.5px;
    font-family: var(--fcs-sans);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.fcs-input:focus, .fcs-select:focus {
    outline: none;
    border-color: var(--fcs-green);
    background: var(--fcs-card);
    box-shadow: 0 0 0 4px var(--fcs-green-soft);
}
.fcs-mono { font-family: var(--fcs-mono); font-weight: 700; }
.fcs-hint { font-size: 11.5px; color: var(--fcs-ink-3); margin-top: 6px; line-height: 1.6; }

.fcs-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.fcs-chip {
    appearance: none;
    border: 1px solid var(--fcs-line);
    background: var(--fcs-card-2);
    color: var(--fcs-ink-2);
    font-family: var(--fcs-sans);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 15px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .16s ease;
}
.fcs-chip:hover { border-color: var(--fcs-green); color: var(--fcs-green); }
.fcs-chip.on { background: var(--fcs-graphite); border-color: var(--fcs-graphite); color: #fff; }
:root[data-theme="dark"] .fcs-chip.on { background: var(--fcs-green); border-color: var(--fcs-green); color: #062014; }

/* ---------------- 优惠叠加轨道 ---------------- */
.fcs-track { display: grid; gap: 12px; }
.fcs-node {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    border: 1px solid var(--fcs-line);
    background: var(--fcs-card-2);
    border-radius: 14px;
    padding: 14px 16px;
}
.fcs-node-num {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-family: var(--fcs-mono);
    font-weight: 700;
    font-size: 14px;
    background: var(--fcs-graphite);
    color: var(--fcs-green-2);
}
.fcs-node h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 800; }
.fcs-node p { margin: 0 0 12px; font-size: 12.5px; color: var(--fcs-ink-3); line-height: 1.7; }
.fcs-node .fcs-grid { gap: 12px; }

/* ---------------- 表格 ---------------- */
.fcs-table-wrap { overflow-x: auto; border: 1px solid var(--fcs-line); border-radius: 14px; background: var(--fcs-card-2); }
.fcs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.fcs-table th {
    background: var(--fcs-card);
    color: var(--fcs-ink-2);
    font-weight: 800;
    font-size: 12.5px;
    text-align: left;
    padding: 11px 13px;
    border-bottom: 2px solid var(--fcs-line);
    white-space: nowrap;
}
.fcs-table td { padding: 11px 13px; border-bottom: 1px solid var(--fcs-line-2); vertical-align: middle; }
.fcs-table tr:last-child td { border-bottom: none; }
.fcs-table tbody tr:hover { background: var(--fcs-green-soft); }
.fcs-cell-out { font-family: var(--fcs-mono); font-weight: 700; white-space: nowrap; }
.fcs-cell-out.good { color: var(--fcs-green); }
.fcs-cell-out.bad { color: var(--fcs-red); }
.fcs-plan-name { font-weight: 700; }
.fcs-plan-name small { display: block; font-weight: 400; font-size: 11.5px; color: var(--fcs-ink-3); }
.fcs-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    border-radius: 5px;
    padding: 3px 8px;
    background: var(--fcs-graphite);
    color: var(--fcs-green-2);
    white-space: nowrap;
}
.fcs-badge.amber { background: var(--fcs-amber-soft); color: var(--fcs-amber); }

/* ---------------- 操作条 ---------------- */
.fcs-item-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.fcs-item-sum { font-size: 12.5px; color: var(--fcs-ink-3); }
.fcs-item-sum b { font-family: var(--fcs-mono); color: var(--fcs-ink); font-weight: 700; }
.fcs-mini-btn {
    appearance: none;
    border: 1px dashed var(--fcs-green);
    background: var(--fcs-green-soft);
    color: var(--fcs-green);
    font-family: var(--fcs-sans);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: all .16s ease;
}
.fcs-mini-btn:hover { background: var(--fcs-green); color: #062014; }

/* ---------------- 结论 ---------------- */
.fcs-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.fcs-fact {
    border: 1px solid var(--fcs-line);
    border-left: 4px solid var(--fcs-cyan);
    background: var(--fcs-card-2);
    border-radius: 12px;
    padding: 15px 16px;
}
.fcs-fact.warn { border-left-color: var(--fcs-amber); }
.fcs-fact.good { border-left-color: var(--fcs-green); }
.fcs-fact.danger { border-left-color: var(--fcs-red); }
.fcs-fact h3 { margin: 0 0 7px; font-size: 14.5px; font-weight: 800; }
.fcs-fact p { margin: 0; font-size: 13px; color: var(--fcs-ink-2); line-height: 1.9; }
.fcs-fact b { color: var(--fcs-ink); font-family: var(--fcs-mono); }

/* ---------------- FAQ ---------------- */
.fcs-faq { display: grid; gap: 10px; }
.fcs-faq details {
    border: 1px solid var(--fcs-line);
    border-radius: 12px;
    background: var(--fcs-card-2);
    overflow: hidden;
}
.fcs-faq summary {
    cursor: pointer;
    padding: 13px 16px;
    font-weight: 800;
    font-size: 14.5px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 9px;
}
.fcs-faq summary::-webkit-details-marker { display: none; }
.fcs-faq summary::before {
    content: "Q";
    font-family: var(--fcs-mono);
    font-size: 12px;
    font-weight: 700;
    color: #062014;
    background: var(--fcs-green-2);
    border-radius: 5px;
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.fcs-faq-a { padding: 0 16px 15px 45px; font-size: 13.5px; color: var(--fcs-ink-2); line-height: 1.95; }
.fcs-faq-a b { color: var(--fcs-ink); }

/* ---------------- 预 ---------------- */
.fcs-pre {
    background: var(--fcs-card-2);
    border: 1px solid var(--fcs-line);
    border-radius: 12px;
    padding: 14px 16px;
    font-family: var(--fcs-mono);
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--fcs-ink-2);
    overflow-x: auto;
    margin: 0;
    max-height: 320px;
    white-space: pre;
}

/* ---------------- 打印稿 ---------------- */
.fcs-sheet { display: none; }
.fcs-sheet-inner { font-family: var(--fcs-sans); color: #1d2228; padding: 24px; background: #fff; }
.fcs-sheet h2 { font-size: 20px; margin: 0 0 4px; }
.fcs-sheet .fcs-sheet-sub { font-size: 12px; color: #667; margin-bottom: 16px; }
.fcs-sheet table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 16px; }
.fcs-sheet th, .fcs-sheet td { border: 1px solid #d9dde0; padding: 6px 8px; text-align: left; }
.fcs-sheet th { background: #eef1f3; }

/* ---------------- Toast ---------------- */
.fcs-toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%) translateY(12px);
    background: var(--fcs-graphite);
    color: #eef2f5;
    font-size: 13.5px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 9999;
    max-width: 88vw;
    text-align: center;
}
.fcs-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1080px) {
    .fcs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fcs-hero-inner { grid-template-columns: 1fr; }
    .fcs-hero-cta { flex-direction: row; flex-wrap: wrap; }
    .fcs-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .fcs-page { font-size: 14.5px; }
    .fcs-hero-inner { padding: 24px 20px 26px; }
    .fcs-hero h1 { font-size: 25px; }
    .fcs-lead { font-size: 14.5px; }
    .fcs-screen-val { font-size: 38px; }
    .fcs-panel { padding: 20px 16px 22px; border-radius: 14px; }
    .fcs-panel-head h2 { font-size: 18.5px; }
    .fcs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .fcs-kpi { padding: 14px 13px; }
    .fcs-kpi-val { font-size: 22px; }
    .fcs-grid-2, .fcs-grid-3, .fcs-grid-4 { grid-template-columns: minmax(0, 1fr); }
    .fcs-node { grid-template-columns: 1fr; }
    .fcs-node-num { width: 28px; height: 28px; }
    .fcs-faq-a { padding-left: 16px; }
    .fcs-hero-cta .fcs-btn { flex: 1 1 46%; }
}

/* ---------------- 打印 ---------------- */
@media print {
    body { background: #fff !important; }
    .nav-header, .footer, .back-to-top, #clicaptcha-container, .detail-breadcrumb,
    #navEvadeBtn, .nav-evade-btn, #evadeFab, .evade-fab,
    #navMask, .nav-mask, .ma-page-modal,
    .fcs-page, .fcs-toast { display: none !important; }
    .fcs-sheet { display: block !important; }
    .fcs-sheet-inner { padding: 0; }
    @page { margin: 12mm; }
}