/* ============================================================
       CSS VARIABLES & RESET
       ============================================================ */
    :root {
        --bg:           #FAFAFA;
        --bg-card:      #FFFFFF;
        --bg-muted:     #F4F4F6;
        --bg-accent:    #F0EDFF;
        --border:       #E5E5EA;
        --border-focus: #6C5CE7;
        --text:         #1A1A2E;
        --text-muted:   #6B7280;
        --text-light:   #9CA3AF;
        --primary:      #6C5CE7;
        --primary-hover:#5A4BD1;
        --primary-soft: #EDE9FE;
        --success:      #10B981;
        --success-soft: #D1FAE5;
        --warning:      #F59E0B;
        --warning-soft: #FEF3C7;
        --danger:       #EF4444;
        --danger-soft:  #FEE2E2;
        --info:         #3B82F6;
        --info-soft:    #DBEAFE;
        --radius:       12px;
        --radius-sm:    8px;
        --radius-xs:    6px;
        --shadow-sm:    0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
        --shadow:       0 4px 24px rgba(0,0,0,.06);
        --shadow-lg:    0 12px 48px rgba(0,0,0,.08);
        --transition:   .25s cubic-bezier(.4,0,.2,1);
        --font:         'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        --font-mono:    'JetBrains Mono', monospace;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
        font-family: var(--font);
        background: var(--bg);
        color: var(--text);
        line-height: 1.6;
        min-height: 100vh;
        -webkit-font-smoothing: antialiased;
    }

    /* ============================================================
       LAYOUT
       ============================================================ */
    .container {
        max-width: 720px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* ============================================================
       HEADER
       ============================================================ */
    .site-header {
        background: var(--bg-card);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 100;
        backdrop-filter: blur(12px);
        background: rgba(255,255,255,.92);
    }
    .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 0;
        gap: 16px;
    }
    .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: var(--text);
    }
    .logo-icon {
        width: 36px; height: 36px;
        background: var(--primary);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 700;
        font-size: 15px;
    }
    .logo-text {
        font-weight: 700;
        font-size: 18px;
        letter-spacing: -.3px;
    }
    .logo-sub {
        font-size: 11px;
        color: var(--text-muted);
        font-weight: 400;
        display: block;
        line-height: 1.2;
    }
    .logo-img {
        height: 32px;
        max-height: 32px;
        width: auto;
        border-radius: var(--radius-sm);
        object-fit: contain;
    }
    .logo-img-lg {
        height: 50px;
        max-height: 50px;
        width: auto;
        margin: 0 auto 10px;
        display: block;
        object-fit: contain;
    }
    .header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .user-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        background: var(--bg-muted);
        border-radius: 50px;
        font-size: 13px;
        font-weight: 500;
        color: var(--text);
    }
    .user-badge .avatar {
        width: 26px; height: 26px;
        background: var(--primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
    }

    /* ============================================================
       BUTTONS
       ============================================================ */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 22px;
        border: none;
        border-radius: var(--radius-sm);
        font-family: var(--font);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all var(--transition);
        text-decoration: none;
        white-space: nowrap;
    }
    .btn-primary {
        background: var(--primary);
        color: #fff;
    }
    .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow); }
    .btn-outline {
        background: transparent;
        color: var(--text);
        border: 1.5px solid var(--border);
    }
    .btn-outline:hover { border-color: var(--primary); color: var(--primary); }
    .btn-ghost {
        background: transparent;
        color: var(--text-muted);
        padding: 8px 14px;
        font-size: 13px;
    }
    .btn-ghost:hover { color: var(--primary); background: var(--primary-soft); }
    .btn-danger { background: var(--danger); color: #fff; }
    .btn-danger:hover { background: #DC2626; }
    .btn-sm { padding: 7px 16px; font-size: 13px; }
    .btn-block { width: 100%; }
    .btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
    .btn .spinner {
        width: 16px; height: 16px;
        border: 2px solid rgba(255,255,255,.3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin .6s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ============================================================
       FORMS
       ============================================================ */
    .form-group { margin-bottom: 20px; }
    .form-label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 6px;
    }
    .form-label .required { color: var(--danger); margin-left: 2px; }
    .form-hint {
        font-size: 12.5px;
        color: var(--text-muted);
        margin-bottom: 8px;
        line-height: 1.5;
    }
    .form-input,
    .form-select,
    .form-textarea {
        width: 100%;
        padding: 11px 14px;
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        font-family: var(--font);
        font-size: 14px;
        color: var(--text);
        background: var(--bg-card);
        transition: all var(--transition);
        outline: none;
    }
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        border-color: var(--border-focus);
        box-shadow: 0 0 0 3px rgba(108,92,231,.12);
    }
    .form-input.error,
    .form-select.error,
    .form-textarea.error {
        border-color: var(--danger);
        box-shadow: 0 0 0 3px rgba(239,68,68,.1);
    }
    .form-error {
        font-size: 12px;
        color: var(--danger);
        margin-top: 4px;
        display: none;
    }
    .form-error.visible { display: block; }
    .rut-valid-msg {
        font-size: 12px;
        color: var(--success);
        font-weight: 600;
        margin-top: 4px;
    }
    .form-select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        padding-right: 36px;
    }
    .form-textarea { resize: vertical; min-height: 120px; }
    .form-textarea.tall { min-height: 180px; }

    /* ============================================================
       CARDS
       ============================================================ */
    .card {
        background: var(--bg-card);
        border-radius: var(--radius);
        border: 1px solid var(--border);
        overflow: hidden;
    }
    .card-body { padding: 28px; }
    .card-header {
        padding: 20px 28px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .card-title {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -.2px;
    }

    /* ============================================================
       ACCORDION (FORM STEPS)
       ============================================================ */
    .accordion { display: flex; flex-direction: column; gap: 8px; }

    .accordion-item {
        background: var(--bg-card);
        border: 1.5px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        transition: border-color var(--transition), box-shadow var(--transition);
    }
    .accordion-item.active {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(108,92,231,.08);
    }
    .accordion-item.completed {
        border-color: var(--success);
    }
    .accordion-item.hidden-question { display: none; }

    .accordion-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px 22px;
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        font-family: var(--font);
        transition: background var(--transition);
    }
    .accordion-trigger:hover { background: var(--bg-muted); }

    .accordion-step {
        width: 30px; height: 30px;
        border-radius: 50%;
        background: var(--bg-muted);
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        flex-shrink: 0;
        transition: all var(--transition);
    }
    .accordion-item.active .accordion-step {
        background: var(--primary);
        color: #fff;
    }
    .accordion-item.completed .accordion-step {
        background: var(--success);
        color: #fff;
    }
    .accordion-item.completed .accordion-step::after {
        content: '✓';
    }
    .accordion-item.completed .accordion-step .step-num { display: none; }

    .accordion-label {
        flex: 1;
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
    }
    .accordion-summary {
        font-size: 12px;
        color: var(--text-muted);
        font-weight: 400;
        display: block;
        margin-top: 2px;
        max-width: 400px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .accordion-chevron {
        width: 20px; height: 20px;
        color: var(--text-light);
        transition: transform var(--transition);
        flex-shrink: 0;
    }
    .accordion-item.active .accordion-chevron { transform: rotate(180deg); }

    .accordion-panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .35s;
    }
    .accordion-item.active .accordion-panel {
        max-height: 800px;
    }
    .accordion-panel-inner {
        padding: 0 22px 22px 66px;
    }

    /* ============================================================
       FILE DROP ZONE
       ============================================================ */
    .file-drop {
        border: 2px dashed var(--border);
        border-radius: var(--radius-sm);
        padding: 30px 20px;
        text-align: center;
        cursor: pointer;
        transition: all var(--transition);
        background: var(--bg-muted);
    }
    .file-drop:hover,
    .file-drop.dragover {
        border-color: var(--primary);
        background: var(--primary-soft);
    }
    .file-drop-icon {
        font-size: 28px;
        margin-bottom: 8px;
        opacity: .5;
    }
    .file-drop-text {
        font-size: 13px;
        color: var(--text-muted);
    }
    .file-drop-text strong { color: var(--primary); }
    .file-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
    .file-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-xs);
        font-size: 13px;
    }
    .file-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .file-item-size { color: var(--text-muted); font-size: 11px; font-family: var(--font-mono); }
    .file-item-remove {
        background: none; border: none; cursor: pointer;
        color: var(--text-light); font-size: 18px; line-height: 1;
        padding: 0 4px;
    }
    .file-item-remove:hover { color: var(--danger); }

    /* ============================================================
       AUTH SCREENS
       ============================================================ */
    .auth-wrapper {
        min-height: calc(100vh - 65px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
    }
    .auth-card {
        width: 100%;
        max-width: 420px;
    }
    .auth-card .card-body { padding: 36px; }
    .auth-title {
        font-size: 22px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 4px;
        letter-spacing: -.3px;
    }
    .auth-subtitle {
        text-align: center;
        color: var(--text-muted);
        font-size: 14px;
        margin-bottom: 28px;
    }
    .auth-tabs {
        display: flex;
        border-bottom: 1.5px solid var(--border);
        margin-bottom: 28px;
    }
    .auth-tab {
        flex: 1;
        padding: 12px;
        text-align: center;
        background: none;
        border: none;
        font-family: var(--font);
        font-size: 14px;
        font-weight: 600;
        color: var(--text-muted);
        cursor: pointer;
        position: relative;
        transition: color var(--transition);
    }
    .auth-tab.active { color: var(--primary); }
    .auth-tab.active::after {
        content: '';
        position: absolute;
        bottom: -1.5px;
        left: 0; right: 0;
        height: 2px;
        background: var(--primary);
        border-radius: 2px 2px 0 0;
    }
    .otp-input-group {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin: 20px 0;
    }
    .otp-digit {
        width: 48px; height: 56px;
        text-align: center;
        font-size: 22px;
        font-weight: 700;
        font-family: var(--font-mono);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        outline: none;
        transition: all var(--transition);
    }
    .otp-digit:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(108,92,231,.12);
    }

    /* ============================================================
       TICKET LIST
       ============================================================ */
    .tickets-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        gap: 12px;
        flex-wrap: wrap;
    }
    .tickets-title {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -.3px;
    }
    .filter-tabs {
        display: flex;
        gap: 4px;
        background: var(--bg-muted);
        border-radius: var(--radius-sm);
        padding: 3px;
    }
    .filter-tab {
        padding: 6px 16px;
        border: none;
        background: none;
        font-family: var(--font);
        font-size: 13px;
        font-weight: 500;
        color: var(--text-muted);
        border-radius: var(--radius-xs);
        cursor: pointer;
        transition: all var(--transition);
    }
    .filter-tab.active {
        background: var(--bg-card);
        color: var(--text);
        box-shadow: var(--shadow-sm);
    }

    .ticket-row {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 20px;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
        transition: background var(--transition);
    }
    .ticket-row:last-child { border-bottom: none; }
    .ticket-row:hover { background: var(--bg-muted); }

    .ticket-status-dot {
        width: 10px; height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .ticket-info { flex: 1; min-width: 0; }
    .ticket-number {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--text-muted);
    }
    .ticket-subject {
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ticket-meta {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-shrink: 0;
    }
    .badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        border-radius: 50px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }
    .badge-status { color: #fff; }
    .ticket-date {
        font-size: 12px;
        color: var(--text-light);
        white-space: nowrap;
    }

    /* ============================================================
       TICKET DETAIL
       ============================================================ */
    .detail-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text-muted);
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 16px;
        cursor: pointer;
        transition: color var(--transition);
    }
    .detail-back:hover { color: var(--primary); }
    .detail-header {
        margin-bottom: 24px;
    }
    .detail-number {
        font-family: var(--font-mono);
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 4px;
    }
    .detail-subject {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -.3px;
        margin-bottom: 12px;
    }
    .detail-badges {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 16px;
    }
    .detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 24px;
    }
    .detail-field-label {
        font-size: 11px;
        color: var(--text-light);
        text-transform: uppercase;
        letter-spacing: .5px;
        font-weight: 600;
        margin-bottom: 2px;
    }
    .detail-field-value {
        font-size: 14px;
        font-weight: 500;
    }

    /* Comments */
    .comments-section { margin-top: 28px; }
    .comment-item {
        display: flex;
        gap: 12px;
        padding: 16px 0;
        border-bottom: 1px solid var(--bg-muted);
    }
    .comment-item:last-of-type { border-bottom: none; }
    .comment-avatar {
        width: 34px; height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        flex-shrink: 0;
    }
    .comment-avatar.tech { background: var(--info); }
    .comment-avatar.client { background: var(--primary); }
    .comment-avatar.system { background: var(--text-light); }
    .comment-body { flex: 1; min-width: 0; }
    .comment-author {
        font-size: 13px;
        font-weight: 600;
    }
    .comment-date {
        font-size: 11px;
        color: var(--text-light);
        margin-left: 8px;
    }
    .comment-text {
        font-size: 14px;
        color: var(--text);
        margin-top: 4px;
        line-height: 1.6;
        white-space: pre-wrap;
    }
    .comment-form {
        margin-top: 16px;
        display: flex;
        gap: 10px;
    }
    .comment-form .form-textarea { min-height: 80px; }

    /* ============================================================
       SATISFACTION MODAL
       ============================================================ */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 1000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        backdrop-filter: blur(4px);
    }
    .modal-overlay.open { display: flex; }
    .modal-box {
        background: var(--bg-card);
        border-radius: var(--radius);
        box-shadow: var(--shadow-lg);
        width: 100%;
        max-width: 440px;
        padding: 36px;
        animation: modalIn .3s ease;
    }
    @keyframes modalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
    .modal-title {
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 8px;
    }
    .modal-text {
        text-align: center;
        font-size: 14px;
        color: var(--text-muted);
        margin-bottom: 24px;
    }
    .stars-group {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-bottom: 20px;
    }
    .star-btn {
        background: none;
        border: none;
        font-size: 32px;
        cursor: pointer;
        color: var(--border);
        transition: color .15s, transform .15s;
    }
    .star-btn.active,
    .star-btn:hover { color: var(--warning); transform: scale(1.15); }

    /* ============================================================
       TOAST NOTIFICATIONS
       ============================================================ */
    .toast-container {
        position: fixed;
        top: 80px;
        right: 20px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .toast {
        padding: 14px 20px;
        border-radius: var(--radius-sm);
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        box-shadow: var(--shadow-lg);
        animation: toastIn .3s ease;
        max-width: 380px;
    }
    .toast.success { background: var(--success); }
    .toast.error { background: var(--danger); }
    .toast.info { background: var(--info); }
    @keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

    /* ============================================================
       SECTION NAVIGATOR
       ============================================================ */
    .section-nav {
        display: flex;
        gap: 4px;
        background: var(--bg-muted);
        border-radius: var(--radius-sm);
        padding: 3px;
        margin: 24px 0;
    }
    .section-nav-btn {
        flex: 1;
        padding: 10px 16px;
        border: none;
        background: none;
        font-family: var(--font);
        font-size: 14px;
        font-weight: 600;
        color: var(--text-muted);
        border-radius: var(--radius-xs);
        cursor: pointer;
        transition: all var(--transition);
    }
    .section-nav-btn.active {
        background: var(--bg-card);
        color: var(--text);
        box-shadow: var(--shadow-sm);
    }

    /* ============================================================
       VIEWS (show/hide)
       ============================================================ */
    .view { display: none; }
    .view.active { display: block; }

    /* ============================================================
       ALERT
       ============================================================ */
    .alert {
        padding: 14px 18px;
        border-radius: var(--radius-sm);
        font-size: 14px;
        margin-bottom: 20px;
        display: none;
    }
    .alert.visible { display: block; }
    .alert-error { background: var(--danger-soft); color: #991B1B; }
    .alert-success { background: var(--success-soft); color: #065F46; }

    /* ============================================================
       EMPTY STATE
       ============================================================ */
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: var(--text-muted);
    }
    .empty-state-icon { font-size: 48px; margin-bottom: 12px; opacity: .4; }
    .empty-state-text { font-size: 15px; font-weight: 500; }

    /* ============================================================
       PAGINATION
       ============================================================ */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 16px;
    }
    .page-btn {
        padding: 6px 12px;
        border: 1px solid var(--border);
        background: var(--bg-card);
        border-radius: var(--radius-xs);
        font-family: var(--font);
        font-size: 13px;
        cursor: pointer;
        transition: all var(--transition);
    }
    .page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    .page-btn:hover:not(.active) { border-color: var(--primary); }

    /* ============================================================
       SUCCESS SCREEN
       ============================================================ */
    .success-screen {
        text-align: center;
        padding: 60px 20px;
    }
    .success-check {
        width: 72px; height: 72px;
        background: var(--success-soft);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 36px;
        color: var(--success);
    }
    .success-screen h2 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 8px;
    }
    .success-screen .ticket-ref {
        font-family: var(--font-mono);
        font-size: 18px;
        color: var(--primary);
        font-weight: 600;
        margin: 12px 0;
    }

    /* ============================================================
       FOOTER
       ============================================================ */
    .site-footer {
        text-align: center;
        padding: 32px 20px;
        font-size: 12px;
        color: var(--text-light);
    }

    /* ============================================================
       SIDEBAR
       ============================================================ */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 200;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s, visibility .3s;
        backdrop-filter: blur(2px);
    }
    .sidebar-overlay.open { opacity: 1; visibility: visible; }

    .sidebar {
        position: fixed;
        top: 0;
        right: -320px;
        width: 300px;
        max-width: 85vw;
        height: 100vh;
        background: var(--bg-card);
        z-index: 210;
        transition: right .3s cubic-bezier(.4,0,.2,1);
        box-shadow: -8px 0 30px rgba(0,0,0,.1);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    .sidebar.open { right: 0; }

    .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }
    .sidebar-title { font-size: 16px; font-weight: 700; }
    .sidebar-close {
        width: 32px; height: 32px;
        border: none; background: var(--bg-muted);
        border-radius: 50%; font-size: 18px;
        cursor: pointer; display: flex;
        align-items: center; justify-content: center;
        color: var(--text-muted);
        transition: background .2s;
    }
    .sidebar-close:hover { background: var(--border); }

    .sidebar-profile {
        padding: 24px 20px;
        text-align: center;
        border-bottom: 1px solid var(--border);
    }
    .sidebar-avatar {
        width: 52px; height: 52px;
        background: var(--primary);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 20px; font-weight: 700;
        margin: 0 auto 10px;
    }
    .sidebar-name { font-size: 15px; font-weight: 700; }
    .sidebar-company { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
    .sidebar-email { font-size: 12px; color: var(--text-light); margin-top: 4px; font-family: var(--font-mono); }

    .sidebar-nav { padding: 8px 0; flex: 1; }
    .sidebar-link {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 20px;
        text-decoration: none; color: var(--text);
        font-size: 14px; font-weight: 500;
        transition: background .2s;
    }
    .sidebar-link:hover { background: var(--bg-muted); }
    .sidebar-link-icon { font-size: 18px; width: 24px; text-align: center; }
    .sidebar-link-danger { color: var(--danger); }
    .sidebar-link-danger:hover { background: var(--danger-soft); }

    .sidebar-divider { height: 1px; background: var(--border); margin: 8px 0; }
    .sidebar-section-title {
        padding: 8px 20px 4px;
        font-size: 11px; font-weight: 700;
        color: var(--text-light);
        text-transform: uppercase; letter-spacing: .5px;
    }

    .sidebar-country {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 20px;
        text-decoration: none; color: var(--text);
        font-size: 14px; transition: background .2s;
    }
    .sidebar-country:hover { background: var(--bg-muted); }
    .sidebar-country.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
    .sidebar-country-check { margin-left: auto; color: var(--primary); font-weight: 700; }

    /* ============================================================
       HAMBURGER
       ============================================================ */
    .hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        padding: 8px;
        background: none; border: none;
        cursor: pointer;
    }
    .hamburger span {
        display: block;
        width: 20px; height: 2px;
        background: var(--text);
        border-radius: 2px;
        transition: all .25s;
    }
    .header-left { display: flex; align-items: center; gap: 8px; }

    /* ============================================================
       COUNTRY BADGE
       ============================================================ */
    .country-badge {
        display: flex; align-items: center; gap: 6px;
        padding: 6px 12px;
        background: var(--bg-muted);
        border: 1px solid var(--border);
        border-radius: 50px;
        font-family: var(--font);
        font-size: 13px; font-weight: 500;
        cursor: pointer;
        transition: all var(--transition);
    }
    .country-badge:hover { border-color: var(--primary); background: var(--primary-soft); }
    /* Flag badge (CSS tri-color — works on all OS) */
    .flag-badge {
        display: inline-block;
        border-radius: 3px;
        flex-shrink: 0;
        border: 1px solid rgba(0,0,0,.12);
        vertical-align: middle;
        object-fit: cover;
    }

    /* Custom select with flag images */
    .custom-select {
        position: relative;
        width: 100%;
    }
    .custom-select-trigger {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-card);
        font-family: var(--font);
        font-size: 14px;
        cursor: pointer;
        transition: border-color .2s;
    }
    .custom-select-trigger:hover { border-color: var(--primary-light); }
    .custom-select.open .custom-select-trigger { border-color: var(--primary); }
    .custom-select-arrow {
        margin-left: auto;
        color: var(--text-muted);
        font-size: 12px;
    }
    .custom-select-options {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        left: 0; right: 0;
        background: var(--bg-card);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        box-shadow: 0 8px 24px rgba(0,0,0,.1);
        z-index: 50;
        max-height: 260px;
        overflow-y: auto;
    }
    .custom-select.open .custom-select-options { display: block; }
    .custom-select-option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        font-size: 14px;
        cursor: pointer;
        transition: background .15s;
    }
    .custom-select-option:hover { background: var(--bg-muted); }
    .custom-select-option.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
    .country-name-badge { color: var(--text); }

    /* Header user button */
    .header-user-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--bg-card);
        border: 1.5px solid var(--border);
        border-radius: 50px;
        padding: 4px 16px 4px 4px;
        font-family: var(--font);
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        cursor: pointer;
        transition: all .2s;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
    }
    .header-user-btn:hover {
        border-color: var(--primary);
        background: var(--primary-soft);
        box-shadow: 0 2px 8px rgba(108,92,231,.12);
    }
    .header-user-btn .avatar {
        width: 30px; height: 30px; font-size: 12px;
        border-radius: 50%;
        background: var(--primary);
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-weight: 700;
    }
    .header-user-btn .flag-badge {
        margin-left: 6px;
    }
    .header-user-name {
        white-space: nowrap;
    }

    .auth-country-indicator {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        margin-top: 8px;
    }

    /* ============================================================
       TAX ID INPUT WITH LOOKUP
       ============================================================ */
    .tax-input-wrapper {
        display: flex; gap: 8px; align-items: stretch;
    }
    .tax-input-wrapper .form-input { flex: 1; }
    .btn-lookup {
        width: 44px;
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-muted);
        font-size: 18px;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: all var(--transition);
    }
    .btn-lookup:hover { border-color: var(--primary); background: var(--primary-soft); }
    .btn-lookup:disabled { opacity: .4; cursor: not-allowed; }

    .ruc-loading {
        display: flex; align-items: center; gap: 8px;
        font-size: 12px; color: var(--primary);
        margin-top: 6px;
    }
    .spinner-small {
        width: 14px; height: 14px;
        border: 2px solid rgba(108,92,231,.2);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: spin .6s linear infinite;
    }

    .desktop-only { display: flex; }

    /* ============================================================
       RESPONSIVE OVERRIDES
       ============================================================ */
    @media (max-width: 640px) {
        .hamburger { display: flex; }
        .desktop-only { display: none !important; }
        .country-name-badge { display: none; }
        .header-user-name { display: none; }
        .card-body { padding: 20px; }
        .auth-card .card-body { padding: 24px; }
        .accordion-panel-inner { padding: 0 16px 16px 16px; }
        .header-inner { padding: 10px 0; }
        .detail-grid { grid-template-columns: 1fr; }
        .ticket-meta { flex-direction: column; align-items: flex-end; gap: 4px; }
        .otp-digit { width: 42px; height: 48px; font-size: 18px; }
        .tickets-header { flex-direction: column; align-items: flex-start; }
    }