:root {
    --bg-dark: #000000;
    --card-bg: #1a100a;
    --card-hover: #26170e;
    --border-color: #463020;
    --text-primary: #fbf7ee;
    --text-secondary: #ece2ce;
    --text-dim: #a89a88;
    --accent: #f26522;
    --accent-green: #2a9d8f;
    --accent-red: #c83b48;
    --accent-blue: #f26522;
    --accent-purple: #d4a034;
    --font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
}

body {
    background-color: #0c0704;
    background-image: 
        radial-gradient(ellipse at 50% 0%, rgba(242, 101, 34, 0.05) 0%, transparent 70%),
        repeating-linear-gradient(90deg, 
            rgba(20, 12, 8, 0.96) 0px, 
            rgba(30, 18, 12, 0.98) 120px, 
            rgba(20, 12, 8, 0.96) 240px,
            rgba(14, 8, 5, 0.99) 360px
        );
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ================= HEADER HUD ================= */
.main-hud {
    background: linear-gradient(180deg, #180d08 0%, #110804 100%);
    border-bottom: 2px solid var(--border-color);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
    position: sticky;
    top: 0;
    z-index: 50;
}

.brand-section {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-logo {
    font-size: 2.2rem;
}

.brand-titles h1 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--accent);
}

.brand-titles p {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.hud-stats-group {
    display: flex;
    align-items: center;
    gap: 24px;
}

.hud-stat-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.hud-stat-box .stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
}

.hud-stat-box .stat-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--accent-green);
}

.hud-stat-box .stat-val.day-val {
    color: var(--accent);
    font-size: 1.05rem;
    white-space: nowrap;
    letter-spacing: -0.3px;
}

.stamina-meter {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}

.stamina-meter .bolt {
    font-size: 1.1rem;
    transition: transform 0.2s;
}

.stamina-meter .bolt.active {
    color: #eab308;
    filter: drop-shadow(0 0 4px rgba(234, 179, 8, 0.8));
}

.stamina-meter .bolt.exhausted {
    color: #475569;
    opacity: 0.4;
}

.weather-badge {
    background: #1e293b;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.weather-badge .weather-icon {
    font-size: 1.6rem;
}

.weather-badge .weather-text {
    display: flex;
    flex-direction: column;
}

.weather-badge .weather-text strong {
    font-size: 0.85rem;
    color: var(--accent-blue);
}

.weather-badge .weather-text small {
    font-size: 0.72rem;
    color: var(--text-dim);
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================= OVERALL PROGRESS BAR ================= */
.overall-progress-strip {
    background: #131d2e;
    border-bottom: 1px solid var(--border-color);
    padding: 6px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.82rem;
}

.progress-track {
    flex: 1;
    background: #0f172a;
    border-radius: 6px;
    height: 8px;
    overflow: hidden;
    border: 1px solid #334155;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #10b981);
    width: 0%;
    transition: width 0.4s ease;
}

/* ================= APP CONTAINER LAYOUT ================= */
.app-container {
    display: grid;
    grid-template-columns: 320px 1fr 320px;
    gap: 16px;
    padding: 16px 20px 80px 20px;
    flex: 1;
    box-sizing: border-box;
}

@media (max-width: 1100px) {
    .app-container {
        grid-template-columns: 280px 1fr;
    }
    .activity-sidebar {
        display: none;
    }
}

@media (max-width: 768px) {
    .app-container {
        grid-template-columns: 1fr;
    }
    .blueprint-sidebar {
        display: none;
    }
}

/* ================= LEFT SIDEBAR (HOUSE BLUEPRINT) ================= */
.blueprint-sidebar {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}

.sidebar-heading {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--accent-blue);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    text-transform: uppercase !important;
}

.sidebar-heading span {
    text-transform: uppercase !important;
}

.blueprint-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: calc(100vh - 230px);
    padding-right: 4px;
}

/* Custom scrollbar for sidebar */
.blueprint-grid::-webkit-scrollbar {
    width: 6px;
}
.blueprint-grid::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}
.blueprint-grid::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Sidebar Top Interactive Box */
.sidebar-blueprint-top-box {
    background: linear-gradient(135deg, #0b1329 0%, #0f172a 100%);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    text-transform: uppercase !important;
}

.sidebar-overall-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.sidebar-overall-label {
    font-size: 0.76rem;
    font-weight: 800;
    color: #e2e8f0;
    letter-spacing: 0.04em;
    text-transform: uppercase !important;
}

.sidebar-overall-label strong {
    color: var(--accent-green);
    text-transform: uppercase !important;
}

.btn-sidebar-roam-cats {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid #f59e0b;
    color: #fcd34d;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-transform: uppercase !important;
}
.btn-sidebar-roam-cats:hover {
    background: #f59e0b;
    color: #0f172a;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
    transform: translateY(-1px);
}

.sidebar-overall-track {
    width: 100%;
    height: 6px;
    background: rgba(15, 23, 42, 0.9);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(51, 65, 85, 0.6);
}

.sidebar-overall-fill {
    height: 100%;
    background: linear-gradient(90deg, #0284c7, #10b981);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
    transition: width 0.3s ease;
}

/* Sidebar Search & Floor Accordions Bar */
.sidebar-filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.sidebar-search-container {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.sidebar-search-ico {
    position: absolute;
    left: 8px;
    font-size: 0.75rem;
    color: #64748b;
    pointer-events: none;
}

#sidebar-room-search-input {
    width: 100%;
    background: #090d16;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 5px 22px 5px 24px;
    color: #f8fafc;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase !important;
    transition: all 0.2s;
}

#sidebar-room-search-input:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.btn-sidebar-search-clear {
    position: absolute;
    right: 6px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.85rem;
    cursor: pointer;
    line-height: 1;
}

.sidebar-floor-toggle-btns {
    display: flex;
    gap: 4px;
}

.btn-sidebar-floor-toggle {
    background: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 4px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase !important;
}

.btn-sidebar-floor-toggle:hover {
    background: #334155;
    color: #f8fafc;
    border-color: #64748b;
}

/* Architectural Manor Level Grouping */
.blueprint-level-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(11, 19, 36, 0.45);
    border: 1px solid rgba(51, 65, 85, 0.5);
    border-radius: 8px;
    padding: 6px;
    transition: all 0.2s ease;
}

/* Distinct Floor Accent Themes */
.blueprint-level-block.lvl-theme-level_3 {
    border-left: 3.5px solid #a855f7;
}
.blueprint-level-block.lvl-theme-level_2 {
    border-left: 3.5px solid #38bdf8;
}
.blueprint-level-block.lvl-theme-level_1 {
    border-left: 3.5px solid #f59e0b;
}
.blueprint-level-block.lvl-theme-level_0 {
    border-left: 3.5px solid #ef4444;
}
.blueprint-level-block.lvl-theme-grounds {
    border-left: 3.5px solid #10b981;
}
.blueprint-level-block.lvl-theme-custom_additions {
    border-left: 3.5px solid #ec4899;
}

/* Interactive Level Header (Clickable Accordion) */
.blueprint-level-header.interactive {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 9px;
    background: rgba(15, 23, 42, 0.85);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease,
                box-shadow 0.22s ease,
                border-color 0.2s ease;
    user-select: none;
}

.blueprint-level-header.interactive:hover {
    background: rgba(30, 41, 59, 0.98);
    transform: translateX(4px) scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(56, 189, 248, 0.35);
    z-index: 15;
}
.blueprint-level-header.interactive:hover .level-name {
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
}

.level-meta-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: visible;
}

.level-accordion-caret {
    font-size: 0.68rem;
    color: #38bdf8;
    width: 12px;
    text-align: center;
    flex-shrink: 0;
}

.level-icon {
    font-size: 0.95rem;
    flex-shrink: 0;
}

.level-name {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #f1f5f9;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal;
    overflow-wrap: break-word;
    line-height: 1.25;
}

.level-meta-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.level-progress-pill {
    font-size: 0.68rem;
    font-weight: 800;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 1px 6px;
    border-radius: 10px;
}

.level-elevation-badge {
    font-size: 0.68rem;
    font-family: monospace;
    font-weight: 800;
    color: var(--accent-blue);
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    text-transform: uppercase !important;
}

.blueprint-level-rooms {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}

