/* ==========================================================================
   1. SYSTEM DESIGN TOKENS & GLOBALS
   ========================================================================== */
:root {
    color-scheme: dark;
    /* Backgrounds */
    --bg-main: #0D111A;
    --bg-surface: #1A202C;
    --bg-surface-hover: #2D3748;
    /* Brand Accents */
    --accent-primary: #FFB800; /* Safety Gold */
    --accent-secondary: #00E5FF; /* Electric Cyan */
    --brand-gold: #d4af37; /* Merchant Accent */
    --brand-gold-glow: rgba(212, 175, 55, 0.15);
    /* Typography */
    --text-primary: #F8FAFC; /* Toolbox Frost */
    --text-secondary: #94A3B8; /* Muted Slate */
    /* Semantic Feedback */
    --status-success: #10B981; /* Emerald Green */
    --status-danger: #EF4444; /* Crimson Red */
    /* UI Borders */
    --border-color: rgba(148, 163, 184, 0.15);

    /* ---- Palette tokens used by the page styles (the dark values are the original colours) ---- */
    --c-canvas: #0d1117;
    --c-surface: #161b22;
    --c-surface-2: #21262d;
    --c-surface-sel: #1f242c;
    --c-surface-deep: #12161f;
    --c-border: #30363d;
    --c-text-hi: #f0f6fc;
    --c-text-pure: #ffffff;
    --c-text-body: #e6edf3;
    --c-text-soft: #c9d1d9;
    --c-text-muted: #8b949e;
    --c-slate-100: #e2e8f0;
    --c-on-solid: #ffffff;
    --c-on-accent: #0d1117;
    --c-blue: #58a6ff;
    --c-blue-strong: #388bfd;
    --c-blue-bubble: #1f6feb;
    --c-blue-alt: #4ba3e3;
    --c-gold-bright: #ffd700;
    --c-gold-hover: #e6a600;
    --c-amber: #ffb74d;
    --c-orange: #f38b27;
    --c-green-solid: #238636;
    --c-green-border: #2ea44f;
    --c-green-border-2: #2ea043;
    --c-green: #3fb950;
    --c-whatsapp: #25d366;
    --c-whatsapp-hi: #5cff95;
    --c-red: #f85149;
    --c-red-solid: #da3633;
    --c-red-alt: #ef5350;
    --c-red-deep: #dc2626;
    --c-star-empty: #3a4352;

    /* ---- The same colours as bare channels, so tints read rgba(var(--rgb-cyan), 0.1) ---- */
    --rgb-cyan: 0, 229, 255;
    --rgb-red: 248, 81, 73;
    --rgb-red-alt: 239, 83, 80;
    --rgb-green-solid: 35, 134, 54;
    --rgb-green-border-2: 46, 160, 67;
    --rgb-green: 63, 185, 80;
    --rgb-mint: 0, 230, 118;
    --rgb-emerald: 16, 185, 129;
    --rgb-whatsapp: 37, 211, 102;
    --rgb-gold: 212, 175, 55;
    --rgb-gold-bright: 255, 215, 0;
    --rgb-orange: 243, 139, 39;
    --rgb-amber: 255, 183, 77;
    --rgb-blue-strong: 56, 139, 253;
    --rgb-accent-primary: 255, 184, 0;
    --rgb-bg-surface: 26, 32, 44;
    --rgb-bg-main: 13, 17, 26;
    --rgb-surface: 22, 27, 34;
    --rgb-wash: 255, 255, 255;
}

/* ==========================================================================
   LIGHT THEME: every colour that changes in light mode lives in this one block.
   Switched on by <html data-theme="light"> (see wwwroot/theme.js).
   ========================================================================== */
:root[data-theme="light"] {
    color-scheme: light;
    --bg-main: #F3F5F9;
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #E8ECF3;
    --accent-primary: #8A6300;
    --accent-secondary: #06738D;
    --brand-gold: #886200;
    --text-primary: #0F172A;
    --text-secondary: #5B6577;
    --status-success: #197934;
    --status-danger: #CF222E;
    --brand-gold-glow: rgba(154, 111, 0, 0.12);
    --border-color: rgba(15, 23, 42, 0.12);

    --c-canvas: #f6f8fa;
    --c-surface: #ffffff;
    --c-surface-2: #eaeef2;
    --c-surface-sel: #e9f0fb;
    --c-surface-deep: #eef1f5;
    --c-border: #d0d7de;
    --c-text-hi: #1f2328;
    --c-text-pure: #1f2328;
    --c-text-body: #24292f;
    --c-text-soft: #3d444d;
    --c-text-muted: #636a73;
    --c-slate-100: #334155;
    --c-on-solid: #ffffff;
    --c-on-accent: #0d1117;
    --c-blue: #0967d5;
    --c-blue-strong: #218bff;
    --c-blue-bubble: #0969da;
    --c-blue-alt: #176fa9;
    --c-gold-bright: #826500;
    --c-gold-hover: #8a6100;
    --c-amber: #a35605;
    --c-orange: #b44900;
    --c-green-solid: #197934;
    --c-green-border: #1a7f37;
    --c-green-border-2: #1a7f37;
    --c-green: #197934;
    --c-whatsapp: #157a3b;
    --c-whatsapp-hi: #137a3f;
    --c-red: #cf222e;
    --c-red-solid: #a40e26;
    --c-red-alt: #cf222e;
    --c-red-deep: #b91c1c;
    --c-star-empty: #c4cbd4;

    --rgb-cyan: 6, 115, 141;
    --rgb-red: 207, 34, 46;
    --rgb-red-alt: 207, 34, 46;
    --rgb-green-solid: 25, 121, 52;
    --rgb-green-border-2: 26, 127, 55;
    --rgb-green: 25, 121, 52;
    --rgb-mint: 25, 121, 52;
    --rgb-emerald: 25, 121, 52;
    --rgb-whatsapp: 21, 122, 59;
    --rgb-gold: 136, 98, 0;
    --rgb-gold-bright: 130, 101, 0;
    --rgb-orange: 180, 73, 0;
    --rgb-amber: 163, 86, 5;
    --rgb-blue-strong: 33, 139, 255;
    --rgb-accent-primary: 138, 99, 0;
    --rgb-bg-surface: 255, 255, 255;
    --rgb-bg-main: 243, 245, 249;
    --rgb-surface: 255, 255, 255;
    --rgb-wash: 15, 23, 42;
}

