:root {
    --bg: #0a0b0a;
    --panel: #101210;
    --panel-2: #141714;
    --border: #222622;
    --text: #d9ddd9;
    --muted: #818881;
    --green: #6fe398;
    --green-soft: rgba(111, 227, 152, .09);
    --gold: #d3b55c;
    --gold-soft: rgba(211, 181, 92, .09);
    --red: #d86f78;
    --blue: #84aee8;
}

html { background: var(--bg); }
body {
    background: var(--bg);
    color: var(--text);
    font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
}

.page-shell { width: min(1440px, calc(100% - 28px)); }
.is-embedded .page-shell { padding-top: 12px; }
.topbar { min-height: 56px; }
.brand-mark, .language-switch, .access-pill, .route-badge { border-radius: 5px; }
.panel { border-color: var(--border); border-radius: 7px; background: var(--panel); box-shadow: none; }
.hero { min-height: 0; padding: clamp(20px, 3vw, 34px); grid-template-columns: minmax(0, 1fr) minmax(350px, 480px); align-items: center; gap: 34px; }
.hero::after { display: none; }
.eyebrow { color: var(--green); font-size: 9px; letter-spacing: .13em; }
h1 { margin-bottom: 10px; font-size: clamp(27px, 4vw, 44px); line-height: 1.04; letter-spacing: -.045em; }
h2 { font-size: clamp(19px, 2vw, 25px); }
h3 { font-size: 14px; }
.hero-copy { color: var(--muted); font-size: 12px; line-height: 1.65; }
.lookup-form { grid-template-columns: minmax(0, 1fr) 150px; gap: 9px; }
.lookup-form label > span, .form-field > span { font-size: 9px; letter-spacing: .09em; }
input, select, button { min-height: 41px; border-radius: 5px; font-size: 11px; }
input, select { border-color: #2d332e; background: #0b0d0b; }
input:focus, select:focus { border-color: #536b59; box-shadow: 0 0 0 2px rgba(111, 227, 152, .07); }
.combobox-trigger { min-height: 41px; border-color: #2d332e; border-radius: 5px; background: #0b0d0b; font-size: 10px; }
.combobox-trigger:focus-visible, .custom-combobox.is-open .combobox-trigger { border-color: #536b59; box-shadow: 0 0 0 2px rgba(111, 227, 152, .07); }
.combobox-menu { border-color: #363e37; border-radius: 6px; background: #101310; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); backdrop-filter: none; }
.combobox-option { min-height: 35px; border-radius: 4px; font-size: 10px; }
button:hover { transform: none; }
.lookup-form > button[type="submit"] { background: var(--green); color: #071109; }
.captcha-field { min-height: 62px; }

.identity-strip { margin-top: 10px; padding: 13px 16px; }
.identity-strip div { padding: 0 14px; }
.identity-strip span, .stat-card span { font-size: 8px; }
.result-tabs { margin-top: 10px; padding: 3px; position: sticky; z-index: 20; top: 0; gap: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.result-tab { min-height: 38px; padding: 0 12px; border-radius: 4px; color: var(--muted); font-size: 9px; letter-spacing: .05em; }
.result-tab:hover { background: var(--panel-2); color: var(--text); }
.result-tab.is-active { background: var(--green-soft); color: var(--green); box-shadow: none; }
.result-tab span { border-color: #313832; background: #151915; }
.stat-grid { margin-top: 10px; gap: 8px; }
.stat-card { min-height: 96px; padding: 15px; border-color: var(--border); border-radius: 6px; background: var(--panel); }
.stat-card strong { margin-top: 5px; font-size: clamp(17px, 2vw, 23px); }
.stat-card.primary, .stat-card.door-password, .stat-card.laser-layout,
.stat-card.laser-layout.is-hard, .stat-card.mode-status.is-hard,
.stat-card.weekly-status.is-available { background: var(--panel); }

.security-predictions, .team-section, .loot-section, .painting-collection, .route-map-panel { margin-top: 10px; padding: clamp(17px, 2.5vw, 25px); }
.vault-patterns, .loot-grid, .painting-grid { gap: 8px; }
.vault-pattern, .selection-card, .team-route, .team-bag, .loot-card, .painting-card,
.map-plan-option, .route-bag-card { border-color: var(--border); border-radius: 6px; background: #0d100e; box-shadow: none; }
.vault-pattern-grid, .team-picks li, .route-bag-item { border-radius: 4px; background: #111512; }
.team-route summary { min-height: 58px; padding: 12px 14px; }
.team-route-body { padding: 13px; }
.team-bags { gap: 7px; }
.team-bag header { min-height: 58px; }
.loot-card { grid-template-columns: 138px minmax(0, 1fr); }
.loot-visual { min-height: 138px; background: #121612; }
.loot-body { padding: 11px; }
.loot-title > strong { font-size: 11px; }
.badge { border-radius: 3px; }
.raw-stats { margin-top: 10px; }
/* Layout containment on repeated cards keeps incremental reflow cheap. Whole-section
   content-visibility was removed: the placeholder height was thousands of px short of
   the real one, so every scroll into a section forced a resize and visibly stuttered. */
.loot-card, .painting-card, .vault-pattern, .team-bag, .route-bag-card { contain: layout style; }
.raw-stats { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.painting-image { background: #0b0d0b; }
.route-map-canvas { border-color: var(--border); border-radius: 6px; background: #0b0d0b; }
.map-display-toolbar, .map-plan-picker { border-color: var(--border); border-radius: 6px; background: #0e110f; }
.route-marker-popup, .lightbox-shell, .price-modal-shell { border-color: #333a34; border-radius: 7px; background: #0e110f; box-shadow: 0 24px 70px rgba(0, 0, 0, .62); }
.price-table { border-radius: 5px; }
.price-table thead th { background: #131713; }

* { scrollbar-color: #343b35 #0c0e0c; scrollbar-width: thin; }
@media (max-width: 1100px) {
    .hero { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 700px) {
    .page-shell { width: min(100% - 16px, 1440px); }
    .is-embedded .page-shell { padding-top: 8px; }
    .hero { padding: 18px 15px; gap: 22px; }
    .lookup-form { grid-template-columns: 1fr; }
    .result-tabs { grid-template-columns: 1fr 1fr; }
    .loot-card { grid-template-columns: 116px minmax(0, 1fr); }
    .loot-visual { min-height: 132px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }