:root {
    --uso-bg: #f4f6f8;
    --uso-bg-soft: #f8fafc;
    --uso-surface: #ffffff;
    --uso-surface-soft: #f9fafb;

    --uso-border: #d9dee7;
    --uso-border-soft: #e8ecf2;
    --uso-border-strong: #c7ceda;

    --uso-text: #172033;
    --uso-text-soft: #344054;
    --uso-muted: #667085;
    --uso-muted-2: #98a2b3;

    --uso-primary: #1f3a5f;
    --uso-primary-hover: #172b46;
    --uso-primary-soft: #e8eef6;

    --uso-success: #067647;
    --uso-success-soft: #ecfdf3;

    --uso-danger: #b42318;
    --uso-danger-soft: #fef3f2;

    --uso-warning: #b54708;
    --uso-warning-soft: #fffaeb;

    --uso-info: #175cd3;
    --uso-info-soft: #eff8ff;

    --uso-radius-xs: 6px;
    --uso-radius-sm: 8px;
    --uso-radius-md: 10px;
    --uso-radius-lg: 12px;
    --uso-radius-xl: 16px;

    --uso-shadow-soft: 0 8px 22px rgba(16, 24, 40, 0.06);
    --uso-shadow-float: 0 14px 38px rgba(16, 24, 40, 0.14);

    --uso-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
}

/* Base */

body {
    background: var(--uso-bg) !important;
    color: var(--uso-text) !important;
    font-family: var(--uso-font) !important;
}

.uso-app {
    background: var(--uso-bg) !important;
    color: var(--uso-text) !important;
}

.uso-shell {
    max-width: 760px;
}

.uso-shell-wide {
    max-width: 1180px;
}

/* Topbar */

.uso-topbar {
    margin-bottom: 12px !important;
    padding: 2px 0 4px !important;
    align-items: center !important;
}

.uso-brand-title {
    color: var(--uso-text) !important;
    font-size: 22px !important;
    line-height: 1.08 !important;
    font-weight: 760 !important;
    letter-spacing: -0.035em !important;
}

.uso-brand-subtitle {
    margin-top: 5px !important;
    color: var(--uso-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.uso-user-pill {
    min-height: 30px !important;
    padding: 6px 9px !important;
    border-radius: var(--uso-radius-sm) !important;
    background: var(--uso-surface) !important;
    border: 1px solid var(--uso-border) !important;
    color: var(--uso-text-soft) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* Cards */

.uso-card,
.uso-report-card,
.uso-target-card,
.uso-help-channel-card,
.uso-kpi-summary-card,
.uso-status-card {
    background: var(--uso-surface) !important;
    border: 1px solid var(--uso-border-soft) !important;
    border-radius: var(--uso-radius-lg) !important;
    box-shadow: none !important;
}

.uso-card {
    padding: 15px !important;
    margin-bottom: 12px !important;
}

.uso-card-title {
    color: var(--uso-text) !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 760 !important;
    letter-spacing: -0.015em !important;
}

.uso-card-text {
    color: var(--uso-muted) !important;
    font-size: 13px !important;
    line-height: 1.48 !important;
    font-weight: 500 !important;
}

/* Forms */

.uso-form,
.uso-filter-form {
    gap: 11px !important;
}

.uso-field {
    margin-bottom: 11px !important;
}

.uso-label {
    margin-bottom: 6px !important;
    color: var(--uso-text-soft) !important;
    font-size: 12px !important;
    font-weight: 720 !important;
}

.uso-help {
    color: var(--uso-muted) !important;
    font-size: 11.5px !important;
    line-height: 1.42 !important;
}

.uso-input,
.uso-textarea,
select.uso-input {
    min-height: 42px !important;
    padding: 10px 11px !important;
    border-radius: var(--uso-radius-sm) !important;
    border: 1px solid var(--uso-border) !important;
    background: var(--uso-surface) !important;
    color: var(--uso-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.uso-textarea {
    min-height: 96px !important;
}

.uso-input:focus,
.uso-textarea:focus,
select.uso-input:focus {
    border-color: var(--uso-primary) !important;
    box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.10) !important;
    outline: none !important;
}

.uso-input::placeholder,
.uso-textarea::placeholder {
    color: var(--uso-muted-2) !important;
}

/* Buttons */

.uso-actions,
.uso-form-actions {
    gap: 8px !important;
}

.uso-button,
.uso-login-card input[type="submit"] {
    min-height: 40px !important;
    padding: 10px 13px !important;
    border-radius: var(--uso-radius-sm) !important;
    background: var(--uso-primary) !important;
    border: 1px solid var(--uso-primary) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 720 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em !important;
    box-shadow: none !important;
}

.uso-button:hover,
.uso-button:focus,
.uso-login-card input[type="submit"]:hover,
.uso-login-card input[type="submit"]:focus {
    background: var(--uso-primary-hover) !important;
    border-color: var(--uso-primary-hover) !important;
    color: #ffffff !important;
}

.uso-button-secondary,
.uso-logout-link {
    background: var(--uso-surface) !important;
    border: 1px solid var(--uso-border) !important;
    color: var(--uso-text-soft) !important;
}

.uso-button-secondary:hover,
.uso-button-secondary:focus,
.uso-logout-link:hover,
.uso-logout-link:focus {
    background: var(--uso-bg-soft) !important;
    border-color: var(--uso-border-strong) !important;
    color: var(--uso-text) !important;
}

.uso-button-danger {
    background: var(--uso-danger) !important;
    border-color: var(--uso-danger) !important;
    color: #ffffff !important;
}

.uso-button-danger:hover,
.uso-button-danger:focus {
    background: #7a271a !important;
    border-color: #7a271a !important;
}

.uso-mini-link {
    color: var(--uso-primary) !important;
    font-size: 12px !important;
    font-weight: 720 !important;
    text-decoration: none !important;
}

.uso-mini-link:hover,
.uso-mini-link:focus {
    color: var(--uso-primary-hover) !important;
    text-decoration: underline !important;
}

.uso-mini-button {
    min-height: 30px !important;
    padding: 6px 9px !important;
    border-radius: var(--uso-radius-xs) !important;
    background: var(--uso-primary) !important;
    border-color: var(--uso-primary) !important;
    font-size: 11.5px !important;
    font-weight: 720 !important;
}

/* Metrics */

.uso-metric {
    border-radius: var(--uso-radius-md) !important;
    background: var(--uso-surface-soft) !important;
    border: 1px solid var(--uso-border-soft) !important;
    padding: 12px !important;
    box-shadow: none !important;
}

.uso-metric-value {
    color: var(--uso-text) !important;
    font-size: 21px !important;
    font-weight: 760 !important;
    letter-spacing: -0.035em !important;
}

.uso-metric-label {
    margin-top: 5px !important;
    color: var(--uso-muted) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    text-transform: none !important;
}

/* Channel / stats cards */

.uso-channel-card,
.uso-lead-item,
.uso-followup-card,
.uso-timeline-item {
    background: var(--uso-surface) !important;
    border: 1px solid var(--uso-border-soft) !important;
    border-radius: var(--uso-radius-lg) !important;
    box-shadow: none !important;
}

.uso-channel-title,
.uso-lead-title,
.uso-report-title,
.uso-person-name {
    color: var(--uso-text) !important;
    font-weight: 760 !important;
    letter-spacing: -0.015em !important;
}

.uso-lead-meta,
.uso-manager-row-meta,
.uso-step-meta {
    color: var(--uso-muted) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
}

.uso-channel-stats div,
.uso-report-stats div {
    background: var(--uso-surface-soft) !important;
    border: 1px solid var(--uso-border-soft) !important;
    border-radius: var(--uso-radius-sm) !important;
}

/* Badges / status pills */

.uso-funnel-code,
.uso-status-pill,
.uso-report-status,
.uso-validation-badge,
.uso-filter-chip,
.uso-badge {
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
}

.uso-funnel-code {
    width: fit-content !important;
    padding: 5px 8px !important;
    background: var(--uso-primary-soft) !important;
    color: var(--uso-primary) !important;
    border: 1px solid #d6e2f1 !important;
}

.uso-report-status.is-closed,
.uso-status-paid,
.uso-commission-status-paid,
.uso-validation-badge.required_proof_ok,
.uso-validation-badge.optional_proof_ok {
    background: var(--uso-success-soft) !important;
    color: var(--uso-success) !important;
    border: 1px solid #abefc6 !important;
}

.uso-report-status.is-missing,
.uso-status-lost,
.uso-commission-status-cancelled,
.uso-validation-badge.missing_required_proof {
    background: var(--uso-danger-soft) !important;
    color: var(--uso-danger) !important;
    border: 1px solid #fecdca !important;
}

.uso-status-won {
    background: var(--uso-info-soft) !important;
    color: var(--uso-info) !important;
    border: 1px solid #b2ddff !important;
}

.uso-status-new,
.uso-status-active,
.uso-status-in_progress,
.uso-validation-badge.proof_not_required,
.uso-commission-status-planned {
    background: var(--uso-primary-soft) !important;
    color: var(--uso-primary) !important;
    border: 1px solid #d6e2f1 !important;
}

/* Alerts / notes / errors */

.uso-alert {
    background: var(--uso-success-soft) !important;
    border: 1px solid #abefc6 !important;
    color: var(--uso-success) !important;
    border-radius: var(--uso-radius-md) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
}

.uso-error,
.uso-field-error {
    background: var(--uso-danger-soft) !important;
    border: 1px solid #fecdca !important;
    color: var(--uso-danger) !important;
    border-radius: var(--uso-radius-md) !important;
    font-size: 12px !important;
    font-weight: 720 !important;
}

.uso-note-box {
    background: var(--uso-bg-soft) !important;
    border: 1px solid var(--uso-border-soft) !important;
    color: var(--uso-text-soft) !important;
    border-radius: var(--uso-radius-md) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.uso-note-warning,
.uso-kpi-warning {
    background: var(--uso-warning-soft) !important;
    border: 1px solid #fedf89 !important;
    color: var(--uso-warning) !important;
}

/* Tables */

.uso-table-scroll {
    border-radius: var(--uso-radius-lg) !important;
    border: 1px solid var(--uso-border) !important;
    box-shadow: none !important;
    background: var(--uso-surface) !important;
}

.uso-manager-leads-table {
    font-size: 12.5px !important;
}

.uso-manager-leads-table th {
    background: #f2f4f7 !important;
    color: var(--uso-text-soft) !important;
    border-bottom: 1px solid var(--uso-border) !important;
    font-size: 10.5px !important;
    font-weight: 760 !important;
    letter-spacing: 0.035em !important;
}

.uso-manager-leads-table td {
    color: var(--uso-text) !important;
    border-bottom: 1px solid var(--uso-border-soft) !important;
}

.uso-manager-leads-table tr:hover td {
    background: #fbfcfe !important;
}

.uso-manager-leads-table td span {
    color: var(--uso-muted) !important;
}

/* Filters */

.uso-filter-chip {
    min-height: 31px !important;
    padding: 7px 10px !important;
    background: var(--uso-surface) !important;
    border: 1px solid var(--uso-border) !important;
    color: var(--uso-text-soft) !important;
}

.uso-filter-chip:hover,
.uso-filter-chip:focus {
    background: var(--uso-bg-soft) !important;
    color: var(--uso-text) !important;
}

.uso-filter-chip.is-active {
    background: var(--uso-primary) !important;
    border-color: var(--uso-primary) !important;
    color: #ffffff !important;
}

.uso-filter-details summary,
.uso-help-details summary {
    color: var(--uso-text) !important;
    font-weight: 720 !important;
}

/* Bottom nav */

.uso-bottom-nav {
    padding: 7px !important;
    border-radius: var(--uso-radius-xl) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid var(--uso-border) !important;
    box-shadow: var(--uso-shadow-float) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.uso-bottom-nav-item {
    min-height: 44px !important;
    border-radius: var(--uso-radius-md) !important;
    color: var(--uso-muted) !important;
    font-size: 10.5px !important;
    font-weight: 720 !important;
}

.uso-bottom-nav-item:hover,
.uso-bottom-nav-item:focus {
    background: var(--uso-bg-soft) !important;
    color: var(--uso-text) !important;
}

.uso-bottom-nav-item.is-active {
    background: var(--uso-primary) !important;
    color: #ffffff !important;
}

.uso-bottom-nav-icon {
    font-size: 14px !important;
}

.uso-floating-new-lead {
    min-height: 40px !important;
    padding: 10px 13px !important;
    border-radius: var(--uso-radius-md) !important;
    background: var(--uso-primary) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    box-shadow: var(--uso-shadow-float) !important;
}

.uso-floating-new-lead:hover,
.uso-floating-new-lead:focus {
    background: var(--uso-primary-hover) !important;
}

/* Login */

.uso-login-page {
    background:
        radial-gradient(circle at 18% 8%, rgba(31, 58, 95, 0.10), transparent 30%),
        linear-gradient(180deg, #f4f6f8 0%, #eef2f6 100%) !important;
}

.uso-login-logo {
    border-radius: var(--uso-radius-lg) !important;
    background: var(--uso-primary) !important;
    box-shadow: var(--uso-shadow-soft) !important;
}

.uso-login-brand h1 {
    color: var(--uso-text) !important;
    font-weight: 760 !important;
    letter-spacing: -0.04em !important;
}

.uso-login-brand p,
.uso-login-note {
    color: var(--uso-muted) !important;
}

.uso-login-card {
    border-radius: var(--uso-radius-xl) !important;
    border: 1px solid var(--uso-border) !important;
    box-shadow: var(--uso-shadow-soft) !important;
}

/* Help */

.uso-help-checklist li,
.uso-help-rule,
.uso-help-details,
.uso-system-row,
.uso-check-row {
    border-radius: var(--uso-radius-md) !important;
    background: var(--uso-surface-soft) !important;
    border: 1px solid var(--uso-border-soft) !important;
}

.uso-help-checklist li::before,
.uso-help-rule span {
    background: var(--uso-primary) !important;
}

/* Target bars */

.uso-target-bar {
    background: #edf1f6 !important;
}

.uso-target-bar-fill {
    background: var(--uso-primary) !important;
}

/* Proof thumbs */

.uso-proof-thumb {
    border-radius: var(--uso-radius-md) !important;
    border: 1px solid var(--uso-border) !important;
}

/* Mobile density */

@media (max-width: 480px) {
    .uso-app {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .uso-card {
        padding: 13px !important;
    }

    .uso-brand-title {
        font-size: 20px !important;
    }

    .uso-card-title {
        font-size: 14.5px !important;
    }

    .uso-button {
        width: 100%;
    }

    .uso-actions {
        grid-template-columns: 1fr !important;
    }
}

/* iOS Safari input focus zoom prevention */
@media (max-width: 768px) {
    .uso-input,
    .uso-textarea,
    select.uso-input,
    .uso-login-card input[type="text"],
    .uso-login-card input[type="password"],
    .uso-login-card input[type="email"],
    .uso-login-card input[type="number"],
    .uso-login-card input[type="url"],
    .uso-login-card textarea,
    input.uso-input,
    textarea.uso-input {
        font-size: 16px !important;
    }

    .uso-input,
    select.uso-input {
        min-height: 44px !important;
        padding: 10px 11px !important;
    }

    .uso-textarea,
    textarea.uso-input {
        min-height: 112px !important;
        line-height: 1.45 !important;
    }
}

.uso-form-top-error {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: var(--uso-radius-md);
    background: var(--uso-danger-soft);
    border: 1px solid #fecdca;
    color: var(--uso-danger);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 760;
}

.uso-topbar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.uso-topbar-help {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: var(--uso-radius-sm);
    background: var(--uso-surface);
    border: 1px solid var(--uso-border);
    color: var(--uso-text-soft);
    font-size: 11px;
    font-weight: 720;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
}

.uso-topbar-help:hover,
.uso-topbar-help:focus {
    background: var(--uso-bg-soft);
    border-color: var(--uso-border-strong);
    color: var(--uso-text);
    text-decoration: none;
}

@media (max-width: 420px) {
    .uso-topbar-actions {
        gap: 6px;
    }

    .uso-topbar-help,
    .uso-user-pill {
        font-size: 10.5px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Fix iOS/Safari date/datetime input horizontal overflow */
.uso-app *,
.uso-app *::before,
.uso-app *::after {
    box-sizing: border-box;
}

.uso-app input,
.uso-app textarea,
.uso-app select {
    max-width: 100%;
}

.uso-app input[type="date"],
.uso-app input[type="datetime-local"],
.uso-app input[type="time"],
.uso-app input[type="month"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    appearance: none;
}

.uso-app .uso-field {
    min-width: 0;
    max-width: 100%;
}

.uso-app .uso-grid {
    min-width: 0;
    max-width: 100%;
}