* { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f4f0fe; color: #333; font-size: 14px; min-height: 100vh;
        }

        /* ===== Header ===== */
        .header {
            height: 56px; background: linear-gradient(135deg, #1a1135 0%, #2d1b69 50%, #3b1f8e 100%);
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 24px; position: sticky; top: 0; z-index: 100;
            box-shadow: 0 2px 12px rgba(26,17,53,0.3);
        }
        .header-left { display: flex; align-items: center; gap: 16px; }
        .header-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
        .header-logo svg { width: 28px; height: 28px; }
        .header-logo-text { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
        .header-logo-text span { background: linear-gradient(135deg, #a78bfa, #c084fc, #e879f9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .header-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.15); }
        .header-breadcrumb { font-size: 13px; color: rgba(255,255,255,0.55); font-weight: 500; }
        .header-breadcrumb .current { color: rgba(255,255,255,0.9); }
        .back-btn {
            display: flex; align-items: center; gap: 7px; padding: 7px 14px;
            background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
            border-radius: 8px; color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 600;
            cursor: pointer; text-decoration: none; transition: all 0.2s;
        }
        .back-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
        .back-btn svg { width: 14px; height: 14px; fill: currentColor; }

        /* ===== Page layout ===== */
        .page { max-width: 860px; margin: 0 auto; padding: 40px 24px 80px; }

        /* ===== Hero card ===== */
        .hero-card {
            border-radius: 24px; overflow: hidden; position: relative;
            background: linear-gradient(135deg, #1a1135 0%, #2d1b69 55%, #4c1d95 100%);
            box-shadow: 0 20px 60px rgba(44,27,105,0.35), 0 4px 16px rgba(0,0,0,0.12);
            margin-bottom: 28px;
        }

        /* Decorative blobs */
        .hero-card::before {
            content: '';
            position: absolute; top: -60px; right: -60px;
            width: 260px; height: 260px; border-radius: 50%;
            background: radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%);
            pointer-events: none;
        }
        .hero-card::after {
            content: '';
            position: absolute; bottom: -40px; left: 30px;
            width: 180px; height: 180px; border-radius: 50%;
            background: radial-gradient(circle, rgba(232,121,249,0.12) 0%, transparent 70%);
            pointer-events: none;
        }

        .hero-inner {
            position: relative; z-index: 1;
            display: flex; align-items: center; gap: 28px;
            padding: 36px 40px;
        }

        /* Avatar ring */
        .avatar-ring {
            flex-shrink: 0; position: relative;
            width: 88px; height: 88px;
        }
        .avatar-ring::before {
            content: '';
            position: absolute; inset: -3px;
            border-radius: 22px;
            background: linear-gradient(135deg, #a78bfa, #e879f9, #7c3aed);
            z-index: 0;
        }
        .avatar-inner {
            position: relative; z-index: 1;
            width: 100%; height: 100%; border-radius: 20px;
            background: linear-gradient(135deg, #2d1b69, #4c1d95);
            border: 2px solid transparent;
            display: flex; align-items: center; justify-content: center;
        }
        .avatar-initial {
            font-size: 36px; font-weight: 800; color: #fff;
            background: linear-gradient(135deg, #a78bfa, #e879f9);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            line-height: 1;
        }

        .hero-info { flex: 1; }
        .hero-name { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -0.5px; margin-bottom: 6px; }
        .hero-email { font-size: 14px; color: rgba(255,255,255,0.55); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
        .hero-email svg { width: 14px; height: 14px; fill: rgba(255,255,255,0.4); flex-shrink: 0; }
        .role-badge {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
            background: rgba(167,139,250,0.18); color: #c4b5fd;
            border: 1px solid rgba(167,139,250,0.25); letter-spacing: 0.3px;
        }
        .role-badge svg { width: 13px; height: 13px; fill: currentColor; }

        /* Stats row */
        .hero-stats {
            display: flex; gap: 1px; background: rgba(255,255,255,0.06);
            border-top: 1px solid rgba(255,255,255,0.08);
        }
        .stat-item {
            flex: 1; padding: 18px 24px; text-align: center;
            border-right: 1px solid rgba(255,255,255,0.06);
        }
        .stat-item:last-child { border-right: none; }
        .stat-value { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 4px; }
        .stat-label { font-size: 11px; color: rgba(255,255,255,0.4); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }

        /* ===== Info cards ===== */
        .cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        @media (max-width: 600px) { .cards-grid { grid-template-columns: 1fr; } }

        .info-card {
            background: #fff; border-radius: 16px; padding: 22px 24px;
            box-shadow: 0 2px 8px rgba(108,60,224,0.06); border: 1px solid #ede9fe;
        }
        .info-card-full { grid-column: 1 / -1; }
        .card-header {
            display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
            padding-bottom: 14px; border-bottom: 1px solid #f4f0fe;
        }
        .card-icon {
            width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
            background: linear-gradient(135deg, #7c3aed, #a855f7);
            display: flex; align-items: center; justify-content: center;
        }
        .card-icon svg { width: 16px; height: 16px; fill: #fff; }
        .card-title { font-size: 13px; font-weight: 700; color: #2d1b69; }

        .field-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
        .field-row:last-child { margin-bottom: 0; }
        .field-label { font-size: 11px; font-weight: 700; color: #8b7aad; text-transform: uppercase; letter-spacing: 0.6px; }
        .field-value { font-size: 14px; color: #2d1b69; font-weight: 500; }
        .field-value.mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; }

        /* ===== Permission tags ===== */
        .perm-list { display: flex; flex-wrap: wrap; gap: 7px; }
        .perm-tag {
            padding: 4px 11px; border-radius: 6px; font-size: 11px; font-weight: 600;
            background: #f4f0fe; color: #6d28d9; border: 1px solid #ede9fe;
        }

        /* ===== Security card ===== */
        .security-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 0; border-bottom: 1px solid #f9f7ff;
        }
        .security-row:last-child { border-bottom: none; padding-bottom: 0; }
        .security-label { font-size: 13px; color: #374151; display: flex; align-items: center; gap: 8px; }
        .security-label svg { width: 15px; height: 15px; fill: #8b7aad; }
        .security-status { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
        .security-status.ok { color: #059669; }
        .security-status.ok::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #34d399; display: inline-block; }
        .security-status.warn { color: #d97706; }
        .security-status.warn::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; display: inline-block; }