/* Simplified setup styles */
        body {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            align-items: center;    /* center items horizontally */
            justify-content: flex-start;
            min-height: 100vh;
            padding: 5vh 0;
        }
        h3 {font-weight: bold;}
        .setup-container {
            max-width: 40rem;
            width: 100%;
        }

        .setup-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .setup-header h1 {
            color: var(--color-dark-blue);
            margin-bottom: 0.5rem;
        }
        
        .setup-header p {
            color: oklch(from var(--color-dark-blue) l c h / 70%);
        }
        svg#Riffle-logo {width: 12rem;padding-bottom: 5vh}
        
       /* Simple progress dots */
        .progress-dots {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 3rem;
        }
        
        .dot {
            width: 0.75rem;
            height: 0.75rem;
            border-radius: var(--radius-rounded);
            background: oklch(from var(--color-khaki) l c h / 30%);
            transition: all 0.3s ease;
        }
        
        .dot.active {
            background: var(--color-blue);
            transform: scale(1.3);
        }
        
        .dot.completed {
            background: var(--color-green);
        }
        
        
        /* primary other button styles when icon is on the right */
        button.primary.go-next i {padding-left: 1.25rem;}

        .oauth-grid {
            display: grid;
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .oauth-btn {
            color: var(--color-white);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            padding: .5rem;
            background: var(--color-none);
            border-radius: var(--primary-radius-and-padding);
            font-size: var(--font-size-large);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .oauth-btn.gmail {
            border: 2px solid #EA4335;
            background: #EA4335
        }
        .oauth-btn.outlook {
            border: 2px solid #0364B8;
            background: #0364B8
        }
        .oauth-btn svg {
            background: var(--color-white);
            border-radius: 50%;
            padding: 4px;
        }
        /* Add hover styles only for desktop */
        @media (hover: hover) and (pointer: fine) {
            .oauth-btn:hover {
                border-color: var(--color-khaki);
                background: var(--color-faded-teal);
                transform: translateY(-2px);
                box-shadow: var(--shadow-med-base) var(--color-shadows);
                color: var(--color-dark-blue);
            }
        }
        
        .oauth-btn.connected {
            background: oklch(from var(--color-green) l c h / 10%);
            border-color: var(--color-green);
        }
        
        .oauth-btn.connected::after {
            content: "✓";
            margin-left: auto;
            color: var(--color-green);
            font-weight: bold;
        }

        
        /* Form styles */
        .setup-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .select-options {max-height: 11.75rem;}/* override for small area*/
        .select-trigger {min-height: 51px;}

        .select-arrow {opacity: .7;}
        
        /* Custom select styles for single selection */
        .select-option {
            padding: 0.75rem 1rem;
            cursor: pointer;
            transition: background 0.15s ease;
            border-bottom: 1px solid oklch(from var(--color-khaki) l c h / 20%);
        }
        
        .select-option:last-child {
            border-bottom: none;
        }
        
        .select-option:hover {
            background: oklch(from var(--color-khaki) l c h / 20%);
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        
        /* Success animation */
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .step,
        .substep {
            display: none;
            animation: slideUp 0.3s ease-out;
        }
        
        .step.active,
        .substep.active {
            display: block;
        }
        
        /* Button group */
        .button-group {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }
        
        .button-group .btn {
            flex: 1;
        }
        
        /* Why connect message */
        .info-box {
            background: var(--color-faded-teal);
            border-radius: var(--radius-secondary);
            padding: 1rem;
            margin-bottom: var(--primary-radius-and-padding);
            display: inline-grid
        }
        .info-box i {
            justify-self: center;
        }
        
        /* Multi-select styles */
        .multi-select-trigger {
            min-height: 3rem;
            padding: 0.5rem 2.5rem 0.5rem 0.5rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: center;
            justify-content: flex-start;
            text-align: left;
            width: 100%;
            position: relative;
        }
        
        .multi-select-trigger .placeholder-text {
            color: oklch(from var(--color-dark-blue) l c h / 60%);
        }
        
        
        .multi-select-option {
            padding: 0.75rem 1rem;
            cursor: pointer;
            transition: background 0.15s ease;
            border-bottom: 1px solid oklch(from var(--color-khaki) l c h / 20%);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .multi-select-option:last-child {
            border-bottom: none;
        }
        
        .multi-select-option:hover {
            background: oklch(from var(--color-khaki) l c h / 20%);
        }
        
        .multi-select-checkbox {
            width: 1.25rem;
            height: 1.25rem;
            border: 2px solid oklch(from var(--color-khaki) l c h / 50%);
            border-radius: var(--radius-secondary);
            position: relative;
            flex-shrink: 0;
            transition: all 0.2s ease;
        }
        
        .multi-select-option.selected .multi-select-checkbox {
            background: var(--color-blue);
            border-color: var(--color-blue);
        }
        
        .multi-select-option.selected .multi-select-checkbox::after {
            content: '';
            position: absolute;
            left: 4px;
            top: 1px;
            width: 6px;
            height: 10px;
            border: solid var(--color-white);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        
        /* Setup progress screen styles */
        .setup-progress {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            padding: 3rem 0;
        }
        
        .progress-container {
            width: 100%;
            height: 8px;
            background: oklch(from var(--color-khaki) l c h / 20%);
            border-radius: 4px;
            overflow: hidden;
            position: relative;
        }
        
        .progress-message {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.125rem;
            color: var(--color-dark-blue);
        }
        
        .progress-message i {
            color: var(--color-blue);
            animation: spin 1s linear infinite;
        }
        
        .progress-message span,
        .progress-details small {
            transition: opacity 0.15s ease;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .progress-details {
            text-align: center;
            color: oklch(from var(--color-dark-blue) l c h / 60%);
        }
        
        /* Hide progress dots on final screen */
        body.setup-complete .progress-dots {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        /* Address confirmation styles */
        
        .address-box h3 {
            color: var(--color-dark-blue);
            margin-bottom: 0.75rem;
            font-size: 1.125rem;
        }
        
        .address-details {
            line-height: 1.8;
            color: var(--color-dark-blue);
        }
        
        .address-details .line {
            display: block;
        }
        
        .edit-link {
            display: inline-block;
            margin-top: 1rem;
            color: var(--color-blue);
            text-decoration: none;
            font-size: 0.875rem;
            cursor: pointer;
            transition: opacity 0.15s ease;
        }
        
        .edit-link:hover {
            opacity: 0.8;
            text-decoration: underline;
        }
        
        .address-edit-form {
            display: none;
        }
        
        .address-edit-form.show {
            display: block;
        }
        
        @media screen and (max-width: 350px) {
            /* Really small layout */
            .trade-grid {
                grid-template-columns: repeat(1, 1fr);
            }
        }
        @media screen and (max-width: 500px) {
            /* Mobile layout */
            .button-group {
                flex-direction:column-reverse
            }
        }