/* ============================================================
   rent-utility-transfer · 租房水电燃气过户
   四联单风（rut-）：电表深+水表蓝+燃气橙+暖气绿
   ============================================================ */
.rut-page {
    --rut-blue: #2b6cb0; --rut-blue-deep: #1a4a80; --rut-blue-soft: rgba(43,108,176,0.12);
    --rut-dark: #2d3748; --rut-dark-deep: #1a2028;
    --rut-orange: #e88a3a; --rut-orange-deep: #b45d15; --rut-orange-soft: rgba(232,138,58,0.14);
    --rut-green: #4f8c6b; --rut-green-deep: #36654a; --rut-green-soft: rgba(79,140,107,0.14);
    --rut-paper: #ffffff; --rut-paper-deep: #f4f6fa;
    --rut-text: #1a2028; --rut-muted: #6b7280;
    --rut-line: #e2e8ef; --rut-line-strong: #bfcad8;
    --rut-shadow: 0 6px 18px rgba(43,108,176,0.08);
    color: var(--rut-text); font-size: 15px; line-height: 1.75;
}
[data-theme="dark"] .rut-page {
    --rut-blue: #6ba8e8; --rut-blue-deep: #a4c4f0; --rut-blue-soft: rgba(107,168,232,0.14);
    --rut-dark: #4a5568; --rut-dark-deep: #718096;
    --rut-orange: #f0a364; --rut-orange-deep: #f6c09a; --rut-orange-soft: rgba(240,163,100,0.14);
    --rut-green: #7fbc95; --rut-green-deep: #a4d4b5; --rut-green-soft: rgba(127,188,149,0.14);
    --rut-paper: #22252b; --rut-paper-deep: #2a2f38;
    --rut-text: #e8ecf2; --rut-muted: #939cb0;
    --rut-line: #30343c; --rut-line-strong: #444a56;
    --rut-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.rut-page b { color: var(--rut-blue-deep); }

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

/* Four services visual */
.rut-hero-four { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; border-radius: 12px; background: var(--rut-paper-deep); border: 1px dashed var(--rut-line-strong); }
.rut-four-item { padding: 14px; border-radius: 10px; font-size: 13px; font-weight: 900; text-align: center; display: flex; flex-direction: column; gap: 4px; letter-spacing: 0.12em; }
.rut-four-item span { font-size: 22px; }
.rut-fi-blue { background: var(--rut-blue-soft); color: var(--rut-blue-deep); }
.rut-fi-dark { background: rgba(45,55,72,0.1); color: var(--rut-dark-deep); }
.rut-fi-orange { background: var(--rut-orange-soft); color: var(--rut-orange-deep); }
.rut-fi-green { background: var(--rut-green-soft); color: var(--rut-green-deep); }

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

/* Toolbar */
.rut-toolbar { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px 22px; margin-bottom: 18px; border: 1px solid var(--rut-line); border-radius: 14px; background: var(--rut-paper); box-shadow: var(--rut-shadow); }
.rut-tool-label { font-size: 13px; font-weight: 800; color: var(--rut-muted); }
.rut-tool-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rut-stage-btn { padding: 8px 16px; border: 1.5px solid var(--rut-line-strong); border-radius: 8px; background: var(--rut-paper-deep); color: var(--rut-muted); font-size: 12px; font-weight: 800; cursor: pointer; transition: all 0.15s ease; }
.rut-stage-btn:hover { border-color: var(--rut-dark); }
.rut-stage-btn.is-active { background: var(--rut-dark); color: #fff; border-color: var(--rut-dark); }

/* Four utility cards */
.rut-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-bottom: 24px; }
.rut-util-card { padding: 20px; border: 1px solid var(--rut-line); border-radius: 16px; background: var(--rut-paper); box-shadow: var(--rut-shadow); position: relative; overflow: hidden; }
.rut-util-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; }
.rut-util-card.water::before { background: var(--rut-blue); }
.rut-util-card.power::before { background: var(--rut-dark); }
.rut-util-card.gas::before { background: var(--rut-orange); }
.rut-util-card.heat::before { background: var(--rut-green); }
.rut-util-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.rut-util-emoji { font-size: 28px; }
.rut-util-title { font-size: 16px; font-weight: 900; margin: 0; color: var(--rut-text); }
.rut-util-body h4 { margin: 12px 0 4px; font-size: 12.5px; font-weight: 900; color: var(--rut-blue-deep); letter-spacing: 0.04em; text-transform: uppercase; }
.rut-util-body ul { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--rut-muted); line-height: 1.9; }
.rut-util-time { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 20px; background: var(--rut-blue-soft); color: var(--rut-blue-deep); font-size: 11px; font-weight: 800; }
.rut-util-card.power .rut-util-time { background: rgba(45,55,72,0.1); color: var(--rut-dark-deep); }
.rut-util-card.gas .rut-util-time { background: var(--rut-orange-soft); color: var(--rut-orange-deep); }
.rut-util-card.heat .rut-util-time { background: var(--rut-green-soft); color: var(--rut-green-deep); }

/* Debt */
.rut-debt { margin-bottom: 24px; }
.rut-debt-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.rut-debt-card { padding: 18px; border-radius: 14px; background: var(--rut-paper); border: 1px solid var(--rut-line); box-shadow: var(--rut-shadow); }
.rut-debt-card h3 { margin: 0 0 8px; font-size: 14px; font-weight: 900; }
.rut-debt-card.rut-debt-tenant h3 { color: var(--rut-green-deep); }
.rut-debt-card.rut-debt-landlord h3 { color: #b26a12; }
.rut-debt-card ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--rut-muted); line-height: 1.9; }
.rut-tip { margin-top: 14px; padding: 12px 16px; border-radius: 10px; background: rgba(178,106,18,0.10); border-left: 4px solid #b26a12; font-size: 13px; color: var(--rut-muted); line-height: 1.8; }

/* Moveout checklist */
.rut-moveout { margin-bottom: 24px; padding: 22px 24px; border-radius: 18px; background: var(--rut-paper); border: 1px solid var(--rut-line); box-shadow: var(--rut-shadow); }
.rut-moveout-list { display: grid; gap: 10px; margin-top: 14px; }
.rut-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 10px; background: var(--rut-paper-deep); border: 1px solid var(--rut-line); font-size: 13px; color: var(--rut-text); cursor: pointer; }
.rut-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--rut-green); flex: none; margin-top: 2px; }

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

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

@media (max-width: 1080px) {
    .rut-hero { grid-template-columns: minmax(0,1fr); }
    .rut-cards, .rut-debt-grid { grid-template-columns: minmax(0,1fr); }
    .rut-toolbar { grid-template-columns: minmax(0,1fr); }
}