:root {
  /* iOS-like Dark Mode Base */
  --bg-dark: #000000;          
  --bg-base: #121212;          
  --bg-card: #1C1C1E;          
  --bg-card-hover: #2C2C2E;    

  /* Premium Accents */
  --primary: #C6A87C;          
  --primary-light: #D4C19F;
  --primary-dark: #A68A5E;
  --accent: #8E7CC3;           

  /* Typography */
  --text-primary: #FFFFFF;     
  --text-secondary: rgba(235, 235, 245, 0.6); 
  --text-muted: rgba(235, 235, 245, 0.3);     

  /* Structural & iOS Native Feel */
  --border: #38383A;           
  --border-light: rgba(255, 255, 255, 0.1);
  --radius-sm: 8px;
  --radius-md: 14px;           
  --radius-lg: 20px;
  
  /* Utilities */
  --blur-bg: rgba(28, 28, 30, 0.75);
  --success: #32D74B;          
  --error: #FF453A;            
  
  /* Gradients */
  --gradient-1: linear-gradient(135deg, #C6A87C 0%, #A68A5E 100%);
  --gradient-surface: linear-gradient(135deg, #2C2C2E 0%, #1C1C1E 100%);
}

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg-dark); color: var(--text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; }

        .top-bar {
            padding: 1.25rem 2rem;
            border-bottom: 1px solid var(--border);
            display: flex; justify-content: space-between; align-items: center;
            background: var(--blur-bg);
        }
        .top-bar .brand {
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; font-weight: 700; font-size: 2rem;
            background: var(--gradient-1); -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; background-clip: text;
            letter-spacing: 0.05em;
        }

        .page-wrapper { max-width: 700px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

        /* Hero */
        .hero-panel {
            background: var(--gradient-surface);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 24px;
            padding: 1.75rem 2rem;
            margin-bottom: 2rem;
        }
        .hero-grid {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        .hero-main {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .hero-avatar {
            width: 78px;
            height: 78px;
            border-radius: 22px;
            background: rgba(255,255,255,0.08);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2rem;
            flex-shrink: 0;
        }
        .hero-details h1 {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 2.1rem;
            letter-spacing: -0.02em;
            margin-bottom: 0.25rem;
        }
        .hero-details .subtitle {
            color: var(--text-secondary);
            font-size: 0.95rem;
        }
        .hero-chips {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.75rem;
            width: 100%;
        }
        .status-chip {
            background: rgba(26, 20, 37, 0.9);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            padding: 0.85rem 1rem;
            text-decoration: none;
            color: var(--text-primary);
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            transition: border 0.2s ease, transform 0.2s ease;
        }
        .status-chip:hover {
            border-color: var(--primary-light);
            transform: translateY(-2px);
        }
        .status-chip .label {
            font-size: 0.75rem;
            color: var(--text-muted);
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .status-chip .value {
            font-size: 1.45rem;
            font-weight: 700;
        }

        /* Sections */
        .dashboard-section {
            margin-bottom: 2.25rem;
        }
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 1rem;
        }
        .section-header h3 {
            font-size: 1rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-secondary);
        }
        .section-header p {
            color: var(--text-muted);
            font-size: 0.9rem;
        }
        /* Quick actions grid */
        .actions-grid {
            display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
        }
        .action-card {
            background: linear-gradient(145deg, var(--bg-card), #1D172B);
            border: 1px solid var(--border);
            border-radius: 16px; padding: 1.5rem; text-decoration: none;
            color: var(--text-primary); transition: all 0.25s;
            display: flex; flex-direction: column; gap: 0.5rem;
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
        }
        .action-card:hover {
            border-color: var(--primary-light);
            background: var(--bg-card-hover);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(108, 60, 225, 0.15);
        }
        .action-icon {
            display: flex; align-items: center; justify-content: center;
            width: 32px; height: 32px;
            color: #a855f7; /* Accent color */
        }
        .action-icon svg {
            width: 32px; height: 32px;
            stroke: #a855f7;
            stroke-width: 1.5;
        }
        .action-title {
            font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.1rem; font-weight: 600;
        }
        .action-desc {
            color: var(--text-muted); font-size: 0.85rem; line-height: 1.4;
        }
        .action-badge {
            display: inline-block; padding: 0.2rem 0.6rem; border-radius: 50px;
            font-size: 0.7rem; font-weight: 600; margin-top: 0.25rem; width: fit-content;
        }
        .badge-new { background: rgba(16, 185, 129, 0.15); color: #6EE7B7; }
        .badge-count { background: rgba(236, 72, 153, 0.15); color: #F9A8D4; }

        .dual-panel {
            display: grid;
            grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
            gap: 1.25rem;
            margin-bottom: 2rem;
        }
        .insight-panel,
        .partner-widget {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 1.5rem;
        }
        .insight-panel h3 { margin-bottom: 0.5rem; }
        .next-steps {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-top: 1rem;
        }
        .next-steps li {
            display: flex;
            gap: 0.75rem;
            align-items: flex-start;
        }
        .next-steps .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--primary-light);
            margin-top: 0.4rem;
        }
        .next-steps p {
            color: var(--text-muted);
            font-size: 0.9rem;
        }
        .next-steps .step-title {
            color: var(--text-primary);
            font-weight: 600;
            margin-bottom: 0.15rem;
        }
        .partner-widget {
            text-align: left;
            background: linear-gradient(160deg, rgba(26,20,37,0.9), rgba(108,60,225,0.12));
        }
        .partner-widget h3 { font-size: 1.05rem; }
        .partner-widget p { color: var(--text-muted); font-size: 0.9rem; }
        .partner-widget a {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            margin-top: 1rem;
            padding: 0.6rem 1.4rem;
        }

        /* Auth prompt */
        .auth-prompt {
            text-align: center; padding: 4rem 1rem;
        }
        .auth-prompt h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.75rem; margin-bottom: 1rem; }
        .auth-prompt p { color: var(--text-muted); margin-bottom: 2rem; }
        .auth-prompt a {
            display: inline-block; padding: 0.75rem 2rem; background: var(--gradient-1);
            color: white; border-radius: 50px; text-decoration: none; font-weight: 600;
        }

        /* Loading */
        .loading { text-align: center; padding: 3rem; color: var(--text-muted); }
        .loading .spinner { font-size: 2rem; animation: pulse 1.5s ease-in-out infinite; }
        @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        @media (max-width: 640px) {
            .page-wrapper { padding: 1.5rem 1rem 3rem; }
            .hero-panel { padding: 1.5rem; }
            .hero-details h1 { font-size: 1.6rem; }
            .hero-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .actions-grid { grid-template-columns: 1fr; }
            .dual-panel { grid-template-columns: 1fr; }
            .vault-grid { grid-template-columns: 1fr; }
        }

        /* Vault (Progressive Reveal) */
        .vault-section { margin-bottom: 2rem; }
        .section-title { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.01em; }
        .section-action { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; }
        .section-action:hover { color: var(--text-primary); }
        .vault-subtitle { color: var(--text-muted); font-size: 0.9rem; margin: -0.75rem 0 1rem; }
        .vault-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
        .vault-card {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            height: 220px;
            background-size: cover;
            background-position: center;
            border: 1px solid var(--border-light);
        }
        .vault-overlay {
            position: absolute; inset: 0;
            backdrop-filter: blur(20px) brightness(0.7);
            -webkit-backdrop-filter: blur(20px) brightness(0.7);
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            text-align: center; padding: 1rem;
            background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.35));
        }
        .vault-badge {
            width: 48px; height: 48px; border-radius: 999px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 0.75rem;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.12);
        }
        .vault-badge--ready {
            background: var(--gradient-1);
            border-color: transparent;
            box-shadow: 0 8px 20px rgba(198, 168, 124, 0.35);
        }
        .vault-name { font-size: 1.05rem; color: var(--text-primary); font-weight: 600; }
        .vault-state { font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem; }

        /* Utility classes for dashboard markup cleanup */
        .link-reset { text-decoration: none; }
        .top-meta { color: var(--text-muted); font-size: 0.9rem; }
        .icon-inline { width: 18px; height: 18px; stroke-width: 1.5; vertical-align: middle; margin-right: 5px; }
        .icon-inline-lg { width: 20px; height: 20px; stroke-width: 1.5; vertical-align: middle; margin-right: 8px; }
        .icon-inline-sm { width: 16px; height: 16px; vertical-align: middle; stroke-width: 1.5; }
        .icon-btn { width: 18px; height: 18px; }
        .icon-xl-spin { width: 3rem; height: 3rem; animation: spin 1.5s linear infinite; color: var(--text-secondary); }
        .auth-prompt-emoji { font-size: 3rem; margin-bottom: 1rem; }
        .auth-prompt-subcta { margin-top: 1rem; font-size: 0.85rem; }
        .auth-prompt-subcta a { color: var(--text-secondary); text-decoration: none; }
        .loading-copy { margin-top: 0.75rem; }
        .is-hidden { display: none; }
        .vault-card--sarah { background-image:url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&q=80&w=900'); }
        .vault-card--james { background-image:url('https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&q=80&w=900'); }
        .vault-key-icon { width:20px;height:20px;color:#111; }
        .vault-lock-icon { width:20px;height:20px;color:#fff; }
        .partner-heart-icon { color: var(--accent); }
        .avatar-img { width:100%; height:100%; object-fit:cover; }
        .error-text { color: var(--error); }