.zrhq-vs {
    --zrh-red: #e5484d;
    --zrh-red-dark: #c9302c;
    --zrh-bg: #0e0f12;
    --zrh-surface: #16181d;
    --zrh-surface-2: #1c1f26;
    --zrh-heading: #f2f2f4;
    --zrh-text: #d4d5da;
    --zrh-muted: #a6a8b0;
    --zrh-border: #24262d;
    --zrh-gold: #d6a84b;
    --zrh-green: #39b86b;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px;
    background: var(--zrh-surface);
    border: 1px solid var(--zrh-border);
    border-radius: 12px;
    color: var(--zrh-text);
    font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.zrhq-vs * { box-sizing: border-box; }

.zrhq-vs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 22px; }
.zrhq-vs-kicker { color: var(--zrh-red); font: 700 13px/1 Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 8px; }
.zrhq-vs-title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.zrhq-vs-head h2 { margin: 0; color: var(--zrh-heading); font: 800 clamp(28px,3.4vw,40px)/1.1 Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.02em; }
.zrhq-vs-fresh-pill { padding: 4px 10px; border: 1px solid #2f7f4c; border-radius: 3px; background: rgba(57,184,107,.10); color: #86e4a7; font: 700 10.5px Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.zrhq-vs-head p { max-width: 680px; margin: 12px 0 0; color: var(--zrh-muted); font-size: 14px; line-height: 1.55; }
.zrhq-vs-legend { max-width: 360px; text-align: right; color: var(--zrh-muted); font-size: 11px; line-height: 1.7; }
.zrhq-vs-status-badge, .zrhq-vs-legend .is-derived, .zrhq-vs-legend .is-site { display: inline-block; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--zrh-border); font: 700 10px/1.4 Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.is-derived { color: #8bbcff; border-color: #315f96 !important; background: rgba(47,141,255,.10); }
.is-site { color: #f1cc74; border-color: #8c6b22 !important; background: rgba(214,168,75,.10); }

.zrhq-vs-global { padding: 18px; margin-bottom: 20px; border: 1px solid var(--zrh-border); border-radius: 5px; background: rgba(8,11,15,.72); }
.zrhq-vs-buff span { display: block; margin-bottom: 8px; color: var(--zrh-heading); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.zrhq-vs-buff small { color: var(--zrh-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.zrhq-vs-range-row { display: flex; align-items: center; gap: 12px; }
.zrhq-vs-buff-input { flex: 1; accent-color: var(--zrh-red); }
.zrhq-vs-buff-value { min-width: 46px; color: var(--zrh-heading); font: 700 18px Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; }
.zrhq-vs-buff-help { margin-top: 10px; }
.zrhq-vs-buff-help summary { cursor: pointer; color: #7fb4e8; font-size: 11.5px; font-weight: 600; list-style: none; }
.zrhq-vs-buff-help summary::-webkit-details-marker { display: none; }
.zrhq-vs-buff-help summary::before { content: "+ "; color: #7fb4e8; }
.zrhq-vs-buff-help[open] summary::before { content: "\2212 "; }
.zrhq-vs-buff-help div { margin-top: 8px; padding: 10px 12px; border: 1px solid #2c4a6b; border-radius: 4px; background: rgba(66,140,214,.08); color: #a9c8e8; font-size: 12px; line-height: 1.55; }

.zrhq-vs-today { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 10px 14px; border: 1px solid var(--zrh-border); border-radius: 4px; background: rgba(229,57,53,.06); }
.zrhq-vs-today-readout { color: #f1a1a1; font-size: 12.5px; font-weight: 600; }
.zrhq-vs-reset-details summary { cursor: pointer; color: var(--zrh-muted); font-size: 11px; font-weight: 600; list-style: none; }
.zrhq-vs-reset-details summary::-webkit-details-marker { display: none; }
.zrhq-vs-reset-details[open] summary { margin-bottom: 8px; }
.zrhq-vs-today-caption { margin-bottom: 8px; color: var(--zrh-muted); font-size: 10.5px; max-width: 320px; }
.zrhq-vs-reset-hour { display: flex; align-items: center; gap: 8px; }
.zrhq-vs-reset-hour span { color: var(--zrh-muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.zrhq-vs-reset-hour-input { height: 30px; padding: 0 8px; border: 1px solid #414a55; border-radius: 4px; background: #0a0d11; color: var(--zrh-heading); font: 600 12px Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; }

.zrhq-vs-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.zrhq-vs-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 16px; border: 1px solid var(--zrh-border); border-radius: 4px; background: #0d1116; color: var(--zrh-muted); cursor: pointer; text-align: center; }
.zrhq-vs-tab-icon { color: var(--zrh-muted); line-height: 0; margin-bottom: 2px; }
.zrhq-vs-tab-day { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.zrhq-vs-tab-label { font: 700 14px Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--zrh-heading); }
.zrhq-vs-tab.is-active { border-color: var(--zrh-red); background: rgba(229,72,77,.10); }
.zrhq-vs-tab.is-active .zrhq-vs-tab-day { color: #f1a1a1; }
.zrhq-vs-tab.is-active .zrhq-vs-tab-icon { color: #f1a1a1; }

.zrhq-vs-storage-tip:empty { display: none; }
.zrhq-vs-storage-tip { margin-bottom: 18px; padding: 16px 18px; border: 1px solid #6b551f; border-radius: 5px; background: linear-gradient(180deg,rgba(214,168,75,.12),rgba(214,168,75,.05)); box-shadow: 0 0 0 1px rgba(214,168,75,.08) inset; }

.zrhq-vs-calc-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; padding: 16px 18px; border: 1px dashed var(--zrh-border); border-radius: 5px; background: rgba(255,255,255,.015); }
.zrhq-vs-calc-toggle[hidden] { display: none; }
.zrhq-vs-calc-open-btn { flex: 0 0 auto; padding: 12px 22px; border: none; border-radius: 4px; background: var(--zrh-red-dark); color: #fff; font: 700 15px Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; border-radius: 8px; cursor: pointer; }
.zrhq-vs-calc-open-btn:hover { background: var(--zrh-red); }
.zrhq-vs-calc-toggle p { margin: 0; flex: 1 1 260px; color: var(--zrh-muted); font-size: 12.5px; line-height: 1.5; }
.zrhq-vs-calculator[hidden] { display: none; }
.zrhq-vs-tip-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--zrh-gold); font: 700 14px Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.zrhq-vs-tip-heading svg { flex: 0 0 auto; }
.zrhq-vs-tip-note { color: #e0c98d; font-size: 12.5px; line-height: 1.55; }
.zrhq-vs-tip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.zrhq-vs-tip-col strong { display: block; margin-bottom: 6px; color: var(--zrh-gold); font: 700 11px Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .6px; }
.zrhq-vs-tip-col.is-collect strong { color: #86e4a7; }
.zrhq-vs-tip-col ul { margin: 0; padding-left: 16px; color: var(--zrh-text); font-size: 12px; line-height: 1.6; }
@media (max-width: 700px) { .zrhq-vs-tip-cols { grid-template-columns: 1fr; } }

.zrhq-vs-stage-panel { border: 1px solid var(--zrh-border); border-radius: 5px; background: #0c1015; overflow: hidden; }
.zrhq-vs-action { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid #242a32; }
.zrhq-vs-action:last-child { border-bottom: 0; }
.zrhq-vs-action-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--zrh-heading); font-size: 13.5px; font-weight: 650; }
.zrhq-vs-action-note { margin-top: 4px; color: var(--zrh-muted); font-size: 11px; line-height: 1.4; }
.zrhq-vs-action-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; justify-content: flex-end; }
.zrhq-vs-research { flex: 0 0 110px; }
.zrhq-vs-research.is-empty { visibility: hidden; }
.zrhq-vs-research label, .zrhq-vs-qty label { display: block; margin: 0 0 5px; color: var(--zrh-muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.zrhq-vs-research select, .zrhq-vs-qty input { height: 38px; padding: 0 10px; border: 1px solid #414a55; border-radius: 4px; background: #0a0d11; color: var(--zrh-heading); font: 600 13px Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; }
.zrhq-vs-research select { width: 100%; }
.zrhq-vs-qty input { width: 90px; }
.zrhq-vs-action-points { min-width: 90px; text-align: right; color: var(--zrh-gold); font: 700 18px Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; }

.zrhq-vs-summary { margin-top: 20px; padding: 20px; border: 1px solid var(--zrh-border); border-radius: 5px; background: linear-gradient(180deg,rgba(30,36,44,.82),rgba(17,21,27,.82)); }
.zrhq-vs-summary-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.zrhq-vs-result-label { color: var(--zrh-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.zrhq-vs-total { margin-top: 4px; color: var(--zrh-heading); font: 700 40px Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; }
.zrhq-vs-chest-current { margin-top: 4px; color: var(--zrh-green); font: 700 22px Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; }

.zrhq-vs-goal { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--zrh-border); }
.zrhq-vs-goal label span { display: block; margin-bottom: 7px; color: var(--zrh-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.zrhq-vs-goal-select { width: 100%; max-width: 420px; height: 44px; padding: 0 12px; border: 1px solid #414a55; border-radius: 4px; background: #0a0d11; color: var(--zrh-heading); font: 600 14px Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; }
.zrhq-vs-goal-result { margin-top: 12px; color: var(--zrh-text); font-size: 14px; }
.zrhq-vs-goal-result .is-done { color: var(--zrh-green); }
.zrhq-vs-chest-flag { display: inline-block; margin-left: 6px; padding: 3px 7px; border-radius: 3px; border: 1px solid #8c6b22; background: rgba(214,168,75,.10); color: #f1cc74; font-size: 10.5px; font-weight: 700; text-transform: uppercase; }

.zrhq-vs-value-ranking, .zrhq-vs-chest-table { margin-top: 16px; border-top: 1px solid var(--zrh-border); padding-top: 14px; }
.zrhq-vs-value-ranking summary, .zrhq-vs-chest-table summary { cursor: pointer; color: var(--zrh-heading); font: 700 13px Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.zrhq-vs-rank-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #202730; font-size: 12.5px; }
.zrhq-vs-rank-row:last-child { border-bottom: 0; }
.zrhq-vs-rank-row strong { color: var(--zrh-gold); white-space: nowrap; }

.zrhq-vs-chest-rows { margin-top: 10px; }
.zrhq-vs-chest-row { display: grid; grid-template-columns: 70px 110px 110px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #202730; font-size: 12px; }
.zrhq-vs-chest-row:last-child { border-bottom: 0; }
.zrhq-vs-chest-row strong { color: var(--zrh-heading); }
.zrhq-vs-chest-extra { color: var(--zrh-muted); }

.zrhq-vs-data-note { display: flex; gap: 14px; margin-top: 18px; padding: 17px 18px; border: 1px solid #55451d; border-radius: 5px; background: linear-gradient(180deg,rgba(214,168,75,.075),rgba(214,168,75,.035)); }
.zrhq-vs-note-icon { flex: 0 0 30px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid #8c6b22; border-radius: 50%; color: var(--zrh-gold); font-weight: 800; }
.zrhq-vs-data-note h3 { margin: 1px 0 6px; color: #f0d58d; font: 700 18px Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; text-transform: uppercase; }
.zrhq-vs-data-note p { margin: 6px 0; color: #c8b98e; font-size: 12.5px; line-height: 1.55; }

@media (max-width: 900px) {
    .zrhq-vs-action { grid-template-columns: 1fr; }
    .zrhq-vs-action-controls { justify-content: flex-start; }
}
@media (max-width: 700px) {
    .zrhq-vs { padding: 18px; }
    .zrhq-vs-head { display: block; }
    .zrhq-vs-legend { justify-content: flex-start; margin-top: 14px; }
    .zrhq-vs-chest-row { grid-template-columns: 1fr 1fr; }
}

/* v1.7.1: keep the planner inside the screen on phones */
@media (max-width: 600px) {
    .zrhq-vs { padding: 18px 14px; }
}
.zrhq-vs, .zrhq-vs * { min-width: 0; }
.zrhq-vs { overflow-wrap: anywhere; }