*, *::before, *::after {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Base body styling with fixed canvas placement */
body {
    background-color: var(--bg-main);
    margin: 0;
    padding: 0;
    color: var(--text-primary);
}

/* ==========================================================================
   2. CORE LAYOUT ENGINE & FULL-PAGE SHADOW OVERLAY
   ========================================================================== */

/* Full layout shell anchoring the image and the total-page overlay */
.toolbox-layout {
    width: 100%;
    min-height: 100vh;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    padding: 40px 0;
    overflow-x: hidden;
    position: relative;
    /* Blends the photography asset with an elegant, full-page readability mask */
    background-image: linear-gradient(rgba(var(--rgb-bg-main), 0.7), rgba(var(--rgb-bg-main), 0.9)), url('images/mytoolbox-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

    .toolbox-layout h1,
    .gateway-card h2,
    .action-card h2 {
        color: var(--text-primary) !important;
    }

.text-muted {
    color: var(--text-secondary) !important;
    font-size: 0.875rem;
    line-height: 1.5;
}

.text-gold {
    color: var(--brand-gold) !important;
}

/* Mobile-first structural layout columns */
.toolbox-header,
.toolbox-main,
.toolbox-footer {
    width: 100%;
    max-width: 480px;
    padding-left: 16px;
    padding-right: 16px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.toolbox-header {
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(var(--rgb-bg-surface), 0.4);
    backdrop-filter: blur(8px);
    padding-top: 16px;
    padding-bottom: 16px;
}

.toolbox-main {
    padding-top: 32px;
    padding-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    flex-grow: 1;
}

/* Page Structural Variations */
.layout-centered-viewport {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 40px 16px;
}

.layout-container-centered {
    max-width: 640px;
    margin: 50px auto;
    width: 100%;
}

.layout-container-wide {
    width: 100%;
    max-width: 1100px;
    margin: 50px auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* Responsive Grid Split Engines */
.form-grid-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .form-grid-row.desktop-split {
        grid-template-columns: repeat(2, 1fr);
    }
}

.welcome-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
    width: 100%;
}

@media (min-width: 768px) {
    .welcome-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tracking-dashboard-grid,
.portal-grid,
.store-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
    margin-top: 20px;
}

@media (min-width: 992px) {
    .tracking-dashboard-grid {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: start;
    }

    .portal-grid,
    .store-layout-grid {
        grid-template-columns: 2fr 1fr;
    }
}

.spinner {
    border: 4px solid var(--mh-gray-light);
    border-top: 4px solid var(--mh-green);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {

    0% {
        transform: rotate(0deg);
    }


    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   3. WELCOME LANDING GATEWAY PANEL
   ========================================================================== */
.welcome-container {
    padding: 4rem 1.5rem;
    color: var(--text-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    width: 100%;
}

/* Clean, modern title formatting */
.main-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    letter-spacing: -0.03em;
}

.gold-accent {
    color: var(--accent-primary);
    text-shadow: 0 0 20px rgba(var(--rgb-accent-primary), 0.25);
}

.main-subtitle {
    color: var(--c-slate-100); 
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.65;
    max-width: 620px; 
    margin: 0 auto 3.5rem auto; 
    letter-spacing: -0.01em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Smooth adjustments for mobile screens */
@media (max-width: 576px) {
    .main-subtitle {
        font-size: 1.05rem;
        line-height: 1.5;
        margin-bottom: 2.5rem;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ==========================================================================
   4. UI COMPONENT CARDS & HOVER STATES
   ========================================================================== */

/* Main Option Blocks */
.gateway-card {
    background: rgba(var(--rgb-bg-surface), 0.85); /* Slightly translucent to blend with style */
    backdrop-filter: blur(4px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

    .gateway-card:hover {
        transform: translateY(-4px);
        border-color: var(--accent-secondary);
        box-shadow: 0 8px 24px rgba(var(--rgb-cyan), 0.15);
    }

/* Standard Box Modules */
.toolbox-card, .action-card {
    background-color: rgba(var(--rgb-bg-surface), 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 170px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

.action-card {
    flex: 1;
    max-width: 450px;
    padding: 3rem;
    align-items: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

    .action-card:hover {
        transform: translateY(-5px);
    }

.toolbox-card.emergency {
    border-left: 4px solid var(--status-danger);
}

.toolbox-card.browse:hover,
.action-card:hover {
    border-color: rgba(var(--rgb-accent-primary), 0.3);
}

/* Feature Panels */
.intake-dialog-card {
    background: rgba(var(--rgb-bg-surface), 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 640px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6);
}

    /* Fix for the intake page header background patch */
    .intake-dialog-card h2,
    .intake-dialog-header, /* Target the header container if you have a wrapper div */
    .intake-dialog-card .dialog-header {
        background: transparent !important;
        background-color: transparent !important;
        padding-bottom: 0.5rem;
        margin-top: 0;
    }

.contractor-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
    width: 100%;
}

.contractor-card {
    background: rgba(var(--rgb-surface), 0.85);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    width: stretch;
}

    .contractor-card:hover {
        transform: translateY(-2px);
        border-color: var(--accent-secondary);
        box-shadow: 0 12px 36px rgba(var(--rgb-cyan), 0.12);
    }

.stat-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

/* ==========================================================================
   5. BUTTONS & CONTROLS INTERACTIVE PARADIGMS
   ========================================================================== */
.btn-toolbox, .toolbox-btn {
    width: 100%;
    padding: 14px 16px;
    font-weight: 800;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.1s ease, background-color 0.15s ease;
}

    .btn-toolbox:active, .toolbox-btn:active {
        transform: scale(0.98);
    }

.btn-emergency, .toolbox-btn {
    background-color: var(--status-danger);
    color: var(--text-primary);
    border-color: var(--status-danger);
}

    .btn-emergency:hover, .toolbox-btn:hover {
        background-color: var(--c-red-deep);
    }

.btn-primary {
    background-color: var(--accent-primary);
    color: var(--bg-main);
}

    .btn-primary:hover {
        background-color: var(--c-gold-hover);
    }

.btn-sos, .btn-directory {
    background-color: transparent;
    border: none;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: underline;
}

.btn-sos {
    color: var(--status-danger);
}

.btn-directory {
    color: var(--accent-secondary);
}

.floating-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center; 
    text-align: center;
    line-height: 1; 
    padding: 10px 20px;
    background-color: rgba(var(--rgb-bg-surface), 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    transition: background-color 0.15s, border-color 0.15s;
}

    .floating-back-btn:hover {
        background-color: var(--bg-surface-hover);
        border-color: var(--accent-secondary);
    }

/* ==========================================================================
   6. INPUT ELEMENTS & FORM MODULES
   ========================================================================== */
.toolbox-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.toolbox-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.toolbox-input,
.toolbox-textarea,
.toolbox-select {
    width: 100%;
    padding: 14px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .toolbox-input:focus,
    .toolbox-textarea:focus,
    .toolbox-select:focus {
        outline: none;
        border-color: var(--accent-primary);
        box-shadow: 0 0 0 3px rgba(var(--rgb-accent-primary), 0.15);
    }

/* ==========================================================================
   7. NAVIGATION UTILITIES & RADAR ENGINE
   ========================================================================== */
.menu-item-hover:hover {
    background-color: rgba(var(--rgb-wash), 0.05);
}

.menu-item-hover:active {
    background-color: rgba(var(--rgb-wash), 0.1);
}

.category-scroll-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 12px 0;
    width: 100%;
    scrollbar-width: none;
}

    .category-scroll-container::-webkit-scrollbar {
        display: none;
    }

/* Radar Modules */
.radar-container {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 24px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radar-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(var(--rgb-red-alt), 0.1);
    border: 1.5px solid var(--c-red-alt);
    border-radius: 50%;
    animation: radar-sweep 2.5s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
}

    .radar-pulse:nth-child(2) {
        animation-delay: 0.8s;
    }

    .radar-pulse:nth-child(3) {
        animation-delay: 1.6s;
    }

.radar-core {
    position: relative;
    width: 32px;
    height: 32px;
    background: var(--c-red-alt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px var(--c-red-alt);
    animation: core-glow 1.2s infinite alternate ease-in-out;
    z-index: 2;
}

@keyframes radar-sweep {
    0% {
        transform: scale(0.15);
        opacity: 0.9;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes core-glow {
    0% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1.05);
        box-shadow: 0 0 28px var(--c-red-alt), 0 0 50px rgba(var(--rgb-red-alt), 0.6);
    }
}

/* ==========================================================================
   8. FOOTER & RESOURCE CARD STRUCTURED LISTS
   ========================================================================== */
.section-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-color), transparent);
    width: 100%;
    margin: 4rem 0 2rem 0;
}

.secondary-info-section {
    max-width: 900px;
    width: 100%;
    margin-bottom: 2rem;
}

.secondary-title {
    color: var(--text-secondary);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    text-align: center;
}

.info-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Base Card Configurations */
.info-link-card {
    background-color: rgba(var(--rgb-bg-surface), 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border-color);
    padding: 2rem;
    border-radius: 12px;
    text-align: left;
    display: flex;
    flex-direction: column;
    transition: background-color 0.2s, border-color 0.2s;
}

    .info-link-card:hover {
        background-color: var(--bg-surface-hover);
        border-color: rgba(var(--rgb-wash), 0.25);
    }

    .info-link-card h4 {
        color: var(--text-primary);
        margin-top: 0;
        margin-bottom: 0.75rem;
        font-size: 1.15rem;
        font-weight: 700;
    }

    .info-link-card p {
        color: var(--text-secondary);
        font-size: 0.9rem;
        margin-top: 0;
        margin-bottom: 1.25rem;
        line-height: 1.5;
    }

    /* STRUCTURED LIST ENGINE */
    .info-link-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem; /* Clean vertical spacing between list items */
    }

    .info-link-card li {
        display: flex;
        align-items: center;
        color: var(--text-secondary);
        font-size: 0.9rem;
    }

    /* High-Contrast Structured Links */
    .info-link-card ul a,
    .info-link-card .resource-link {
        display: inline-block;
        color: var(--accent-secondary) !important; /* Electric Cyan */
        text-decoration: none;
        font-weight: 600;
        transition: color 0.15s ease, transform 0.15s ease;
    }

        /* Hover States across items */
        .info-link-card ul a:hover,
        .info-link-card .resource-link:hover {
            color: var(--accent-primary) !important; /* Safety Gold */
            text-decoration: underline;
            transform: translateX(4px); /* Clean interactive offset nudge */
        }

.toolbox-footer {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid var(--border-color);
    width: 100%;
}

.portal-nav-bar {
    position: absolute;
    top: 24px;
    right: 10px;
    left: 10px;
    display: flex;
    gap: 12px;
    z-index: 100;
    font-family: system-ui, sans-serif;
    justify-content: right;
}

.registration-container {
    padding: 35px;
    background: var(--c-canvas);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    color: var(--c-text-soft);
    font-family: system-ui, sans-serif;
}

/* Utility class to completely hide scrollbar visuals across different layout engines */
.no-scrollbar::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

.no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}


/* ==========================================================================
   9. OZOW PAYMENT MODAL & OVERLAY ENGINE
   ========================================================================== */

/* Fullscreen Backdrop Overlay */
.toolbox-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: rgba(var(--rgb-bg-main), 0.85);
    backdrop-filter: blur(6px);
    overscroll-behavior: contain;
}

/* Modal Card Structure */
.toolbox-modal-card {
    position: relative;
    padding: 25px;
    overflow: hidden;
    animation: modal-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-pop {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.toolbox-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(var(--rgb-bg-main), 0.6);
}

.toolbox-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .toolbox-modal-title h2 {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 700;
    }

.toolbox-modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.15s ease;
}

    .toolbox-modal-close:hover {
        color: var(--text-primary);
    }

.toolbox-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Modal Internal Elements */
.toolbox-summary-box {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-main);
}

.toolbox-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

    .toolbox-summary-row.total-row {
        font-weight: 700;
        font-size: 1.1rem;
    }

.toolbox-summary-value {
    color: var(--text-primary);
    font-weight: 600;
}

.toolbox-summary-mono {
    font-family: monospace;
    color: var(--text-primary);
}

.toolbox-summary-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 4px 0;
}

.toolbox-modal-description {
    font-size: 0.85rem;
    margin: 0;
}

.toolbox-btn-secondary {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

    .toolbox-btn-secondary:hover {
        background-color: var(--bg-surface-hover);
        border-color: var(--text-secondary);
    }

.toolbox-error-banner {
    min-height: auto;
    padding: 16px;
    text-align: left;
}

.toolbox-error-title {
    margin: 0 0 4px 0;
    font-weight: 700;
    color: var(--status-danger);
    font-size: 0.9rem;
}

.toolbox-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
    gap: 16px;
}

.toolbox-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: toolbox-spin 0.8s linear infinite;
}

@keyframes toolbox-spin {
    to {
        transform: rotate(360deg);
    }
}

.toolbox-modal-footer {
    padding: 12px;
    text-align: center;
    background-color: var(--bg-main);
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ==========================================================================
   10. REVIEW MENU DROPDOWN
   ========================================================================== */

.review-rating-badge {
    position: relative;
}

.review-rating-button {
    background: rgba(var(--rgb-gold-bright), 0.08);
    border: 1px solid var(--c-gold-bright);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.review-rating-button:hover {
    background: rgba(var(--rgb-gold-bright), 0.15);
    box-shadow: 0 0 12px rgba(var(--rgb-gold-bright), 0.2);
}

.review-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 8px;
    z-index: 500;
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
}

.review-dropdown button {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--c-text-pure);
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.review-dropdown button:hover {
    background: rgba(var(--rgb-wash), .05);
    color: var(--accent-secondary);
}

/* ==========================================================================
   11. Contractor Chat Action
   ========================================================================== */

.contractor-chat-btn {
    padding: 8px 6px;
    min-width: 95px;
    margin: 0;
    text-align: center;
    background: rgba(var(--rgb-whatsapp), 0.1);
    border: 1px solid var(--c-whatsapp);
    border-radius: 8px;
    color: var(--c-whatsapp);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

    .contractor-chat-btn:hover {
        background: rgba(var(--rgb-whatsapp), 0.2);
        color: var(--c-whatsapp-hi);
        box-shadow: 0 0 12px rgba(var(--rgb-whatsapp), 0.25);
    }

    .contractor-chat-btn:active {
        transform: scale(0.98);
    }

    .contractor-chat-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--bg-main), 0 0 0 4px rgba(var(--rgb-whatsapp), 0.4);
    }


/* ==========================================================================
   12. REVIEWS VIEW
   ========================================================================== */

.reviews-view {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 700px;
}

.reviews-hero {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}

    .reviews-hero h2 {
        margin: 0;
        font-size: 2rem;
        font-weight: 800;
        color: var(--text-primary);
        line-height: 1.1;
    }

.reviews-company-label {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 700;
}

.reviews-summary {
    display: flex;
    align-items: center;
    gap: 14px;
}

.reviews-rating-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--rgb-accent-primary), 0.1);
    border: 1px solid var(--accent-primary);
    border-radius: 10px;
    padding: 8px 14px;
}

.reviews-star,
.reviews-rating {
    color: var(--accent-primary);
    font-weight: 800;
}

.reviews-count {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
}

.reviews-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    background: rgba(var(--rgb-surface), 0.7);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    text-align: center;
    padding: 32px;
}

.reviews-empty-icon {
    font-size: 2rem;
    color: var(--accent-primary);
    margin-bottom: 12px;
}

.reviews-empty-state h3 {
    margin: 0 0 8px;
    color: var(--text-primary);
}

.reviews-empty-state p {
    margin: 0;
    color: var(--text-secondary);
    max-width: 350px;
}

.review-card {
    background: rgba(var(--rgb-surface), 0.65);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.15s ease;
}

    .review-card:hover {
        border-color: var(--accent-secondary);
    }

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

.review-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(var(--rgb-cyan), 0.15);
    border: 1px solid rgba(var(--rgb-cyan), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--accent-secondary);
}

.review-author-block {
    flex: 1;
}

.review-author {
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.review-stars {
    color: var(--accent-primary);
    font-size: 1rem;
    letter-spacing: 2px;
}

.review-comment {
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 0.95rem;
}

.verified-review-badge {
    background: rgba(var(--rgb-emerald), 0.12);
    border: 1px solid rgba(var(--rgb-emerald), 0.3);
    color: var(--status-success);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
}

.review-stars {
    display: flex;
    gap: 2px;
    font-size: 1rem;
}

.star-filled {
    color: var(--accent-primary);
}

.star-empty {
    color: var(--c-star-empty);
}

/* ==========================================================================
   13. WRITE REVIEW DIALOG
   ========================================================================== */

.write-review-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.write-review-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}

    .write-review-header h2 {
        margin: 4px 0 8px;
        color: var(--text-primary);
        font-size: 1.8rem;
        font-weight: 800;
    }

.rating-selector {
    display: flex;
    gap: 8px;
}

.rating-star {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(var(--rgb-wash), 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .rating-star:hover {
        color: var(--accent-primary);
        border-color: var(--accent-primary);
        transform: translateY(-2px);
    }

    .rating-star.selected {
        color: var(--accent-primary);
        border-color: var(--accent-primary);
        background: rgba(var(--rgb-accent-primary), 0.1);
    }

.write-review-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

/* ==========================================================================
   14. LANDING PAGE
   ========================================================================== */

.landing-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    background-image: url('/images/mytoolbox-bg.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.landing-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 135deg, rgba(8, 12, 20, 0.85), rgba(8, 12, 20, 0.70) );
    backdrop-filter: blur(2px);
}

.landing-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    padding: 2rem;
}

.landing-badge {
    display: inline-flex;
    align-items: center;
    padding: 18px 36px;
    margin-top: 10px;
    margin-bottom: 30px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.2);
    border: 2px solid rgba(34, 197, 94, 0.5);
    color: #22c55e;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.25);
}

.landing-content h1 {
    color: white;
    font-size: clamp(3rem, 8vw, 5rem);
    line-height: 1.05;
    margin-bottom: 1.5rem;
    font-weight: 800;
}

.landing-content p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.85);
    margin-bottom: 2.5rem;
}

.landing-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
    min-width: 180px;
    padding: 14px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: all .25s ease;
}

.btn-primary {
    background: #ff9800;
    color: #fff;
}

    .btn-primary:hover {
        transform: translateY(-2px);
        background: #ffb74d;
    }

.btn-secondary {
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    background: rgba(255,255,255,0.05);
}

    .btn-secondary:hover {
        background: rgba(255,255,255,0.1);
    }

@media (max-width: 768px) {
    .landing-content h1 {
        font-size: 2.5rem;
    }

    .landing-actions {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
    }
}

/* ==========================================================================
   15. STYLES MOVED OUT OF THE RAZOR FILES
   These used to be style="..." attributes. Each class is written three times in its selector so it keeps
   overriding the older rules above exactly as the inline style did. The numbers after a class are the line(s)
   of the .razor file it came from. Colours use the tokens at the top of this file, so the themes switch them.
   ========================================================================== */

