* { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      /* Light Theme (Default) */
      --bg: #f8fafc;
      --card-bg: rgba(255, 255, 255, 0.85);
      --border: rgba(0, 0, 0, 0.1);
      --text: #0f172a;
      --text-muted: #64748b;
      --accent: #8b5cf6;
      --accent-hover: #7c3aed;
      --input-bg: rgba(255, 255, 255, 0.9);
      --input-border: rgba(0, 0, 0, 0.2);
      --c1: #a78bfa; --c2: #38bdf8; --c3: #f472b6;
      --card-shadow: 0 20px 40px rgba(0,0,0,0.08);
      --danger: #ef4444; --success: #22c55e;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #0f172a;
        --card-bg: rgba(30, 41, 59, 0.75);
        --border: rgba(255, 255, 255, 0.15);
        --text: #f8fafc;
        --text-muted: #94a3b8;
        --input-bg: rgba(15, 23, 42, 0.6);
        --input-border: rgba(255, 255, 255, 0.2);
        --card-shadow: 0 20px 40px rgba(0,0,0,0.3);
      }
    }
    body {
      font-family: 'Outfit', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex; flex-direction: column;
      overflow-x: hidden;
      transition: background 0.3s, color 0.3s;
    }

    /* Rainbow Orbs Background */
    .orb { position: fixed; border-radius: 50%; filter: blur(80px); opacity: 0.5; z-index: -1; animation: drift 15s infinite alternate; }
    .orb-1 { width: 500px; height: 500px; background: var(--c1); top: -100px; left: -100px; }
    .orb-2 { width: 400px; height: 400px; background: var(--c2); bottom: -50px; right: -50px; animation-duration: 20s; }
    .orb-3 { width: 300px; height: 300px; background: var(--c3); top: 50%; left: 50%; transform: translate(-50%, -50%); animation-duration: 25s; }
    @keyframes drift { 0% { transform: translate(0, 0); } 100% { transform: translate(50px, 50px); } }

    /* Nav */
    nav {
      padding: 16px 32px; display: flex; justify-content: space-between; align-items: center;
      background: var(--card-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
      z-index: 10; transition: background 0.3s, border 0.3s;
    }
    .logo {
      font-size: 24px; font-weight: 700;
      background: linear-gradient(90deg, var(--c1), var(--c2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      cursor: pointer;
    }
    .nav-actions { display: flex; gap: 12px; align-items: center; }
    .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); padding: 8px 16px; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-weight: 500; }
    .btn-ghost:hover { background: rgba(139,92,246,0.1); border-color: var(--accent); }
    .btn-primary { background: var(--accent); color: white; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
    .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 0 15px rgba(139,92,246,0.4); }
    .theme-toggle { background: transparent; border: none; font-size: 20px; cursor: pointer; padding: 8px; border-radius: 50%; color: var(--text); transition: background 0.2s; }
    .theme-toggle:hover { background: rgba(139,92,246,0.1); }

    /* Main Container */
    #app { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1; }

    /* Google-Style Wide Card */
    .auth-card {
      display: flex; flex-direction: row;
      background: var(--card-bg);
      backdrop-filter: blur(24px);
      border: 1px solid var(--border);
      border-radius: 24px;
      width: 100%; max-width: 1040px;
      min-height: 480px;
      padding: 48px;
      box-shadow: var(--card-shadow);
      transition: background 0.3s, border 0.3s, box-shadow 0.3s;
    }
    .auth-left { flex: 1; padding-right: 48px; display: flex; flex-direction: column; }
    .auth-right { flex: 1.2; display: flex; flex-direction: column; justify-content: center; }

    .auth-left h1 { font-size: 36px; font-weight: 600; margin-bottom: 16px; margin-top: 24px; color: var(--text); }
    .auth-left p { font-size: 16px; color: var(--text-muted); line-height: 1.6; }
    
    .auth-logo { font-size: 28px; font-weight: 700; background: linear-gradient(90deg, var(--c1), var(--c2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

    /* Forms with floating labels */
    .form-group { margin-bottom: 24px; position: relative; }
    .form-group input {
      width: 100%; height: 56px; padding: 24px 16px 8px 16px; font-size: 16px; border-radius: 8px;
      background: var(--input-bg); border: 1px solid var(--input-border);
      color: var(--text); outline: none; transition: all 0.2s;
    }
    .form-group label {
      position: absolute; top: 20px; left: 16px; font-size: 16px; color: var(--text-muted);
      pointer-events: none; transition: all 0.2s; line-height: 1;
    }
    .form-group input:focus, .form-group input:not(:placeholder-shown) { border-color: var(--c2); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); }
    .form-group input:focus + label, .form-group input:not(:placeholder-shown) + label {
      top: 8px; font-size: 12px; color: var(--c2);
    }

    /* Footer Buttons inside Auth Card */
    .auth-footer-actions {
      display: flex; justify-content: space-between; align-items: center; margin-top: 32px;
    }
    .auth-link { color: var(--c2); text-decoration: none; font-weight: 500; font-size: 14px; }
    .auth-link:hover { text-decoration: underline; }
    .btn-next {
      background: var(--accent); color: white; border: none; padding: 12px 32px; border-radius: 24px;
      font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s;
    }
    .btn-next:hover { background: var(--accent-hover); box-shadow: 0 0 15px rgba(139,92,246,0.4); }
    .btn-next:disabled { opacity: 0.5; cursor: not-allowed; }

    /* Action List (For Account Type Selection) */
    .action-list { display: flex; flex-direction: column; gap: 12px; }
    .action-btn {
      display: flex; align-items: center; gap: 16px; padding: 20px;
      background: var(--input-bg); border: 1px solid var(--border); border-radius: 12px;
      cursor: pointer; transition: all 0.2s; color: var(--text); text-align: left;
    }
    .action-btn:hover { border-color: var(--accent); background: rgba(139,92,246,0.05); transform: translateY(-2px); }
    .action-icon { font-size: 24px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(139,92,246,0.1); color: var(--accent); border-radius: 50%; }
    .action-text h3 { font-size: 16px; margin-bottom: 4px; }
    .action-text p { font-size: 13px; color: var(--text-muted); }

    /* User Chip for Step 2 */
    .user-chip {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(139,92,246,0.1); border: 1px solid var(--accent);
      border-radius: 20px; padding: 6px 16px 6px 6px; margin-bottom: 32px;
      cursor: pointer; transition: background 0.2s;
    }
    .user-chip:hover { background: rgba(139,92,246,0.2); }
    .chip-avatar {
      width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: white;
      display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: bold;
    }
    .chip-name { font-size: 14px; font-weight: 500; color: var(--text); }
    .chip-caret { font-size: 10px; color: var(--text-muted); }

    /* Slide animation */
    @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
    .slide-in { animation: slideIn 0.3s ease-out; }

    /* Alert */
    .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 24px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
    .alert-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: var(--danger); }
    .alert-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2); color: var(--success); }

    /* Responsive */
    @media (max-width: 768px) {
      .auth-card { flex-direction: column; padding: 32px; min-height: auto; }
      .auth-left { padding-right: 0; margin-bottom: 32px; }
    }

    /* Landing specific */
    .hero { text-align: center; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; }
    .hero h1 { font-size: clamp(48px, 8vw, 80px); font-weight: 800; line-height: 1.1; margin-bottom: 24px; color: var(--text); }
    .hero h1 span { background: linear-gradient(135deg, var(--c1), var(--c2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .hero p { font-size: 22px; color: var(--text-muted); margin-bottom: 48px; max-width: 600px; }
    
    /* Dashboard specific */
    .dash-wrap { width: 100%; max-width: 800px; margin: 0 auto; background: var(--card-bg); backdrop-filter: blur(24px); border: 1px solid var(--border); border-radius: 24px; padding: 48px; box-shadow: var(--card-shadow); }
    .dash-header { display: flex; align-items: center; gap: 24px; margin-bottom: 48px; }
    .avatar-lg { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: bold; color: white; flex-shrink: 0; }
    .dash-info h2 { font-size: 28px; margin-bottom: 4px; color: var(--text); }
    .dash-info p { color: var(--text-muted); }
    .badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; background: rgba(139,92,246,0.15); color: var(--accent); margin-top: 8px; }
    .info-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); }
    .info-row:last-child { border-bottom: none; }
    .dash-actions { margin-top: 32px; display: flex; gap: 16px; }

    /* Google-style dashboard layout */
    .g-layout { display: flex; width: 100%; max-width: 1100px; margin: 0 auto; gap: 24px; align-items: flex-start; }
    .g-sidebar { width: 220px; flex-shrink: 0; background: var(--card-bg); backdrop-filter: blur(24px); border: 1px solid var(--border); border-radius: 20px; padding: 12px 8px; box-shadow: var(--card-shadow); position: sticky; top: 96px; display: flex; flex-direction: column; }
    .g-sidebar-item { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; cursor: pointer; transition: background 0.15s; color: var(--text); font-size: 14px; font-weight: 500; white-space: nowrap; }
    .g-sidebar-item:hover { background: rgba(139,92,246,0.08); }
    .g-sidebar-item.active { background: rgba(139,92,246,0.15); color: var(--accent); }
    .g-sidebar-item .si-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
    .g-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
    .g-profile-card { background: var(--card-bg); backdrop-filter: blur(24px); border: 1px solid var(--border); border-radius: 20px; padding: 28px 32px; box-shadow: var(--card-shadow); display: flex; align-items: center; gap: 24px; }
    .g-profile-card .avatar-lg { width: 88px; height: 88px; font-size: 34px; flex-shrink: 0; }
    .g-profile-info h2 { font-size: 24px; margin-bottom: 4px; }
    .g-profile-info p { color: var(--text-muted); font-size: 14px; }
    .g-quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .g-quick-btn { background: var(--card-bg); backdrop-filter: blur(24px); border: 1px solid var(--border); border-radius: 16px; padding: 20px 16px; text-align: center; cursor: pointer; transition: all 0.2s; box-shadow: var(--card-shadow); }
    .g-quick-btn:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(139,92,246,0.2); }
    .g-quick-btn .qb-icon { font-size: 26px; margin-bottom: 8px; }
    .g-quick-btn .qb-label { font-size: 13px; font-weight: 600; color: var(--text); }
    .g-section-card { background: var(--card-bg); backdrop-filter: blur(24px); border: 1px solid var(--border); border-radius: 20px; padding: 24px 28px; box-shadow: var(--card-shadow); }
    .g-section-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 16px; color: var(--text); }
    .security-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); }
    .security-item:last-child { border-bottom: none; }
    .security-item-left { display: flex; align-items: center; gap: 14px; }
    .security-item-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
    .si-green { background: rgba(34,197,94,0.12); }
    .si-yellow { background: rgba(234,179,8,0.12); }
    .si-red { background: rgba(239,68,68,0.12); }
    .si-blue { background: rgba(56,189,248,0.12); }
    .security-item-text h4 { font-size: 14px; font-weight: 600; color: var(--text); }
    .security-item-text p { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .status-pill { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
    .pill-green { background: rgba(34,197,94,0.15); color: #16a34a; }
    .pill-yellow { background: rgba(234,179,8,0.15); color: #ca8a04; }
    .pill-red { background: rgba(239,68,68,0.15); color: #dc2626; }
    @media (max-width: 900px) { .g-layout { flex-direction: column; } .g-sidebar { width: 100%; position: static; flex-direction: row; flex-wrap: wrap; } .g-quick-actions { grid-template-columns: repeat(2, 1fr); } }