/* ============================================================
   apartment-cleaning-calc · 开荒保洁与入住清洁计算器
   清洁刷风（acc-）：蓝+粉+黄三色刷 + 工单勾表
   ============================================================ */
.acc-page {
    --acc-blue: #2b6cb0; --acc-blue-deep: #1a4a80; --acc-blue-soft: rgba(43,108,176,0.14);
    --acc-pink: #d97a9b; --acc-pink-deep: #b8587c; --acc-pink-soft: rgba(217,122,155,0.14);
    --acc-yellow: #e8c85d; --acc-yellow-deep: #b89a3a;
    --acc-paper: #ffffff; --acc-paper-deep: #f4f6fa;
    --acc-text: #1a2430; --acc-muted: #6a7480;
    --acc-line: #e2e8ef; --acc-line-strong: #bfcad8;
    --acc-shadow: 0 6px 18px rgba(26,74,128,0.08);
    color: var(--acc-text); font-size: 15px; line-height: 1.75;
}
[data-theme="dark"] .acc-page {
    --acc-blue: #6ba8e8; --acc-blue-deep: #a4c4f0; --acc-blue-soft: rgba(107,168,232,0.14);
    --acc-pink: #f0a0be; --acc-pink-deep: #f6c0d4; --acc-pink-soft: rgba(240,160,190,0.14);
    --acc-paper: #22252b; --acc-paper-deep: #2a2f38;
    --acc-text: #e8ecf2; --acc-muted: #939cb0;
    --acc-line: #30343c; --acc-line-strong: #444a56;
    --acc-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.acc-page b { color: var(--acc-blue-deep); }

.acc-hero { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(180px,0.8fr) minmax(200px,0.7fr); gap: 22px; align-items: center; padding: 28px 30px 24px; margin-bottom: 22px; border: 1px solid var(--acc-line); border-radius: 20px; background:
    linear-gradient(135deg, var(--acc-blue-soft) 0%, transparent 50%),
    linear-gradient(315deg, var(--acc-pink-soft) 0%, transparent 50%),
    var(--acc-paper); box-shadow: var(--acc-shadow); }
.acc-kicker { display: inline-block; padding: 5px 14px; margin-bottom: 12px; border-radius: 8px; background: var(--acc-blue-soft); color: var(--acc-blue-deep); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; }
.acc-hero h1 { margin: 0 0 10px; font-size: clamp(26px,3.4vw,36px); font-weight: 900; }
.acc-hero-sub { margin: 0 0 14px; max-width: 58ch; color: var(--acc-muted); }
.acc-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.acc-hero-chips li { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--acc-line-strong); background: var(--acc-paper-deep); color: var(--acc-muted); font-size: 12px; font-weight: 700; }

/* Brush visual (unique) */
.acc-hero-brushes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; justify-content: center; padding: 14px 10px; }
.acc-brush { height: 80px; border-radius: 6px 6px 0 0; position: relative; }
.acc-brush::before { content: ''; position: absolute; bottom: 100%; left: 10%; right: 10%; height: 16px; border-radius: 4px 4px 0 0; background: var(--acc-wood, #8b5a2b); }
.acc-brush::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 8px; border-radius: 0 0 4px 4px; }
.acc-brush-blue { background: linear-gradient(to bottom, var(--acc-blue), rgba(43,108,176,0.6)); }
.acc-brush-pink { background: linear-gradient(to bottom, var(--acc-pink), rgba(217,122,155,0.6)); }
.acc-brush-yellow { background: linear-gradient(to bottom, var(--acc-yellow), rgba(232,200,93,0.6)); }

.acc-hero-readout { padding: 18px; border: 1px solid var(--acc-line-strong); border-radius: 14px; border-top: 4px solid var(--acc-pink); background: var(--acc-paper-deep); text-align: center; }
.acc-readout-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--acc-muted); }
.acc-readout-num { font-size: 30px; font-weight: 900; color: var(--acc-blue-deep); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.acc-readout-avg { font-size: 12px; color: var(--acc-muted); }

/* Calc */
.acc-calc { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,0.9fr); gap: 22px; margin-bottom: 22px; }
.acc-panel { padding: 20px; border: 1px solid var(--acc-line); border-radius: 16px; background: var(--acc-paper); box-shadow: var(--acc-shadow); margin-bottom: 14px; }
.acc-panel-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.acc-step { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--acc-blue); color: #fff; font-size: 13px; font-weight: 900; }
.acc-panel-head h2 { margin: 0 0 2px; font-size: 16px; font-weight: 900; }
.acc-panel-head p { margin: 0; font-size: 12px; color: var(--acc-muted); }