/* ----- ContractorPortal.razor ----- */
.u-cp-1.u-cp-1.u-cp-1 { /* line 13 */
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    gap: 12px;
    z-index: 100;
    font-family: system-ui, sans-serif;
}
.u-cp-2.u-cp-2.u-cp-2 { /* line 14 */
    padding: 8px 16px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    color: var(--c-blue);
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}
.u-cp-3.u-cp-3.u-cp-3 { /* line 18 */
    background: var(--c-red);
    color: var(--c-on-solid);
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 800;
}
.u-cp-4.u-cp-4.u-cp-4 { /* line 24 */
    padding: 10px 16px;
    background: rgba(var(--rgb-cyan), 0.1);
    border: 1px solid var(--accent-secondary);
    border-radius: 6px;
    color: var(--accent-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}
.u-cp-5.u-cp-5.u-cp-5 { /* line 30 */
    padding: 8px 16px;
    background: rgba(var(--rgb-red), 0.1);
    border: 1px solid rgba(var(--rgb-red), 0.4);
    color: var(--c-red);
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.u-cp-6.u-cp-6.u-cp-6 { /* line 46 */
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0 24px 0;
    width: 100%;
    border-bottom: 1px solid var(--c-border);
}
.u-cp-7.u-cp-7.u-cp-7 { /* line 47 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}
.u-cp-8.u-cp-8.u-cp-8 { /* line 49 */
    font-size: 0.65rem;
    background: rgba(var(--rgb-cyan), 0.1);
    color: var(--accent-secondary);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.u-cp-9.u-cp-9.u-cp-9 { /* line 52 */
    font-size: 2rem;
    margin: 6px 0 0 0;
    letter-spacing: -0.02em;
    color: var(--c-text-pure);
}
.u-cp-10.u-cp-10.u-cp-10 { /* line 57 */
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.u-cp-11.u-cp-11.u-cp-11 { /* line 61 */
    background: var(--brand-gold);
    border: 1px solid var(--brand-gold);
    color: var(--c-on-accent);
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.75rem;
    cursor: pointer;
    text-transform: uppercase;
}
.u-cp-12.u-cp-12.u-cp-12 { /* line 83 */
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.u-cp-13.u-cp-13.u-cp-13 { /* line 85,304 */
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.u-cp-14.u-cp-14.u-cp-14 { /* line 86 */
    font-size: 1.1rem;
    margin: 0;
    color: var(--c-text-pure);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.u-cp-15.u-cp-15.u-cp-15 { /* line 88 */
    font-size: 0.75rem;
    background: var(--c-red-alt);
    color: var(--c-on-solid);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 800;
}
.u-cp-16.u-cp-16.u-cp-16 { /* line 95,103 */
    text-align: center;
    padding: 48px 24px;
    border: 1px dashed var(--c-border);
    border-radius: 16px;
    background: rgba(0,0,0,0.15);
}
.u-cp-17.u-cp-17.u-cp-17 { /* line 96,104 */
    font-size: 2rem;
}
.u-cp-18.u-cp-18.u-cp-18 { /* line 97,105 */
    margin: 12px 0 4px 0;
    font-weight: 700;
    color: var(--c-text-pure);
    text-transform: uppercase;
}
.u-cp-19.u-cp-19.u-cp-19 { /* line 98,106 */
    font-size: 0.8rem;
    margin: 0;
}
.u-cp-20.u-cp-20.u-cp-20 { /* line 113 */
    max-width: 100%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 24px;
    color: var(--c-text-hi);
    font-family: system-ui, sans-serif;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.u-cp-21.u-cp-21.u-cp-21 { /* line 115 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.u-cp-22.u-cp-22.u-cp-22 { /* line 116 */
    color: var(--c-red);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.u-cp-23.u-cp-23.u-cp-23 { /* line 117 */
    background: rgba(var(--rgb-orange), 0.1);
    border: 1px solid rgba(var(--rgb-orange), 0.3);
    color: var(--c-orange);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.u-cp-24.u-cp-24.u-cp-24 { /* line 122 */
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.u-cp-25.u-cp-25.u-cp-25 { /* line 123 */
    font-weight: 500;
    color: var(--c-text-soft);
}
.u-cp-26.u-cp-26.u-cp-26 { /* line 126 */
    background: var(--c-canvas);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 16px;
}
.u-cp-27.u-cp-27.u-cp-27 { /* line 127 */
    color: var(--c-red);
    font-size: 0.8rem;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}
.u-cp-28.u-cp-28.u-cp-28 { /* line 128 */
    margin: 0;
    color: var(--c-text-soft);
    font-size: 0.9rem;
    line-height: 1.4;
}
.u-cp-29.u-cp-29.u-cp-29 { /* line 131 */
    font-size: 0.85rem;
    color: var(--c-text-muted);
    margin-bottom: 20px;
}
.u-cp-30.u-cp-30.u-cp-30 { /* line 132 */
    color: var(--c-text-soft);
}
.u-cp-31.u-cp-31.u-cp-31 { /* line 135 */
    border-top: 1px solid var(--c-surface-2);
    padding-top: 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.u-cp-32.u-cp-32.u-cp-32 { /* line 136 */
    margin: 0;
    color: var(--c-blue);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.u-cp-33.u-cp-33.u-cp-33 { /* line 138 */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: end;
}
.u-cp-34.u-cp-34.u-cp-34 { /* line 141,154 */
    display: block;
    font-size: 0.75rem;
    color: var(--c-text-muted);
    margin-bottom: 6px;
    font-weight: 600;
}
.u-cp-35.u-cp-35.u-cp-35 { /* line 142 */
    width: 100%;
    padding: 10px;
    background: var(--c-canvas);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-hi);
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
}
.u-cp-36.u-cp-36.u-cp-36 { /* line 155 */
    display: flex;
    background: var(--c-canvas);
    padding: 2px;
    border-radius: 6px;
    border: 1px solid var(--c-border);
}
.u-cp-37.u-cp-37.u-cp-37 { /* line 172 */
    border-top: 1px solid var(--c-surface-2);
    padding-top: 16px;
    margin-bottom: 24px;
}
.u-cp-38.u-cp-38.u-cp-38 { /* line 173 */
    margin: 0 0 10px 0;
    color: var(--c-blue);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.u-cp-39.u-cp-39.u-cp-39 { /* line 177 */
    font-size: 0.8rem;
    color: var(--c-text-muted);
    font-style: italic;
    background: var(--c-canvas);
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--c-surface-2);
    text-align: center;
}
.u-cp-40.u-cp-40.u-cp-40 { /* line 183 */
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 120px;
    overflow-y: auto;
    background: var(--c-canvas);
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--c-surface-2);
}
.u-cp-41.u-cp-41.u-cp-41 { /* line 186 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--c-surface);
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--c-border);
}
.u-cp-42.u-cp-42.u-cp-42 { /* line 187 */
    font-size: 0.8rem;
    color: var(--c-text-soft);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 70%;
}
.u-cp-43.u-cp-43.u-cp-43 { /* line 190 */
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    color: var(--c-blue);
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.u-cp-44.u-cp-44.u-cp-44 { /* line 226 */
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}
.u-cp-45.u-cp-45.u-cp-45 { /* line 227,305 */
    font-size: 1.1rem;
    margin: 0;
    color: var(--c-text-pure);
    letter-spacing: 0.02em;
}
.u-cp-46.u-cp-46.u-cp-46 { /* line 233 */
    font-size: 0.85rem;
    font-style: italic;
    margin: 0;
}
.u-cp-47.u-cp-47.u-cp-47 { /* line 240 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.u-cp-48.u-cp-48.u-cp-48 { /* line 242 */
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--c-text-pure);
}
.u-cp-49.u-cp-49.u-cp-49 { /* line 243,244 */
    font-size: 0.8rem;
}
.u-cp-50.u-cp-50.u-cp-50 { /* line 253 */
    background: rgba(var(--rgb-amber), 0.03);
    border: 1px dashed var(--c-amber);
    border-radius: 8px;
    padding: 12px;
    margin: 16px 0;
    font-size: 0.8rem;
    color: var(--c-amber);
}
.u-cp-51.u-cp-51.u-cp-51 { /* line 256 */
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--c-border);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}
.u-cp-52.u-cp-52.u-cp-52 { /* line 276 */
    background: rgba(var(--rgb-cyan), 0.02);
    border: 1px solid rgba(var(--rgb-cyan), 0.15);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
}
.u-cp-53.u-cp-53.u-cp-53 { /* line 277 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.u-cp-54.u-cp-54.u-cp-54 { /* line 279 */
    font-size: 0.65rem;
    color: var(--accent-secondary);
    font-weight: 800;
    text-transform: uppercase;
    display: block;
}
.u-cp-55.u-cp-55.u-cp-55 { /* line 280 */
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c-text-pure);
}
.u-cp-56.u-cp-56.u-cp-56 { /* line 282 */
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--c-amber);
}
.u-cp-57.u-cp-57.u-cp-57 { /* line 284 */
    font-size: 0.8rem;
    margin: 0 0 12px 0;
}
.u-cp-58.u-cp-58.u-cp-58 { /* line 285 */
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.u-cp-59.u-cp-59.u-cp-59 { /* line 286 */
    background: var(--accent-secondary);
    border: 1px solid var(--accent-secondary);
    color: var(--c-on-accent);
    padding: 8px 16px;
    font-weight: 900;
    font-size: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
}
.u-cp-60.u-cp-60.u-cp-60 { /* line 294 */
    background: rgba(var(--rgb-green-solid), 0.04);
    border: 1px solid rgba(var(--rgb-green-solid), 0.2);
    border-radius: 8px;
    padding: 12px;
    margin: 16px 0;
    font-size: 0.85rem;
    color: var(--c-text-body);
}
.u-cp-61.u-cp-61.u-cp-61 { /* line 295 */
    color: var(--c-green-solid);
}
.u-cp-62.u-cp-62.u-cp-62 { /* line 306 */
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.u-cp-63.u-cp-63.u-cp-63 { /* line 307,308 */
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
}
.u-cp-64.u-cp-64.u-cp-64 { /* line 307 */
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--c-gold-bright);
    margin-top: 4px;
}
.u-cp-65.u-cp-65.u-cp-65 { /* line 308 */
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--c-text-pure);
    margin-top: 4px;
}
.u-cp-66.u-cp-66.u-cp-66 { /* line 309 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.u-cp-67.u-cp-67.u-cp-67 { /* line 311 */
    color: var(--c-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.u-cp-68.u-cp-68.u-cp-68 { /* line 312 */
    color: var(--c-green);
    font-size: 1.8rem;
    font-weight: 900;
    margin-top: 4px;
}
.u-cp-69.u-cp-69.u-cp-69 { /* line 314 */
    padding: 12px 20px;
    background: var(--c-green-solid);
    border: 1px solid var(--c-green-border);
    color: var(--c-on-solid);
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.u-cp-70.u-cp-70.u-cp-70 { /* line 328 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.u-cp-71.u-cp-71.u-cp-71 { /* line 329 */
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    width: 100%;
    max-width: 440px;
    padding: 28px;
    border-radius: 12px;
    font-family: system-ui, sans-serif;
    color: var(--c-text-soft);
}
.u-cp-72.u-cp-72.u-cp-72 { /* line 331 */
    color: var(--c-text-hi);
    margin: 0 0 6px 0;
    font-size: 1.3rem;
}
.u-cp-73.u-cp-73.u-cp-73 { /* line 332 */
    color: var(--c-text-muted);
    font-size: 0.85rem;
    margin: 0 0 20px 0;
}
.u-cp-74.u-cp-74.u-cp-74 { /* line 341 */
    margin-bottom: 20px;
    background: var(--c-canvas);
    padding: 14px;
    border-radius: 6px;
    border: 1px solid var(--c-surface-2);
}
.u-cp-75.u-cp-75.u-cp-75 { /* line 342 */
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 8px;
}
.u-cp-76.u-cp-76.u-cp-76 { /* line 343,347 */
    color: var(--c-text-muted);
}
.u-cp-77.u-cp-77.u-cp-77 { /* line 344,348 */
    color: var(--c-text-hi);
    font-weight: 600;
}
.u-cp-78.u-cp-78.u-cp-78 { /* line 346 */
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}
.u-cp-79.u-cp-79.u-cp-79 { /* line 352 */
    margin-bottom: 24px;
}
.u-cp-80.u-cp-80.u-cp-80 { /* line 353 */
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.u-cp-81.u-cp-81.u-cp-81 { /* line 354 */
    width: 100%;
    padding: 12px;
    background: var(--c-canvas);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-hi);
    font-size: 1.2rem;
    font-weight: 700;
    outline: none;
}
.u-cp-82.u-cp-82.u-cp-82 { /* line 357 */
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}
.u-cp-83.u-cp-83.u-cp-83 { /* line 358 */
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--c-border);
    color: var(--c-text-soft);
    border-radius: 6px;
    cursor: pointer;
}
.u-cp-84.u-cp-84.u-cp-84 { /* line 359 */
    padding: 10px 20px;
    background: var(--c-green-solid);
    border: 1px solid var(--c-green-border);
    color: var(--c-on-solid);
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.u-cp-85.u-cp-85.u-cp-85 { /* line 372 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.6);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.u-cp-86.u-cp-86.u-cp-86 { /* line 374 */
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    width: 90vw;
    max-width: 850px;
    height: 80vh;
    /* Changed from fixed 550px to responsive viewport height */
            max-height: 650px;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 240px 1fr;
    overflow: hidden;
    font-family: system-ui, sans-serif;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    overscroll-behavior: contain;
}
.u-cp-87.u-cp-87.u-cp-87 { /* line 388 */
    background: var(--c-canvas);
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
}
.u-cp-88.u-cp-88.u-cp-88 { /* line 389 */
    padding: 16px;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text-hi);
    font-weight: 700;
    font-size: 0.9rem;
}
.u-cp-89.u-cp-89.u-cp-89 { /* line 393 */
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.u-cp-90.u-cp-90.u-cp-90 { /* line 396 */
    padding: 20px;
    color: var(--c-text-muted);
    font-size: 0.8rem;
    text-align: center;
    font-style: italic;
}
.u-cp-91.u-cp-91.u-cp-91 { /* line 410 */
    font-size: 0.7rem;
    color: var(--c-text-muted);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.u-cp-92.u-cp-92.u-cp-92 { /* line 419 */
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    height: 100%;
    overflow: hidden;
    position: relative;
}
.u-cp-93.u-cp-93.u-cp-93 { /* line 422 */
    padding: 14px 20px;
    border-bottom: 1px solid var(--c-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--c-surface-deep);
    flex-shrink: 0;
}
.u-cp-94.u-cp-94.u-cp-94 { /* line 427 */
    color: var(--c-text-hi);
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}
.u-cp-95.u-cp-95.u-cp-95 { /* line 428 */
    color: var(--c-text-muted);
    font-size: 0.75rem;
    margin: 2px 0 0 0;
}
.u-cp-96.u-cp-96.u-cp-96 { /* line 431 */
    background: transparent;
    border: none;
    color: var(--c-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
}
.u-cp-97.u-cp-97.u-cp-97 { /* line 436 */
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overscroll-behavior: contain;
}
.u-cp-98.u-cp-98.u-cp-98 { /* line 441 */
    margin: auto;
    text-align: center;
    color: var(--c-text-muted);
    font-size: 0.8rem;
    font-style: italic;
}
.u-cp-99.u-cp-99.u-cp-99 { /* line 459 */
    font-size: 0.65rem;
    color: var(--c-text-muted);
    margin-top: 4px;
    padding: 0 4px;
}
.u-cp-100.u-cp-100.u-cp-100 { /* line 467 */
    padding: 16px;
    border-top: 1px solid var(--c-border);
    background: var(--c-canvas);
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    box-sizing: border-box;
}
.u-cp-101.u-cp-101.u-cp-101 { /* line 468 */
    flex: 1;
    padding: 11px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-hi);
    font-size: 0.85rem;
    outline: none;
}
.u-cp-102.u-cp-102.u-cp-102 { /* line 469 */
    padding: 0 18px;
    background: var(--c-green-solid);
    border: 1px solid var(--c-green-border);
    color: var(--c-on-solid);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 6px;
    cursor: pointer;
}

/* ----- Matching.razor ----- */
.u-mt-1.u-mt-1.u-mt-1 { /* line 9 */
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}
.u-mt-2.u-mt-2.u-mt-2 { /* line 10 */
    max-width: 580px;
    text-align: center;
}
.u-mt-3.u-mt-3.u-mt-3 { /* line 15 */
    margin-bottom: 16px;
}
.u-mt-4.u-mt-4.u-mt-4 { /* line 16 */
    font-size: 0.7rem;
    background: rgba(var(--rgb-red-alt), 0.12);
    border: 1px solid rgba(var(--rgb-red-alt), 0.25);
    color: var(--c-red-alt);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.u-mt-5.u-mt-5.u-mt-5 { /* line 19 */
    font-size: 1.85rem;
    margin: 16px 0 0 0;
    letter-spacing: -0.02em;
    color: var(--c-text-pure);
}
.u-mt-6.u-mt-6.u-mt-6 { /* line 22 */
    font-size: 0.85rem;
    margin: 6px auto 0 auto;
    max-width: 400px;
}
.u-mt-7.u-mt-7.u-mt-7 { /* line 27,66,132 */
    color: var(--c-green-solid);
}
.u-mt-8.u-mt-8.u-mt-8 { /* line 41 */
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 20px;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.u-mt-9.u-mt-9.u-mt-9 { /* line 42 */
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--accent-secondary);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.u-mt-10.u-mt-10.u-mt-10 { /* line 51 */
    animation: fadeIn 0.4s ease-out;
}
.u-mt-11.u-mt-11.u-mt-11 { /* line 54 */
    margin-bottom: 24px;
}
.u-mt-12.u-mt-12.u-mt-12 { /* line 55 */
    width: 56px;
    height: 56px;
    background: rgba(var(--rgb-green-solid), 0.15);
    border: 1px solid var(--c-green-solid);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    color: var(--c-green-solid);
    font-size: 1.5rem;
    box-shadow: 0 0 20px rgba(var(--rgb-green-solid), 0.25);
}
.u-mt-13.u-mt-13.u-mt-13 { /* line 58 */
    font-size: 1.85rem;
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--c-text-pure);
}
.u-mt-14.u-mt-14.u-mt-14 { /* line 61 */
    font-size: 0.85rem;
    margin: 4px 0 0 0;
}
.u-mt-15.u-mt-15.u-mt-15 { /* line 72 */
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 20px;
    text-align: left;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.u-mt-16.u-mt-16.u-mt-16 { /* line 73 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.u-mt-17.u-mt-17.u-mt-17 { /* line 75 */
    font-size: 0.65rem;
    background: rgba(var(--rgb-red-alt), 0.1);
    border: 1px solid rgba(var(--rgb-red-alt), 0.2);
    color: var(--c-red-alt);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.u-mt-18.u-mt-18.u-mt-18 { /* line 78 */
    margin: 8px 0 2px 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--c-text-pure);
    line-height: 1.2;
}
.u-mt-19.u-mt-19.u-mt-19 { /* line 81 */
    font-size: 0.8rem;
    margin: 0;
}
.u-mt-20.u-mt-20.u-mt-20 { /* line 82 */
    color: var(--c-text-body);
}
.u-mt-21.u-mt-21.u-mt-21 { /* line 85 */
    background: rgba(var(--rgb-gold-bright), 0.08);
    border: 1px solid var(--c-gold-bright);
    padding: 4px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}
.u-mt-22.u-mt-22.u-mt-22 { /* line 86 */
    color: var(--c-gold-bright);
    font-weight: 800;
    font-size: 0.75rem;
}
.u-mt-23.u-mt-23.u-mt-23 { /* line 90 */
    height: 1px;
    background: var(--c-border);
    margin: 16px 0;
}
.u-mt-24.u-mt-24.u-mt-24 { /* line 93 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.u-mt-25.u-mt-25.u-mt-25 { /* line 95,107 */
    font-size: 0.65rem;
    display: block;
    text-transform: uppercase;
    font-weight: 700;
}
.u-mt-26.u-mt-26.u-mt-26 { /* line 98,102 */
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--c-amber);
}
.u-mt-27.u-mt-27.u-mt-27 { /* line 106 */
    text-align: right;
}
.u-mt-28.u-mt-28.u-mt-28 { /* line 108 */
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-secondary);
}
.u-mt-29.u-mt-29.u-mt-29 { /* line 114 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.u-mt-30.u-mt-30.u-mt-30 { /* line 117 */
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--c-whatsapp);
    background: rgba(var(--rgb-whatsapp), 0.1);
    color: var(--c-whatsapp);
    font-weight: 800;
}
.u-mt-31.u-mt-31.u-mt-31 { /* line 123 */
    background: var(--c-on-solid);
    border-color: var(--c-on-solid);
    color: var(--c-on-accent);
    font-weight: 900;
    width: 100%;
    text-align: center;
    text-decoration: none;
    margin: 0;
    padding: 14px 0;
    display: block;
    font-size: 0.85rem;
}
.u-mt-32.u-mt-32.u-mt-32 { /* line 126 */
    background: rgba(var(--rgb-whatsapp), 0.1);
    border-color: var(--c-whatsapp);
    color: var(--c-whatsapp);
    font-weight: 800;
    width: 100%;
    text-align: center;
    text-decoration: none;
    margin: 0;
    padding: 12px 0;
    display: block;
    font-size: 0.85rem;
}
.u-mt-33.u-mt-33.u-mt-33 { /* line 134 */
    display: inline-block;
    margin-top: 14px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
}
.u-mt-34.u-mt-34.u-mt-34 { /* line 145 */
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.u-mt-35.u-mt-35.u-mt-35 { /* line 146 */
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.u-mt-36.u-mt-36.u-mt-36 { /* line 148 */
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 12px;
}
.u-mt-37.u-mt-37.u-mt-37 { /* line 149 */
    color: var(--c-text-hi);
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 700;
}
.u-mt-38.u-mt-38.u-mt-38 { /* line 150 */
    color: var(--c-text-muted);
    font-size: 0.75rem;
    margin: 0;
}
.u-mt-39.u-mt-39.u-mt-39 { /* line 159,177 */
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.u-mt-40.u-mt-40.u-mt-40 { /* line 160 */
    background: rgba(var(--rgb-blue-strong), 0.1);
    border: 1px solid var(--c-blue-strong);
    border-radius: 6px;
    padding: 12px;
    font-size: 0.85rem;
    color: var(--c-text-soft);
}
.u-mt-41.u-mt-41.u-mt-41 { /* line 161 */
    color: var(--c-text-pure);
}
.u-mt-42.u-mt-42.u-mt-42 { /* line 165,190 */
    display: block;
    margin-bottom: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.u-mt-43.u-mt-43.u-mt-43 { /* line 166,191 */
    width: 100%;
    padding: 10px;
    background: var(--c-canvas);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-hi);
    font-size: 0.85rem;
    outline: none;
}
.u-mt-44.u-mt-44.u-mt-44 { /* line 169 */
    width: 100%;
    padding: 10px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-soft);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}
.u-mt-45.u-mt-45.u-mt-45 { /* line 178 */
    background: rgba(var(--rgb-orange), 0.1);
    border: 1px solid var(--c-orange);
    border-radius: 6px;
    padding: 12px;
    font-size: 0.85rem;
    color: var(--c-text-soft);
}
.u-mt-46.u-mt-46.u-mt-46 { /* line 183 */
    font-size: 0.8rem;
    background: var(--c-canvas);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--c-surface-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--c-text-muted);
}
.u-mt-47.u-mt-47.u-mt-47 { /* line 184,185,186 */
    color: var(--c-text-soft);
    font-weight: 600;
}
.u-mt-48.u-mt-48.u-mt-48 { /* line 194 */
    width: 100%;
    padding: 10px;
    background: var(--c-green-solid);
    border: 1px solid var(--c-green-border);
    border-radius: 6px;
    color: var(--c-on-solid);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}
.u-mt-49.u-mt-49.u-mt-49 { /* line 203 */
    background: rgba(var(--rgb-green), 0.05);
    border: 1px solid var(--c-green);
    border-radius: 6px;
    padding: 14px;
    position: relative;
}
.u-mt-50.u-mt-50.u-mt-50 { /* line 204 */
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--c-green);
    margin-bottom: 6px;
}
.u-mt-51.u-mt-51.u-mt-51 { /* line 205 */
    color: var(--c-text-hi);
    font-weight: 700;
    font-size: 0.95rem;
}
.u-mt-52.u-mt-52.u-mt-52 { /* line 206 */
    font-size: 0.8rem;
    color: var(--c-text-muted);
    margin-top: 2px;
}
.u-mt-53.u-mt-53.u-mt-53 { /* line 208 */
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--c-red);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

/* ----- Intake.razor ----- */
.u-in-1.u-in-1.u-in-1 { /* line 18 */
    padding: 0 0 24px 0;
    margin-bottom: 24px;
    text-align: left;
    background: transparent;
}
.u-in-2.u-in-2.u-in-2 { /* line 19 */
    font-size: 1.75rem;
    color: var(--c-red-alt);
    margin: 0;
    letter-spacing: -0.02em;
    background: transparent;
}
.u-in-3.u-in-3.u-in-3 { /* line 22 */
    margin: 6px 0 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    background: transparent;
}
.u-in-4.u-in-4.u-in-4 { /* line 27 */
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.u-in-5.u-in-5.u-in-5 { /* line 30 */
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.u-in-6.u-in-6.u-in-6 { /* line 32,38,45,59,68,74 */
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: var(--text-secondary);
}
.u-in-7.u-in-7.u-in-7 { /* line 33,39 */
    width: 100%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text-pure);
    padding: 12px;
    border-radius: 8px;
    outline: none;
}
.u-in-8.u-in-8.u-in-8 { /* line 34,40,55,64,70 */
    color: var(--c-red);
    font-size: 0.75rem;
    margin-top: 4px;
    display: block;
}
.u-in-9.u-in-9.u-in-9 { /* line 46,60 */
    position: relative;
}
.u-in-10.u-in-10.u-in-10 { /* line 47,61 */
    width: 100%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text-pure);
    padding: 12px;
    border-radius: 8px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
}
.u-in-11.u-in-11.u-in-11 { /* line 53,62 */
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.5;
    font-size: 0.75rem;
}
.u-in-12.u-in-12.u-in-12 { /* line 69 */
    width: 100%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text-pure);
    padding: 12px;
    border-radius: 8px;
    outline: none;
    min-height: 100px;
    resize: vertical;
}
.u-in-13.u-in-13.u-in-13 { /* line 78 */
    display: none;
}
.u-in-14.u-in-14.u-in-14 { /* line 82 */
    width: 100%;
    padding: 12px;
    background: rgba(var(--rgb-green-border-2), 0.15);
    border: 1px solid var(--c-green-border-2);
    border-radius: 8px;
    color: var(--c-text-pure);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.u-in-15.u-in-15.u-in-15 { /* line 87 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(var(--rgb-wash), 0.01);
    border: 1px dashed var(--c-border);
    border-radius: 8px;
    color: var(--text-secondary);
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    margin: 0;
}
.u-in-16.u-in-16.u-in-16 { /* line 88 */
    color: var(--c-blue-alt);
}
.u-in-17.u-in-17.u-in-17 { /* line 95 */
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--c-red);
    background: rgba(var(--rgb-red), 0.1);
    color: var(--c-red);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.4;
}
.u-in-18.u-in-18.u-in-18 { /* line 100 */
    width: 100%;
    background: var(--c-red-alt);
    border: 1px solid var(--c-red-alt);
    color: var(--c-on-solid);
    padding: 14px;
    border-radius: 8px;
    font-weight: 900;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    margin-top: 8px;
    text-align: center;
}

/* ----- ContractorProfileView.razor ----- */
.u-pv-1.u-pv-1.u-pv-1 { /* line 4 */
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 24px;
    font-family: system-ui, sans-serif;
    color: var(--c-text-soft);
}
.u-pv-2.u-pv-2.u-pv-2 { /* line 13 */
    background: rgba(var(--rgb-red), 0.1);
    color: var(--c-red);
    padding: 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 16px;
}
.u-pv-3.u-pv-3.u-pv-3 { /* line 15 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--c-surface-2);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.u-pv-4.u-pv-4.u-pv-4 { /* line 19 */
    background: rgba(var(--rgb-gold), 0.1);
    color: var(--brand-gold);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 20px;
    text-transform: uppercase;
}
.u-pv-5.u-pv-5.u-pv-5 { /* line 20,25 */
    color: var(--c-text-hi);
    margin: 8px 0 4px 0;
    font-size: 1.5rem;
    font-weight: 800;
}
.u-pv-6.u-pv-6.u-pv-6 { /* line 24 */
    background: rgba(var(--rgb-blue-strong), 0.1);
    color: var(--c-blue);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 20px;
    text-transform: uppercase;
}
.u-pv-7.u-pv-7.u-pv-7 { /* line 26 */
    margin: 0;
    color: var(--c-text-muted);
    font-size: 0.9rem;
}
.u-pv-8.u-pv-8.u-pv-8 { /* line 33 */
    padding: 8px 16px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    color: var(--c-blue);
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.u-pv-9.u-pv-9.u-pv-9 { /* line 39 */
    display: flex;
    gap: 8px;
}
.u-pv-10.u-pv-10.u-pv-10 { /* line 40 */
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--c-red);
    color: var(--c-red);
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.u-pv-11.u-pv-11.u-pv-11 { /* line 43 */
    padding: 8px 16px;
    background: var(--c-green-solid);
    border: 1px solid var(--c-green-border);
    color: var(--c-on-solid);
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.u-pv-12.u-pv-12.u-pv-12 { /* line 51 */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}
.u-pv-13.u-pv-13.u-pv-13 { /* line 54,67,80,93,110,123… */
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.u-pv-14.u-pv-14.u-pv-14 { /* line 57,70,83,96,113,126… */
    width: 100%;
    padding: 10px;
    background: var(--c-canvas);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-hi);
    outline: none;
}
.u-pv-15.u-pv-15.u-pv-15 { /* line 58,71,84,114,127,140… */
    color: var(--c-red);
    font-size: 0.75rem;
    margin-top: 4px;
}
.u-pv-16.u-pv-16.u-pv-16 { /* line 62,75,88,105,131,144… */
    padding: 10px 0;
    color: var(--c-text-body);
    font-weight: 600;
}
.u-pv-17.u-pv-17.u-pv-17 { /* line 118 */
    padding: 10px 0;
    color: var(--c-blue);
    font-weight: 800;
}
.u-pv-18.u-pv-18.u-pv-18 { /* line 170 */
    padding: 10px 0;
    color: var(--c-text-muted);
    font-style: italic;
    font-size: 0.9rem;
}
.u-pv-19.u-pv-19.u-pv-19 { /* line 176 */
    margin-top: 30px;
    border-top: 1px solid var(--c-border);
    padding-top: 24px;
}
.u-pv-20.u-pv-20.u-pv-20 { /* line 177 */
    color: var(--c-text-hi);
    margin: 0 0 6px 0;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.u-pv-21.u-pv-21.u-pv-21 { /* line 178 */
    font-size: 0.75rem;
    background: var(--c-green-solid);
    color: var(--c-on-solid);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}
.u-pv-22.u-pv-22.u-pv-22 { /* line 180 */
    color: var(--c-text-muted);
    font-size: 0.8rem;
    margin: 0 0 20px 0;
}
.u-pv-23.u-pv-23.u-pv-23 { /* line 182 */
    background: rgba(var(--rgb-wash), 0.01);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}
.u-pv-24.u-pv-24.u-pv-24 { /* line 246 */
    padding: 10px 0;
    color: var(--c-text-body);
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* ----- ContractorLogin.razor ----- */
.u-lg-1.u-lg-1.u-lg-1 { /* line 9,15 */
    padding: 10px 16px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-soft);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background 0.2s, border-color 0.2s;
}
.u-lg-2.u-lg-2.u-lg-2 { /* line 21 */
    padding: 10px 16px;
    background: rgba(var(--rgb-bg-surface), 0.85);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-soft);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: background 0.2s;
}
.u-lg-3.u-lg-3.u-lg-3 { /* line 28 */
    max-width: 420px;
    margin: 80px auto;
    padding: 35px;
    background: var(--c-canvas);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    color: var(--c-text-soft);
    font-family: system-ui, sans-serif;
}
.u-lg-4.u-lg-4.u-lg-4 { /* line 30 */
    text-align: center;
    margin-bottom: 28px;
}
.u-lg-5.u-lg-5.u-lg-5 { /* line 31 */
    color: var(--c-text-hi);
    margin: 0 0 6px 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.u-lg-6.u-lg-6.u-lg-6 { /* line 32 */
    color: var(--c-text-muted);
    font-size: 0.85rem;
    margin: 0;
}
.u-lg-7.u-lg-7.u-lg-7 { /* line 37 */
    background: rgba(var(--rgb-red), 0.1);
    border: 1px solid var(--c-red);
    color: var(--c-red);
    padding: 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 20px;
    line-height: 1.4;
}
.u-lg-8.u-lg-8.u-lg-8 { /* line 42 */
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.u-lg-9.u-lg-9.u-lg-9 { /* line 46 */
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.u-lg-10.u-lg-10.u-lg-10 { /* line 47,56 */
    width: 100%;
    padding: 11px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-hi);
    outline: none;
    font-size: 0.95rem;
}
.u-lg-11.u-lg-11.u-lg-11 { /* line 48,57 */
    color: var(--c-red);
    font-size: 0.75rem;
    margin-top: 4px;
    display: block;
}
.u-lg-12.u-lg-12.u-lg-12 { /* line 52 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.u-lg-13.u-lg-13.u-lg-13 { /* line 53 */
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.u-lg-14.u-lg-14.u-lg-14 { /* line 54 */
    color: var(--c-blue);
    font-size: 0.75rem;
    text-decoration: none;
}
.u-lg-15.u-lg-15.u-lg-15 { /* line 60 */
    width: 100%;
    padding: 12px;
    background: var(--c-green-solid);
    border: 1px solid var(--c-green-border);
    border-radius: 8px;
    color: var(--c-on-solid);
    font-weight: 800;
    cursor: pointer;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 8px;
    transition: background 0.2s;
}
.u-lg-16.u-lg-16.u-lg-16 { /* line 65 */
    margin-top: 24px;
    text-align: center;
    border-top: 1px solid var(--c-surface-2);
    padding-top: 20px;
    font-size: 0.85rem;
    color: var(--c-text-muted);
}
.u-lg-17.u-lg-17.u-lg-17 { /* line 66 */
    color: var(--c-blue);
    text-decoration: none;
    font-weight: 600;
}

/* ----- StorePortal.razor ----- */
.u-sp-1.u-sp-1.u-sp-1 { /* line 10 */
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0 24px 0;
    width: 100%;
    border-bottom: 1px solid var(--c-border);
}
.u-sp-2.u-sp-2.u-sp-2 { /* line 11 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}
.u-sp-3.u-sp-3.u-sp-3 { /* line 13 */
    font-size: 0.65rem;
    background: rgba(var(--rgb-gold), 0.15);
    color: var(--brand-gold);
    border: 1px solid rgba(var(--rgb-gold), 0.3);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.u-sp-4.u-sp-4.u-sp-4 { /* line 16 */
    font-size: 2rem;
    margin: 6px 0 0 0;
    letter-spacing: -0.02em;
    color: var(--c-text-pure);
}
.u-sp-5.u-sp-5.u-sp-5 { /* line 20 */
    background: rgba(var(--rgb-wash), 0.02);
    border: 1px solid var(--c-border);
    padding: 10px 18px;
    border-radius: 12px;
}
.u-sp-6.u-sp-6.u-sp-6 { /* line 21,74 */
    font-size: 0.65rem;
    display: block;
    text-transform: uppercase;
    font-weight: 700;
}
.u-sp-7.u-sp-7.u-sp-7 { /* line 22 */
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--accent-secondary);
}
.u-sp-8.u-sp-8.u-sp-8 { /* line 29,107 */
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.u-sp-9.u-sp-9.u-sp-9 { /* line 30 */
    font-size: 1.1rem;
    margin: 0;
    color: var(--c-text-pure);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.u-sp-10.u-sp-10.u-sp-10 { /* line 32 */
    font-size: 0.75rem;
    background: var(--brand-gold);
    color: var(--c-on-accent);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 900;
}
.u-sp-11.u-sp-11.u-sp-11 { /* line 39 */
    text-align: center;
    padding: 48px 24px;
    border: 1px dashed var(--c-border);
    border-radius: 16px;
    background: rgba(0,0,0,0.15);
}
.u-sp-12.u-sp-12.u-sp-12 { /* line 40 */
    font-size: 2rem;
}
.u-sp-13.u-sp-13.u-sp-13 { /* line 41 */
    margin: 12px 0 4px 0;
    font-weight: 700;
    color: var(--c-text-pure);
    text-transform: uppercase;
}
.u-sp-14.u-sp-14.u-sp-14 { /* line 42 */
    font-size: 0.8rem;
    margin: 0;
}
.u-sp-15.u-sp-15.u-sp-15 { /* line 49 */
    max-width: 100%;
    padding: 24px;
    background: var(--c-surface);
    box-shadow: none;
    border-left: 4px solid var(--brand-gold);
}
.u-sp-16.u-sp-16.u-sp-16 { /* line 51 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.u-sp-17.u-sp-17.u-sp-17 { /* line 53 */
    font-family: monospace;
    font-size: 0.7rem;
    color: var(--brand-gold);
    font-weight: 800;
}
.u-sp-18.u-sp-18.u-sp-18 { /* line 54 */
    margin: 4px 0 0 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--c-text-pure);
}
.u-sp-19.u-sp-19.u-sp-19 { /* line 56 */
    font-size: 0.75rem;
    color: var(--accent-secondary);
    font-weight: 700;
    font-family: monospace;
    background: rgba(var(--rgb-cyan), 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(var(--rgb-cyan), 0.15);
}
.u-sp-20.u-sp-20.u-sp-20 { /* line 61 */
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 14px;
    margin: 12px 0;
}
.u-sp-21.u-sp-21.u-sp-21 { /* line 62 */
    font-size: 0.65rem;
    color: var(--brand-gold);
    font-weight: 800;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}
.u-sp-22.u-sp-22.u-sp-22 { /* line 63 */
    margin: 0;
    padding-left: 18px;
    color: var(--c-text-body);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.u-sp-23.u-sp-23.u-sp-23 { /* line 71 */
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--c-border);
    padding-top: 16px;
}
.u-sp-24.u-sp-24.u-sp-24 { /* line 72 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.u-sp-25.u-sp-25.u-sp-25 { /* line 75 */
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--c-text-pure);
}
.u-sp-26.u-sp-26.u-sp-26 { /* line 88 */
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.u-sp-27.u-sp-27.u-sp-27 { /* line 89 */
    margin: 0;
    padding: 10px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid var(--c-border);
    color: var(--c-red);
    background: rgba(var(--rgb-red), 0.05);
    cursor: pointer;
    border-radius: 8px;
}
.u-sp-28.u-sp-28.u-sp-28 { /* line 108 */
    font-size: 1.1rem;
    margin: 0;
    color: var(--c-text-pure);
    letter-spacing: 0.02em;
}
.u-sp-29.u-sp-29.u-sp-29 { /* line 109 */
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.u-sp-30.u-sp-30.u-sp-30 { /* line 110 */
    border-top: 3px solid var(--brand-gold);
}
.u-sp-31.u-sp-31.u-sp-31 { /* line 110 */
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
}
.u-sp-32.u-sp-32.u-sp-32 { /* line 110 */
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--brand-gold);
    margin-top: 4px;
}

/* ----- ContractorRegister.razor ----- */
.u-rg-1.u-rg-1.u-rg-1 { /* line 17 */
    margin-bottom: 24px;
}
.u-rg-2.u-rg-2.u-rg-2 { /* line 18 */
    color: var(--c-text-hi);
    margin: 0 0 6px 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.u-rg-3.u-rg-3.u-rg-3 { /* line 19 */
    color: var(--c-text-muted);
    font-size: 0.875rem;
    margin: 0;
}
.u-rg-4.u-rg-4.u-rg-4 { /* line 22 */
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.u-rg-5.u-rg-5.u-rg-5 { /* line 25,59,78 */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.u-rg-6.u-rg-6.u-rg-6 { /* line 27,32,39,45,61,66… */
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.u-rg-7.u-rg-7.u-rg-7 { /* line 28,33,40,62,67,81… */
    width: 100%;
    padding: 10px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-hi);
    outline: none;
}
.u-rg-8.u-rg-8.u-rg-8 { /* line 29,34,41,56,63,68… */
    color: var(--c-red);
    font-size: 0.75rem;
    margin-top: 4px;
    display: block;
}
.u-rg-9.u-rg-9.u-rg-9 { /* line 46 */
    position: relative;
}
.u-rg-10.u-rg-10.u-rg-10 { /* line 47 */
    width: 100%;
    padding: 10px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-hi);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.u-rg-11.u-rg-11.u-rg-11 { /* line 54 */
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.4;
    font-size: 0.75rem;
}
.u-rg-12.u-rg-12.u-rg-12 { /* line 74 */
    width: 100%;
    padding: 10px;
    background: var(--c-canvas);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-hi);
    outline: none;
}
.u-rg-13.u-rg-13.u-rg-13 { /* line 75 */
    color: var(--c-red);
    font-size: 0.75rem;
    margin-top: 4px;
}
.u-rg-14.u-rg-14.u-rg-14 { /* line 91 */
    background: rgba(var(--rgb-wash), 0.02);
    border: 1px solid var(--c-border);
    padding: 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}
.u-rg-15.u-rg-15.u-rg-15 { /* line 92 */
    width: 18px;
    height: 18px;
    accent-color: var(--c-green-solid);
    cursor: pointer;
}
.u-rg-16.u-rg-16.u-rg-16 { /* line 93 */
    font-size: 0.85rem;
    user-select: none;
    cursor: pointer;
    color: var(--c-text-body);
}
.u-rg-17.u-rg-17.u-rg-17 { /* line 98 */
    width: 100%;
    padding: 14px;
    background: var(--c-green-solid);
    border: 1px solid var(--c-green-border);
    border-radius: 8px;
    color: var(--c-on-solid);
    font-weight: 800;
    cursor: pointer;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 10px;
}

/* ----- Directory.razor ----- */
.u-dr-1.u-dr-1.u-dr-1 { /* line 14 */
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0 24px 0;
    width: 100%;
    box-sizing: border-box;
}
.u-dr-2.u-dr-2.u-dr-2 { /* line 17 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.u-dr-3.u-dr-3.u-dr-3 { /* line 18 */
    font-size: 2rem;
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--c-text-pure);
}
.u-dr-4.u-dr-4.u-dr-4 { /* line 19 */
    color: var(--accent-secondary);
}
.u-dr-5.u-dr-5.u-dr-5 { /* line 21 */
    font-size: 0.75rem;
    background: rgba(var(--rgb-cyan), 0.1);
    border: 1px solid rgba(var(--rgb-cyan), 0.2);
    color: var(--accent-secondary);
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.u-dr-6.u-dr-6.u-dr-6 { /* line 27 */
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.u-dr-7.u-dr-7.u-dr-7 { /* line 28 */
    width: 100%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text-pure);
    padding: 14px 16px 14px 44px;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    box-sizing: border-box;
}
.u-dr-8.u-dr-8.u-dr-8 { /* line 33 */
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    font-size: 1.1rem;
    pointer-events: none;
}
.u-dr-9.u-dr-9.u-dr-9 { /* line 37 */
    margin-top: 4px;
}
.u-dr-10.u-dr-10.u-dr-10 { /* line 51 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin: 8px 0 16px 0;
    letter-spacing: 0.02em;
    width: 100%;
}
.u-dr-11.u-dr-11.u-dr-11 { /* line 55 */
    background: none;
    border: none;
    color: var(--c-red);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
}
.u-dr-12.u-dr-12.u-dr-12 { /* line 65 */
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 20px;
    border: 1px dashed var(--c-border);
    border-radius: 12px;
    background: var(--c-surface);
}
.u-dr-13.u-dr-13.u-dr-13 { /* line 66 */
    font-size: 2rem;
}
.u-dr-14.u-dr-14.u-dr-14 { /* line 67 */
    margin: 12px 0 4px 0;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--c-text-pure);
}
.u-dr-15.u-dr-15.u-dr-15 { /* line 68 */
    font-size: 0.8rem;
    margin: 0;
}
.u-dr-16.u-dr-16.u-dr-16 { /* line 76 */
    display: flex;
    gap: 5px;
}
.u-dr-17.u-dr-17.u-dr-17 { /* line 80 */
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
}
.u-dr-18.u-dr-18.u-dr-18 { /* line 81 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.u-dr-19.u-dr-19.u-dr-19 { /* line 84 */
    font-size: 0.65rem;
    background: rgba(var(--rgb-wash), 0.06);
    color: var(--accent-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.u-dr-20.u-dr-20.u-dr-20 { /* line 89 */
    margin: 10px 0 4px 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-text-pure);
}
.u-dr-21.u-dr-21.u-dr-21 { /* line 92 */
    font-size: 0.85rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.u-dr-22.u-dr-22.u-dr-22 { /* line 93 */
    color: var(--c-text-body);
}
.u-dr-23.u-dr-23.u-dr-23 { /* line 101 */
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 0.8rem;
    margin-top: 14px;
}
.u-dr-24.u-dr-24.u-dr-24 { /* line 103 */
    color: var(--c-border);
}
.u-dr-25.u-dr-25.u-dr-25 { /* line 111 */
    height: 1px;
    background: var(--c-border);
    width: 100%;
    margin: 4px 0;
}
.u-dr-26.u-dr-26.u-dr-26 { /* line 114 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.u-dr-27.u-dr-27.u-dr-27 { /* line 116 */
    font-size: 0.7rem;
    display: block;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.u-dr-28.u-dr-28.u-dr-28 { /* line 117 */
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--c-amber);
}
.u-dr-29.u-dr-29.u-dr-29 { /* line 123 */
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.u-dr-30.u-dr-30.u-dr-30 { /* line 129 */
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.u-dr-31.u-dr-31.u-dr-31 { /* line 138 */
    color: var(--c-gold-bright);
    font-weight: 800;
    font-size: 0.8rem;
}

/* ----- ForgotPassword.razor ----- */
.u-fp-1.u-fp-1.u-fp-1 { /* line 7 */
    max-width: 420px;
    margin: 80px auto;
    padding: 35px;
    background: var(--c-canvas);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    color: var(--c-text-soft);
    font-family: system-ui, sans-serif;
}
.u-fp-2.u-fp-2.u-fp-2 { /* line 9 */
    text-align: center;
    margin-bottom: 24px;
}
.u-fp-3.u-fp-3.u-fp-3 { /* line 10 */
    color: var(--c-text-hi);
    margin: 0 0 6px 0;
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: capitalize;
}
.u-fp-4.u-fp-4.u-fp-4 { /* line 11 */
    color: var(--c-text-muted);
    font-size: 0.85rem;
    margin: 0;
}
.u-fp-5.u-fp-5.u-fp-5 { /* line 25 */
    margin-bottom: 18px;
}
.u-fp-6.u-fp-6.u-fp-6 { /* line 26,41,47 */
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.u-fp-7.u-fp-7.u-fp-7 { /* line 27,48 */
    width: 100%;
    padding: 11px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-hi);
    outline: none;
}
.u-fp-8.u-fp-8.u-fp-8 { /* line 28,43,49 */
    color: var(--c-red);
    font-size: 0.75rem;
    margin-top: 4px;
    display: block;
}
.u-fp-9.u-fp-9.u-fp-9 { /* line 30 */
    width: 100%;
    padding: 12px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    color: var(--c-text-soft);
    font-weight: 700;
    cursor: pointer;
}
.u-fp-10.u-fp-10.u-fp-10 { /* line 37 */
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.u-fp-11.u-fp-11.u-fp-11 { /* line 42 */
    width: 100%;
    padding: 11px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-hi);
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}
.u-fp-12.u-fp-12.u-fp-12 { /* line 52 */
    width: 100%;
    padding: 12px;
    background: var(--c-green-solid);
    border: 1px solid var(--c-green-border);
    border-radius: 8px;
    color: var(--c-on-solid);
    font-weight: 800;
    cursor: pointer;
}
.u-fp-13.u-fp-13.u-fp-13 { /* line 58 */
    margin-top: 24px;
    text-align: center;
    border-top: 1px solid var(--c-surface-2);
    padding-top: 20px;
    font-size: 0.85rem;
}
.u-fp-14.u-fp-14.u-fp-14 { /* line 59 */
    color: var(--c-blue);
    text-decoration: none;
}

/* ----- Tracking.razor ----- */
.u-tr-1.u-tr-1.u-tr-1 { /* line 10 */
    background: rgba(var(--rgb-mint), 0.08);
    border: 1px solid rgba(var(--rgb-mint), 0.2);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.u-tr-2.u-tr-2.u-tr-2 { /* line 11 */
    color: var(--status-success);
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.u-tr-3.u-tr-3.u-tr-3 { /* line 12 */
    width: 8px;
    height: 8px;
    background: var(--status-success);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}
.u-tr-4.u-tr-4.u-tr-4 { /* line 15 */
    font-size: 0.75rem;
    font-weight: 700;
}
.u-tr-5.u-tr-5.u-tr-5 { /* line 22 */
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.u-tr-6.u-tr-6.u-tr-6 { /* line 25 */
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.u-tr-7.u-tr-7.u-tr-7 { /* line 26 */
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0 0 4px 0;
}
.u-tr-8.u-tr-8.u-tr-8 { /* line 27 */
    font-size: 4rem;
    font-weight: 900;
    color: var(--accent-secondary);
    margin: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.u-tr-9.u-tr-9.u-tr-9 { /* line 30 */
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 10px 0 0 0;
}
.u-tr-10.u-tr-10.u-tr-10 { /* line 34 */
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.u-tr-11.u-tr-11.u-tr-11 { /* line 35 */
    display: flex;
    align-items: center;
    gap: 16px;
}
.u-tr-12.u-tr-12.u-tr-12 { /* line 36 */
    width: 52px;
    height: 52px;
    background: var(--accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.25rem;
    color: #000;
    flex-shrink: 0;
}
.u-tr-13.u-tr-13.u-tr-13 { /* line 39 */
    flex-grow: 1;
}
.u-tr-14.u-tr-14.u-tr-14 { /* line 40 */
    margin: 0 0 2px 0;
    font-weight: 800;
    font-size: 1.1rem;
}
.u-tr-15.u-tr-15.u-tr-15 { /* line 41 */
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}
.u-tr-16.u-tr-16.u-tr-16 { /* line 42 */
    color: var(--c-gold-bright);
    font-weight: 800;
}
.u-tr-17.u-tr-17.u-tr-17 { /* line 49 */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.u-tr-18.u-tr-18.u-tr-18 { /* line 50 */
    text-decoration: none;
    text-align: center;
    background: rgba(var(--rgb-wash), 0.02);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}
.u-tr-19.u-tr-19.u-tr-19 { /* line 53 */
    text-decoration: none;
    text-align: center;
    background: rgba(var(--rgb-whatsapp), 0.12);
    border-color: var(--c-whatsapp);
    color: var(--c-whatsapp);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}
.u-tr-20.u-tr-20.u-tr-20 { /* line 63 */
    background: rgba(var(--rgb-red-alt), 0.02);
    border: 1px dashed var(--status-danger);
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    box-sizing: border-box;
}
.u-tr-21.u-tr-21.u-tr-21 { /* line 64 */
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--status-danger);
}
.u-tr-22.u-tr-22.u-tr-22 { /* line 65 */
    width: 22px;
    height: 22px;
    fill: currentColor;
}
.u-tr-23.u-tr-23.u-tr-23 { /* line 66 */
    margin: 0;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
}
.u-tr-24.u-tr-24.u-tr-24 { /* line 69 */
    margin: 0;
    padding-left: 20px;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ----- Welcome.razor ----- */
.u-wl-1.u-wl-1.u-wl-1 { /* line 9,15 */
    padding: 10px 16px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-soft);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background 0.2s, border-color 0.2s;
}
.u-wl-2.u-wl-2.u-wl-2 { /* line 21 */
    padding: 10px 16px;
    background: rgba(var(--rgb-bg-surface), 0.85);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-soft);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: background 0.2s;
}
.u-wl-3.u-wl-3.u-wl-3 { /* line 31 */
    width: 100%;
}
.u-wl-4.u-wl-4.u-wl-4 { /* line 44 */
    border-bottom: 4px solid var(--status-danger);
}
.u-wl-5.u-wl-5.u-wl-5 { /* line 45,63 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.u-wl-6.u-wl-6.u-wl-6 { /* line 46 */
    width: 64px;
    height: 64px;
    background: rgba(var(--rgb-red-alt), 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--status-danger);
    font-size: 1.75rem;
}
.u-wl-7.u-wl-7.u-wl-7 { /* line 49,67 */
    font-size: 1.35rem;
    margin: 4px 0 0 0;
    letter-spacing: -0.01em;
}
.u-wl-8.u-wl-8.u-wl-8 { /* line 52,70 */
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.4;
    max-width: 320px;
}
.u-wl-9.u-wl-9.u-wl-9 { /* line 56 */
    background: var(--status-danger);
    border-color: var(--status-danger);
    margin-top: 12px;
    width: 100%;
    font-weight: 800;
    font-size: 0.8rem;
    text-align: center;
}
.u-wl-10.u-wl-10.u-wl-10 { /* line 62 */
    border-bottom: 4px solid var(--accent-secondary);
}
.u-wl-11.u-wl-11.u-wl-11 { /* line 64 */
    width: 64px;
    height: 64px;
    background: rgba(var(--rgb-cyan), 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-secondary);
    font-size: 1.75rem;
}
.u-wl-12.u-wl-12.u-wl-12 { /* line 74 */
    background: transparent;
    border-color: var(--accent-secondary);
    color: var(--accent-secondary);
    margin-top: 12px;
    width: 100%;
    font-weight: 800;
    font-size: 0.8rem;
    text-align: center;
}

/* ----- CustomerChatDialogView.razor ----- */
.u-ch-1.u-ch-1.u-ch-1 { /* line 4 */
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    height: 420px;
    font-family: system-ui, sans-serif;
}
.u-ch-2.u-ch-2.u-ch-2 { /* line 6 */
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 10px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.u-ch-3.u-ch-3.u-ch-3 { /* line 7 */
    width: 8px;
    height: 8px;
    background: var(--c-green);
    border-radius: 50%;
    animate: pulse 2s infinite;
}
.u-ch-4.u-ch-4.u-ch-4 { /* line 9 */
    color: var(--c-text-hi);
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
}
.u-ch-5.u-ch-5.u-ch-5 { /* line 10 */
    color: var(--c-text-muted);
    font-size: 0.75rem;
    margin: 0;
}
.u-ch-6.u-ch-6.u-ch-6 { /* line 14 */
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.u-ch-7.u-ch-7.u-ch-7 { /* line 17 */
    margin: auto;
    text-align: center;
    color: var(--c-text-muted);
    font-size: 0.8rem;
    font-style: italic;
}
.u-ch-8.u-ch-8.u-ch-8 { /* line 35 */
    font-size: 0.65rem;
    color: var(--c-text-muted);
    margin-top: 3px;
    padding: 0 4px;
}
.u-ch-9.u-ch-9.u-ch-9 { /* line 43 */
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--c-surface-2);
    padding-top: 10px;
}
.u-ch-10.u-ch-10.u-ch-10 { /* line 44 */
    flex: 1;
    padding: 10px;
    background: var(--c-canvas);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    color: var(--c-text-hi);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
}
.u-ch-11.u-ch-11.u-ch-11 { /* line 50 */
    padding: 0 16px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    color: var(--c-blue);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

/* ----- state classes (were style="..." with @(condition ? a : b) values) ----- */
.ps-btn.ps-btn.ps-btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
}
.ps-btn--active.ps-btn--active.ps-btn--active {
    background: rgba(var(--rgb-wash), 0.05);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
    cursor: default;
}
.ps-btn--idle.ps-btn--idle.ps-btn--idle {
    background: rgba(var(--rgb-cyan), 0.1);
    border: 1px solid var(--accent-secondary);
    color: var(--accent-secondary);
    cursor: pointer;
}
.av-btn.av-btn.av-btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.75rem;
    cursor: pointer;
    text-transform: uppercase;
}
.av-btn--online.av-btn--online.av-btn--online {
    background: rgba(var(--rgb-green-solid), 0.15);
    border: 1px solid var(--c-green-solid);
    color: var(--c-green-solid);
}
.av-btn--offline.av-btn--offline.av-btn--offline {
    background: rgba(var(--rgb-red), 0.15);
    border: 1px solid var(--c-red);
    color: var(--c-red);
}
.mat-btn.mat-btn.mat-btn {
    flex: 1;
    padding: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.mat-btn--blue.mat-btn--blue.mat-btn--blue {
    background: var(--c-surface-2);
    color: var(--c-blue);
}
.mat-btn--orange.mat-btn--orange.mat-btn--orange {
    background: var(--c-orange);
    color: var(--c-on-solid);
}
.mat-btn--off.mat-btn--off.mat-btn--off {
    background: transparent;
    color: var(--c-text-muted);
}
.claim-btn.claim-btn.claim-btn {
    width: 100%;
    padding: 14px;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 6px;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.claim-btn--blocked.claim-btn--blocked.claim-btn--blocked {
    background: var(--c-border);
    border: 1px solid var(--c-surface-2);
    color: var(--c-text-muted);
    cursor: not-allowed;
    box-shadow: none;
}
.claim-btn--ready.claim-btn--ready.claim-btn--ready {
    background: var(--c-red);
    border: 1px solid var(--c-red-solid);
    color: var(--c-on-solid);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(var(--rgb-red), 0.2);
}
.job-card.job-card.job-card {
    max-width: 100%;
    padding: 24px;
    background: var(--c-surface);
    box-shadow: none;
    border: 1px solid transparent;
}
.job-card--cleared.job-card--cleared.job-card--cleared {
    border-color: var(--c-green-solid);
}
.job-card--pending.job-card--pending.job-card--pending {
    border-color: var(--accent-secondary);
}
.job-badge.job-badge.job-badge {
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.job-badge--cleared.job-badge--cleared.job-badge--cleared {
    background: rgba(var(--rgb-green-solid), 0.12);
    color: var(--c-green-solid);
    border: 1px solid var(--c-green-solid);
}
.job-badge--pending.job-badge--pending.job-badge--pending {
    background: rgba(var(--rgb-cyan), 0.12);
    color: var(--accent-secondary);
    border: 1px solid rgba(var(--rgb-cyan), 0.2);
}
.job-action-btn.job-action-btn.job-action-btn {
    padding: 10px 16px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    color: var(--c-blue);
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    opacity: 1;
}
.job-action-btn--busy.job-action-btn--busy.job-action-btn--busy {
    opacity: 0.6;
}
.pay-msg.pay-msg.pay-msg {
    padding: 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 18px;
}
.fp-msg.fp-msg.fp-msg {
    padding: 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 20px;
}
.tone-ok.tone-ok.tone-ok {
    background: rgba(var(--rgb-green), 0.1);
    border: 1px solid var(--c-green);
    color: var(--c-green);
}
.tone-bad.tone-bad.tone-bad {
    background: rgba(var(--rgb-red), 0.1);
    border: 1px solid var(--c-red);
    color: var(--c-red);
}
.tone-info.tone-info.tone-info {
    background: rgba(var(--rgb-blue-strong), 0.1);
    border: 1px solid var(--c-blue-strong);
    color: var(--c-blue);
}
.job-row.job-row.job-row {
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: none;
    border-bottom: 1px solid var(--c-surface-2);
    cursor: pointer;
    transition: background 0.15s;
}
.job-row--selected.job-row--selected.job-row--selected {
    background: var(--c-surface-sel);
    border-left: 3px solid var(--c-blue);
}
.job-row--idle.job-row--idle.job-row--idle {
    background: transparent;
    border-left: 3px solid transparent;
}
.job-id.job-id.job-id {
    font-weight: 600;
    font-size: 0.85rem;
}
.job-id--selected.job-id--selected.job-id--selected {
    color: var(--c-blue);
}
.job-id--idle.job-id--idle.job-id--idle {
    color: var(--c-text-hi);
}
.chat-row.chat-row.chat-row {
    display: flex;
    flex-direction: column;
}
.chat-row--w80.chat-row--w80.chat-row--w80 {
    max-width: 80%;
}
.chat-row--w85.chat-row--w85.chat-row--w85 {
    max-width: 85%;
}
.chat-row--end.chat-row--end.chat-row--end {
    align-items: flex-end;
    align-self: flex-end;
}
.chat-row--start.chat-row--start.chat-row--start {
    align-items: flex-start;
    align-self: flex-start;
}
.chat-bubble.chat-bubble.chat-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.4;
}
.chat-bubble--me-blue.chat-bubble--me-blue.chat-bubble--me-blue {
    background: var(--c-blue-bubble);
    color: var(--c-on-solid);
    border: 1px solid var(--c-blue-strong);
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 12px;
}
.chat-bubble--them.chat-bubble--them.chat-bubble--them {
    background: var(--c-surface-2);
    color: var(--c-text-pure);
    border: 1px solid var(--c-border);
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 2px;
}
.chat-bubble--me-green.chat-bubble--me-green.chat-bubble--me-green {
    background: var(--c-green-solid);
    color: var(--c-on-solid);
    border: 1px solid var(--c-green-border);
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 12px;
}
.chat-bubble--them-soft.chat-bubble--them-soft.chat-bubble--them-soft {
    background: var(--c-surface-2);
    color: var(--c-text-soft);
    border: 1px solid var(--c-border);
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 2px;
}
.cat-chip.cat-chip.cat-chip {
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.cat-chip--on.cat-chip--on.cat-chip--on {
    border: 1px solid var(--accent-secondary);
    background: rgba(var(--rgb-cyan), 0.1);
    color: var(--accent-secondary);
}
.cat-chip--off.cat-chip--off.cat-chip--off {
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--text-secondary);
}
.avail-text.avail-text.avail-text {
    font-weight: 700;
}
.avail-text--yes.avail-text--yes.avail-text--yes {
    color: var(--c-green-solid);
}
.avail-text--no.avail-text--no.avail-text--no {
    color: var(--c-red);
}
.quote-attach.quote-attach.quote-attach {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    font-size: 0.8rem;
    cursor: pointer;
    background: rgba(var(--rgb-wash), 0.01);
    color: var(--c-text-pure);
}
.quote-attach--loaded.quote-attach--loaded.quote-attach--loaded {
    border: 1px dashed var(--brand-gold);
}
.quote-attach--empty.quote-attach--empty.quote-attach--empty {
    border: 1px dashed var(--c-border);
}
.quote-label--loaded.quote-label--loaded.quote-label--loaded {
    color: var(--c-text-pure);
}
.quote-label--empty.quote-label--empty.quote-label--empty {
    color: var(--text-secondary);
}
.quote-confirm.quote-confirm.quote-confirm {
    font-weight: 900;
    margin: 0;
    padding: 10px 24px;
    font-size: 0.75rem;
    border-radius: 8px;
}
.quote-confirm--blocked.quote-confirm--blocked.quote-confirm--blocked {
    background: var(--c-border);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
    cursor: not-allowed;
}
.quote-confirm--ready.quote-confirm--ready.quote-confirm--ready {
    background: var(--brand-gold);
    border: 1px solid var(--brand-gold);
    color: var(--c-on-accent);
    cursor: pointer;
}

/* ----- hover states (were onmouseover / onmouseout JavaScript) ----- */
.hover-card.hover-card.hover-card:hover {
    background: var(--c-surface-2);
    border-color: var(--c-text-muted);
}
.hover-cyan-fill.hover-cyan-fill.hover-cyan-fill:hover {
    background: rgba(var(--rgb-cyan), 0.8);
}
.hover-red-fill.hover-red-fill.hover-red-fill:hover {
    background: rgba(var(--rgb-red), 0.8);
}


/* ==========================================================================
   16. THEME PICKER (light / auto / dark). Markup lives in Components/Layout/MainLayout.razor, behaviour in wwwroot/theme.js.
   ========================================================================== */
.theme-picker {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 800; /* above page content, below the payment/chat modals (1000) */
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(var(--rgb-surface), 0.92);
    border: 1px solid var(--c-border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
}

.theme-picker__btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.theme-picker__btn:hover {
    opacity: 1;
    background: var(--c-surface-2);
}

/* the active choice is read from <html data-theme-pref="..."> */
html[data-theme-pref="light"] .theme-picker__btn[data-theme-choice="light"],
html[data-theme-pref="system"] .theme-picker__btn[data-theme-choice="system"],
html[data-theme-pref="dark"] .theme-picker__btn[data-theme-choice="dark"] {
    opacity: 1;
    background: var(--c-surface-2);
    box-shadow: inset 0 0 0 1px var(--accent-secondary);
}

.theme-picker__btn:focus-visible {
    outline: 2px solid var(--accent-secondary);
    outline-offset: 2px;
}

@media print {
    .theme-picker { display: none; }
}

/* ---- Contractor portal: active jobs as compact cards, several per row ---- */
.job-grid.job-grid.job-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    align-items: start;
}
.job-card--compact.job-card--compact.job-card--compact {
    padding: 14px;
    border-radius: 12px;
}
.job-grid .job-card--compact.job-card--compact h3.u-cp-48 { font-size: 0.95rem; }
.job-grid .job-card--compact.job-card--compact .u-cp-47 { gap: 8px; margin-bottom: 8px; }
.job-grid .job-card--compact.job-card--compact .u-cp-49 { font-size: 0.72rem; }
.job-grid .job-card--compact.job-card--compact .u-cp-50,
.job-grid .job-card--compact.job-card--compact .u-cp-52,
.job-grid .job-card--compact.job-card--compact .u-cp-60 { margin: 10px 0; padding: 10px; font-size: 0.74rem; }
.job-grid .job-card--compact.job-card--compact .u-cp-51 { margin-top: 10px; padding-top: 10px; }

/* ---- Contractor portal: Performance Matrix on small screens ----
   Wide screens: it stays in the right column. Narrow screens: it is hidden, a header button opens it, and it opens at the TOP of the page. */
.pm-toggle { display: none; }

@media (max-width: 991.98px) {
    .pm-toggle.pm-toggle.pm-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--c-surface-2);
        border: 1px solid var(--c-border);
        color: var(--c-text-body);
        padding: 10px 18px;
        border-radius: 8px;
        font-weight: 800;
        font-size: 0.75rem;
        cursor: pointer;
        text-transform: uppercase;
    }
    .pm-toggle--open.pm-toggle--open.pm-toggle--open {
        border-color: var(--accent-secondary);
        color: var(--accent-secondary);
    }
    .pm-section.pm-section.pm-section {
        display: none;
        order: -1;
    }
    .pm-section--open.pm-section--open.pm-section--open {
        display: flex;
    }
}

/* Contractor settings page (theme tokens, so it follows the light/dark theme like the rest of the portal) */
.settings-card.settings-card.settings-card { padding: 18px; margin: 16px 0; }
.settings-back.settings-back.settings-back,
.settings-btn.settings-btn.settings-btn {
    padding: 8px 14px; background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-blue);
    border-radius: 6px; font-weight: 600; font-size: 0.85rem; cursor: pointer; font-family: inherit;
}
.settings-back.settings-back.settings-back { margin-bottom: 8px; }
.settings-back.settings-back.settings-back:hover,
.settings-btn.settings-btn.settings-btn:hover { border-color: var(--accent-secondary); color: var(--accent-secondary); }
.settings-danger.settings-danger.settings-danger {
    padding: 8px 14px; background: transparent; border: 1px solid var(--c-red); color: var(--c-red);
    border-radius: 6px; font-weight: 600; font-size: 0.85rem; cursor: pointer; font-family: inherit;
}
.settings-danger.settings-danger.settings-danger:hover { background: rgba(var(--rgb-red), 0.1); }
.settings-row.settings-row.settings-row {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px;
    padding: 10px 0; border-bottom: 1px solid var(--c-border);
}
.settings-row.settings-row.settings-row > span:first-child { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.settings-actions.settings-actions.settings-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-form.settings-form.settings-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.settings-form.settings-form.settings-form input:not([type=checkbox]) {
    flex: 1 1 200px; min-width: 0; box-sizing: border-box; padding: 10px; background: var(--c-canvas); border: 1px solid var(--c-border);
    border-radius: 6px; color: var(--c-text-hi); font: inherit; font-size: 0.85rem; outline: none;
}
.settings-form.settings-form.settings-form input:not([type=checkbox]):focus { border-color: var(--accent-secondary); }
.settings-form.settings-form.settings-form label { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; color: var(--c-text-soft); font-size: 0.85rem; }
.settings-form.settings-form.settings-form > button { flex: 1 1 100%; }
.settings-message.settings-message.settings-message {
    padding: 10px 12px; margin: 8px 0; border-radius: 8px; border: 1px solid var(--brand-gold);
    background: rgba(var(--rgb-gold), 0.1); color: var(--c-text-hi);
}

/* Offer card: decline button and custom offering fields */
.decline-btn.decline-btn.decline-btn {
    width: 100%; margin-top: 8px; padding: 10px; background: transparent; color: var(--c-red);
    border: 1px solid var(--c-red); border-radius: 10px; cursor: pointer; font-weight: 700;
}
.decline-btn.decline-btn.decline-btn:hover { background: rgba(var(--rgb-red), 0.1); }
.custom-offer.custom-offer.custom-offer { display: flex; flex-direction: column; gap: 6px; grid-column: 1 / -1; min-width: 0; }
.custom-offer.custom-offer.custom-offer textarea,
.custom-offer.custom-offer.custom-offer input[type=number] {
    width: 100%; box-sizing: border-box; padding: 10px; background: var(--c-canvas); border: 1px solid var(--c-border);
    border-radius: 6px; color: var(--c-text-hi); font: inherit; font-size: 0.85rem; outline: none;
}
.custom-offer.custom-offer.custom-offer textarea { resize: vertical; min-height: 72px; }
.custom-offer.custom-offer.custom-offer textarea:focus,
.custom-offer.custom-offer.custom-offer input[type=number]:focus { border-color: var(--accent-secondary); }
.custom-offer.custom-offer.custom-offer input[type=file] { width: 100%; font-size: 0.8rem; color: var(--c-text-muted); }
.custom-offer.custom-offer.custom-offer input[type=file]::file-selector-button {
    margin-right: 10px; padding: 7px 12px; background: rgba(var(--rgb-cyan), 0.1); border: 1px solid var(--accent-secondary);
    color: var(--accent-secondary); border-radius: 6px; font-weight: 700; font-family: inherit; cursor: pointer;
}

/* Narrow-screen fixes for the contractor portal */
/* the offer form's fields share a row only when each gets a usable width, otherwise they stack */
.u-cp-33.u-cp-33.u-cp-33 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.u-cp-33.u-cp-33.u-cp-33 > * { min-width: 0; }
/* profile header: the title column and the Cancel / Save buttons wrap instead of squeezing each other */
.u-pv-3.u-pv-3.u-pv-3 { flex-wrap: wrap; gap: 12px; }
.u-pv-3.u-pv-3.u-pv-3 > div:first-child { flex: 1 1 220px; min-width: 0; }
.u-pv-4.u-pv-4.u-pv-4, .u-pv-6.u-pv-6.u-pv-6 { display: inline-block; white-space: nowrap; }
.u-pv-9.u-pv-9.u-pv-9 { flex-wrap: wrap; }
/* the top bar (Active Chats, My Profile, Settings, Logout) stops floating over the page and wraps */
@media (max-width: 760px) {
    .portal-nav-bar.portal-nav-bar.portal-nav-bar.portal-nav-bar { position: static; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px 10px 0; }
    .portal-nav-bar.portal-nav-bar.portal-nav-bar.portal-nav-bar > button { flex: 1 1 130px; justify-content: center; white-space: nowrap; }
}

/* Back-office reports */
.report-tabs.report-tabs.report-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; align-items: center; }
.report-tab.report-tab.report-tab { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text-hi); cursor: pointer; font-family: inherit; }
.report-tab--on.report-tab--on.report-tab--on { font-weight: 700; border-color: var(--accent-secondary); color: var(--accent-secondary); }
.report-scroll.report-scroll.report-scroll { overflow-x: auto; }
.report-table.report-table.report-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.report-table.report-table.report-table th, .report-table.report-table.report-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid rgba(128,128,128,.25); white-space: nowrap; }

/* Chats modal: on a phone it is a full-screen sheet that shows the job list first, then one conversation with a back arrow */
.chat-head-left.chat-head-left.chat-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-head-text.chat-head-text.chat-head-text { min-width: 0; }
.chat-head-text.chat-head-text.chat-head-text > * { overflow: hidden; text-overflow: ellipsis; }
.chat-back-btn.chat-back-btn.chat-back-btn {
    display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0;
    background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-blue); border-radius: 8px; font-size: 1.1rem; cursor: pointer;
}
@media (max-width: 700px) {
    .u-cp-85.u-cp-85.u-cp-85.u-cp-85 { height: 100vh; height: 100dvh; align-items: stretch; }
    .u-cp-86.u-cp-86.u-cp-86.u-cp-86 {
        width: 100%; max-width: none; height: 100%; max-height: none; border: none; border-radius: 0;
        grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    }
    .u-cp-86.u-cp-86.u-cp-86.chat-show-list .u-cp-92.u-cp-92.u-cp-92 { display: none; }
    .u-cp-86.u-cp-86.u-cp-86.chat-show-conv .u-cp-87.u-cp-87.u-cp-87 { display: none; }
    .u-cp-86.u-cp-86.u-cp-86 .u-cp-87.u-cp-87.u-cp-87 { border-right: none; }
    .chat-back-btn.chat-back-btn.chat-back-btn { display: inline-flex; }
    .u-cp-93.u-cp-93.u-cp-93 { padding: 10px 12px; gap: 8px; }
    .u-cp-97.u-cp-97.u-cp-97 { padding: 14px 12px; }
    .u-cp-100.u-cp-100.u-cp-100 { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
    .u-cp-101.u-cp-101.u-cp-101 { min-width: 0; font-size: 1rem; }       /* 16px stops iPhones zooming in on the field */
}

/* ===== Contractor chats: richer job list, header, composer and a docked panel on computers ===== */
.chat-group-label.chat-group-label.chat-group-label { padding: 10px 16px 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted); }
.job-row-top.job-row-top.job-row-top, .job-row-bottom.job-row-bottom.job-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.job-row-bottom.job-row-bottom.job-row-bottom { margin-top: 3px; }
.job-time.job-time.job-time { flex-shrink: 0; font-size: 0.68rem; color: var(--c-text-muted); }
.job-preview.job-preview.job-preview { flex: 1; min-width: 0; font-size: 0.78rem; color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-ref.job-ref.job-ref { margin-top: 3px; font-size: 0.66rem; color: var(--c-text-muted); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-unread.job-unread.job-unread { flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--c-blue-strong); color: var(--c-on-solid); font-size: 0.7rem; font-weight: 700; }
.job-id.job-id.job-id { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head-actions.chat-head-actions.chat-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.chat-head-job.chat-head-job.chat-head-job { margin-left: 6px; }
.chat-status.chat-status.chat-status { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.66rem; font-weight: 700; border: 1px solid var(--c-border); }
.chat-status--paid.chat-status--paid.chat-status--paid { background: var(--c-green-solid); border-color: var(--c-green-border); color: var(--c-on-solid); }
.chat-status--waiting.chat-status--waiting.chat-status--waiting { background: var(--c-surface-2); color: var(--c-text-muted); }
.chat-status--closed.chat-status--closed.chat-status--closed { background: var(--c-surface-2); color: var(--c-text-muted); opacity: 0.8; }
/* Calling only exists on touch screens (phones); computers have no dialler */
.chat-call-btn.chat-call-btn.chat-call-btn { display: none; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; background: var(--c-green-solid); border: 1px solid var(--c-green-border); color: var(--c-on-solid); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
@media (hover: none) and (pointer: coarse) { .chat-call-btn.chat-call-btn.chat-call-btn { display: inline-flex; } }
.chat-day.chat-day.chat-day { align-self: center; padding: 3px 12px; border-radius: 10px; background: var(--c-surface-2); color: var(--c-text-muted); font-size: 0.68rem; font-weight: 600; }
.chat-failed.chat-failed.chat-failed { margin-top: 4px; padding: 0 4px; background: none; border: none; color: var(--c-red); font-size: 0.7rem; font-weight: 600; cursor: pointer; }
.chat-hint.chat-hint.chat-hint { flex-shrink: 0; padding: 8px 16px; background: var(--c-canvas); border-top: 1px solid var(--c-border); color: var(--c-text-muted); font-size: 0.72rem; text-align: center; }
.chat-quick.chat-quick.chat-quick { flex-shrink: 0; display: flex; gap: 8px; padding: 8px 16px 0; overflow-x: auto; background: var(--c-canvas); border-top: 1px solid var(--c-border); }
.chat-chip.chat-chip.chat-chip { flex-shrink: 0; padding: 6px 12px; border-radius: 16px; background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-hi); font-size: 0.76rem; cursor: pointer; white-space: nowrap; }
.chat-chip.chat-chip.chat-chip:hover { border-color: var(--c-blue); color: var(--c-blue); }
.u-cp-100.u-cp-100.u-cp-100 { align-items: flex-end; border-top: none; }
.u-cp-101.u-cp-101.u-cp-101 { resize: none; line-height: 1.35; max-height: 140px; font-family: inherit; box-sizing: border-box; }
.u-cp-102.u-cp-102.u-cp-102 { min-height: 40px; }
.u-cp-102.u-cp-102.u-cp-102:disabled { opacity: 0.5; cursor: default; }
.chat-empty-pane.chat-empty-pane.chat-empty-pane { flex: 1; display: flex; align-items: center; justify-content: center; margin: 0; }

/* Computers: a docked panel in the corner instead of a dimmed full-screen pop-up, so the portal stays usable behind it */
@media (min-width: 1024px) {
    .u-cp-85.u-cp-85.u-cp-85.u-cp-85 { top: auto; left: auto; right: 20px; bottom: 20px; width: auto; height: auto; background: transparent; backdrop-filter: none; pointer-events: none; }
    .u-cp-86.u-cp-86.u-cp-86.u-cp-86 { pointer-events: auto; width: 820px; max-width: calc(100vw - 40px); height: 620px; max-height: calc(100vh - 40px); grid-template-columns: 290px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
}

/* The job list must be allowed to shrink inside the panel, otherwise it grows past it and cannot scroll */
.u-cp-87.u-cp-87.u-cp-87.u-cp-87 { min-height: 0; overflow: hidden; }
.u-cp-89.u-cp-89.u-cp-89.u-cp-89 { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.u-cp-92.u-cp-92.u-cp-92.u-cp-92 { min-height: 0; }
.u-cp-97.u-cp-97.u-cp-97.u-cp-97 { min-height: 0; }
/* Quick replies still scroll sideways, just without the bar */
.chat-quick.chat-quick.chat-quick { scrollbar-width: none; -ms-overflow-style: none; }
.chat-quick.chat-quick.chat-quick::-webkit-scrollbar { display: none; }

/* Customer chat: alerts toggle in the header */
.chat-bell.chat-bell.chat-bell { margin-left: auto; flex-shrink: 0; padding: 5px 10px; border-radius: 14px; background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-hi); font-size: 0.72rem; font-weight: 600; cursor: pointer; }
.chat-bell.chat-bell.chat-bell:hover { border-color: var(--c-blue); color: var(--c-blue); }
.chat-bell--on.chat-bell--on.chat-bell--on { cursor: default; border-color: var(--c-green-border); color: var(--c-green); }
.chat-bell--off.chat-bell--off.chat-bell--off { cursor: default; color: var(--c-text-muted); }

/* ===== Contractor dashboard: My Reports ===== */
.rp-toggle.rp-toggle.rp-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-body); padding: 10px 18px; border-radius: 8px; font-weight: 800; font-size: 0.75rem; cursor: pointer; text-transform: uppercase; }
.rp-toggle--open.rp-toggle--open.rp-toggle--open { border-color: var(--accent-secondary); color: var(--accent-secondary); }
.rp-section.rp-section.rp-section { margin-top: 20px; width: 100%; box-sizing: border-box; }
.rp-head.rp-head.rp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rp-title.rp-title.rp-title { margin: 0; }
.rp-periods.rp-periods.rp-periods { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-tiles.rp-tiles.rp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.rp-tile-label.rp-tile-label.rp-tile-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
.rp-tile-value.rp-tile-value.rp-tile-value { margin-top: 6px; font-size: 1.15rem; font-weight: 800; color: var(--c-text-hi); }
.rp-note.rp-note.rp-note { font-size: 0.75rem; margin: 4px 0 10px; }
.rp-csv.rp-csv.rp-csv { margin-left: auto; }
.rp-wrap-cell.rp-wrap-cell.rp-wrap-cell { white-space: normal; min-width: 200px; }

/* Admin: add a store */
.store-form.store-form.store-form { margin: 12px 0 18px; }
.store-grid.store-grid.store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 10px 0 14px; }
.store-grid.store-grid.store-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; color: var(--c-text-muted); }
.report-tabs.report-tabs.report-tabs a.report-tab { text-decoration: none; display: inline-block; }

/* Admin: task list */
.task-row.task-row.task-row { cursor: pointer; }
.task-row.task-row.task-row:hover td { background: var(--c-surface-2); }
.task-status.task-status.task-status { background: var(--c-surface-2); color: var(--c-text-hi); }
.task-status--Open.task-status--Open.task-status--Open { border-color: var(--c-red); color: var(--c-red); }
.task-status--WaitingForReply.task-status--WaitingForReply.task-status--WaitingForReply { border-color: var(--accent-secondary); color: var(--accent-secondary); }
.task-status--Resolved.task-status--Resolved.task-status--Resolved { border-color: var(--c-green-border); color: var(--c-green); }
.task-facts.task-facts.task-facts { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 8px 0 14px; font-size: 0.85rem; }
.task-details.task-details.task-details { white-space: pre-wrap; background: var(--c-canvas); border: 1px solid var(--c-border); border-radius: 8px; padding: 12px; font-family: inherit; font-size: 0.85rem; }
.task-form.task-form.task-form { display: flex; flex-direction: column; gap: 8px; max-width: 640px; margin-bottom: 10px; }
.task-form.task-form.task-form .report-tab { align-self: flex-start; }
.task-actions.task-actions.task-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.task-entry.task-entry.task-entry { border-left: 3px solid var(--c-border); padding: 6px 12px; margin: 8px 0; }
.task-entry--Email.task-entry--Email.task-entry--Email { border-left-color: var(--accent-secondary); }
.task-entry--Status.task-entry--Status.task-entry--Status { border-left-color: var(--c-green-border); }
.task-entry-head.task-entry-head.task-entry-head { font-size: 0.72rem; }
.task-entry-body.task-entry-body.task-entry-body { white-space: pre-wrap; font-size: 0.85rem; margin-top: 2px; }
.store-wide.store-wide.store-wide { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; color: var(--c-text-muted); margin-bottom: 12px; }

/* Contractor not yet verified */
.verify-banner.verify-banner.verify-banner {
    margin: 0 0 1rem;
}

.reg-hint.reg-hint.reg-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    color: var(--text-secondary);
}