/* ====== 车辆年检预约工具 · cib- 前缀 ====== */
.cib-page { --cib-bg:#0a1628; --cib-bg-2:#112040; --cib-accent:#22c55e; --cib-accent-2:#facc15; --cib-bad:#ef4444; --cib-warn:#f97316; --cib-text:#e2e8f0; --cib-muted:#94a3b8; --cib-card:#152a4a; --cib-border:#1e3a60; padding:28px 0 40px; color:var(--cib-text); }

/* Hero 车辆 SVG */
.cib-hero { position:relative; display:grid; grid-template-columns:280px 1fr 240px; gap:24px; align-items:center; padding:32px; background:linear-gradient(135deg, var(--cib-bg) 0%, var(--cib-bg-2) 100%); border-radius:20px; border:1px solid var(--cib-border); overflow:hidden; margin-bottom:28px; }
.cib-car { height:140px; display:flex; align-items:center; }
.cib-car-svg { width:100%; height:100%; filter:drop-shadow(0 8px 24px rgba(34,197,94,.15)); }
.cib-car-body { fill:#3b82f6; stroke:#1e40af; stroke-width:2; }
.cib-car-win { fill:#60a5fa; }
.cib-car-wheel { fill:#1e293b; stroke:#475569; stroke-width:3; }
.cib-car-wheel-h { fill:#64748b; }
.cib-plate { x:390; y:68; fill:var(--cib-accent); font-size:14px; font-weight:700; }
.cib-kicker { display:inline-block; padding:4px 12px; background:rgba(34,197,94,.15); color:var(--cib-accent); border-radius:999px; font-size:12px; font-weight:600; letter-spacing:1px; margin-bottom:12px; }
.cib-hero h1 { font-size:28px; font-weight:800; margin:0 0 10px; }
.cib-hero-sub { color:var(--cib-muted); margin:0 0 14px; line-height:1.6; }
.cib-hero-sub b { color:var(--cib-accent); }
.cib-hero-chips { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.cib-hero-chips li { padding:4px 10px; background:rgba(255,255,255,.06); border-radius:999px; font-size:12px; color:var(--cib-muted); }
.cib-hero-readout { background:linear-gradient(135deg, var(--cib-accent), #16a34a); color:#fff; padding:20px; border-radius:16px; text-align:center; box-shadow:0 8px 28px rgba(34,197,94,.3); }
.cib-readout-label { font-size:12px; opacity:.85; }
.cib-readout-num { display:block; font-size:24px; font-weight:900; margin:4px 0; }
.cib-readout-avg { font-size:13px; opacity:.9; }

/* 计算区 */
.cib-calc { display:grid; grid-template-columns:1.6fr 1fr; gap:24px; }
.cib-input-col { display:flex; flex-direction:column; gap:18px; }
.cib-panel { background:var(--cib-card); border:1px solid var(--cib-border); border-radius:16px; padding:22px; }
.cib-panel-head { display:flex; gap:14px; align-items:center; margin-bottom:16px; }
.cib-step { width:36px; height:36px; border-radius:10px; background:var(--cib-accent); color:#0a1628; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cib-panel-head h2 { font-size:17px; margin:0 0 2px; }
.cib-panel-head p { font-size:12px; color:var(--cib-muted); margin:0; }
.cib-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* 表单 */
.cib-field { display:flex; flex-direction:column; gap:4px; position:relative; }
.cib-label { font-size:12px; color:var(--cib-muted); }
.cib-input-wrap { position:relative; }
.cib-input { width:100%; padding:10px 12px; background:rgba(0,0,0,.25); border:1px solid var(--cib-border); border-radius:10px; color:var(--cib-text); font-size:14px; transition:border-color .2s; appearance:none; }
.cib-input:focus { outline:none; border-color:var(--cib-accent); }
select.cib-input { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.cib-unit { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--cib-muted); pointer-events:none; }
input[type="date"].cib-input { color-scheme: dark; }

/* 周期表 */
.cib-cycle-table { display:flex; flex-direction:column; gap:6px; font-size:13px; }
.cib-cycle-row { display:grid; grid-template-columns:80px 1fr 1fr; gap:10px; padding:10px 12px; background:rgba(0,0,0,.2); border-radius:8px; }
.cib-cycle-head { background:rgba(34,197,94,.15); font-weight:700; color:var(--cib-accent); }
.cib-cycle-row .cib-ok { color:var(--cib-accent); font-weight:600; }
.cib-cycle-row .cib-warn { color:var(--cib-warn); font-weight:600; }
.cib-cycle-row .cib-bad { color:var(--cib-bad); font-weight:600; }

/* 结果列 */
.cib-result-col { position:sticky; top:20px; display:flex; flex-direction:column; gap:14px; align-self:flex-start; }
.cib-result-hero { background:linear-gradient(135deg, #16a34a, #22c55e); color:#fff; padding:22px; border-radius:16px; text-align:center; box-shadow:0 8px 28px rgba(34,197,94,.3); }
.cib-result-hero.bad { background:linear-gradient(135deg, #dc2626, #ef4444); box-shadow:0 8px 28px rgba(239,68,68,.3); }
.cib-result-hero.warn { background:linear-gradient(135deg, #ea580c, #f97316); box-shadow:0 8px 28px rgba(249,115,22,.3); }
.cib-rh-label { font-size:12px; opacity:.9; }
.cib-rh-num { display:block; font-size:28px; font-weight:900; margin:4px 0; line-height:1.2; }
.cib-rh-sub { font-size:13px; opacity:.9; }
.cib-kpis { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cib-kpi { background:rgba(255,255,255,.04); border:1px solid var(--cib-border); border-radius:10px; padding:10px 12px; }
.cib-kpi span { display:block; font-size:11px; color:var(--cib-muted); }
.cib-kpi b { font-size:15px; color:var(--cib-accent); }
.cib-mini-card { background:rgba(255,255,255,.04); border:1px solid var(--cib-border); border-radius:12px; padding:14px 16px; }
.cib-mini-card h3 { margin:0 0 10px; font-size:14px; }
.cib-mini-card ul { margin:0; padding-left:18px; font-size:13px; color:var(--cib-muted); line-height:1.7; }
.cib-mini-card ul li b { color:var(--cib-text); }
.cib-exhaust-card { background:rgba(255,255,255,.04); border:1px solid rgba(239,68,68,.4); border-radius:12px; padding:14px 16px; }
.cib-exhaust-card h3 { margin:0 0 10px; font-size:14px; color:#fca5a5; }
.cib-exh-table { width:100%; border-collapse:collapse; font-size:13px; }
.cib-exh-table th { text-align:left; padding:6px 0; color:var(--cib-muted); border-bottom:1px solid var(--cib-border); font-weight:600; font-size:12px; }
.cib-exh-table td { padding:6px 0; border-bottom:1px dashed var(--cib-border); }
.cib-exh-table td:last-child { color:var(--cib-accent); text-align:right; }

/* FAQ */
.cib-faq { margin-top:28px; }
.cib-section-head { margin-bottom:14px; }
.cib-section-kicker { display:inline-block; font-size:11px; font-weight:700; color:var(--cib-accent); letter-spacing:2px; }
.cib-section-head h2 { font-size:20px; margin:4px 0 0; color:#fff; }
.faq-list .faq-item { background:var(--cib-card); border:1px solid var(--cib-border); border-radius:10px; margin-bottom:8px; padding:0; overflow:hidden; }
.faq-list summary { padding:14px 16px; cursor:pointer; font-weight:600; font-size:14px; list-style:none; display:flex; justify-content:space-between; align-items:center; color:var(--cib-text); }
.faq-list summary::after { content:'+'; font-size:18px; color:var(--cib-accent); }
.faq-list .faq-item[open] summary::after { content:'−'; }
.faq-list .faq-a { padding:0 16px 14px; font-size:13px; color:var(--cib-muted); line-height:1.7; }

.cib-top { position:fixed; right:20px; bottom:40px; width:44px; height:44px; border-radius:50%; background:var(--cib-accent); color:#0a1628; border:none; font-size:18px; font-weight:700; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .3s; z-index:99; }
.cib-top.show { opacity:1; pointer-events:auto; }

@media (prefers-color-scheme: light) {
    .cib-page { --cib-bg:#f8fafc; --cib-bg-2:#eef2f7; --cib-text:#0f172a; --cib-muted:#64748b; --cib-card:#fff; --cib-border:#e2e8f0; }
    .cib-input { background:#f1f5f9; color:#0f172a; }
}
[data-theme="light"] .cib-page { --cib-bg:#f8fafc; --cib-bg-2:#eef2f7; --cib-text:#0f172a; --cib-muted:#64748b; --cib-card:#fff; --cib-border:#e2e8f0; }

@media (max-width: 900px) {
    .cib-hero { grid-template-columns:1fr; }
    .cib-car { order:-1; height:110px; }
    .cib-calc { grid-template-columns:1fr; }
    .cib-result-col { position:static; }
}
@media (max-width: 520px) {
    .cib-grid2 { grid-template-columns:1fr; }
    .cib-cycle-row { grid-template-columns:60px 1fr; }
    .cib-cycle-row span:last-child { display:none; }
}