.acc-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.acc-field { display: grid; gap: 5px; }
.acc-label { font-size: 12px; font-weight: 800; color: var(--acc-muted); }
.acc-input-wrap, .acc-select-wrap { position: relative; }
.acc-input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--acc-line-strong); border-radius: 8px; background: var(--acc-paper-deep); color: var(--acc-text); font-size: 14px; font-weight: 600; outline: none; }
.acc-input:focus { border-color: var(--acc-blue); box-shadow: 0 0 0 3px var(--acc-blue-soft); }
select.acc-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='%236a7480' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
.acc-input-wrap .acc-unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: var(--acc-muted); pointer-events: none; }

.acc-addons { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.acc-addon { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border: 1.5px solid var(--acc-line-strong); border-radius: 8px; background: var(--acc-paper-deep); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease; }
.acc-addon:hover { border-color: var(--acc-blue); }
.acc-addon em { font-style: normal; margin-left: auto; font-size: 11px; font-weight: 900; color: var(--acc-pink-deep); }
.acc-addon input[type="checkbox"] { accent-color: var(--acc-blue); }

/* Result */
.acc-result-col { position: sticky; top: 20px; align-self: start; }
.acc-result-hero { padding: 20px; border: 1px solid var(--acc-line); border-radius: 16px; background: linear-gradient(135deg, var(--acc-paper), var(--acc-paper-deep)); border-top: 5px solid var(--acc-blue); box-shadow: var(--acc-shadow); text-align: center; margin-bottom: 12px; }
.acc-rh-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--acc-muted); }
.acc-rh-num { font-size: 36px; font-weight: 900; color: var(--acc-blue-deep); font-variant-numeric: tabular-nums; margin: 8px 0 2px; }
.acc-rh-sub { font-size: 12px; color: var(--acc-muted); }
.acc-kpis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.acc-kpi { padding: 10px; border: 1px solid var(--acc-line); border-radius: 10px; background: var(--acc-paper); text-align: center; }
.acc-kpi span { display: block; font-size: 10px; font-weight: 800; color: var(--acc-muted); letter-spacing: 0.06em; }
.acc-kpi b { display: block; font-size: 15px; font-weight: 900; color: var(--acc-blue-deep); margin-top: 4px; font-variant-numeric: tabular-nums; }
.acc-breakdown { padding: 10px; border-radius: 8px; background: var(--acc-paper-deep); margin-bottom: 12px; font-size: 12px; line-height: 1.9; }
.acc-breakdown div { display: grid; grid-template-columns: 1fr auto; gap: 8px; color: var(--acc-muted); }
.acc-breakdown div b { color: var(--acc-blue-deep); }
.acc-mini-card { padding: 14px 16px; border: 1px solid var(--acc-line); border-radius: 12px; background: var(--acc-paper); box-shadow: var(--acc-shadow); }
.acc-mini-card h3 { margin: 0 0 8px; font-size: 13px; font-weight: 900; color: var(--acc-blue-deep); }
.acc-mini-card ul { margin: 0; padding-left: 16px; font-size: 12px; color: var(--acc-muted); line-height: 1.9; }

.acc-faq { margin-bottom: 26px; }
.acc-section-head { margin-bottom: 12px; }
.acc-section-kicker { font-size: 11px; font-weight: 900; letter-spacing: 0.18em; color: var(--acc-blue-deep); }
.acc-section-head h2 { margin: 4px 0 4px; font-size: 20px; font-weight: 900; }

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

@media (max-width: 1080px) {
    .acc-hero { grid-template-columns: minmax(0,1fr); }
    .acc-hero-brushes { display: none; }
    .acc-calc { grid-template-columns: minmax(0,1fr); }
    .acc-result-col { position: static; }
    .acc-addons { grid-template-columns: minmax(0,1fr); }
}