/* Modern Blueprint Room Card */
.blueprint-room-card.modern {
    background: #0f172a;
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease,
                box-shadow 0.22s ease,
                border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.blueprint-room-card.modern:hover {
    background: #1e293b;
    border-color: rgba(56, 189, 248, 0.6);
    transform: translateX(4px) scale(1.04);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 14px rgba(56, 189, 248, 0.3);
    z-index: 20;
}
.blueprint-room-card.modern:hover .room-name {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.room-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.room-title-group {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    flex: 1;
    min-width: 0;
    overflow: visible;
}

.room-title-group .room-icon {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.room-title-group .room-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #f8fafc;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal;
    overflow-wrap: break-word;
    line-height: 1.35;
    text-transform: none !important;
    letter-spacing: 0.01em;
}

.room-completion-badge {
    font-size: 0.72rem;
    font-weight: 800;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 1px;
}
.room-completion-badge.masterpiece {
    color: #10b981;
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.room-card-subinfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.room-stage-pill {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase !important;
    letter-spacing: 0.03em;
}
.stage-pill-condemned {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.35);
}
.stage-pill-roughin {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.stage-pill-restored {
    background: rgba(56, 189, 248, 0.15);
    color: #bae6fd;
    border: 1px solid rgba(56, 189, 248, 0.35);
}
.stage-pill-masterpiece {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

/* Interactive Cat Pills Inside Rooms */
.room-cats-tray-modern {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.cat-pill-interactive {
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
    border-radius: 12px;
    padding: 2px 6px;
    font-size: 0.68rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
    text-transform: uppercase !important;
}

.cat-pill-interactive:hover {
    background: #f59e0b;
    color: #0f172a;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.6);
    transform: scale(1.15) translateY(-2px);
    z-index: 30;
}

.cat-avatar {
    font-size: 0.8rem;
}

.cat-name {
    font-size: 0.65rem;
    text-transform: uppercase !important;
}

/* Room Card Quick Actions on Hover */
.room-card-actions-row {
    display: none;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid rgba(51, 65, 85, 0.5);
    margin-top: 2px;
}

.blueprint-room-card.modern:hover .room-card-actions-row {
    display: flex;
}

.btn-room-card-action {
    flex: 1;
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    text-transform: uppercase !important;
}

.btn-room-card-action:hover {
    background: #38bdf8;
    color: #0f172a;
    border-color: #38bdf8;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
}

/* Stage Border Accents on Modern Cards */
.blueprint-room-card.modern.stage-condemned {
    border-left: 3px solid #ef4444;
}
.blueprint-room-card.modern.stage-roughin {
    border-left: 3px solid #f59e0b;
}
.blueprint-room-card.modern.stage-restored {
    border-left: 3px solid #38bdf8;
}
.blueprint-room-card.modern.stage-masterpiece {
    border-left: 3px solid #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(15, 23, 42, 0.9));
}

/* Selected Room Card Across All Stages */
.blueprint-room-card.modern.selected {
    border-color: #38bdf8 !important;
    background: rgba(14, 165, 233, 0.15) !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.35) !important;
    outline: 2px solid rgba(56, 189, 248, 0.5);
}
    font-size: 1.05rem;
    flex-shrink: 0;
}

.room-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.room-stage-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    white-space: nowrap;
}

.badge-condemned {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.badge-roughin {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.badge-restored {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
}

.badge-masterpiece {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(16, 185, 129, 0.25));
    color: #fbbf24;
    border: 1px solid #f59e0b;
}

.room-area-subtitle {
    font-size: 0.7rem;
    color: var(--text-dim);
    line-height: 1.2;
}

.room-bar-bg {
    background: #090e17;
    border-radius: 4px;
    height: 4px;
    overflow: hidden;
    margin-top: 2px;
}

.room-bar-fill {
    height: 100%;
    transition: width 0.3s;
}

.stage-fill-condemned { background: linear-gradient(90deg, #dc2626, #ef4444); }
.stage-fill-roughin { background: linear-gradient(90deg, #d97706, #f59e0b); }
.stage-fill-restored { background: linear-gradient(90deg, #0284c7, #38bdf8); }
.stage-fill-masterpiece { background: linear-gradient(90deg, #10b981, #f59e0b); }

/* Wandering Cats Tray in Room Card */
.room-cats-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.cat-wander-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid var(--cat-color, #f59e0b);
    border-radius: 12px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4), 0 0 6px var(--cat-color, #f59e0b)33;
    font-size: 0.72rem;
    font-weight: 600;
    color: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    animation: catPillFloat 3s ease-in-out infinite alternate;
}

.cat-wander-pill:hover {
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 0 12px var(--cat-color, #f59e0b);
    background: #0f172a;
}

@keyframes catPillFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(-1.5px); }
}

.cat-pill-avatar {
    font-size: 0.82rem;
}

.cat-pill-name {
    font-size: 0.7rem;
    font-weight: 700;
}

/* Simpler, minimalist sidebar room cards */
.blueprint-room-card.simple {
    padding: 7px 10px;
    gap: 5px;
}

.room-identity-simple {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
}

.room-identity-simple .room-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
}

.room-identity-simple .room-name {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

.room-cats-tray.simple {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 0;
    border: none;
    margin-left: auto;
    flex-shrink: 0;
}

.cat-pill-simple {
    font-size: 0.82rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* ================= CENTER WORKSPACE ================= */
.center-workspace {
    background: #0f172a;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.tab-nav-bar {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: #141e30;
    overflow-x: auto;
    overflow-y: visible;
    gap: 6px;
    padding: 12px 14px 0 14px;
    white-space: nowrap;
    align-items: flex-end;
}

.tab-nav-btn {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    color: var(--text-secondary);
    padding: 10px 16px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    transform-origin: bottom center;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.22s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-nav-btn:hover {
    color: #ffffff;
    background: linear-gradient(180deg, #1e293b, #0f172a);
    border-color: #38bdf8;
    border-bottom: none;
    transform: translateY(-4px) scale(1.10);
    z-index: 50;
    box-shadow: 0 -6px 20px rgba(56, 189, 248, 0.45), 0 8px 20px rgba(0, 0, 0, 0.6);
    font-size: 0.94rem;
    letter-spacing: 0.25px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.tab-nav-btn.active {
    color: #fff;
    background: #0f172a;
    border-color: #8b5cf6;
    box-shadow: 0 -2px 10px rgba(139, 92, 246, 0.25);
    z-index: 2;
}

.tab-nav-btn.active:hover {
    color: #fff;
    background: linear-gradient(180deg, #2e1065, #0f172a);
    border-color: #a78bfa;
    transform: translateY(-5px) scale(1.12);
    box-shadow: 0 -6px 24px rgba(167, 139, 250, 0.6), 0 8px 24px rgba(0, 0, 0, 0.7);
    z-index: 60;
    font-size: 0.96rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.tab-content-area {
    padding: 22px;
    flex: 1;
    min-height: 380px;
}

.tab-page {
    display: none;
}

.tab-page.active {
    display: block;
}

/* Section Header */
.section-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.section-banner h3 {
    font-size: 1.15rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.room-header-status {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-blue);
}

/* ================= RENOVATIONS ROOM DOSSIER & HAZARD ASSESSMENTS ================= */
.section-banner:has(.renovation-room-dossier) {
    display: block;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 16px;
}

.section-banner h3:has(.renovation-room-dossier) {
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: normal;
}

.renovation-room-dossier {
    width: 100%;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.75), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}

.dossier-top-split {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.dossier-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dossier-room-icon {
    font-size: 2.2rem;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dossier-room-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    letter-spacing: -0.3px;
}

.dossier-breadcrumbs {
    font-size: 0.83rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dossier-bullet {
    color: var(--text-dim);
}

.dossier-hazard-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.dossier-hazard-badge {
    font-size: 0.82rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.dossier-hazard-badge.hazard-critical {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

.dossier-hazard-badge.hazard-moderate {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.45);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.dossier-hazard-badge.hazard-low {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.45);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.dossier-hazard-badge.hazard-zero {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(245, 158, 11, 0.2));
    color: #34d399;
    border: 1px solid #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.dossier-progress-text {
    font-size: 0.8rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dossier-progress-dual-track {
    width: 100%;
    height: 8px;
    background: #090e17;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.dossier-fill-restored {
    background: linear-gradient(90deg, #0284c7, #10b981);
    height: 100%;
    transition: width 0.3s ease;
}

.dossier-fill-hazard {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    height: 100%;
    transition: width 0.3s ease;
}

.dossier-details-drawer {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dossier-cat-alert {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dossier-cat-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fbbf24;
}

.dossier-cat-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dossier-cat-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 20px;
    padding: 3px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dossier-cat-item:hover {
    border-color: #fbbf24;
    background: rgba(30, 41, 59, 1);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.25);
}

.dossier-cat-badge {
    font-weight: 700;
    color: #f8fafc;
    font-size: 0.76rem;
}

.dossier-cat-action {
    color: #94a3b8;
    font-style: italic;
    font-size: 0.74rem;
}

.dossier-hazard-factors-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.hazard-factor-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hazard-factor-tag.tag-severe {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

.hazard-factor-tag.tag-warn {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fde68a;
}

.hazard-factor-tag.tag-info {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #bae6fd;
}

.hazard-factor-tag.tag-safe {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

/* ================= TASK CARDS ================= */
.task-cards-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.task-card {
    background: #141d2f;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.task-card:hover {
    border-color: #475569;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.task-card.completed {
    opacity: 0.8;
    background: #0f191f;
    border-color: rgba(16, 185, 129, 0.4);
}

.task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.task-title {
    margin: 0;
    font-size: 1.1rem;
    color: #f8fafc;
    font-weight: 700;
}

.task-desc {
    margin: 0;
    font-size: 0.92rem;
    color: #cbd5e1;
    line-height: 1.5;
}

.task-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.88rem;
    color: #94a3b8;
    background: #090e17;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #1e293b;
}

.task-stat .label {
    color: #64748b;
    margin-right: 4px;
}

.task-materials-tag {
    font-size: 0.85rem;
    color: #cbd5e1;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    padding: 8px 12px;
    border-radius: 8px;
}

.task-row-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.2s;
}

.task-row-card:hover {
    border-color: #475569;
}

.task-row-card.completed-task {
    opacity: 0.6;
    background: #14201e;
    border-color: #065f46;
}

.task-title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.task-title-row h4 {
    font-size: 1rem;
    color: #fff;
    font-weight: 700;
}

.value-boost {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-green);
}

.task-description {
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 8px;
}

.task-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tool-chip {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.tool-chip.owned {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
}

.tool-chip.missing {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
    border: 1px solid var(--accent-red);
}

.ap-tag {
    font-size: 0.75rem;
    color: #eab308;
    background: rgba(234, 179, 8, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Action choices (DIY vs Sub) */
.task-action-split {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
}

.action-choice {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.choice-price {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: right;
}

.btn-task {
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.btn-task:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-task:disabled {
    background: #334155 !important;
    color: #64748b !important;
    cursor: not-allowed;
    transform: none;
}

.diy-btn {
    background: var(--accent);
    color: #0b1120;
}

.sub-btn {
    background: #2563eb;
    color: #fff;
}

.choice-note {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-align: right;
}

.completed-stamp {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.effective-price {
    color: #38bdf8;
    font-weight: 800;
}

.base-strikethrough {
    text-decoration: line-through;
    color: var(--text-dim);
    font-size: 0.72rem;
    margin-left: 4px;
}

.mat-perk-chip {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
}

.mat-perk-chip.mat-cost-discount {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #34d399;
}

.mat-perk-chip.mat-cost-penalty {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #f87171;
}

.hazard-warning-note {
    color: #f87171 !important;
    font-weight: 600;
}

/* ================= HARDWARE TAB ================= */
.hardware-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.hardware-tool-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hardware-tool-card.owned {
    border-color: #065f46;
    background: #14201e;
}

.tool-card-icon {
    font-size: 2rem;
}

.tool-card-body h4 {
    font-size: 0.95rem;
    color: #fff;
}

.tool-price {
    color: var(--accent);
    font-size: 1.05rem;
}

.tool-card-body p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.35;
    margin-top: 4px;
}

.btn-buy-tool {
    background: var(--accent-green);
    color: #0b1120;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    width: 100%;
}

.btn-buy-tool:hover:not(:disabled) {
    opacity: 0.9;
}

.btn-buy-tool:disabled {
    background: #334155;
    color: #64748b;
    cursor: not-allowed;
}

.owned-badge {
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--accent-green);
    padding: 6px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 4px;
}

/* ================= FINANCE & LEDGER ================= */
.ledger-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ledger-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ledger-card.highlight {
    border-color: var(--accent);
}

.ledger-card h3 {
    font-size: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    color: #fff;
}

.ledger-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.ledger-row.total {
    border-top: 1px dashed var(--border-color);
    padding-top: 6px;
    font-weight: 700;
    color: #fff;
}

.btn-loan {
    background: #e11d48;
    color: #fff;
    font-weight: 700;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

.btn-repay {
    background: var(--accent-green);
    color: #0b1120;
    font-weight: 700;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

/* ================= INSPECTION REPORT ================= */
.inspection-header-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 16px;
}

.grade-badge {
    background: linear-gradient(135deg, #f59e0b, #10b981);
    color: #0b1120;
    font-size: 2.8rem;
    font-weight: 900;
    width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.inspection-rooms-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.inspection-room-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
}

/* ================= CAREER TAB ================= */
.career-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.career-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.career-stat-card .label {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
}

.career-stat-card .value {
    font-size: 1.6rem;
    font-weight: 800;
}

.house-campaign-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.house-campaign-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
}

.house-campaign-card.current {
    border-color: var(--accent);
    background: #172338;
}

.difficulty-chip {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: #334155;
    color: var(--accent);
}

.btn-reset-career {
    background: transparent;
    border: 1px solid #dc2626;
    color: #ef4444;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
}

.btn-reset-career:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* ================= RIGHT ACTIVITY FEED ================= */
.activity-sidebar {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}

.feed-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: calc(100vh - 250px);
    padding-right: 4px;
}

.feed-item {
    background: #1e293b;
    border-left: 3px solid #64748b;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 0.8rem;
    line-height: 1.35;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feed-day {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-dim);
}

.feed-item.task { border-left-color: var(--accent-blue); }
.feed-item.day { border-left-color: var(--accent); background: #232e42; font-weight: bold; }
.feed-item.windfall, .feed-item.deal { border-left-color: var(--accent-green); }
.feed-item.disaster { border-left-color: var(--accent-red); background: #271b1e; }
.feed-item.fee { border-left-color: #f97316; }
.feed-item.sale { border-left-color: #a855f7; background: #251e36; }

/* ================= BOTTOM BAR ================= */
.bottom-control-bar {
    background: #0f172a;
    border-top: 1px solid var(--border-color);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    bottom: 0;
    z-index: 50;
}

.sound-btn {
    background: #1e293b;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}

.sound-btn:hover {
    color: #fff;
    border-color: #64748b;
}

.action-buttons-group {
    display: flex;
    gap: 12px;
}

.btn-open-house {
    background: var(--accent-green);
    color: #0b1120;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.btn-open-house:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-advance-day {
    background: var(--accent);
    color: #0b1120;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.btn-advance-day:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ================= MODAL OVERLAY ================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

.modal-overlay.active {
    display: flex !important;
}

.modal-window {
    background: #1e293b;
    border: 2px solid var(--accent);
    border-radius: 12px;
    max-width: 680px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.modal-header {
    background: #0f172a;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    font-size: 1.25rem;
    color: var(--accent);
}

.btn-modal-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 1.5rem;
    cursor: pointer;
}

.btn-modal-close:hover {
    color: #fff;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.buyer-offer-card {
    background: #0f172a;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.buyer-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.buyer-avatar {
    font-size: 1.8rem;
}

.buyer-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.offer-amount-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: rgba(16, 185, 129, 0.08);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.offer-tag {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.offer-amount {
    font-size: 1.35rem;
    color: var(--accent-green);
    font-weight: 800;
}

.offer-feedback {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.35;
}

.profit-preview {
    font-size: 0.88rem;
}

.profit-preview.pos {
    color: var(--accent-green);
}

.profit-preview.neg {
    color: var(--accent-red);
}

.btn-accept-offer {
    background: var(--accent-green);
    color: #0b1120;
    font-weight: 800;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    width: 100%;
}

.btn-accept-offer:hover {
    opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .app-container {
        padding: 12px 14px 80px 14px;
    }
    .hud-stats-group {
        gap: 12px;
    }
}

/* ================= JUNKYARD SALVAGE ================= */
.salvage-task-card {
    border-color: #7e22ce !important;
    background: #19142b !important;
}

.salvage-chip {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    border: 1px solid #a855f7;
    font-weight: 700;
}

.junkyard-banner-card {
    background: linear-gradient(135deg, #1e1b4b, #311042);
    border: 1px solid #7e22ce;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(126, 34, 206, 0.2);
}

.junkyard-banner-card h2 {
    color: #c084fc;
    font-size: 1.35rem;
}

.btn-scavenge {
    background: #a855f7;
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-scavenge:hover {
    background: #9333ea;
    transform: translateY(-2px);
}

.salvage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.salvage-item-card {
    background: #1e293b;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    gap: 14px;
    transition: transform 0.2s;
}

.salvage-item-card:hover {
    transform: translateY(-2px);
}

.salvage-item-card.rarity-legendary {
    border-color: #f59e0b;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}

.salvage-item-card.rarity-rare {
    border-color: #a855f7;
}

.salvage-item-card.rarity-uncommon {
    border-color: #38bdf8;
}

.salvage-icon {
    font-size: 2.2rem;
}

.salvage-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.salvage-details h4 {
    font-size: 0.95rem;
    color: #fff;
}

.salvage-details p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.rarity-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.rarity-badge.legendary { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid #f59e0b; }
.rarity-badge.rare { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid #a855f7; }
.rarity-badge.uncommon { background: rgba(56, 189, 248, 0.2); color: #38bdf8; border: 1px solid #38bdf8; }
.rarity-badge.common { background: #334155; color: #cbd5e1; }

.salvage-footer {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.unlocked-chip {
    font-size: 0.72rem;
    color: var(--accent-green);
    background: rgba(16, 185, 129, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.cash-chip {
    font-size: 0.72rem;
    color: var(--accent);
    background: rgba(245, 158, 11, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.cat-chip {
    font-size: 0.72rem;
    color: #ec4899;
    background: rgba(236, 72, 153, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

/* ================= 4 CATS & HOUSEHOLD CHAOS ================= */
.household-split-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
}

.cats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cat-profile-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cat-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cat-avatar {
    font-size: 1.8rem;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.cat-personality {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.cat-mischief-box {
    background: #0f172a;
    border: 1px dashed #475569;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #cbd5e1;
}

.cat-meters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.meter-bar {
    background: #0f172a;
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
    border: 1px solid #334155;
}

.meter-fill {
    height: 100%;
    transition: width 0.3s;
}

.btn-care-cats {
    background: #ec4899;
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.82rem;
}

.btn-care-cats:hover {
    background: #db2777;
}

/* Cat Profile Card Location & Direct Actions */
.cat-live-loc-badge {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.76rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cat-live-loc-badge:hover {
    border-color: var(--accent-blue);
    background: #1e293b;
    color: var(--text-primary);
}

.cat-live-loc-badge strong {
    color: var(--accent-blue);
}

.cat-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.btn-cat-card-pet, .btn-cat-card-treat, .btn-cat-card-inspect {
    flex: 1;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 6px 4px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.btn-cat-card-pet {
    background: rgba(236, 72, 153, 0.2);
    color: #f472b6;
    border: 1px solid rgba(236, 72, 153, 0.4);
}

.btn-cat-card-pet:hover {
    background: #ec4899;
    color: #fff;
}

.btn-cat-card-treat {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.btn-cat-card-treat:hover:not(:disabled) {
    background: #f59e0b;
    color: #0f172a;
}

.btn-cat-card-treat:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-cat-card-inspect {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
}

.btn-cat-card-inspect:hover {
    background: #0284c7;
    color: #fff;
}

/* Cat Quick-Care & Inspection Modal */
.cat-modal-window {
    max-width: 500px;
    background: #0f172a;
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.15);
}

.cat-modal-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cat-modal-hero {
    display: flex;
    gap: 14px;
    align-items: center;
    background: #1e293b;
    border-radius: 10px;
    padding: 12px 14px;
    border-left: 4px solid var(--accent);
}

.cat-modal-avatar-box {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.2rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.cat-modal-hero-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cat-modal-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cat-modal-name-row h3 {
    font-size: 1.15rem;
    color: #fff;
    margin: 0;
}

.cat-modal-tag {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
}

.cat-modal-personality {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.35;
    margin: 0;
}

.cat-modal-loc-bar {
    margin-top: 6px;
    background: #0b1120;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.76rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cat-modal-loc-bar:hover {
    border-color: var(--accent-blue);
    background: #162438;
}

.cat-loc-name strong {
    color: var(--accent-blue);
}

.cat-loc-jump-btn {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.72rem;
}

.cat-antic-speech-card {
    background: #182234;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 12px 14px;
    position: relative;
}

.antic-speech-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 6px;
}

.antic-room-tag {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.68rem;
}

.antic-speech-text {
    font-size: 0.88rem;
    font-style: italic;
    color: #f1f5f9;
    line-height: 1.45;
    margin: 6px 0;
}

.antic-speech-footer {
    font-size: 0.74rem;
    color: var(--text-dim);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 6px;
    margin-top: 4px;
}

.cat-modal-meters-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cat-modal-meter-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.meter-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
}

.meter-status {
    font-size: 0.7rem;
    color: var(--text-dim);
    line-height: 1.2;
}

.cat-modal-actions-row {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.btn-cat-pet-modal {
    flex: 1.2;
    background: linear-gradient(135deg, #ec4899, #db2777);
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.btn-cat-pet-modal:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.45);
}

.btn-cat-treat-modal {
    flex: 1.4;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #0f172a;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-cat-treat-modal:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.45);
}

.btn-cat-treat-modal:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #334155;
    color: #94a3b8;
    box-shadow: none;
}

.btn-cat-close-modal {
    background: #334155;
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cat-close-modal:hover {
    background: #475569;
}

.chaos-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
}

.clutter-pct-tag, .relation-tag {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    background: #334155;
    color: var(--text-secondary);
}

.clutter-pct-tag.danger, .relation-tag.danger {
    background: rgba(239, 68, 68, 0.2);
    color: var(--accent-red);
    border: 1px solid var(--accent-red);
}

.btn-organize-tools {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid #38bdf8 !important;
    color: #38bdf8 !important;
    font-weight: 800;
    border-radius: 6px;
    padding: 10px;
    width: 100%;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.btn-organize-tools:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
    transform: translateY(-1px);
}

.btn-clean-site {
    background: var(--accent-blue);
    color: #0b1120;
    font-weight: 800;
    border: none;
    border-radius: 6px;
    padding: 10px;
    width: 100%;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-clean-site:hover {
    background: #0284c7;
    color: #fff;
}

/* ================= DILEMMA MODAL ================= */
.dilemma-modal-window {
    border-color: #ef4444;
    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.4);
}

.dilemma-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.dilemma-icon {
    font-size: 2.8rem;
}

.dilemma-badge {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid #ef4444;
    display: inline-block;
    margin-bottom: 4px;
}

.dilemma-prompt {
    font-size: 0.95rem;
    color: #f1f5f9;
    line-height: 1.45;
    background: #0f172a;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 16px;
}

.dilemma-choices-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dilemma-choice-btn {
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 8px;
    padding: 14px 16px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dilemma-choice-btn:hover {
    background: #27354f;
    border-color: var(--accent);
    transform: translateX(4px);
}

.choice-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
}

.choice-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.75rem;
}

.choice-cost { color: var(--accent-red); font-weight: 700; }
.choice-ap { color: #eab308; font-weight: 700; }
.choice-rel { color: var(--accent-blue); font-weight: 700; }
.choice-clut { color: #a855f7; font-weight: 700; }

/* ================= B&B & FOUNDATION STYLES ================= */

/* Foundation HUD Box */
#hud-foundation-box .stat-val {
    font-size: 1.05rem;
    font-weight: 800;
}

/* Inspection Tab - Foundation Certification Banner */
.foundation-cert-banner {
    border-radius: 10px;
    padding: 16px 20px;
    margin: 16px 0 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.foundation-cert-banner.approved {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid var(--accent-green);
}

.foundation-cert-banner.denied {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid var(--accent-red);
}

.cert-icon {
    font-size: 2.2rem;
    line-height: 1;
}

.cert-content h4 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.foundation-cert-banner.approved h4 {
    color: var(--accent-green);
}

.foundation-cert-banner.denied h4 {
    color: var(--accent-red);
}

.cert-content p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.cert-stamp {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent-green);
    background: rgba(16, 185, 129, 0.2);
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px dashed var(--accent-green);
    letter-spacing: 0.5px;
}

.missing-items-list {
    margin: 10px 0;
    background: #0f172a;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid #7f1d1d;
}

.missing-items-list strong {
    font-size: 0.8rem;
    color: #fca5a5;
}

.missing-items-list ul {
    margin: 6px 0 0 20px;
    font-size: 0.82rem;
    color: #f87171;
    line-height: 1.5;
}

.btn-jump-foundation {
    margin-top: 10px;
    background: var(--accent);
    color: #0b1120;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-jump-foundation:hover {
    transform: translateY(-2px);
    background: #d97706;
}

.grade-badge.good {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.grade-badge.fail {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

/* Manor History Showcase Card (Career Tab) */
.manor-history-card {
    background: linear-gradient(135deg, #1e293b, #1e1b4b);
    border: 1px solid #4338ca;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

.manor-history-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.manor-icon {
    font-size: 2.2rem;
}

.manor-history-header h3 {
    font-size: 1.25rem;
    color: #c7d2fe;
}

.manor-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    background: #0f172a;
    padding: 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
}

.cat-ambassadors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.cat-ambassador-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
}

.cat-amb-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cat-amb-avatar {
    font-size: 1.8rem;
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

/* B&B Guest Check-in Modal Styles */
.bnb-summary-banner {
    background: linear-gradient(135deg, #064e3b, #0f172a);
    border: 1px solid var(--accent-green);
    border-radius: 8px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bnb-badge {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent-green);
    background: rgba(16, 185, 129, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 4px;
}

.guest-booking-card {
    background: #1e293b;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s, border-color 0.2s;
}

.guest-booking-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}

.guest-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.guest-avatar {
    font-size: 1.8rem;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.guest-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
}

.guest-rate-box {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.guest-stars {
    font-size: 0.85rem;
    color: #facc15;
    font-weight: 700;
}

.guest-rate-calc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.guest-rate-calc strong {
    color: var(--accent-green);
    font-size: 0.95rem;
}

.guest-review-bubble {
    background: #0f172a;
    border-left: 3px solid var(--accent-blue);
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    font-size: 0.85rem;
    color: var(--text-primary);
    font-style: italic;
    line-height: 1.4;
}

.guest-cat-moment {
    font-size: 0.82rem;
    color: #f472b6;
    background: rgba(236, 72, 153, 0.1);
    border: 1px solid rgba(236, 72, 153, 0.25);
    padding: 6px 10px;
    border-radius: 6px;
    line-height: 1.35;
}

.btn-checkin-guests {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #0b1120;
    font-weight: 800;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    padding: 14px 20px;
    width: 100%;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-checkin-guests:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
}

/* Permit Denial Card in Modal */
.permit-denial-card {
    background: #201317;
    border: 1px solid var(--accent-red);
    border-radius: 10px;
    padding: 20px;
}

.permit-denial-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.permit-denial-icon {
    font-size: 2.6rem;
}

.permit-badge-denied {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent-red);
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid var(--accent-red);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 4px;
}

.permit-denial-header h3 {
    font-size: 1.15rem;
    color: #fca5a5;
}

.permit-denial-text {
    font-size: 0.9rem;
    color: #f1f5f9;
    line-height: 1.5;
    margin-bottom: 14px;
}

.missing-foundation-box {
    background: #0f172a;
    border: 1px solid #7f1d1d;
    border-radius: 6px;
    padding: 12px 16px;
}

.missing-foundation-box strong {
    font-size: 0.85rem;
    color: var(--accent);
}

.missing-foundation-box ul {
    margin: 8px 0 0 20px;
    color: #f87171;
    font-size: 0.85rem;
    line-height: 1.5;
}

.btn-go-to-foundation {
    background: var(--accent);
    color: #0b1120;
    font-weight: 800;
    font-size: 0.9rem;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-go-to-foundation:hover {
    transform: translateY(-2px);
    background: #d97706;
}

.btn-cancel-modal {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 18px;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-cancel-modal:hover {
    background: #334155;
    color: #fff;
}

/* Water Safety & Eco Grid Banners in Inspection */
.water-cert-banner, .eco-cert-banner {
    border-radius: 10px;
    padding: 16px 20px;
    margin: 12px 0;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.water-cert-banner.approved {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid var(--accent-blue);
}

.water-cert-banner.approved h4 {
    color: var(--accent-blue);
}

.water-cert-banner.warning {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid var(--accent);
}

.water-cert-banner.warning h4 {
    color: var(--accent);
}

.eco-cert-banner.approved {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid var(--accent-green);
}

.eco-cert-banner.approved h4 {
    color: var(--accent-green);
}

.btn-jump-lead {
    margin-top: 10px;
    background: var(--accent-blue);
    color: #0b1120;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-jump-lead:hover {
    transform: translateY(-2px);
    background: #0284c7;
    color: #fff;
}

/* Grounds & Clutter Action Buttons */
.btn-move-debris {
    background: #ca8a04;
    color: #0b1120;
    font-weight: 800;
    border: none;
    border-radius: 6px;
    padding: 10px;
    width: 100%;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.btn-move-debris:hover {
    background: #a16207;
    color: #fff;
}

.btn-mow-lawn {
    background: #16a34a;
    color: #fff;
    font-weight: 800;
    border: none;
    border-radius: 6px;
    padding: 10px;
    width: 100%;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.btn-mow-lawn:hover {
    background: #15803d;
}

.btn-run-mulcher {
    background: #9333ea;
    color: #fff;
    font-weight: 800;
    border: none;
    border-radius: 6px;
    padding: 10px;
    width: 100%;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.btn-run-mulcher:hover:not([disabled]) {
    background: #7e22ce;
}

/* ======================================================== */
/* TASK EXECUTION & QUALITY MINIGAMES (DIY & SUBCONTRACTOR) */
/* ======================================================== */

.minigame-modal-window {
    max-width: 760px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.minigame-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px;
}

.minigame-task-banner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 14px 18px;
    gap: 16px;
    flex-wrap: wrap;
}

.banner-room-tag {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #38bdf8;
    letter-spacing: 0.5px;
}

.banner-title-col h3 {
    margin: 4px 0 6px 0;
    font-size: 1.25rem;
    color: #f8fafc;
}

.banner-desc {
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.4;
    margin: 0;
}

.banner-costs-col {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.cost-badge {
    background: #0f172a;
    border: 1px solid #334155;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cost-badge span {
    font-size: 0.68rem;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
}

.cost-badge strong {
    color: #f8fafc;
    font-size: 0.95rem;
}

.cost-badge.arv strong {
    color: #10b981;
}

/* DIY 3-Stage Progress Pills */
.diy-stages-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.diy-stage-pill {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.diy-stage-pill.active {
    opacity: 1;
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.3);
}

.diy-stage-pill.completed {
    opacity: 0.9;
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

.diy-stage-pill .pill-num {
    font-size: 0.68rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #64748b;
}

.diy-stage-pill.active .pill-num {
    color: #f59e0b;
}

.diy-stage-pill.completed .pill-num {
    color: #10b981;
}

.diy-stage-pill .pill-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #f8fafc;
    margin-top: 2px;
}

.stage-instructions-banner {
    background: #131c2e;
    border-left: 4px solid #38bdf8;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #e2e8f0;
}

/* DIY Timing Gauge Meter */
.diy-gauge-area {
    margin: 8px 0;
    user-select: none;
    cursor: pointer;
}

.diy-meter-track {
    position: relative;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    border: 2px solid #475569;
    box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.7);
    background: #0b1120;
}

.zone-segment {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.zone-segment span {
    white-space: nowrap;
    opacity: 0.85;
}

.zone-rough-l, .zone-rough-r {
    flex: 20;
    background: linear-gradient(180deg, #7f1d1d, #991b1b);
    color: #fecaca;
}

.zone-standard-l, .zone-standard-r {
    flex: 18;
    background: linear-gradient(180deg, #854d0e, #a16207);
    color: #fef08a;
    border-left: 1px solid rgba(0,0,0,0.25);
    border-right: 1px solid rgba(0,0,0,0.25);
}

.zone-high-l, .zone-high-r {
    flex: 8;
    background: linear-gradient(180deg, #047857, #059669);
    color: #a7f3d0;
    border-left: 1px solid rgba(0,0,0,0.25);
    border-right: 1px solid rgba(0,0,0,0.25);
}

.zone-bullseye {
    flex: 8;
    background: linear-gradient(180deg, #d97706, #fbbf24);
    color: #0b1120;
    font-weight: 900;
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.8);
}

.diy-meter-needle {
    position: absolute;
    top: -8px;
    bottom: -8px;
    width: 6px;
    background: #ffffff;
    border-radius: 3px;
    transform: translateX(-50%);
    box-shadow: 0 0 16px #38bdf8, 0 0 4px #ffffff;
    z-index: 20;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.needle-tip-top, .needle-tip-bottom {
    font-size: 13px;
    color: #38bdf8;
    line-height: 1;
    transform: scale(1.4);
    text-shadow: 0 0 6px #38bdf8;
}

.needle-line {
    flex: 1;
    width: 4px;
    background: #ffffff;
    box-shadow: 0 0 8px #38bdf8;
}

/* Feedback message box */
.diy-feedback-box {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 700;
    background: #1e293b;
    border: 1px solid #334155;
    transition: all 0.2s ease;
    text-align: center;
    padding: 6px 12px;
}

.diy-feedback-box .hint-text {
    font-size: 0.82rem;
    color: #94a3b8;
    font-weight: 500;
}

.badge-bullseye {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);
}

.badge-high {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
    color: #34d399 !important;
}

.badge-standard {
    background: rgba(234, 179, 8, 0.2) !important;
    border-color: #eab308 !important;
    color: #facc15 !important;
}

.badge-rough {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
    color: #f87171 !important;
}

/* DIY Controls Row */
.diy-controls-row, .sub-controls-row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    flex-wrap: wrap;
}

.btn-diy-strike {
    flex: 1;
    min-width: 250px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #0b1120;
    font-size: 1.15rem;
    font-weight: 900;
    border: none;
    border-radius: 8px;
    padding: 14px 24px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.45);
    transition: transform 0.08s ease, filter 0.15s ease;
    letter-spacing: 0.5px;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.btn-diy-strike:hover {
    filter: brightness(1.1);
}

.btn-diy-strike:active {
    transform: scale(0.98);
}

.btn-skip-minigame {
    background: #1e293b;
    border: 1px solid #475569;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 12px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-skip-minigame:hover {
    background: #334155;
    color: #f8fafc;
    border-color: #64748b;
}

.previous-hits-row {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.78rem;
    color: #94a3b8;
    flex-wrap: wrap;
    margin-top: 4px;
}

.hit-chip {
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid;
}

.hit-chip.gold { background: rgba(245, 158, 11, 0.15); border-color: #f59e0b; color: #fbbf24; }
.hit-chip.green { background: rgba(16, 185, 129, 0.15); border-color: #10b981; color: #34d399; }
.hit-chip.yellow { background: rgba(234, 179, 8, 0.15); border-color: #eab308; color: #facc15; }
.hit-chip.red { background: rgba(239, 68, 68, 0.15); border-color: #ef4444; color: #f87171; }

/* Subcontractor Oversight Styles */
.sub-timer-container {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sub-timer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #e2e8f0;
}

.sub-timer-clock {
    font-size: 1.15rem;
    color: #38bdf8;
    font-weight: 800;
    font-family: monospace;
}

.sub-timer-bar-bg {
    height: 8px;
    background: #0b1120;
    border-radius: 4px;
    overflow: hidden;
}

.sub-timer-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #38bdf8);
    transition: width 0.1s linear;
}

.sub-checkpoints-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.sub-checkpoint-card {
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sub-checkpoint-card:hover:not(.audited) {
    border-color: #38bdf8;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2);
}

.sub-checkpoint-card.audited {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.cp-top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.cp-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.cp-titles h4 {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    color: #f8fafc;
}

.cp-titles small {
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.35;
    display: block;
}

.stamp-audited {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #34d399;
    font-weight: 800;
    font-size: 0.78rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.btn-audit-stamp {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    background: #0f172a;
    border: 1px solid #475569;
    color: #38bdf8;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-audit-stamp:hover {
    background: #38bdf8;
    color: #0b1120;
    border-color: #38bdf8;
}

.sub-audit-summary {
    font-size: 0.9rem;
    color: #cbd5e1;
}

/* ======================================================== */
/* RESULTS SCREEN: 3 RATES DISPLAY (SUCCESS, WELL DONE, EFFICIENCY) */
/* ======================================================== */

.results-screen-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px;
}

.results-header-banner {
    display: flex;
    gap: 16px;
    align-items: center;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 14px 18px;
}

.results-stamp-icon {
    font-size: 2.2rem;
    line-height: 1;
}

.results-mini-tag {
    font-size: 0.7rem;
    font-weight: 800;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.results-header-banner h3 {
    margin: 2px 0 4px 0;
    font-size: 1.25rem;
    color: #f8fafc;
}

.results-header-banner p {
    margin: 0;
    font-size: 0.85rem;
    color: #94a3b8;
}

.results-precision-note {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 6px;
    padding: 10px 14px;
    color: #bae6fd;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.15);
}

/* 3 Core Rates Trio Row */
.rates-trio-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.rate-gauge-box {
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 8px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
    align-items: center;
}

.rate-gauge-box.success {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.06);
}

.rate-gauge-box.quality {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.06);
}

.rate-gauge-box.progress {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.06);
}

.rate-gauge-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
}

.rate-gauge-value {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.1;
    margin: 2px 0;
}

.rate-gauge-box.success .rate-gauge-value { color: #10b981; }
.rate-gauge-box.quality .rate-gauge-value { color: #fbbf24; }
.rate-gauge-box.progress .rate-gauge-value { color: #38bdf8; }

.rate-gauge-desc {
    font-size: 0.78rem;
    font-weight: 600;
    color: #cbd5e1;
    min-height: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rate-bar-bg {
    width: 100%;
    height: 6px;
    background: #0f172a;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.rate-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.rate-gauge-box.success .rate-bar-fill { background: #10b981; }
.rate-gauge-box.quality .rate-bar-fill { background: #fbbf24; }
.rate-gauge-box.progress .rate-bar-fill { background: #38bdf8; }

.rate-perk-tag {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #0f172a;
    border: 1px solid #475569;
    color: #f8fafc;
}

/* Impact Breakdown Ledger */
.results-impact-ledger {
    background: #131c2e;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.impact-ledger-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    color: #e2e8f0;
}

.impact-ledger-row strong {
    font-size: 0.95rem;
}

.results-confirm-row {
    margin-top: 4px;
}

.btn-claim-project {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
    transition: transform 0.1s ease, filter 0.15s ease;
    letter-spacing: 0.5px;
}

.btn-claim-project:hover {
    filter: brightness(1.1);
}

.btn-claim-project:active {
    transform: scale(0.98);
}

/* ======================================================== */
/* DIY MINIGAME 2: SPIRIT LEVEL & BUBBLE BALANCER           */
/* ======================================================== */

.spirit-level-container {
    background: #451a03;
    border: 3px solid #78350f;
    border-radius: 12px;
    padding: 16px;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.8), 0 8px 24px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spirit-level-brass-trim {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(90deg, #b45309, #d97706, #f59e0b, #d97706, #b45309);
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid #78350f;
    color: #451a03;
    font-weight: 900;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
}

.spirit-tilt-readout {
    font-family: monospace;
    font-size: 0.95rem;
    background: #0f172a;
    color: #38bdf8;
    padding: 2px 8px;
    border-radius: 4px;
}

.spirit-vial-frame {
    background: #0b1120;
    padding: 8px;
    border-radius: 10px;
    border: 2px solid #78350f;
}

.spirit-vial {
    position: relative;
    height: 52px;
    background: linear-gradient(180deg, #14532d, #22c55e, #16a34a, #15803d);
    border-radius: 26px;
    border: 2px solid #86efac;
    box-shadow: inset 0 4px 12px rgba(0,0,0,0.6), 0 0 16px rgba(34, 197, 94, 0.4);
    overflow: hidden;
}

.vial-hairline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #0f172a;
    z-index: 5;
    box-shadow: 0 0 3px rgba(0,0,0,0.8);
}

.vial-hairline.left { left: 45%; }
.vial-hairline.right { left: 55%; }

.vial-target-zone {
    position: absolute;
    left: 45%;
    width: 10%;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    font-weight: 900;
    color: rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
    pointer-events: none;
}

.spirit-bubble {
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #bbf7d0 40%, #4ade80 85%);
    transform: translateX(-50%);
    box-shadow: 0 0 12px rgba(255,255,255,0.9), inset 0 2px 4px rgba(0,0,0,0.2);
    z-index: 10;
    pointer-events: none;
    transition: left 0.05s linear;
}

.bubble-shine {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    margin: 4px 0 0 6px;
}

.level-controls-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 10px;
}

.btn-level-shim {
    background: #1e293b;
    border: 1px solid #475569;
    color: #e2e8f0;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.btn-level-shim:hover {
    background: #334155;
    border-color: #38bdf8;
    color: #38bdf8;
}

.btn-level-lock {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #0b1120;
    border: none;
    border-radius: 8px;
    font-weight: 900;
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
    transition: transform 0.08s ease;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.btn-level-lock:active { transform: scale(0.98); }

/* ======================================================== */
/* DIY MINIGAME 3: DIGITAL STUD FINDER & DRILL              */
/* ======================================================== */

.scanner-unit-box {
    background: #1e293b;
    border: 2px solid #eab308;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.scanner-screen {
    background: #020617;
    border: 2px solid #334155;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scanner-screen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.scanner-sig-text {
    font-size: 0.85rem;
    font-weight: 800;
}

.scanner-sig-text.sig-5 { color: #ef4444; text-shadow: 0 0 10px rgba(239, 68, 68, 0.8); }
.scanner-sig-text.sig-4 { color: #f97316; }
.scanner-sig-text.sig-3 { color: #eab308; }
.scanner-sig-text.sig-2 { color: #22c55e; }
.scanner-sig-text.sig-1 { color: #94a3b8; }

.scanner-led-meter {
    display: flex;
    gap: 6px;
    height: 16px;
}

.led-bar {
    flex: 1;
    background: #0f172a;
    border-radius: 4px;
    border: 1px solid #1e293b;
    transition: all 0.1s ease;
}

.led-bar.lit.g { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.led-bar.lit.y { background: #eab308; box-shadow: 0 0 8px #eab308; }
.led-bar.lit.o { background: #f97316; box-shadow: 0 0 8px #f97316; }
.led-bar.lit.r { background: #ef4444; box-shadow: 0 0 12px #ef4444; }

.wall-track-area {
    position: relative;
    height: 64px;
    background: repeating-linear-gradient(90deg, #1e293b, #1e293b 20px, #0f172a 20px, #0f172a 40px);
    border: 2px solid #475569;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
}

.wall-scanner-head {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    background: rgba(56, 189, 248, 0.25);
    border: 2px solid #38bdf8;
    border-radius: 4px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.6);
    pointer-events: none;
    transition: left 0.05s ease;
}

.scanner-head-tag {
    font-size: 0.55rem;
    font-weight: 900;
    color: #38bdf8;
    writing-mode: vertical-lr;
    letter-spacing: 1px;
}

.wall-stud-reveal {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    background: #854d0e;
    border: 2px dashed #facc15;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 900;
    color: #fef08a;
    writing-mode: vertical-lr;
    z-index: 2;
}

.scanner-nav-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-scan-nav {
    background: #1e293b;
    border: 1px solid #475569;
    color: #e2e8f0;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.scanner-slider {
    flex: 1;
    accent-color: #38bdf8;
    cursor: pointer;
}

/* ======================================================== */
/* SUBCONTRACTOR MINIGAME 2: BLUEPRINT DEFECT SPOTTER       */
/* ======================================================== */

.blueprint-sheet-grid {
    background: #0c1b33;
    border: 2px solid #1e3a8a;
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-image: 
        linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px);
    background-size: 20px 20px;
}

.blueprint-card {
    background: rgba(15, 23, 42, 0.85);
    border: 2px solid #334155;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.blueprint-card:hover:not(.redlined) {
    border-color: #38bdf8;
    background: rgba(30, 41, 59, 0.9);
    transform: translateX(4px);
}

.blueprint-card.redlined {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.bp-card-top {
    display: flex;
    gap: 12px;
    align-items: center;
}

.bp-icon { font-size: 1.6rem; }

.bp-card-top h4 {
    margin: 0 0 2px 0;
    font-size: 0.95rem;
    color: #f8fafc;
}

.bp-card-top p {
    margin: 0;
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.35;
}

.stamp-redlined {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #ef4444;
    font-weight: 800;
    font-size: 0.75rem;
    white-space: nowrap;
}

.btn-redline-inspect {
    padding: 8px 14px;
    border-radius: 6px;
    background: #1e293b;
    border: 1px solid #475569;
    color: #38bdf8;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
}

.btn-redline-inspect:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

/* ======================================================== */
/* SUBCONTRACTOR MINIGAME 3: HAGGLE & NEGOTIATION           */
/* ======================================================== */

.haggle-gauge-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.haggle-gauge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #cbd5e1;
}

.haggle-track {
    position: relative;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    border: 2px solid #475569;
    background: #0b1120;
}

.haggle-zone {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
}

.haggle-zone.gold { flex: 15; background: linear-gradient(180deg, #d97706, #fbbf24); color: #0b1120; }
.haggle-zone.green { flex: 25; background: linear-gradient(180deg, #047857, #10b981); }
.haggle-zone.yellow { flex: 25; background: linear-gradient(180deg, #854d0e, #eab308); color: #0b1120; }
.haggle-zone.red { flex: 35; background: linear-gradient(180deg, #7f1d1d, #ef4444); }

.haggle-needle {
    position: absolute;
    top: -6px;
    bottom: -6px;
    width: 6px;
    background: #ffffff;
    border-radius: 3px;
    transform: translateX(-50%);
    box-shadow: 0 0 14px #38bdf8, 0 0 4px #ffffff;
    z-index: 10;
    pointer-events: none;
    transition: left 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.haggle-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.btn-haggle-tactic {
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-haggle-tactic:hover:not(:disabled) {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
    transform: translateY(-2px);
}

.btn-haggle-tactic:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: #475569;
}

.tactic-icon { font-size: 1.8rem; line-height: 1; }

.tactic-info strong {
    display: block;
    font-size: 0.9rem;
    color: #f8fafc;
    margin-bottom: 2px;
}

.tactic-info small {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.35;
}

@media (max-width: 640px) {
    .rates-trio-row {
        grid-template-columns: 1fr;
    }
    .sub-checkpoints-grid {
        grid-template-columns: 1fr;
    }
    .diy-stages-row {
        grid-template-columns: 1fr;
    }
    .level-controls-grid {
        grid-template-columns: 1fr;
    }
    .haggle-cards-grid {
        grid-template-columns: 1fr;
    }
    .timber-beam-wood {
        grid-template-columns: repeat(2, 1fr);
    }
    .paint-wall-grid {
        grid-template-columns: 1fr;
    }
    .haul-dumpster-grid {
        grid-template-columns: 1fr;
    }
    .saw-controls-row {
        grid-template-columns: 1fr;
    }
}

/* ======================================================== */
/* TACTILE CONSTRUCTION MINIGAMES STYLES */
/* ======================================================== */

/* 1. Framing Hammer & Timber Beam */
.hammer-power-container {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.hammer-power-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
}

.hammer-power-track {
    position: relative;
    height: 28px;
    background: #1e293b;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
}

.power-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    user-select: none;
}

.power-zone.low {
    flex: 1.2;
    background: rgba(148, 163, 184, 0.25);
    color: #94a3b8;
}

.power-zone.mid {
    flex: 1.2;
    background: rgba(56, 189, 248, 0.3);
    color: #38bdf8;
}

.power-zone.max {
    flex: 1;
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.4), rgba(239, 68, 68, 0.5));
    color: #fde047;
    font-weight: 800;
}

.hammer-power-needle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #ffffff;
    box-shadow: 0 0 10px #f59e0b, 0 0 20px #ef4444;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 5;
    transition: left 0.05s linear;
}

.timber-beam-area {
    cursor: pointer;
    margin: 12px 0;
    user-select: none;
}

.timber-beam-wood {
    background: linear-gradient(180deg, #78350f, #451a03);
    border: 3px solid #92400e;
    border-radius: 8px;
    padding: 24px 16px 14px 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4);
}

.nail-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-height: 120px;
    justify-content: flex-end;
}

.hammer-hover-icon {
    position: absolute;
    top: -24px;
    font-size: 1.8rem;
    animation: hammerBob 0.6s infinite alternate ease-in-out;
}

@keyframes hammerBob {
    0% { transform: translateY(0) rotate(-10deg); }
    100% { transform: translateY(-8px) rotate(15deg); }
}

.nail-shank-wrapper {
    height: 80px;
    width: 22px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.nail-head {
    width: 20px;
    height: 5px;
    background: #e2e8f0;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: bottom 0.15s ease;
}

.nail-shank {
    width: 7px;
    background: linear-gradient(90deg, #94a3b8, #cbd5e1, #64748b);
    border-radius: 1px 1px 0 0;
    transition: height 0.15s ease;
}

.nail-base-hole {
    width: 24px;
    height: 7px;
    background: #1c0b02;
    border-radius: 50%;
    margin-top: 4px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}

.nail-tag {
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #cbd5e1;
    text-align: center;
}

.nail-column.active .nail-tag {
    color: #f59e0b;
}

.nail-column.flush .nail-tag {
    color: #10b981;
}

/* 2. Magnetic Nail Cleanup Arena */
.nail-floor-arena {
    position: relative;
    height: 220px;
    background: #1e1b18;
    border: 2px solid #57402c;
    border-radius: 8px;
    overflow: hidden;
    margin: 12px 0;
    cursor: crosshair;
    user-select: none;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(42, 36, 31, 0.6) 0%, rgba(20, 16, 12, 0.95) 100%),
        repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(0,0,0,0.2) 20px, rgba(0,0,0,0.2) 40px);
}

.scattered-nail-item {
    position: absolute;
    font-size: 1.6rem;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
    user-select: none;
    transform: translate(-50%, -50%);
}

.scattered-nail-item:hover {
    transform: translate(-50%, -50%) scale(1.4) rotate(15deg);
    filter: drop-shadow(0 0 10px #f59e0b);
}

.magnetic-wand-hint {
    position: absolute;
    bottom: 8px;
    left: 12px;
    font-size: 0.78rem;
    color: #a8a29e;
    pointer-events: none;
}

/* 3. Rhythm Handsaw Workbench */
.saw-workbench-box {
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
}

.saw-cutline-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
}

.saw-timber-visual {
    display: flex;
    height: 110px;
    align-items: stretch;
    gap: 4px;
    overflow: hidden;
}

.saw-timber-fixed {
    flex: 1;
    background: linear-gradient(180deg, #92400e, #78350f);
    border: 2px solid #b45309;
    border-radius: 6px 0 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    color: #fef3c7;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.saw-blade-kerf {
    width: 28px;
    position: relative;
    background: #0b1120;
    border-radius: 2px;
    display: flex;
    justify-content: center;
}

.saw-teeth-blade {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.9rem;
    transition: transform 0.1s ease;
}

.saw-teeth-blade.push {
    transform: translateX(-50%) rotate(18deg);
}

.saw-teeth-blade.pull {
    transform: translateX(-50%) rotate(-18deg);
}

.saw-timber-offcut {
    width: 90px;
    background: linear-gradient(180deg, #92400e, #78350f);
    border: 2px solid #b45309;
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    color: #fef3c7;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.saw-timber-offcut.dropped {
    transform: translateY(50px) rotate(25deg);
    opacity: 0.3;
}

.saw-controls-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 10px 0;
}

.btn-saw-stroke {
    padding: 12px;
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 8px;
    color: #f8fafc;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.btn-saw-stroke:hover {
    background: #334155;
    border-color: #38bdf8;
}

.btn-saw-stroke.next-pulse {
    border-color: #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
    animation: sawPulse 0.8s infinite alternate;
}

@keyframes sawPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.02); }
}

/* 4. Paint Roller Wall Boards */
.paint-wall-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 12px 0;
}

.paint-wall-board {
    padding: 18px 12px;
    border-radius: 8px;
    border: 2px solid #334155;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 88px;
}

.paint-wall-board.unpainted {
    background: #262626;
    color: #a3a3a3;
}

.paint-wall-board.unpainted:hover {
    background: #363636;
    border-color: #10b981;
    transform: scale(1.02);
}

.paint-wall-board.painted {
    background: linear-gradient(135deg, #14532d, #166534);
    border-color: #22c55e;
    color: #bbf7d0;
    box-shadow: inset 0 0 16px rgba(34, 197, 94, 0.3);
}

.paint-wall-board .board-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

.paint-wall-board .board-status {
    font-size: 0.72rem;
    font-weight: 800;
}

/* 5. Subcontractor Crew Dumpster Haul */
.haul-dumpster-container {
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: 8px;
    padding: 14px;
    margin: 12px 0;
}

.dumpster-header {
    font-size: 0.85rem;
    font-weight: 800;
    color: #38bdf8;
    margin-bottom: 12px;
}

.haul-dumpster-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.haul-debris-card {
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.haul-debris-card:hover:not(.hauled) {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
    transform: translateY(-2px);
}

.haul-debris-card.hauled {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    opacity: 0.7;
}

.haul-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.haul-details {
    flex: 1;
}

.haul-details strong {
    display: block;
    font-size: 0.85rem;
    color: #f8fafc;
}

.haul-details small {
    font-size: 0.72rem;
    color: #94a3b8;
}

.haul-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 800;
}

.haul-badge.on-site {
    background: #f59e0b;
    color: #000;
}

.haul-badge.in-dumpster {
    background: #10b981;
    color: #fff;
}

/* ======================================================== */
/* B&B GUEST SIMULATION, BREAKFAST & CHIRPADVISOR STYLES */
/* ======================================================== */

/* Breakfast Menu Picker */
.bnb-breakfast-picker-card {
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 14px;
}

.bnb-breakfast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #f8fafc;
    margin-bottom: 10px;
}

.pantry-cost-tag {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid #ef4444;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.bnb-breakfast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
}

.breakfast-menu-pill {
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.breakfast-menu-pill:hover {
    border-color: #38bdf8;
    background: #273549;
    transform: translateY(-1px);
}

.breakfast-menu-pill.selected {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

.menu-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.menu-info {
    flex: 1;
}

.menu-info strong {
    display: block;
    font-size: 0.82rem;
    color: #f8fafc;
    line-height: 1.2;
}

.menu-info small {
    display: block;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 2px;
}

.selected-check {
    font-size: 0.65rem;
    font-weight: 800;
    background: #10b981;
    color: #0b1120;
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap;
}

.breakfast-flavor-banner {
    margin-top: 10px;
    padding: 6px 10px;
    background: #1e293b;
    border-left: 3px solid #f59e0b;
    font-size: 0.78rem;
    color: #cbd5e1;
    border-radius: 0 4px 4px 0;
}

/* Weekend Checkout Screen */
.checkout-celebration-card {
    background: #0f172a;
    border: 2px solid #10b981;
    border-radius: 8px;
    padding: 16px;
}

.checkout-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #334155;
}

.checkout-financial-trio {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 14px 0;
}

.fin-box {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}

.fin-box.highlight {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.fin-box .label {
    display: block;
    font-size: 0.72rem;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.fin-box .val {
    font-size: 1.15rem;
    font-weight: 800;
}

.checkout-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.checkout-review-item {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 10px 12px;
}

/* ChirpAdvisor Feed in Career Tab */
.chirpadvisor-container {
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: 8px;
    padding: 16px;
    margin-top: 24px;
}

.chirpadvisor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid #334155;
}

.chirp-rating-badge {
    text-align: right;
}

.chirp-rating-badge .rating-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: #f59e0b;
    display: block;
}

.chirp-badges-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

.chirp-pill {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 12px;
    background: #1e293b;
    border: 1px solid #475569;
    color: #94a3b8;
}

.chirp-pill.active {
    border-color: #10b981;
    color: #34d399;
    background: rgba(16, 185, 129, 0.12);
    font-weight: 700;
}

.chirp-reviews-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
    max-height: 480px;
    overflow-y: auto;
    padding-right: 6px;
}

.empty-reviews-card {
    text-align: center;
    padding: 30px 16px;
    background: #1e293b;
    border: 1px dashed #475569;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.85rem;
}

.chirp-review-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.review-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.review-avatar {
    font-size: 1.8rem;
    line-height: 1;
}

.review-stars {
    font-size: 0.95rem;
    color: #f59e0b;
}

.review-tip-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    background: #334155;
    color: #cbd5e1;
    margin-left: 6px;
}

.review-tip-tag.tip-positive {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #34d399;
}

.review-headline {
    font-size: 0.92rem;
    font-weight: 800;
    color: #38bdf8;
    margin: 4px 0 2px 0;
}

.review-body-text {
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.45;
    margin: 0;
}

.review-cat-footer {
    font-size: 0.78rem;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    padding: 6px 10px;
    border-radius: 4px;
    margin-top: 4px;
}

@media (max-width: 640px) {
    .checkout-financial-trio {
        grid-template-columns: repeat(2, 1fr);
    }
    .bnb-breakfast-grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================================== */
/* STRUCTURAL PREREQUISITE WARNINGS (1,100-LB PLASTER DEMO) */
/* ======================================================== */
.task-prereq-alert {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-left: 4px solid var(--accent-red);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 8px 0;
}

.task-prereq-alert .prereq-badge {
    display: inline-block;
    background: var(--accent-red);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.task-prereq-alert p {
    font-size: 0.82rem;
    color: #fca5a5;
    line-height: 1.4;
    margin: 0;
}

.choice-note.prereq-locked {
    color: #f87171 !important;
    font-weight: 700;
}

/* ======================================================== */
/* FULL-PAGE HOUSE BLUEPRINT (ARCHITECTURAL SCHEMATIC)     */
/* ======================================================== */
.blueprint-page-header {
    background: #0d1726;
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.blueprint-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.blueprint-stamp .stamp-code {
    display: inline-block;
    background: #1e3a5f;
    color: #38bdf8;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
}

.blueprint-stamp h2 {
    font-size: 1.4rem;
    color: #f8fafc;
    margin: 0 0 4px 0;
    letter-spacing: 0.5px;
}

.blueprint-subtitle {
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 0;
}

.blueprint-meta-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 340px;
}

.blueprint-meta-box .meta-item {
    display: flex;
    flex-direction: column;
}

.blueprint-meta-box .lbl {
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.blueprint-meta-box .val {
    font-size: 0.85rem;
    color: #38bdf8;
    font-weight: 700;
}

.blueprint-spec-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 14px;
    gap: 16px;
    flex-wrap: wrap;
}

.blueprint-spec-banner .spec-tag {
    display: inline-block;
    color: #fbbf24;
    font-size: 0.82rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.blueprint-spec-banner p {
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.4;
    margin: 0;
}

.btn-roam-cats-full {
    background: #a855f7;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
}

.btn-roam-cats-full:hover {
    background: #9333ea;
    transform: translateY(-2px);
}

.blueprint-full-levels-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.blueprint-full-level-card {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.blueprint-full-level-card .level-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.blueprint-full-level-card .level-sub {
    font-size: 0.75rem;
    color: #64748b;
}

.level-rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.blueprint-card-interactive {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
}

.blueprint-card-interactive:hover {
    transform: translateY(-3px);
    border-color: #38bdf8;
    box-shadow: 0 6px 16px rgba(56, 189, 248, 0.15);
}

.blueprint-card-interactive.selected {
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}

.blueprint-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.card-room-identity {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.card-room-identity .room-icon {
    font-size: 1.6rem;
}

.card-room-identity .room-title {
    font-size: 1rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
}

.card-room-identity .room-dims {
    font-size: 0.75rem;
    color: #94a3b8;
    display: block;
}

.blueprint-notes-box {
    background: rgba(15, 23, 42, 0.6);
    border-left: 3px solid #38bdf8;
    border-radius: 4px;
    padding: 8px 10px;
    margin: 10px 0;
}

.blueprint-notes-box .spec-label {
    font-size: 0.68rem;
    color: #38bdf8;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}

.blueprint-notes-box p {
    font-size: 0.78rem;
    color: #cbd5e1;
    margin: 0;
    line-height: 1.35;
}

.blueprint-card-footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed #334155;
    text-align: right;
}

.btn-jump-hint {
    font-size: 0.8rem;
    font-weight: 700;
    color: #38bdf8;
    transition: color 0.2s;
}

.blueprint-card-interactive:hover .btn-jump-hint {
    color: #7dd3fc;
    text-decoration: underline;
}

/* ======================================================== */
/* FIELD JOURNALS & MEDIA (PHOTO, VIDEO, PROGRESS JOURNALS) */
/* ======================================================== */
.journals-page-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.journals-subnav-bar {
    display: flex;
    gap: 10px;
    background: #0f172a;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #1e293b;
    flex-wrap: wrap;
}

.journal-subnav-btn {
    flex: 1;
    min-width: 180px;
    background: #1e293b;
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 16px;
    border: 1px solid #334155;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.22s ease;
    text-align: center;
}

.journal-subnav-btn:hover {
    background: linear-gradient(135deg, #334155, #1e293b);
    color: #ffffff;
    border-color: #38bdf8;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 14px rgba(56, 189, 248, 0.35);
    z-index: 10;
}

.journal-subnav-btn.active {
    background: var(--accent);
    color: #0f172a;
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.journal-subnav-btn.active:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 10px 24px rgba(245, 158, 11, 0.6);
    z-index: 15;
}

.journal-section-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0d1726;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 16px;
    gap: 16px;
    flex-wrap: wrap;
}

.journal-section-intro h3 {
    font-size: 1.15rem;
    color: #f8fafc;
    margin: 0 0 4px 0;
}

.journal-section-intro p {
    font-size: 0.82rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.4;
}

.journal-count-badge {
    background: #1e3a5f;
    color: #38bdf8;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

/* Photo Journal Grid */
.photo-journal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
}

.archival-photo-card {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.photo-card-header {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
}

.photo-badge {
    font-size: 0.72rem;
    font-weight: 800;
    color: #38bdf8;
}

.photo-date {
    font-size: 0.72rem;
    color: #94a3b8;
}

.photo-frame-visual {
    height: 180px;
    background: radial-gradient(circle at center, #1e3a5f 0%, #09131f 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #1e293b;
}

.photo-frame-visual.photo-type-field_cockpit {
    background: radial-gradient(circle at center, #032b43 0%, #020b14 100%);
    box-shadow: inset 0 0 30px rgba(56, 189, 248, 0.25);
}

.photo-frame-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.photo-icon {
    font-size: 3rem;
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.4));
}

.photo-stamp {
    font-size: 0.68rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 1.5px;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 8px;
    border-radius: 4px;
}

.photo-caption-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.92);
    font-size: 0.75rem;
    color: #cbd5e1;
    padding: 6px 10px;
    font-style: italic;
    border-top: 1px solid #1e293b;
}

.photo-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.photo-card-body h4 {
    font-size: 0.98rem;
    color: #f8fafc;
    margin: 0;
    line-height: 1.35;
}

.photo-summary-tag {
    font-size: 0.78rem;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    padding: 6px 8px;
    border-radius: 4px;
    line-height: 1.35;
}

.photo-literature {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.45;
}

.photo-literature p {
    margin: 0;
}

/* Video Journal Grid */
.video-journal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

.video-card {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
}

.video-player-simulation {
    height: 200px;
    background: #020617;
    position: relative;
    border-bottom: 1px solid #1e293b;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    box-sizing: border-box;
}

.video-screen-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 8px;
    text-align: center;
}

.video-play-btn-circle {
    width: 52px;
    height: 52px;
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.6);
    transition: transform 0.2s, background 0.2s;
    cursor: pointer;
}

.video-card:hover .video-play-btn-circle {
    transform: scale(1.1);
    background: #ef4444;
}

.video-screen-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #f8fafc;
    max-width: 90%;
}

.video-reel-status {
    font-size: 0.7rem;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
    padding: 2px 8px;
    border-radius: 4px;
}

.video-bottom-controls {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 700;
}

.vid-quality-tag {
    color: #eab308;
    background: rgba(234, 179, 8, 0.15);
    padding: 1px 6px;
    border-radius: 3px;
}

.video-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.video-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.video-header-row h4 {
    font-size: 1rem;
    color: #f8fafc;
    margin: 0;
    line-height: 1.35;
}

.video-badge {
    background: #1e3a5f;
    color: #38bdf8;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.video-literature {
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.45;
    margin: 0;
}

.video-highlights-box {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid #1e293b;
    border-radius: 6px;
    padding: 10px 12px;
}

.video-highlights-box strong {
    font-size: 0.75rem;
    color: #cbd5e1;
    display: block;
    margin-bottom: 6px;
}

.video-highlights-box ul {
    margin: 0;
    padding-left: 18px;
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.4;
}

.video-card-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #1e293b;
}

.video-upcoming-note {
    font-size: 0.72rem;
    color: #64748b;
    font-style: italic;
}

/* Progress & Engineering Journal */
.field-logbook-card {
    background: #0d1726;
    border: 1px solid #1e3a5f;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.logbook-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.logbook-status-pill {
    font-size: 0.78rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.logbook-status-pill.active {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.4);
}

.logbook-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 16px;
}

.log-stat {
    display: flex;
    flex-direction: column;
}

.log-stat span {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 700;
}

.log-stat strong {
    font-size: 0.88rem;
    color: #f8fafc;
}

.progress-docs-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.progress-doc-card {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.doc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.doc-section-tag {
    background: #1e3a5f;
    color: #38bdf8;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.doc-author {
    font-size: 0.75rem;
    color: #64748b;
    font-style: italic;
}

.progress-doc-card h3 {
    font-size: 1.15rem;
    color: #f8fafc;
    margin: 0 0 12px 0;
    line-height: 1.35;
}

.doc-content-body {
    font-size: 0.85rem;
    color: #cbd5e1;
    line-height: 1.6;
}

.doc-content-body p {
    margin: 0 0 12px 0;
}

.doc-content-body p:last-child {
    margin-bottom: 0;
}

/* ======================================================== */
/* DIY MINIGAME 8: 20-TON HYDRAULIC JACK LEVELING & BALANCE */
/* ======================================================== */

.hydraulic-manifold-banner {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.hydraulic-balance-badge {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hydraulic-balance-badge.status-balanced {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid #10b981;
}

.hydraulic-balance-badge.status-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid #f59e0b;
}

.hydraulic-balance-badge.status-danger {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    border: 1px solid #ef4444;
}

.hydraulic-jacks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 14px 0;
}

.hydraulic-jack-card {
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: border-color 0.2s;
}

.hydraulic-jack-card.at-target {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.hydraulic-corner-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: #f8fafc;
    margin-bottom: 2px;
}

.hydraulic-room-label {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-bottom: 10px;
}

.hydraulic-ram-visual {
    width: 60px;
    height: 110px;
    background: #0f172a;
    border: 2px solid #475569;
    border-radius: 6px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    margin-bottom: 10px;
}

.hydraulic-piston-stem {
    width: 28px;
    background: linear-gradient(90deg, #94a3b8, #e2e8f0, #94a3b8);
    margin: 0 auto;
    border-radius: 3px 3px 0 0;
    transition: height 0.25s ease-out;
}

.hydraulic-base-cylinder {
    width: 100%;
    height: 38px;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    border-top: 2px solid #60a5fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.5px;
}

.hydraulic-height-readout {
    font-size: 1.25rem;
    font-weight: 900;
    color: #38bdf8;
    line-height: 1.1;
}

.hydraulic-psi-readout {
    font-size: 0.72rem;
    color: #94a3b8;
    margin: 4px 0 10px 0;
}

.btn-pump-jack {
    width: 100%;
    padding: 8px 6px;
    background: #2563eb;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.78rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}

.btn-pump-jack:hover:not([disabled]) {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.btn-pump-jack:disabled {
    background: #334155;
    color: #64748b;
    cursor: default;
}

/* ======================================================== */
/* DIY MINIGAME 9: HIGH-PRESSURE SANDBLASTER & MEDIA HOPPER */
/* ======================================================== */

.sandblast-arena-box {
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: 8px;
    padding: 14px;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sandblast-tiles-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    min-height: 200px;
}

.sandblast-tile {
    background: #292524;
    border: 2px solid #78350f;
    border-radius: 6px;
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.sandblast-tile.crusted {
    background: radial-gradient(circle, #451a03 30%, #1c1917 100%);
    border-color: #b45309;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

.sandblast-tile.crusted:hover {
    border-color: #f59e0b;
    transform: scale(1.03);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.sandblast-tile.cleaned {
    background: radial-gradient(circle, #334155 10%, #0f172a 100%);
    border-color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
    transform: none;
    cursor: default;
}

.sandblast-tile .tile-icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 4px;
}

.sandblast-tile .tile-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #d6d3d1;
}

.sandblast-tile.cleaned .tile-label {
    color: #38bdf8;
}

/* ======================================================== */
/* DIY MINIGAME 10: 1,100-LB PLASTER SLEDGEHAMMER DEMO     */
/* ======================================================== */

.plaster-load-banner {
    background: #1c1917;
    border: 1px solid #78350f;
    border-radius: 8px;
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.plaster-weight-readout {
    font-size: 1.4rem;
    font-weight: 900;
    color: #f59e0b;
}

.plaster-wall-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 14px 0;
}

.plaster-section-card {
    background: #e2e8f0;
    color: #1e293b;
    border: 3px solid #cbd5e1;
    border-radius: 8px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s, border-color 0.2s;
    user-select: none;
}

.plaster-section-card:hover:not(.shattered) {
    transform: scale(1.02);
    border-color: #f59e0b;
}

.plaster-section-card.cracked-1 {
    background: #cbd5e1;
    border-color: #94a3b8;
}

.plaster-section-card.cracked-1::after {
    content: "⚡";
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 1.1rem;
    opacity: 0.7;
}

.plaster-section-card.shattered {
    background: linear-gradient(135deg, #78350f, #451a03);
    border-color: #f59e0b;
    color: #fef3c7;
    cursor: default;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7);
}

.plaster-section-name {
    font-size: 0.82rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.plaster-section-mass {
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}

.plaster-section-card.shattered .plaster-section-mass {
    color: #fbbf24;
}

.plaster-stud-reveal-text {
    font-size: 0.68rem;
    font-weight: 800;
    color: #38bdf8;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ======================================================== */
/* BIGGER GAMEPLAY: ROADMAP PREREQUISITES, TIMBER YARD, HAZARDS & TOUCH CONTROLS */
/* ======================================================== */

/* 1. Restoration Roadmap Prerequisite Alerts */
.task-roadmap-prereq-alert {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-left: 4px solid #f59e0b;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 8px 0;
}

.roadmap-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.roadmap-reasons-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.roadmap-req-item {
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.4;
}

.roadmap-req-item .req-title {
    color: #f8fafc;
    display: block;
}

.roadmap-req-item .req-desc {
    margin: 2px 0 6px 0;
    color: #94a3b8;
    font-size: 0.8rem;
}

.btn-jump-prereq {
    background: #0f172a;
    border: 1px solid #38bdf8;
    color: #38bdf8;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-jump-prereq:hover {
    background: #38bdf8;
    color: #0f172a;
}

/* 2. Municipal Stop-Work Order Alert Card */
.room-stopwork-alert-card {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(15, 23, 42, 0.9));
    border: 2px solid #ef4444;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.25);
}

.stopwork-badge {
    background: #ef4444;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.8px;
    display: inline-block;
    margin-bottom: 8px;
}

.room-stopwork-alert-card h4 {
    margin: 0 0 6px 0;
    color: #f87171;
    font-size: 1.15rem;
}

.room-stopwork-alert-card p {
    margin: 0 0 12px 0;
    color: #cbd5e1;
    font-size: 0.85rem;
    line-height: 1.45;
}

.stopwork-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-lift-fee {
    background: #2563eb;
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-lift-fee:hover {
    background: #1d4ed8;
}

.btn-lift-free {
    background: #10b981;
    border: none;
    color: #0b1120;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-lift-free:disabled {
    background: #334155 !important;
    color: #64748b !important;
    cursor: not-allowed;
}

/* 3. Timber & Materials Yard Staging Bar */
.materials-inventory-bar {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.materials-inv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.inv-title {
    font-weight: 800;
    font-size: 0.95rem;
    color: #f8fafc;
}

.inv-sub {
    font-size: 0.78rem;
    color: #94a3b8;
}

.materials-inv-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.mat-pill {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mat-pill.gold-pill {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.08);
}

.pill-label {
    font-size: 0.78rem;
    color: #cbd5e1;
}

.pill-val {
    font-size: 1.1rem;
    color: #38bdf8;
    font-weight: 800;
}

.mat-pill.gold-pill .pill-val {
    color: #fbbf24;
}

.pill-perk {
    font-size: 0.72rem;
    font-weight: 800;
    color: #34d399;
    background: rgba(16, 185, 129, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
}

.btn-mat-action {
    background: #1e293b;
    border: 1px solid #475569;
    color: #38bdf8;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-mat-action:hover:not(:disabled) {
    background: #38bdf8;
    color: #0b1120;
}

.btn-mat-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.diy-oldgrowth-btn {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    color: #0b1120 !important;
    font-weight: 800 !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}

/* 4. Hazard Incident Modal */
.hazard-modal-window {
    max-width: 560px;
    width: 90%;
    background: #0f172a;
    border: 2px solid #ef4444;
    box-shadow: 0 0 35px rgba(239, 68, 68, 0.4);
}

.hazard-incident-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 6px;
}

.hazard-incident-banner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(30, 41, 59, 0.8);
    padding: 14px 16px;
    border-radius: 6px;
}

.incident-icon {
    font-size: 2.2rem;
    line-height: 1;
}

.incident-room-tag {
    font-size: 0.78rem;
    color: #f87171;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
}

.incident-desc {
    margin: 0;
    color: #f8fafc;
    font-size: 0.9rem;
    line-height: 1.45;
}

.incident-impact-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.incident-stat {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.incident-stat.danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.incident-stat.warn {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fde68a;
}

.incident-stat.shutdown {
    background: rgba(239, 68, 68, 0.25);
    border: 1px solid #ef4444;
    color: #fca5a5;
    font-weight: 800;
}

.incident-remedy-note {
    background: rgba(15, 23, 42, 0.7);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.45;
}

.incident-action-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.btn-incident-ok {
    background: #334155;
    border: none;
    color: #f8fafc;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-incident-ok:hover {
    background: #475569;
}

/* 5. Mobile & Touch Friendly Minigame Controls */
.mobile-minigame-touchpad {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 12px 0 6px 0;
    touch-action: manipulation;
}

.btn-touch-action {
    min-height: 48px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid #475569;
    background: #1e293b;
    color: #f8fafc;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.08s, background 0.15s;
}

.btn-touch-action:active {
    transform: scale(0.96);
    background: #334155;
}

.btn-touch-primary {
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    border-color: #38bdf8;
    color: #fff;
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.4);
}

.btn-touch-primary:active {
    background: #0284c7;
}

@media (max-width: 768px) {
    .minigame-wrapper {
        padding: 8px;
    }
    .minigame-task-banner {
        flex-direction: column;
        gap: 10px;
    }
    .banner-costs-col {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }
    .hydraulic-jacks-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .btn-touch-action {
        flex: 1 1 calc(50% - 8px);
        min-height: 52px;
        font-size: 0.85rem;
    }
    .btn-diy-strike {
        min-height: 52px;
        font-size: 0.95rem;
    }
    .materials-inv-pills {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   POLISH & UPKEEP: FIELD GUIDE BUTTON, VIDEO MODAL & TUTORIAL ONBOARDING
   ========================================================================== */

/* Field Guide Header Button */
.btn-field-guide {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(14, 165, 233, 0.25));
    border: 1px solid rgba(56, 189, 248, 0.5);
    color: #38bdf8;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-left: 12px;
}
.btn-field-guide:hover {
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    color: #fff;
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
    transform: translateY(-1px);
}

/* Watch Episode Button on Video Card */
.btn-watch-episode {
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    border: 1px solid #38bdf8;
    color: #fff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-watch-episode:hover {
    background: #0284c7;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

/* Documentary Video Modal Window */
.video-modal-window {
    max-width: 920px;
    width: 95%;
    max-height: 90vh;
    border: 2px solid #38bdf8;
    background: #0b1120;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.25);
    display: flex;
    flex-direction: column;
}
.video-modal-header {
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
    padding: 12px 18px;
}
.vid-modal-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vid-tag-badge {
    background: rgba(56, 189, 248, 0.2);
    border: 1px solid #38bdf8;
    color: #38bdf8;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.video-modal-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Video Cinematic Screen Simulation */
.video-modal-screen {
    background: radial-gradient(circle at center, #172554, #020617);
    border: 1px solid #1e3a8a;
    border-radius: 8px;
    padding: 20px;
    position: relative;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
}

.video-screen-overlay-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: monospace;
    font-size: 0.8rem;
    color: #94a3b8;
}

.video-rec-indicator {
    color: #ef4444;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: blinkRec 1.2s infinite;
}
@keyframes blinkRec {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.video-screen-timestamp {
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 8px;
    border-radius: 4px;
    color: #f8fafc;
    border: 1px solid #334155;
}

.video-screen-center {
    text-align: center;
    padding: 18px 10px;
}

.video-scene-hero-badge {
    display: inline-block;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    color: #fbbf24;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.video-scene-hero-title {
    font-size: 1.35rem;
    color: #f8fafc;
    margin: 0 0 6px 0;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.video-scene-hero-desc {
    font-size: 0.9rem;
    color: #cbd5e1;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.45;
}

.video-screen-controls-bar {
    margin-top: 14px;
}

.video-playback-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.video-playback-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
    transition: width 0.3s ease;
}

.video-screen-btn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-video-ctrl {
    background: #1e293b;
    border: 1px solid #475569;
    color: #f8fafc;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-video-ctrl:hover:not(:disabled) {
    background: #334155;
    border-color: #38bdf8;
}
.btn-video-ctrl:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.btn-video-ctrl.play-active {
    background: #0284c7;
    border-color: #38bdf8;
    color: #fff;
}

.video-status-text {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Two Columns: Scenes & Transcript */
.video-modal-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.video-sub-heading {
    font-size: 0.88rem;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.video-scenes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 4px;
}

.video-scene-item {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.video-scene-item:hover {
    border-color: #38bdf8;
    background: #172554;
}
.video-scene-item.active {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.video-scene-item-time {
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 800;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    white-space: nowrap;
}

.video-scene-item-info {
    flex: 1;
}
.video-scene-item-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #f8fafc;
}
.video-scene-item-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.3;
    margin-top: 2px;
}

.scene-playing-tag {
    font-size: 0.7rem;
    font-weight: 800;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.2);
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #f59e0b;
    white-space: nowrap;
}

.btn-jump-scene {
    font-size: 0.7rem;
    background: #1e293b;
    border: 1px solid #475569;
    color: #cbd5e1;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
}
.btn-jump-scene:hover {
    background: #334155;
    border-color: #38bdf8;
    color: #fff;
}

.video-engineering-highlights {
    margin-top: 14px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.8rem;
}
.video-engineering-highlights strong {
    color: #fbbf24;
    display: block;
    margin-bottom: 6px;
}
.video-engineering-highlights ul {
    margin: 0;
    padding-left: 18px;
    color: #cbd5e1;
    line-height: 1.45;
}

.video-transcript-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 4px;
}

.transcript-speech-bubble {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 10px 12px;
}
.transcript-speech-bubble.speaker-jack {
    border-left: 3px solid #38bdf8;
    background: rgba(56, 189, 248, 0.05);
}
.transcript-speech-bubble.speaker-sub {
    border-left: 3px solid #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.transcript-speaker {
    font-size: 0.75rem;
    font-weight: 800;
    color: #38bdf8;
    margin-bottom: 3px;
}
.transcript-speech-bubble.speaker-sub .transcript-speaker {
    color: #f59e0b;
}

.transcript-quote {
    font-size: 0.82rem;
    color: #e2e8f0;
    line-height: 1.4;
    font-style: italic;
}

.video-notes-card {
    margin-top: 14px;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.video-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #1e293b;
    padding-top: 12px;
}

/* ==========================================================================
   TUTORIAL / 1910 RESTORATION FIELD GUIDE MODAL
   ========================================================================== */

.tutorial-modal-window {
    max-width: 840px;
    width: 95%;
    max-height: 90vh;
    border: 2px solid #38bdf8;
    background: #0b1120;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.25);
    display: flex;
    flex-direction: column;
}

.tutorial-modal-header {
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tutorial-modal-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tutorial-step-tracker {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.tutorial-tracker-pill {
    flex: 1;
    min-width: 130px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}
.tutorial-tracker-pill:hover {
    border-color: #38bdf8;
    background: #172554;
}
.tutorial-tracker-pill.active {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}
.tutorial-tracker-pill.completed {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.pill-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1e293b;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tutorial-tracker-pill.active .pill-number {
    background: #38bdf8;
    color: #0b1120;
}
.tutorial-tracker-pill.completed .pill-number {
    background: #10b981;
    color: #0b1120;
}

.pill-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tutorial-tracker-pill.active .pill-name {
    color: #f8fafc;
}

/* Tutorial Card Body */
.tutorial-card {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 20px;
}

.tutorial-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 14px;
    margin-bottom: 16px;
}

.tutorial-header-icon {
    font-size: 2.6rem;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 12px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tutorial-badge {
    display: inline-block;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid #38bdf8;
    color: #38bdf8;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.tutorial-card-title {
    font-size: 1.25rem;
    color: #f8fafc;
    margin: 2px 0 4px 0;
}

.tutorial-tagline {
    font-size: 0.85rem;
    color: #fbbf24;
    font-weight: 600;
}

.tutorial-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tutorial-text {
    font-size: 0.88rem;
    color: #cbd5e1;
    line-height: 1.55;
    margin: 0;
}

.tutorial-highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.tutorial-hl-box {
    background: #0b1120;
    border: 1px solid #1e293b;
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tutorial-hl-label {
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 800;
}
.tutorial-hl-val {
    font-size: 0.85rem;
    color: #38bdf8;
    font-weight: 700;
}

.tutorial-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #1e293b;
    padding-top: 14px;
}

.btn-tutorial-nav {
    background: #1e293b;
    border: 1px solid #475569;
    color: #f8fafc;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-tutorial-nav:hover:not(:disabled) {
    background: #334155;
    border-color: #38bdf8;
}
.btn-tutorial-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-primary-nav {
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    border-color: #38bdf8;
    color: #fff;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.4);
}
.btn-primary-nav:hover {
    background: #0284c7;
}

.btn-finish-nav {
    background: linear-gradient(135deg, #059669, #10b981);
    border-color: #34d399;
    color: #fff;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}
.btn-finish-nav:hover {
    background: #059669;
}

@media (max-width: 768px) {
    .video-modal-columns {
        grid-template-columns: 1fr;
    }
    .tutorial-highlights-grid {
        grid-template-columns: 1fr;
    }
    .btn-field-guide {
        display: none;
    }
}

/* ==========================================================================
   REAL-LIFE EDITABLE HOUSE TRACKER & SECTION JOURNALS STYLES
   ========================================================================== */

/* Top Real-Life Toolbar */
.real-life-toolbar {
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
    padding: 8px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.toolbar-brand-badge {
    font-size: 0.78rem;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
}
.toolbar-brand-badge .live-dot {
    color: #10b981;
    font-size: 0.9rem;
    animation: blinkRec 2s infinite;
}
.toolbar-buttons-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.btn-toolbar-action {
    background: #1e293b;
    border: 1px solid #334155;
    color: #f8fafc;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-toolbar-action:hover {
    background: #334155;
    border-color: #38bdf8;
    color: #38bdf8;
}
.btn-toolbar-highlight {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(14, 165, 233, 0.3));
    border-color: #38bdf8;
    color: #38bdf8;
}
.btn-toolbar-highlight:hover {
    background: #0284c7;
    color: #fff;
}

/* Section Sub-Nav Bar (Within Any Room / Section) */
.section-sub-nav-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #090e1a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 6px 8px;
    margin-top: 12px;
    overflow-x: auto;
}
.section-nav-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.section-nav-btn:hover {
    color: #f8fafc;
    background: #1e293b;
}
.section-nav-btn.active {
    background: #1e293b;
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}
.btn-section-edit-action {
    margin-left: auto;
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}
.btn-section-edit-action:hover {
    background: #d97706;
    color: #fff;
}

/* Section Tasks Actions */
.section-tasks-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}
.btn-add-custom-task {
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    border: 1px solid #38bdf8;
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-add-custom-task:hover {
    background: #0284c7;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.4);
}
.task-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #10b981;
}
.custom-pill {
    font-size: 0.68rem;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
    color: #34d399;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 800;
}
.btn-edit-inline {
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
}
.btn-edit-inline:hover {
    background: #334155;
    color: #38bdf8;
    border-color: #38bdf8;
}
.btn-delete-inline {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
}
.btn-delete-inline:hover {
    background: #ef4444;
    color: #fff;
}

/* Section Header Card for Photos/Videos/Progress */
.section-journal-header-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.journal-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.btn-add-journal-item {
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    border: 1px solid #38bdf8;
    color: #fff;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-add-journal-item:hover {
    background: #0284c7;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.4);
}
.empty-section-notice {
    text-align: center;
    padding: 40px 20px;
    background: #0f172a;
    border: 1px dashed #334155;
    border-radius: 8px;
    color: #94a3b8;
}
.empty-section-notice h4 {
    margin: 0 0 4px;
    color: #f8fafc;
    font-size: 1.1rem;
}

/* Section Photos Grid */
.section-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.section-photo-card {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.photo-card-preview-frame {
    height: 180px;
    background: #020617;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid #1e293b;
}
.photo-uploaded-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-stylized-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.photo-badge-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #38bdf8;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #38bdf8;
}
.photo-card-content {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.photo-title {
    margin: 0;
    color: #f8fafc;
    font-size: 0.95rem;
}
.photo-caption {
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.4;
}
.photo-summary {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.4;
}
.photo-lit-box {
    background: #0b1120;
    border: 1px solid #1e293b;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.4;
}

/* Section Progress List */
.section-progress-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Modals Form Grid */
.modal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.form-group.full-width {
    grid-column: 1 / -1;
}
.form-group label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.form-group input, .form-group select, .form-group textarea {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 8px 10px;
    color: #f8fafc;
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.3);
}

/* Expense Ledger Table */
.expense-ledger-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.expense-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.exp-stat-card {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.exp-stat-card .label {
    font-size: 0.72rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 800;
}
.exp-stat-card .val {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    margin-top: 4px;
}
.expense-add-box {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 14px;
}
.expenses-table-container {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #1e293b;
    border-radius: 8px;
}
.expenses-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.expenses-table th {
    background: #090e1a;
    color: #94a3b8;
    padding: 10px 12px;
    text-align: left;
    font-weight: 700;
    border-bottom: 1px solid #1e293b;
    position: sticky;
    top: 0;
}
.expenses-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #1e293b;
    color: #e2e8f0;
}
.exp-cat-badge {
    background: rgba(56, 189, 248, 0.1);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Import / Export Wrapper */
.import-export-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ie-card {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

/* ==========================================================================
   ENHANCEMENTS: BLUEPRINT SIDEBAR ADD ROOM, FEED COMPOSER, TASK MEDIA DRAWERS
   ========================================================================== */

/* Left Blueprint Sidebar Add Room Button */
.blueprint-sidebar-actions {
    margin-bottom: 8px;
}
.btn-sidebar-add-room {
    width: 100%;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(2, 132, 199, 0.25));
    border: 1px dashed #38bdf8;
    color: #38bdf8;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-sidebar-add-room:hover {
    background: #0284c7;
    color: #ffffff;
    border-style: solid;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

/* Site Activity Feed Note Composer */
.feed-composer {
    background: #1e293b;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.feed-composer-input {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #f8fafc;
    font-family: inherit;
    font-size: 0.82rem;
    padding: 8px;
    resize: vertical;
    min-height: 48px;
    line-height: 1.4;
}
.feed-composer-input:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}
.feed-composer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.feed-composer-hint {
    font-size: 0.7rem;
    color: #64748b;
}
.btn-feed-post {
    background: #0284c7;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-feed-post:hover {
    background: #0369a1;
    transform: translateY(-1px);
}
.feed-item.user_note {
    background: rgba(56, 189, 248, 0.08);
    border-left: 3px solid #38bdf8;
}

/* Task Project Media Bar & Quick Attach Strip */
.task-media-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #090e17;
    border: 1px solid #1e293b;
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 10px;
    gap: 8px;
    flex-wrap: wrap;
}
.task-media-pills {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.btn-task-media-pill {
    background: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-task-media-pill.has-media {
    border-color: #38bdf8;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
}
.btn-task-media-pill.active-pill {
    background: #0284c7;
    color: #fff;
    border-color: #38bdf8;
}
.btn-task-media-pill:hover {
    background: #334155;
    color: #fff;
}
.task-media-quick-adds {
    display: flex;
    gap: 6px;
    align-items: center;
}
.btn-task-quick-add {
    background: transparent;
    border: 1px dashed #475569;
    color: #cbd5e1;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-task-quick-add:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(245, 158, 11, 0.1);
}

/* Task Inline Media Drawer */
.task-inline-drawer {
    background: #0b1120;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 10px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}
.task-drawer-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 8px;
    margin-bottom: 8px;
}
.task-drawer-tabs {
    display: flex;
    gap: 6px;
}
.drawer-tab-btn {
    background: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.drawer-tab-btn.active {
    background: #0284c7;
    color: #fff;
    border-color: #38bdf8;
}
.btn-close-task-drawer {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}
.btn-close-task-drawer:hover {
    color: #ef4444;
}
.task-drawer-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #cbd5e1;
    font-weight: 600;
    margin-bottom: 8px;
}
.btn-task-drawer-add {
    background: #10b981;
    border: none;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.btn-task-drawer-add:hover {
    background: #059669;
}
.task-drawer-empty {
    font-size: 0.78rem;
    color: #64748b;
    text-align: center;
    padding: 14px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
}
.task-drawer-items-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.task-drawer-photo-item, .task-drawer-video-item, .task-drawer-doc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 6px 10px;
}
.task-drawer-video-item {
    cursor: pointer;
}
.task-drawer-photo-item .item-visual img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
}
.task-drawer-photo-item .item-visual .item-icon {
    font-size: 1.5rem;
}
.video-play-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0284c7;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.item-meta {
    flex: 1;
    min-width: 0;
}
.item-meta h5 {
    margin: 0;
    font-size: 0.82rem;
    color: #f8fafc;
}
.item-meta small {
    color: #94a3b8;
    font-size: 0.72rem;
}
.item-meta p {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: #cbd5e1;
    line-height: 1.3;
}
.doc-snippet {
    font-size: 0.75rem;
    color: #cbd5e1;
    line-height: 1.3;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-actions {
    display: flex;
    gap: 4px;
}
.item-actions button {
    background: transparent;
    border: 1px solid #475569;
    border-radius: 4px;
    color: #cbd5e1;
    padding: 3px 6px;
    font-size: 0.7rem;
    cursor: pointer;
}
.item-actions button:hover {
    background: #334155;
}

/* Central Journals Page Filtering Selects */
.journals-filters-tray {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.journal-filter-select {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #f8fafc;
    font-size: 0.78rem;
    padding: 5px 10px;
    cursor: pointer;
}
.journal-filter-select:focus {
    outline: none;
    border-color: #38bdf8;
}

/* =========================================================
   BUILDING THE DREAM & PROJECT WEBPAGE PORTAL STYLES
   ========================================================= */

.btn-card-project-page {
    background: rgba(2, 132, 199, 0.2);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-card-project-page:hover {
    background: #0284c7;
    color: #fff;
    border-color: #38bdf8;
}

.dream-portal-tab-wrapper {
    max-width: 1240px;
    margin: 0 auto;
}

.dream-campaign-title {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    color: #f8fafc;
    margin: 0 0 6px 0;
}

.dream-campaign-tagline {
    font-size: 0.95rem;
    color: #38bdf8;
    font-weight: 600;
}

.dream-campaign-story {
    font-size: 0.88rem;
    color: #cbd5e1;
    line-height: 1.6;
}

.channel-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s;
}
.channel-pill:hover {
    border-color: var(--accent);
    background: rgba(245, 158, 11, 0.15);
    color: #fff;
}

.meter-box-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.meter-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    font-weight: 700;
}
.meter-figures {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f8fafc;
}
.meter-bar-track {
    height: 10px;
    background: #0f172a;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.meter-bar-fill-funding {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #10b981);
    border-radius: 6px;
    transition: width 0.4s ease;
}
.meter-bar-fill-progress {
    height: 100%;
    background: linear-gradient(90deg, #38bdf8, #6366f1);
    border-radius: 6px;
    transition: width 0.4s ease;
}

/* Priority Cards */
.priority-project-card {
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s, border-color 0.2s;
}
.priority-project-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.2);
}
.priority-project-card.priority-1 { border-top: 4px solid #ef4444; }
.priority-project-card.priority-2 { border-top: 4px solid #f59e0b; }
.priority-project-card.priority-3 { border-top: 4px solid #38bdf8; }
.priority-project-card.priority-4 { border-top: 4px solid #a855f7; }
.priority-project-card.priority-5 { border-top: 4px solid #10b981; }

.priority-badge-pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge-p1 { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }
.badge-p2 { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }
.badge-p3 { background: rgba(56, 189, 248, 0.2); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.4); }
.badge-p4 { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); }
.badge-p5 { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }

/* Filter Controls Tray & Priority Tabs (Zoom & Expand on Hover) */
.filter-controls-tray {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    overflow: visible;
}
.filter-btn {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    padding: 7px 15px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transform-origin: center center;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.22s ease;
    white-space: nowrap;
}
.filter-btn:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-color: #38bdf8;
    transform: translateY(-2px) scale(1.10);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 14px rgba(56, 189, 248, 0.45);
    z-index: 20;
    font-size: 0.86rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.filter-btn.active {
    background: #38bdf8;
    color: #0f172a;
    border-color: #38bdf8;
    font-weight: 800;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}
.filter-btn.active:hover {
    background: linear-gradient(135deg, #38bdf8, #0284c7);
    color: #0b1329;
    transform: translateY(-3px) scale(1.14);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), 0 0 18px rgba(56, 189, 248, 0.6);
    z-index: 25;
}

.card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}
.room-location-tag {
    font-size: 0.76rem;
    color: #94a3b8;
    font-weight: 600;
}
.card-project-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 6px 0;
}
.card-project-desc {
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.5;
    margin-bottom: 12px;
}
.card-funding-section {
    background: #0f172a;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.card-funding-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.76rem;
    margin-bottom: 6px;
}
.card-funding-track {
    height: 7px;
    background: #1e293b;
    border-radius: 4px;
    overflow: hidden;
}
.card-funding-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #10b981);
    border-radius: 4px;
}
.card-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.meta-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 0.72rem;
    color: #94a3b8;
}
.meta-chip.active-done {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.3);
    background: rgba(52, 211, 153, 0.1);
}
.btn-card-webpage {
    background: #0284c7;
    border: none;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}
.btn-card-webpage:hover {
    background: #38bdf8;
    color: #0f172a;
}
.btn-card-sponsor {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-card-sponsor:hover {
    background: #f59e0b;
    color: #0f172a;
}

/* ======================================================== */
/* RAPID PROJECT INTAKE & DISPATCH HUB STYLING              */
/* ======================================================== */
#rapid-input-modal-overlay {
    z-index: 9999;
}
.rapid-input-modal-window {
    background: #141b2d;
    border: 1px solid rgba(139, 92, 246, 0.4);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    width: 95vw !important;
    max-width: 1550px !important;
    max-height: 94vh !important;
}
.rapid-input-modal-window .modal-header {
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 24px;
}
.btn-upload-prominent {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(56, 189, 248, 0.2));
    border: 1.5px solid #8b5cf6;
    color: #f8fafc;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25);
}
.btn-upload-prominent:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.45), rgba(56, 189, 248, 0.35));
    border-color: #a78bfa;
    box-shadow: 0 6px 24px rgba(139, 92, 246, 0.45);
    transform: translateY(-2px);
}
.photo-preview-card {
    margin-top: 14px;
    background: #090d16;
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.photo-preview-thumb {
    width: 120px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   HOUSE BLUEPRINT CONCEPT / VISUAL GALLERY & SMALLER HIDEABLE TABS
   ========================================================================== */

.sidebar-concept-pill-row {
    padding: 6px 12px 10px 12px;
}
.btn-sidebar-concept-jump:hover {
    background: linear-gradient(135deg, rgba(56,189,248,0.3), rgba(139,92,246,0.3)) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
    transform: translateY(-1px);
}

.concept-visual-wrapper {
    padding: 16px 20px 40px 20px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Header & Banner */
.concept-visual-header {
    background: linear-gradient(135deg, #0b1329 0%, #0e1726 60%, #151630 100%);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 14px;
    padding: 22px 28px;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.concept-header-titles {
    flex: 1;
}
.concept-header-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.concept-visual-header h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #f8fafc;
    margin: 0 0 6px 0;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, #ffffff, #bae6fd, #c4b5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.concept-header-sub {
    font-size: 0.88rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.45;
}
.concept-header-stats {
    display: flex;
    align-items: center;
    gap: 14px;
}
.concept-stat-box {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    padding: 10px 16px;
    text-align: center;
    min-width: 90px;
}
.concept-stat-box .stat-number {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: #38bdf8;
    line-height: 1.1;
}
.concept-stat-box .stat-lbl {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.btn-concept-upload {
    background: linear-gradient(135deg, #0284c7, #2563eb);
    border: 1px solid #38bdf8;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-concept-upload:hover {
    background: linear-gradient(135deg, #0369a1, #1d4ed8);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.55);
    transform: translateY(-2px);
}

/* Blueprint Mode Switcher Tray (Between Cutaway & Concept Gallery) */
.blueprint-view-mode-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    background: rgba(15, 23, 42, 0.6);
    padding: 6px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.6);
    width: fit-content;
}
.blueprint-mode-pill-btn {
    border: 1px solid transparent;
    background: transparent;
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.22s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.blueprint-mode-pill-btn:hover {
    color: #ffffff;
    background: rgba(30, 41, 59, 0.95);
    border-color: #38bdf8;
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 14px rgba(56, 189, 248, 0.35);
    z-index: 10;
}
.blueprint-mode-pill-btn.active {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(139, 92, 246, 0.2));
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}
.blueprint-mode-pill-btn.active:hover {
    transform: translateY(-3px) scale(1.10);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), 0 0 18px rgba(56, 189, 248, 0.5);
    z-index: 15;
}

/* Concept Controls Bar */
.concept-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.concept-search-wrap {
    flex: 1;
    min-width: 280px;
    max-width: 600px;
    position: relative;
    display: flex;
    align-items: center;
}
.concept-search-wrap .search-icon {
    position: absolute;
    left: 14px;
    color: #64748b;
    font-size: 0.9rem;
    pointer-events: none;
}
.concept-search-wrap input {
    width: 100%;
    background: #0b1120;
    border: 1px solid #334155;
    border-radius: 20px;
    padding: 9px 16px 9px 38px;
    color: #f8fafc;
    font-size: 0.86rem;
    transition: all 0.2s;
}
.concept-search-wrap input:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}
.concept-quick-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-concept-action {
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-concept-action:hover {
    background: #334155;
    color: #f8fafc;
    border-color: #475569;
}

/* ==========================================================================
   SMALLER HIDEABLE LEVEL TABS (WITHOUT ELEVATION)
   ========================================================================== */
.concept-level-tabs-container {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(11, 19, 38, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 14px;
    padding: 12px 18px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    overflow: visible;
}
.concept-level-tabs-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.concept-level-tabs-tray {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    padding: 6px 2px;
    overflow: visible;
}

/* Individual Pill Wrapper - Zooms and Expands on Hover */
.concept-pill-wrapper {
    display: inline-flex;
    align-items: center;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transform-origin: center center;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                border-color 0.22s ease,
                background 0.22s ease;
}
.concept-pill-wrapper:hover {
    border-color: #38bdf8;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    box-shadow: 0 10px 25px -2px rgba(0, 0, 0, 0.7), 0 0 18px rgba(56, 189, 248, 0.5);
    transform: scale(1.15) translateY(-3px);
    z-index: 40;
}
.concept-pill-wrapper.active {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.18);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
}
.concept-pill-wrapper.active:hover {
    border-color: #38bdf8;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(30, 41, 59, 0.95));
    box-shadow: 0 12px 28px -2px rgba(0, 0, 0, 0.75), 0 0 22px rgba(56, 189, 248, 0.65);
    transform: scale(1.18) translateY(-4px);
    z-index: 45;
}
.concept-pill-wrapper.is-hidden {
    opacity: 0.5;
    border-style: dashed;
    border-color: #64748b;
    background: rgba(15, 23, 42, 0.4);
}
.concept-pill-wrapper.is-hidden:hover {
    opacity: 0.9;
    transform: scale(1.12) translateY(-2px);
    z-index: 35;
}
.concept-level-pill-btn {
    border: none;
    background: transparent;
    color: #cbd5e1;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 10px 6px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.concept-pill-wrapper:hover .concept-level-pill-btn {
    color: #ffffff;
    font-size: 0.88rem;
    letter-spacing: 0.25px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.concept-pill-wrapper.active .concept-level-pill-btn {
    color: #ffffff;
}
.concept-pill-count {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    transition: all 0.2s ease;
}
.concept-pill-wrapper:hover .concept-pill-count {
    background: #38bdf8;
    color: #0b1329;
    font-size: 0.76rem;
    font-weight: 900;
    transform: scale(1.12);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.7);
}
.concept-pill-wrapper.active .concept-pill-count {
    background: #38bdf8;
    color: #0b1329;
}
.btn-tab-hide-toggle {
    border: none;
    background: transparent;
    border-left: 1px solid rgba(148, 163, 184, 0.2);
    color: #94a3b8;
    font-size: 0.8rem;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}
.btn-tab-hide-toggle:hover {
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    font-size: 0.92rem;
}
.concept-pill-wrapper:hover .btn-tab-hide-toggle {
    color: #38bdf8;
    font-size: 0.9rem;
    border-left-color: rgba(56, 189, 248, 0.4);
}

/* ==========================================================================
   LEVEL SECTIONS & COLLAPSED BANNERS
   ========================================================================== */
.concept-level-section {
    margin-bottom: 30px;
    background: rgba(11, 18, 33, 0.6);
    border: 1px solid rgba(30, 41, 59, 0.8);
    border-radius: 14px;
    padding: 20px;
    transition: all 0.25s;
}
.concept-level-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
    flex-wrap: wrap;
    gap: 12px;
}
.concept-level-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.concept-level-icon {
    font-size: 1.4rem;
}
.concept-level-title-group h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #f8fafc;
}
.concept-level-rooms-tag {
    font-size: 0.74rem;
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(51, 65, 85, 0.6);
    padding: 2px 8px;
    border-radius: 6px;
}
.btn-level-toggle-hide {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid #334155;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-level-toggle-hide:hover {
    border-color: #38bdf8;
    color: #f8fafc;
    background: #1e293b;
}

/* Collapsed Banner */
.concept-collapsed-banner {
    background: rgba(15, 23, 42, 0.6);
    border: 1px dashed rgba(100, 116, 139, 0.4);
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    transition: all 0.2s;
}
.concept-collapsed-banner:hover {
    border-color: rgba(56, 189, 248, 0.6);
    background: rgba(15, 23, 42, 0.85);
}
.concept-collapsed-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 700;
}
.btn-collapsed-expand {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-collapsed-expand:hover {
    background: #0284c7;
    color: #ffffff;
}

/* ==========================================================================
   INTERACTIVE GALLERY GRID & CARDS
   ========================================================================== */
.concept-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.concept-card {
    background: #0b1120;
    border: 1px solid rgba(51, 65, 85, 0.7);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    transition: all 0.22s ease-out;
}
.concept-card:hover {
    border-color: rgba(56, 189, 248, 0.6);
    transform: translateY(-3px);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), 0 0 16px rgba(56, 189, 248, 0.2);
}

/* Card Visual Frame */
.concept-card-media {
    position: relative;
    width: 100%;
    height: 190px;
    background: #030712;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.concept-img-real {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.concept-card:hover .concept-img-real {
    transform: scale(1.04);
}

.concept-art-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: radial-gradient(circle at center, #102038 0%, #050b14 100%);
}
.concept-art-placeholder svg {
    width: 100%;
    height: 100%;
}

.concept-media-badge-bar {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    pointer-events: none;
}
.concept-room-badge {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #7dd3fc;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}
.concept-type-badge {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #e2e8f0;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}
.concept-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.65);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 3;
}
.concept-card-media:hover .concept-hover-overlay {
    opacity: 1;
}
.hover-zoom-btn {
    background: #0284c7;
    border: 1px solid #38bdf8;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

/* Card Content */
.concept-card-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.concept-card-title-row {
    margin-bottom: 8px;
}
.concept-card-title-row h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.35;
}
.concept-card-desc {
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.45;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

/* Linked Project Box */
.concept-linked-project {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
}
.project-mini-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.project-mini-header .project-tag {
    font-size: 0.72rem;
    color: #38bdf8;
    font-weight: 800;
}
.project-mini-header .project-title {
    font-size: 0.8rem;
    color: #e2e8f0;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.project-stats-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
}
.project-stats-row .project-cost {
    color: #cbd5e1;
}
.project-stats-row .project-value {
    color: #10b981;
    font-weight: 700;
    margin-left: auto;
}

/* Card Action Buttons */
.concept-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}
.btn-card-action {
    flex: 1;
    padding: 7px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #334155;
    background: #1e293b;
    color: #cbd5e1;
    transition: all 0.2s;
    text-align: center;
    white-space: nowrap;
}
.btn-card-action:hover {
    background: #334155;
    color: #f8fafc;
    border-color: #475569;
}
.btn-card-action.btn-inspect {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.35);
    color: #7dd3fc;
}
.btn-card-action.btn-inspect:hover {
    background: #0284c7;
    color: #ffffff;
    border-color: #38bdf8;
}
.btn-card-action.btn-project-page {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.35);
    color: #c4b5fd;
}
.btn-card-action.btn-project-page:hover {
    background: #7c3aed;
    color: #ffffff;
    border-color: #a78bfa;
}
.btn-card-action.btn-edit-photo {
    flex: 0 0 auto;
    padding: 7px 9px;
}

/* ==========================================================================
   CONCEPT LIGHTBOX MODAL
   ========================================================================== */
.concept-lightbox-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 24px;
    padding: 24px;
}
@media (max-width: 900px) {
    .concept-lightbox-layout {
        grid-template-columns: 1fr;
    }
}
.concept-lightbox-visual {
    background: #030712;
    border: 1px solid #1e293b;
    border-radius: 12px;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.concept-lightbox-visual img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: contain;
}
.concept-lightbox-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lightbox-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.lightbox-level-pill {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #7dd3fc;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 12px;
}
.lightbox-room-pill {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: #c4b5fd;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 12px;
}
.lightbox-date-pill {
    background: #1e293b;
    color: #94a3b8;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
}
.lightbox-summary-box {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 10px;
    padding: 14px;
}
.lightbox-summary-box h5 {
    margin: 0 0 6px 0;
    color: #38bdf8;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.lightbox-summary-box p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #e2e8f0;
}
.lightbox-literature-box {
    background: rgba(15, 23, 42, 0.9);
    border-left: 3px solid #f59e0b;
    border-radius: 0 10px 10px 0;
    padding: 14px 16px;
}
.lightbox-literature-box h5 {
    margin: 0 0 6px 0;
    color: #fcd34d;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.lightbox-literature-box p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: #cbd5e1;
}
.lightbox-actions-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #1e293b;
}

/* ==========================================================================
   🕰️ OPTIONAL STEAMPUNK THEME: BRASS, COPPER, LEATHER & STEAM GAUGES
   ========================================================================== */
body.theme-steampunk {
    --bg-dark: #120a06;
    --surface-color: #1a100a;
    --border-color: #854d0e;
    --accent: #f59e0b;
    --accent-blue: #d97706;
    --accent-green: #14b8a6;
    --accent-red: #ea580c;
    --text-primary: #fef3c7;
    --text-secondary: #fde68a;
    --text-dim: #b45309;
    background-color: #120a06 !important;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(217, 119, 6, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(180, 83, 9, 0.08) 0%, transparent 40%),
        linear-gradient(180deg, #160c07 0%, #0d0704 100%) !important;
    color: #fef3c7 !important;
}

body.theme-steampunk .main-hud {
    background: linear-gradient(180deg, #24140b 0%, #170d07 100%) !important;
    border-bottom: 2px solid #b45309 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(251, 191, 36, 0.2) !important;
}

body.theme-steampunk .brand-section h1 {
    color: #fbbf24 !important;
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.5), 0 2px 4px rgba(0, 0, 0, 0.9) !important;
    font-family: 'Cinzel', 'Georgia', serif !important;
    letter-spacing: 0.05em !important;
}

body.theme-steampunk .brand-logo {
    filter: sepia(0.8) hue-rotate(330deg) saturate(2) brightness(1.1);
}

body.theme-steampunk .hud-stat-box {
    background: linear-gradient(135deg, #2a160c, #1a0e08) !important;
    border: 1px solid #92400e !important;
    box-shadow: inset 0 1px 0 rgba(253, 230, 138, 0.2), 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

body.theme-steampunk .hud-stat-box .stat-label {
    color: #d97706 !important;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}

body.theme-steampunk .hud-stat-box .stat-val {
    color: #fef08a !important;
}

body.theme-steampunk .stamina-meter .bolt.active {
    color: #fbbf24 !important;
    text-shadow: 0 0 10px #f59e0b, 0 0 20px #d97706 !important;
}

body.theme-steampunk .weather-badge {
    background: linear-gradient(135deg, #2d180d, #1c0e07) !important;
    border: 1px solid #b45309 !important;
    box-shadow: inset 0 0 10px rgba(245, 158, 11, 0.2) !important;
}

body.theme-steampunk .weather-badge .weather-text strong {
    color: #fbbf24 !important;
}

body.theme-steampunk .overall-progress-strip {
    background: #1c0f08 !important;
    border-bottom: 2px solid #78350f !important;
}

body.theme-steampunk .progress-track {
    background: #0f0703 !important;
    border: 1px solid #92400e !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8) !important;
}

body.theme-steampunk .progress-bar-fill {
    background: linear-gradient(90deg, #b45309, #f59e0b, #14b8a6) !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6) !important;
}

body.theme-steampunk .real-life-toolbar {
    background: linear-gradient(90deg, #24140b, #180d07) !important;
    border-bottom: 2px solid #92400e !important;
}

body.theme-steampunk .btn-toolbar-action {
    background: linear-gradient(180deg, #381e0f, #221209) !important;
    border: 1px solid #b45309 !important;
    color: #fef3c7 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(251, 191, 36, 0.25) !important;
}

body.theme-steampunk .btn-toolbar-action:hover {
    background: linear-gradient(180deg, #78350f, #451a03) !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(254, 240, 138, 0.4) !important;
}

body.theme-steampunk .blueprint-sidebar {
    background: linear-gradient(180deg, #1d1009 0%, #140a05 100%) !important;
    border: 1px solid #92400e !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(180, 83, 9, 0.1) !important;
}

body.theme-steampunk .sidebar-heading {
    color: #fbbf24 !important;
    border-bottom-color: #78350f !important;
}

body.theme-steampunk .btn-sidebar-add-room {
    background: linear-gradient(135deg, #78350f, #451a03) !important;
    border-color: #f59e0b !important;
    color: #fef3c7 !important;
}

body.theme-steampunk .btn-sidebar-concept-jump {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.25), rgba(180, 83, 9, 0.25)) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
}

body.theme-steampunk .sidebar-blueprint-top-box {
    background: linear-gradient(135deg, #24130a 0%, #170b05 100%) !important;
    border-color: #b45309 !important;
}

body.theme-steampunk .sidebar-overall-label {
    color: #fde68a !important;
}

body.theme-steampunk .sidebar-overall-fill {
    background: linear-gradient(90deg, #b45309, #fbbf24) !important;
}

body.theme-steampunk .blueprint-level-block {
    background: rgba(30, 16, 9, 0.7) !important;
    border: 1px solid rgba(146, 64, 14, 0.5) !important;
}

body.theme-steampunk .blueprint-level-header.interactive {
    background: linear-gradient(180deg, #28150c, #1a0d07) !important;
    border: 1px solid #78350f !important;
}

body.theme-steampunk .blueprint-level-header.interactive:hover {
    background: linear-gradient(180deg, #451a03, #2a1207) !important;
    border-color: #f59e0b !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}

body.theme-steampunk .level-name {
    color: #fef3c7 !important;
}

body.theme-steampunk .blueprint-room-card.modern {
    background: linear-gradient(180deg, #20110a, #150a05) !important;
    border: 1px solid #78350f !important;
}

body.theme-steampunk .blueprint-room-card.modern:hover {
    background: linear-gradient(180deg, #34180c, #1f0d06) !important;
    border-color: #f59e0b !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7), 0 0 14px rgba(245, 158, 11, 0.4) !important;
}

body.theme-steampunk .room-title-group .room-name {
    color: #fef3c7 !important;
}

body.theme-steampunk .center-workspace {
    background: #140b06 !important;
    border: 1px solid #854d0e !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

body.theme-steampunk .tab-nav-bar {
    background: #1e0f08 !important;
    border-bottom: 2px solid #78350f !important;
}

body.theme-steampunk .tab-nav-btn {
    background: rgba(45, 23, 12, 0.7) !important;
    border: 1px solid rgba(180, 83, 9, 0.3) !important;
    border-bottom: none !important;
    color: #d5c7a3 !important;
}

body.theme-steampunk .tab-nav-btn:hover {
    background: linear-gradient(180deg, #451a03, #221008) !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
    box-shadow: 0 -4px 16px rgba(245, 158, 11, 0.4), 0 6px 14px rgba(0, 0, 0, 0.7) !important;
}

body.theme-steampunk .tab-nav-btn.active {
    background: #140b06 !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
    box-shadow: 0 -2px 12px rgba(245, 158, 11, 0.35) !important;
}

body.theme-steampunk .tab-nav-btn.active:hover {
    background: linear-gradient(180deg, #5c2406, #1a0b05) !important;
    border-color: #fbbf24 !important;
    color: #ffffff !important;
    box-shadow: 0 -6px 22px rgba(251, 191, 36, 0.5), 0 8px 20px rgba(0, 0, 0, 0.8) !important;
}

body.theme-steampunk .task-card {
    background: linear-gradient(180deg, #1f1109, #130a05) !important;
    border: 1px solid #78350f !important;
    color: #fef3c7 !important;
}

body.theme-steampunk .task-card:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(245, 158, 11, 0.3) !important;
}

body.theme-steampunk .activity-sidebar {
    background: linear-gradient(180deg, #1d1009, #130a05) !important;
    border: 1px solid #854d0e !important;
}

body.theme-steampunk .bottom-bar {
    background: linear-gradient(180deg, #24140b, #150b06) !important;
    border-top: 2px solid #92400e !important;
}

body.theme-steampunk .btn-advance {
    background: linear-gradient(135deg, #b45309, #f59e0b) !important;
    color: #1a0a02 !important;
    border-color: #fde68a !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.5) !important;
}

body.theme-steampunk .btn-theme-toggle {
    background: linear-gradient(135deg, #78350f, #b45309) !important;
    color: #fef3c7 !important;
    border: 1px solid #f59e0b !important;
    font-weight: 700 !important;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.2s ease;
}

body.theme-steampunk .btn-theme-toggle:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5) !important;
}

/* Steampunk Theme: Project & Rapid Intake Pages */
body.theme-steampunk.rapid-input-body,
body.theme-steampunk.project-page-body {
    background-color: #120904 !important;
    background-image: 
        radial-gradient(circle at 10% 0%, rgba(217, 119, 6, 0.18), transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(180, 83, 9, 0.12), transparent 40%),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 2px, transparent 2px, transparent 8px) !important;
    color: #fef3c7 !important;
}

body.theme-steampunk .rapid-header,
body.theme-steampunk .project-nav-header {
    background: linear-gradient(180deg, #24140b 0%, #170d07 100%) !important;
    border-bottom: 2px solid #92400e !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
}

body.theme-steampunk .rapid-brand h1,
body.theme-steampunk .project-title-h1 {
    color: #fbbf24 !important;
    font-family: 'Cinzel', serif !important;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
}

body.theme-steampunk .btn-rapid-nav,
body.theme-steampunk .btn-proj-header {
    background: linear-gradient(180deg, #381e0f, #221209) !important;
    border: 1px solid #b45309 !important;
    color: #fef3c7 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

body.theme-steampunk .btn-rapid-nav:hover,
body.theme-steampunk .btn-proj-header:hover {
    background: linear-gradient(180deg, #78350f, #451a03) !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}

body.theme-steampunk .form-section-card,
body.theme-steampunk .project-banner-card,
body.theme-steampunk .project-card-section {
    background: linear-gradient(180deg, #1f1109, #140a05) !important;
    border: 1px solid #78350f !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(251, 191, 36, 0.1) !important;
    color: #fef3c7 !important;
}

body.theme-steampunk .rapid-mindset-banner {
    background: linear-gradient(135deg, #2c150b, #190c06) !important;
    border: 1px solid #b45309 !important;
}

body.theme-steampunk .rapid-input,
body.theme-steampunk .rapid-select,
body.theme-steampunk .rapid-textarea {
    background: #0f0703 !important;
    border: 1px solid #854d0e !important;
    color: #fef3c7 !important;
}

body.theme-steampunk .rapid-input:focus,
body.theme-steampunk .rapid-select:focus,
body.theme-steampunk .rapid-textarea:focus {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
}

body.theme-steampunk .mode-tab-btn {
    background: rgba(45, 23, 12, 0.8) !important;
    border: 1px solid rgba(180, 83, 9, 0.4) !important;
    color: #d5c7a3 !important;
}

body.theme-steampunk .mode-tab-btn.active,
body.theme-steampunk .mode-tab-btn:hover {
    background: #140b06 !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3) !important;
}

body.theme-steampunk .tool-chip {
    background: #24130a !important;
    border: 1px solid #78350f !important;
    color: #fef3c7 !important;
}

body.theme-steampunk .tool-chip.selected {
    background: #78350f !important;
    border-color: #fbbf24 !important;
    color: #ffffff !important;
}

/* Steampunk Theme: Community Workshop & Crowdsourcing Page */
body.theme-steampunk.community-page-body {
    background-color: #120904 !important;
    background-image: 
        radial-gradient(circle at 10% 0%, rgba(217, 119, 6, 0.16), transparent 45%),
        radial-gradient(circle at 90% 20%, rgba(180, 83, 9, 0.12), transparent 40%),
        radial-gradient(circle at 50% 80%, rgba(245, 158, 11, 0.08), transparent 50%),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 2px, transparent 2px, transparent 8px) !important;
    color: #fef3c7 !important;
}

body.theme-steampunk .comm-header {
    background: linear-gradient(180deg, #24140b 0%, #170d07 100%) !important;
    border-bottom: 2px solid #92400e !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
}

body.theme-steampunk .comm-brand h1 {
    color: #fbbf24 !important;
    font-family: 'Cinzel', serif !important;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
}

body.theme-steampunk .btn-comm-nav {
    background: linear-gradient(180deg, #381e0f, #221209) !important;
    border: 1px solid #b45309 !important;
    color: #fef3c7 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

body.theme-steampunk .btn-comm-nav:hover {
    background: linear-gradient(180deg, #78350f, #451a03) !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}

body.theme-steampunk .comm-hero-card {
    background: linear-gradient(135deg, #28140a 0%, #170b05 100%) !important;
    border: 1px solid #b45309 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(251, 191, 36, 0.15) !important;
}

body.theme-steampunk .hero-title-group h2 {
    color: #fbbf24 !important;
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.4) !important;
}

body.theme-steampunk .challenge-card,
body.theme-steampunk .tip-card,
body.theme-steampunk .salvage-entry-card,
body.theme-steampunk .wisdom-card {
    background: linear-gradient(180deg, #1f1109, #130a05) !important;
    border: 1px solid #78350f !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6) !important;
    color: #fef3c7 !important;
}

body.theme-steampunk .challenge-card:hover,
body.theme-steampunk .tip-card:hover,
body.theme-steampunk .salvage-entry-card:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), 0 0 14px rgba(245, 158, 11, 0.3) !important;
}

body.theme-steampunk .feed-controls-card {
    background: linear-gradient(180deg, #24140b, #150b06) !important;
    border: 1px solid #854d0e !important;
}

body.theme-steampunk .comm-filter-pill {
    background: rgba(45, 23, 12, 0.8) !important;
    border: 1px solid rgba(180, 83, 9, 0.4) !important;
    color: #d5c7a3 !important;
}

body.theme-steampunk .comm-filter-pill.active,
body.theme-steampunk .comm-filter-pill:hover {
    background: #140b06 !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important;
}

body.theme-steampunk .comm-search-input,
body.theme-steampunk .comm-sort-select {
    background: #0f0703 !important;
    border: 1px solid #854d0e !important;
    color: #fef3c7 !important;
}

body.theme-steampunk .btn-upvote-tip {
    background: linear-gradient(180deg, #28140c, #1a0d07) !important;
    border: 1px solid #78350f !important;
    color: #fef3c7 !important;
}

body.theme-steampunk .btn-upvote-tip.upvoted {
    background: linear-gradient(180deg, #78350f, #451a03) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
}

/* ==========================================================================
   SUPPORTER ENGRAVED PLAQUE STUDIO & BACKER HALL OF FAME WALL
   ========================================================================== */

/* Plaque Studio Interactive Preview Stage */
.plaque-studio-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 900px) {
    .plaque-studio-layout {
        grid-template-columns: 1fr;
    }
}

.plaque-preview-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%, rgba(15, 23, 42, 0.95), #060911);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 30px 20px;
    box-shadow: inset 0 2px 20px rgba(0, 0, 0, 0.8), 0 10px 30px rgba(0, 0, 0, 0.5);
    min-height: 380px;
}

.plaque-render-box {
    width: 100%;
    max-width: 440px;
    min-height: 250px;
    border-radius: 10px;
    padding: 24px 22px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

/* 1. ADOPT A BOARD: Pyrographed Reclaimed Douglas Fir Woodgrain */
.plaque-render-box.style-wood {
    background: 
        repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 2px, transparent 2px, transparent 8px),
        linear-gradient(90deg, #5c381e 0%, #734827 15%, #4a2b15 35%, #85532d 55%, #56331a 75%, #3d2110 100%);
    border: 5px solid #2d1609;
    box-shadow: 
        0 18px 40px rgba(0, 0, 0, 0.75), 
        inset 0 3px 5px rgba(255, 255, 255, 0.2), 
        inset 0 -4px 8px rgba(0, 0, 0, 0.7);
    color: #170b04;
}

.plaque-render-box.style-wood .plaque-badge {
    background: rgba(23, 11, 4, 0.25);
    border: 1px dashed rgba(23, 11, 4, 0.6);
    color: #2b1307;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
}

.plaque-render-box.style-wood .plaque-name {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 1.45rem;
    color: #190a03;
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 
        1px 1px 1px rgba(255, 255, 255, 0.25), 
        -1px -1px 2px rgba(0, 0, 0, 0.8), 
        0 0 6px rgba(217, 119, 6, 0.4);
}

.plaque-render-box.style-wood .plaque-quote {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: #2b1307;
    text-align: center;
    line-height: 1.4;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.15);
    margin: 10px 0;
}

.plaque-render-box.style-wood .plaque-meta {
    font-size: 0.75rem;
    font-weight: 700;
    color: #2b1307;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
    border-top: 1px dashed rgba(43, 19, 7, 0.4);
    padding-top: 8px;
}

/* 2. ADOPT A TILE: 125-Yr Vermont Sea Green / Charcoal Slate Stone */
.plaque-render-box.style-slate {
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(56, 189, 248, 0.08), transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(16, 185, 129, 0.06), transparent 50%),
        linear-gradient(145deg, #1e293b 0%, #334155 35%, #1e2632 70%, #0f172a 100%);
    border: 4px solid #475569;
    border-radius: 6px;
    box-shadow: 
        0 18px 45px rgba(0, 0, 0, 0.8), 
        inset 0 2px 3px rgba(255, 255, 255, 0.25), 
        inset 0 -3px 6px rgba(0, 0, 0, 0.6);
    color: #f8fafc;
}

.plaque-render-box.style-slate::before,
.plaque-render-box.style-slate::after {
    content: '';
    position: absolute;
    top: 12px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #b45309 30%, #78350f 70%, #451a03 100%);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0,0,0,0.8);
    border: 1px solid #d97706;
}
.plaque-render-box.style-slate::before { left: 45px; }
.plaque-render-box.style-slate::after { right: 45px; }

.plaque-render-box.style-slate .plaque-badge {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.plaque-render-box.style-slate .plaque-name {
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: 1.45rem;
    color: #f1f5f9;
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 3px #000000, 0 -1px 1px rgba(255, 255, 255, 0.4);
}

.plaque-render-box.style-slate .plaque-quote {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: #cbd5e1;
    text-align: center;
    line-height: 1.4;
    text-shadow: 0 1px 2px #000000;
    margin: 10px 0;
}

.plaque-render-box.style-slate .plaque-meta {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 8px;
}

/* 3. FOUNDING BRASS PLAQUE: Polished Architectural Alloy 260 Brass */
.plaque-render-box.style-brass {
    background: linear-gradient(135deg, #b45309 0%, #fef08a 25%, #d97706 45%, #fef9c3 65%, #92400e 85%, #b45309 100%);
    border: 7px solid #78350f;
    border-radius: 8px;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.85), 
        inset 0 3px 5px rgba(255, 255, 255, 0.7), 
        inset 0 -4px 8px rgba(0, 0, 0, 0.8);
    color: #1a0e05;
}

.plaque-screw {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, #fef08a 20%, #b45309 80%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 0 2px 4px rgba(0,0,0,0.7);
    border: 1px solid #78350f;
}
.plaque-screw::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 2px;
    width: 8px;
    height: 1.5px;
    background: #451a03;
    transform: rotate(35deg);
}
.plaque-screw.tl { top: 8px; left: 8px; }
.plaque-screw.tr { top: 8px; right: 8px; }
.plaque-screw.bl { bottom: 8px; left: 8px; }
.plaque-screw.br { bottom: 8px; right: 8px; }

.plaque-render-box.style-brass .plaque-badge {
    background: rgba(69, 26, 3, 0.2);
    border: 1px solid #78350f;
    color: #451a03;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.plaque-render-box.style-brass .plaque-name {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 1.5rem;
    color: #170b02;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 -1px 0 #000000;
}

.plaque-render-box.style-brass .plaque-quote {
    font-family: 'Cinzel', serif;
    font-style: normal;
    font-size: 0.9rem;
    color: #291204;
    text-align: center;
    line-height: 1.4;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    margin: 10px 0;
}

.plaque-render-box.style-brass .plaque-meta {
    font-size: 0.75rem;
    font-weight: 800;
    color: #451a03;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(69, 26, 3, 0.4);
    padding-top: 8px;
}

/* 4. HERITAGE SUITE: Quarter-Sawn American Walnut with Gold Inlay */
.plaque-render-box.style-walnut {
    background: 
        repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 3px, transparent 3px, transparent 10px),
        linear-gradient(135deg, #231208 0%, #3a1d0d 35%, #1f0f06 70%, #2f170b 100%);
    border: 6px solid #140803;
    border-radius: 8px;
    box-shadow: 
        0 18px 45px rgba(0, 0, 0, 0.8), 
        inset 0 2px 3px rgba(255, 255, 255, 0.15), 
        inset 0 -3px 6px rgba(0, 0, 0, 0.8);
    color: #fef08a;
}

.plaque-render-box.style-walnut .plaque-badge {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.plaque-render-box.style-walnut .plaque-name {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 1.5rem;
    color: #fef08a;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.5), 0 2px 4px #000000;
}

.plaque-render-box.style-walnut .plaque-quote {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: #fde68a;
    text-align: center;
    line-height: 1.4;
    margin: 10px 0;
}

.plaque-render-box.style-walnut .plaque-meta {
    font-size: 0.75rem;
    font-weight: 700;
    color: #d97706;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    padding-top: 8px;
}

/* Plaque Studio Form Controls */
.plaque-tier-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.btn-plaque-tier {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 10px 14px;
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-plaque-tier:hover {
    border-color: #f59e0b;
    color: #ffffff;
}

.btn-plaque-tier.active {
    background: rgba(245, 158, 11, 0.18);
    border-color: #f59e0b;
    color: #fbbf24;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

/* HALL OF FAME WALL SECTION */
.hall-of-fame-section {
    margin-top: 50px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 15, 30, 0.98) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 16px;
    padding: 32px 30px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.hof-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 24px;
}

.hof-title-block h3 {
    margin: 0 0 6px 0;
    font-family: 'Cinzel', serif;
    color: #fbbf24;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hof-title-block p {
    margin: 0;
    color: #94a3b8;
    font-size: 0.9rem;
}

.hof-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.hof-stat-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.hof-stat-icon {
    font-size: 2rem;
}

.hof-stat-info strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: #f8fafc;
}

.hof-stat-info span {
    font-size: 0.78rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hof-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hof-filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-hof-filter {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 7px 16px;
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-hof-filter:hover {
    border-color: #f59e0b;
    color: #ffffff;
}

.btn-hof-filter.active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #0f172a;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}

.hof-search-input {
    background: #090d16;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 14px;
    color: #f8fafc;
    font-size: 0.85rem;
    min-width: 240px;
    outline: none;
}

.hof-search-input:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

.hof-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.hof-backer-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.hof-backer-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.4);
}

.hof-backer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.hof-avatar-box {
    font-size: 1.8rem;
    background: rgba(245, 158, 11, 0.15);
    padding: 6px 10px;
    border-radius: 8px;
}

.hof-backer-info h4 {
    margin: 0 0 4px 0;
    font-size: 1.05rem;
    color: #f8fafc;
    font-family: 'Cinzel', serif;
}

.hof-backer-info .hof-item-tag {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fbbf24;
}

.hof-amount-badge {
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 800;
}

.hof-inscription-box {
    background: rgba(0, 0, 0, 0.35);
    border-left: 3px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
    font-style: italic;
    font-family: 'Georgia', serif;
    font-size: 0.88rem;
    color: #cbd5e1;
    line-height: 1.45;
}

.hof-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #94a3b8;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
}

.btn-inspect-plaque {
    background: transparent;
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 6px;
    padding: 5px 10px;
    color: #fbbf24;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-inspect-plaque:hover {
    background: #f59e0b;
    color: #0f172a;
}

/* Steampunk Theme Rules for Hall of Fame & Plaque */
body.theme-steampunk .hall-of-fame-section {
    background: linear-gradient(180deg, #231208 0%, #150a04 100%) !important;
    border: 1px solid #b45309 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8) !important;
}

body.theme-steampunk .hof-title-block h3 {
    color: #fbbf24 !important;
}

body.theme-steampunk .hof-stat-card {
    background: #1a0d06 !important;
    border-color: #78350f !important;
}

body.theme-steampunk .hof-backer-card {
    background: linear-gradient(135deg, #1c0e07 0%, #100703 100%) !important;
    border-color: #78350f !important;
}

body.theme-steampunk .btn-hof-filter {
    background: #201007 !important;
    border-color: #854d0e !important;
    color: #fef3c7 !important;
}

body.theme-steampunk .btn-hof-filter.active {
    background: #d97706 !important;
    color: #1a0e05 !important;
}